Client SDK
The DYPAI Client SDK is the official library to connect your frontend application with your DYPAI backend. It provides a simple, typed, and secure way to handle authentication, data, and file upload/download flows through your endpoints.
Installation
Install the package using your favorite package manager:
npm install @dypai-ai/client-sdk
Quick Setup
How to connect your project to the SDK
Initialize the client with your Project URL (and optionally your API Key for server-to-server endpoints):
import { createClient } from '@dypai-ai/client-sdk';
// Most common: authenticated users (no api key needed)
export const dypai = createClient('https://your-project.dypai.app');
If your project uses API Key authenticated endpoints (accessible via auth_mode: api_key), pass the API Key as the second argument:
// For API Key endpoints: include your project key
export const dypai = createClient(
'https://your-project.dypai.app',
'your-api-key'
);
Core Modules
The SDK is organized into a few core surfaces to handle every aspect of your app:
🔐 Authentication (dypai.auth)
Manage users without the hassle. The SDK handles session persistence, automatic token refresh, email verification callbacks, and cross-tab sync for you.
- Email/Password registration and login with email confirmation.
- Passwordless login via Email OTP or Phone (SMS) OTP.
- OAuth providers (Google, GitHub, and more).
- Password recovery and user profile management.
📡 Data & API (dypai.api)
Interact with your database and custom workflows.
- Call REST endpoints built with the API Builder.
- Fetch, create, update, and delete records.
- Built-in filtering and pagination.
📂 Files & Uploads (dypai.api.upload / dypai.api.download)
File access is handled through your DYPAI endpoints.
- Upload from the browser with Smart Upload.
- Download private files through validated endpoints.
- Keep permission checks in backend workflows instead of direct bucket access.
👥 User Management (dypai.users)
Admin operations for managing your project's users.
- List, create, update, and delete users.
- Requires an admin token — not for client-side use.
React Hooks
For React apps (Next.js, Vite, etc.), the SDK includes hooks that handle loading states, errors, and auth automatically.
# Hooks are included — import from the /react subpath
import { DypaiProvider, useAuth, useEndpoint, useAction, useUpload, ProtectedRoute } from '@dypai-ai/client-sdk/react';
Setup
Wrap your app with DypaiProvider:
import { DypaiProvider } from '@dypai-ai/client-sdk/react';
import { dypai } from './lib/dypai';
function App() {
return (
<DypaiProvider client={dypai}>
<Router />
</DypaiProvider>
);
}
Available Hooks
| Hook | Purpose | Example |
|---|---|---|
useAuth() | Auth state + actions | const { user, signIn, signOut, isAuthenticated } = useAuth() |
useEndpoint(name) | Fetch data (GET) | const { data, isLoading, refetch } = useEndpoint('list_products') |
useAction(name) | Mutations (POST/PUT/DELETE) | const { mutate, isLoading } = useAction('create_order') |
useUpload(name) | File upload with progress | const { upload, progress, isUploading } = useUpload('storage_files') |
Components
| Component | Purpose |
|---|---|
DypaiProvider | Context provider — wraps your app |
ProtectedRoute | Guards routes by auth state and roles |
<ProtectedRoute redirectTo="/login" roles={['admin']}>
<AdminPanel />
</ProtectedRoute>
TypeScript Support
The SDK is built with TypeScript and provides full autocompletion for your API responses.
interface MyApi extends EndpointMap {
'get_products': { response: Product[]; params: { limit?: number } };
'create_product': { body: CreateProductInput; response: Product };
}
const dypai = createClient<{}, MyApi>(...);
// Full autocompletion for endpoint names, params, and responses!
const { data } = await dypai.api.get('get_products', { params: { limit: 10 } });