SDK AI Chat New

The useChat hook connects your frontend to DYPAI AI agent endpoints with streaming, tool call visibility, chat history, and session management.

Quick Start

JavaScript

import { useChat } from '@dypai-ai/client-sdk/react'

function ChatBot() {
  const { messages, sendMessage, input, setInput, isLoading, status } = useChat('my_agent_endpoint')

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}

      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={() => sendMessage()} disabled={isLoading}>
        Send
      </button>
    </div>
  )
}

useChat Options

Parameter	Type	Description
`endpoint`required	`string`	Name of your AI agent endpoint (created in API Builder)
`id`	`string`	Chat session ID. Auto-generated if not provided
`initialMessages`	`ChatMessage[]`	Messages to show before loading history
`loadHistory`	`boolean`= true	Load previous messages from server on mount
`body`	`object`	Extra fields sent with every message (e.g. session_id)
`onFinish`	`function`	Called when the assistant finishes responding
`onError`	`function`	Called on error
`onToolCall`	`function`	Called when a tool call is received

useChat Return

Parameter	Type	Description
`messages`	`ChatMessage[]`	All messages in the conversation
`status`	`string`	Current status: ready, submitted, streaming, error
`input`	`string`	Current input value (controlled)
`setInput`	`function`	Set the input value
`sendMessage(text?)`	`async`	Send a message. Uses input value if no text provided
`stop()`	`function`	Stop the current streaming response
`isLoading`	`boolean`	Whether the assistant is currently responding
`error`	`Error \| null`	Last error
`chatId`	`string`	The session ID
`newChat()`	`function`	Clear messages and start a new session

Message Format

Each message has:

JavaScript

interface ChatMessage {
  id: string
  role: 'user' | 'assistant' | 'system' | 'tool'
  content: string
  parts?: MessagePart[]  // Rich content: text, tool-calls, tool-results, images
  createdAt?: Date
}

Tool calls

When the agent calls tools (your workflow endpoints), you can see them in parts:

JavaScript

{messages.map(msg => (
  <div key={msg.id}>
    {msg.parts?.map((part, i) => {
      if (part.type === 'tool-call') {
        return <div key={i}>🔧 Calling {part.toolName}...</div>
      }
      if (part.type === 'tool-result') {
        return <div key={i}>✅ {part.toolName} done</div>
      }
      if (part.type === 'text') {
        return <span key={i}>{part.text}</span>
      }
    })}
  </div>
))}

Chat History

JavaScript

import { useChatList } from '@dypai-ai/client-sdk/react'

function ChatSidebar() {
  const { chats, isLoading } = useChatList()

  return (
    <ul>
      {chats?.map(chat => (
        <li key={chat.id}>
          {chat.title} ({chat.messageCount} messages)
        </li>
      ))}
    </ul>
  )
}

Helper Functions

JavaScript

import { generateChatId, getMessageText, getToolCalls } from '@dypai-ai/client-sdk/react'

// Generate a new chat ID
const id = generateChatId()

// Extract plain text from a message (ignores tool calls)
const text = getMessageText(message)

// Get tool calls from a message
const tools = getToolCalls(message) // [{ toolName: 'list_orders', args: {...} }]

SDK AI Chat New

The useChat hook connects your frontend to DYPAI AI agent endpoints with streaming, tool call visibility, chat history, and session management.

Quick Start

JavaScript

import { useChat } from '@dypai-ai/client-sdk/react'

function ChatBot() {
  const { messages, sendMessage, input, setInput, isLoading, status } = useChat('my_agent_endpoint')

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}

      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={() => sendMessage()} disabled={isLoading}>
        Send
      </button>
    </div>
  )
}

useChat Options

Parameter	Type	Description
`endpoint`required	`string`	Name of your AI agent endpoint (created in API Builder)
`id`	`string`	Chat session ID. Auto-generated if not provided
`initialMessages`	`ChatMessage[]`	Messages to show before loading history
`loadHistory`	`boolean`= true	Load previous messages from server on mount
`body`	`object`	Extra fields sent with every message (e.g. session_id)
`onFinish`	`function`	Called when the assistant finishes responding
`onError`	`function`	Called on error
`onToolCall`	`function`	Called when a tool call is received

useChat Return

Parameter	Type	Description
`messages`	`ChatMessage[]`	All messages in the conversation
`status`	`string`	Current status: ready, submitted, streaming, error
`input`	`string`	Current input value (controlled)
`setInput`	`function`	Set the input value
`sendMessage(text?)`	`async`	Send a message. Uses input value if no text provided
`stop()`	`function`	Stop the current streaming response
`isLoading`	`boolean`	Whether the assistant is currently responding
`error`	`Error \| null`	Last error
`chatId`	`string`	The session ID
`newChat()`	`function`	Clear messages and start a new session

Message Format

Each message has:

JavaScript

interface ChatMessage {
  id: string
  role: 'user' | 'assistant' | 'system' | 'tool'
  content: string
  parts?: MessagePart[]  // Rich content: text, tool-calls, tool-results, images
  createdAt?: Date
}

Tool calls

When the agent calls tools (your workflow endpoints), you can see them in parts:

JavaScript

{messages.map(msg => (
  <div key={msg.id}>
    {msg.parts?.map((part, i) => {
      if (part.type === 'tool-call') {
        return <div key={i}>🔧 Calling {part.toolName}...</div>
      }
      if (part.type === 'tool-result') {
        return <div key={i}>✅ {part.toolName} done</div>
      }
      if (part.type === 'text') {
        return <span key={i}>{part.text}</span>
      }
    })}
  </div>
))}

Chat History

JavaScript

import { useChatList } from '@dypai-ai/client-sdk/react'

function ChatSidebar() {
  const { chats, isLoading } = useChatList()

  return (
    <ul>
      {chats?.map(chat => (
        <li key={chat.id}>
          {chat.title} ({chat.messageCount} messages)
        </li>
      ))}
    </ul>
  )
}

Helper Functions

JavaScript

import { generateChatId, getMessageText, getToolCalls } from '@dypai-ai/client-sdk/react'

// Generate a new chat ID
const id = generateChatId()

// Extract plain text from a message (ignores tool calls)
const text = getMessageText(message)

// Get tool calls from a message
const tools = getToolCalls(message) // [{ toolName: 'list_orders', args: {...} }]