React SDK Guide

The @aerostack/react package provides a set of React Hooks and a Provider to easily integrate Aerostack services into your React applications.

Installation

npm install @aerostack/react

Setup

Wrap your application with the AerostackProvider to provide the SDK context to your components. Use your Project ID found in the Aerostack dashboard.

src/main.tsx

import { AerostackProvider } from '@aerostack/react';

const config = {
  projectId: 'proj_abc123',
  baseUrl: 'https://api.aerostack.dev/v1'
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <AerostackProvider projectId={config.projectId} baseUrl={config.baseUrl}>
    <App />
  </AerostackProvider>
);

Hooks

useAuth

Manage user sessions, sign in, and registration.

import { useAuth } from '@aerostack/react';

function Profile() {
  const { user, signIn, signOut, loading } = useAuth();

  if (loading) return <div>Loading...</div>;

  return user ? (
    <div>
      <p>Welcome, {user.name}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  ) : (
    <button onClick={() => signIn({ email: 'user@example.com', password: '...' })}>
      Sign In
    </button>
  );
}

useAerostack (Custom Module Calls)

Invoke your server-side Logic Modules from the frontend. This is the recommended way to interact with your database and AI features from a React app.

import { useAerostack } from '@aerostack/react';

function SearchComponent() {
  const { sdk } = useAerostack();
  const [results, setResults] = useState([]);

  const handleSearch = async (query: string) => {
    // Invoke a Logic Lab module named 'search-products'
    const data = await sdk.call('search-products', { query });
    setResults(data);
  };

  return (
    // ... search UI
  );
}

Caution

Architectural Tip: For security and performance, frontend applications should use sdk.call() to trigger server-side Logic Modules. Direct database or cache access from the frontend is restricted to ensure your project’s data remains secure.

Security

On the client side, never use your Secret API Keys. The React SDK is designed to work with public endpoints that are secured by Project IDs and User Sessions.