Client SDK

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

The current package is @dypai-ai/client-sdk v1.12.0, with React hooks under @dypai-ai/client-sdk/react.

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.app
  {
    redirects: {
      passwordRecovery: '/set-password',
      signIn: '/dashboard',
    },
  }
)

Using Next.js instead of Vite?

Read the base URL from a public env var: process.env.NEXT_PUBLIC_DYPAI_URL. The value is always your project origin, e.g. https://YOUR_PROJECT_ID.dypai.app.

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.

Realtime channels and AI chat work entirely through the SDK and the engine — there's no separate dashboard config. Channels are created on demand (via the hooks or the /api/v0/channels REST API) and are user-scoped, so they need an authenticated session.

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, isLoading } = 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 HeroMate backend. Auth, data, realtime, AI chat, file uploads — all typed, all in one package.

The current package is @dypai-ai/client-sdk v1.12.0, with React hooks under @dypai-ai/client-sdk/react.

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.app
  {
    redirects: {
      passwordRecovery: '/set-password',
      signIn: '/dashboard',
    },
  }
)

Using Next.js instead of Vite?

Read the base URL from a public env var: process.env.NEXT_PUBLIC_DYPAI_URL. The value is always your project origin, e.g. https://YOUR_PROJECT_ID.dypai.app.

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, options?)`	`Hook`	Stream AI agent responses. Returns messages, sendMessage, isLoading, status, tool calls
`useChatList(options?)`	`Hook`	List previous conversations. Returns chats, deleteChat, renameChat, refetch

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

Realtime & Chat are SDK/engine-level

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, isLoading } = 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