Client SDK

The official SDK to connect your frontend to your DYPAI backend. Auth, data, realtime, AI chat, file uploads — all typed, all in one package.

Installation

JavaScript

npm install @dypai-ai/client-sdk

Setup

JavaScript

// lib/dypai.ts
import { createClient } from '@dypai-ai/client-sdk'

export const dypai = createClient(
  import.meta.env.VITE_DYPAI_URL,  // https://YOUR_PROJECT_ID.dypai.dev
  {
    redirects: {
      passwordRecovery: '/set-password',
      signIn: '/dashboard',
    },
  }
)

For React apps, wrap with DypaiProvider:

JavaScript

import { DypaiProvider } from '@dypai-ai/client-sdk/react'
import { dypai } from './lib/dypai'

function App() {
  return (
    <DypaiProvider client={dypai}>
      <Router />
    </DypaiProvider>
  )
}

Modules

Authentication

Data & API

Call endpoints with get, post, put, delete.

Realtime

Database changes, broadcast, presence — live updates.

AI Chat

Stream AI agent responses with tool calls.

Storage

Upload and download files through endpoints.

User Management

Admin operations for managing users.

React Hooks

JavaScript

import {
  DypaiProvider, useAuth, useEndpoint, useAction,
  useUpload, useChat, useRealtime, useChannel,
  useChannelMessages, useChannels, useChatList,
  ProtectedRoute
} from '@dypai-ai/client-sdk/react'

Core Hooks

Parameter	Type	Description
`useAuth()`	`Hook`	Auth state + actions: user, signIn, signUp, signOut, isAuthenticated, isLoading
`useEndpoint(name)`	`Hook`	Fetch data from GET endpoints. Returns data, isLoading, error, refetch
`useAction(name)`	`Hook`	Call POST/PUT/DELETE endpoints. Returns mutate, isLoading, error
`useUpload(name)`	`Hook`	Upload files with progress tracking. Returns upload, progress, isUploading

AI Agent Hooks New

Parameter	Type	Description
`useChat(endpoint)`	`Hook`	Stream AI agent responses. Returns messages, sendMessage, isStreaming, tool calls
`useChatList()`	`Hook`	List previous conversations with the AI agent

Realtime Hooks New

Parameter	Type	Description
`useRealtime(table, filter?)`	`Hook`	Subscribe to database changes (INSERT/UPDATE/DELETE) in real time
`useChannel(name)`	`Hook`	Join a broadcast channel for client-to-client messaging
`useChannelMessages(name)`	`Hook`	Get messages from a broadcast channel
`useChannels()`	`Hook`	List available channels

Components

Parameter	Type	Description
`DypaiProvider`	`Component`	Context provider — wraps your app. Required for all hooks
`ProtectedRoute`	`Component`	Guards routes by auth state and roles. Redirects unauthenticated users

Quick Examples

Authentication

JavaScript

const { signIn, isAuthenticated, user } = useAuth()

const handleLogin = async (email, password) => {
  const { error } = await signIn(email, password)
  if (error) setError(error.message)
}

Data fetching

JavaScript

const { data: products, isLoading } = useEndpoint('list_products')
const { mutate: createProduct } = useAction('create_product')

await createProduct({ name: 'Widget', price: 9.99 })

AI Chat (streaming)

JavaScript

const { messages, sendMessage, isStreaming } = useChat('my_agent_endpoint')

await sendMessage('How many orders do I have this week?')
// Messages stream in real-time with tool call visibility

Realtime updates

JavaScript

// Subscribe to all changes on the "orders" table
const { data: orders } = useRealtime('orders')

// Broadcast to other clients
const channel = useChannel('room-1')
channel.send('typing', { user: 'john' })

Protected routes

JavaScript

<ProtectedRoute redirectTo="/login" roles={['admin']}>
  <AdminPanel />
</ProtectedRoute>

API Methods

Every method returns { data, error } — never throws.

Parameter	Type	Description
`dypai.api.get(name, options?)`	`Promise`	Call a GET endpoint
`dypai.api.post(name, body, options?)`	`Promise`	Call a POST endpoint
`dypai.api.put(name, body, options?)`	`Promise`	Call a PUT endpoint
`dypai.api.delete(name, options?)`	`Promise`	Call a DELETE endpoint
`dypai.api.upload(name, file, options?)`	`Promise`	Upload a file through an endpoint
`dypai.api.stream(name, body)`	`AsyncIterator`	Stream response from an AI agent endpoint

Realtime Module

JavaScript

// Subscribe to database changes
const channel = dypai.realtime.channel('my-channel')

channel
  .on('postgres_changes', { event: '*', table: 'orders' }, (payload) => {
    console.log('Change:', payload)
  })
  .on('broadcast', { event: 'typing' }, (payload) => {
    console.log('Someone is typing:', payload)
  })
  .on('presence', { event: 'sync' }, () => {
    console.log('Online users:', channel.presenceState())
  })
  .subscribe()

Parameter	Type	Description
`dypai.realtime.channel(name, config?)`	`Channel`	Create or join a realtime channel
`channel.on(type, filter, callback)`	`Channel`	Subscribe to events: postgres_changes, broadcast, presence
`channel.subscribe()`	`void`	Start receiving events
`channel.unsubscribe()`	`void`	Stop receiving events
`channel.send(event, payload)`	`void`	Broadcast a message to all subscribers
`channel.track(state)`	`void`	Share presence state (who's online)
`channel.presenceState()`	`object`	Get current presence state of all users

TypeScript

Full autocompletion for endpoint names, params, and responses:

JavaScript

interface MyApi extends EndpointMap {
  'get_products': { response: Product[]; params: { limit?: number } }
  'create_product': { body: CreateProductInput; response: Product }
}

const dypai = createClient<{}, MyApi>(url)
const { data } = await dypai.api.get('get_products', { params: { limit: 10 } })
// data is Product[] with full autocomplete

Client SDK

The official SDK to connect your frontend to your DYPAI backend. Auth, data, realtime, AI chat, file uploads — all typed, all in one package.

Installation

JavaScript

npm install @dypai-ai/client-sdk

Setup

JavaScript

// lib/dypai.ts
import { createClient } from '@dypai-ai/client-sdk'

export const dypai = createClient(
  import.meta.env.VITE_DYPAI_URL,  // https://YOUR_PROJECT_ID.dypai.dev
  {
    redirects: {
      passwordRecovery: '/set-password',
      signIn: '/dashboard',
    },
  }
)

For React apps, wrap with DypaiProvider:

JavaScript

import { DypaiProvider } from '@dypai-ai/client-sdk/react'
import { dypai } from './lib/dypai'

function App() {
  return (
    <DypaiProvider client={dypai}>
      <Router />
    </DypaiProvider>
  )
}

Modules

Authentication

Data & API

Call endpoints with get, post, put, delete.

Realtime

Database changes, broadcast, presence — live updates.

AI Chat

Stream AI agent responses with tool calls.

Storage

Upload and download files through endpoints.

User Management

Admin operations for managing users.

React Hooks

JavaScript

import {
  DypaiProvider, useAuth, useEndpoint, useAction,
  useUpload, useChat, useRealtime, useChannel,
  useChannelMessages, useChannels, useChatList,
  ProtectedRoute
} from '@dypai-ai/client-sdk/react'

Core Hooks

Parameter	Type	Description
`useAuth()`	`Hook`	Auth state + actions: user, signIn, signUp, signOut, isAuthenticated, isLoading
`useEndpoint(name)`	`Hook`	Fetch data from GET endpoints. Returns data, isLoading, error, refetch
`useAction(name)`	`Hook`	Call POST/PUT/DELETE endpoints. Returns mutate, isLoading, error
`useUpload(name)`	`Hook`	Upload files with progress tracking. Returns upload, progress, isUploading

AI Agent Hooks New

Parameter	Type	Description
`useChat(endpoint)`	`Hook`	Stream AI agent responses. Returns messages, sendMessage, isStreaming, tool calls
`useChatList()`	`Hook`	List previous conversations with the AI agent

Realtime Hooks New

Parameter	Type	Description
`useRealtime(table, filter?)`	`Hook`	Subscribe to database changes (INSERT/UPDATE/DELETE) in real time
`useChannel(name)`	`Hook`	Join a broadcast channel for client-to-client messaging
`useChannelMessages(name)`	`Hook`	Get messages from a broadcast channel
`useChannels()`	`Hook`	List available channels

Components

Parameter	Type	Description
`DypaiProvider`	`Component`	Context provider — wraps your app. Required for all hooks
`ProtectedRoute`	`Component`	Guards routes by auth state and roles. Redirects unauthenticated users

Quick Examples

Authentication

JavaScript

const { signIn, isAuthenticated, user } = useAuth()

const handleLogin = async (email, password) => {
  const { error } = await signIn(email, password)
  if (error) setError(error.message)
}

Data fetching

JavaScript

const { data: products, isLoading } = useEndpoint('list_products')
const { mutate: createProduct } = useAction('create_product')

await createProduct({ name: 'Widget', price: 9.99 })

AI Chat (streaming)

JavaScript

const { messages, sendMessage, isStreaming } = useChat('my_agent_endpoint')

await sendMessage('How many orders do I have this week?')
// Messages stream in real-time with tool call visibility

Realtime updates

JavaScript

// Subscribe to all changes on the "orders" table
const { data: orders } = useRealtime('orders')

// Broadcast to other clients
const channel = useChannel('room-1')
channel.send('typing', { user: 'john' })

Protected routes

JavaScript

<ProtectedRoute redirectTo="/login" roles={['admin']}>
  <AdminPanel />
</ProtectedRoute>

API Methods

Every method returns { data, error } — never throws.

Parameter	Type	Description
`dypai.api.get(name, options?)`	`Promise`	Call a GET endpoint
`dypai.api.post(name, body, options?)`	`Promise`	Call a POST endpoint
`dypai.api.put(name, body, options?)`	`Promise`	Call a PUT endpoint
`dypai.api.delete(name, options?)`	`Promise`	Call a DELETE endpoint
`dypai.api.upload(name, file, options?)`	`Promise`	Upload a file through an endpoint
`dypai.api.stream(name, body)`	`AsyncIterator`	Stream response from an AI agent endpoint

Realtime Module

JavaScript

// Subscribe to database changes
const channel = dypai.realtime.channel('my-channel')

channel
  .on('postgres_changes', { event: '*', table: 'orders' }, (payload) => {
    console.log('Change:', payload)
  })
  .on('broadcast', { event: 'typing' }, (payload) => {
    console.log('Someone is typing:', payload)
  })
  .on('presence', { event: 'sync' }, () => {
    console.log('Online users:', channel.presenceState())
  })
  .subscribe()

Parameter	Type	Description
`dypai.realtime.channel(name, config?)`	`Channel`	Create or join a realtime channel
`channel.on(type, filter, callback)`	`Channel`	Subscribe to events: postgres_changes, broadcast, presence
`channel.subscribe()`	`void`	Start receiving events
`channel.unsubscribe()`	`void`	Stop receiving events
`channel.send(event, payload)`	`void`	Broadcast a message to all subscribers
`channel.track(state)`	`void`	Share presence state (who's online)
`channel.presenceState()`	`object`	Get current presence state of all users

TypeScript

Full autocompletion for endpoint names, params, and responses:

JavaScript

interface MyApi extends EndpointMap {
  'get_products': { response: Product[]; params: { limit?: number } }
  'create_product': { body: CreateProductInput; response: Product }
}

const dypai = createClient<{}, MyApi>(url)
const { data } = await dypai.api.get('get_products', { params: { limit: 10 } })
// data is Product[] with full autocomplete