SDK Chat IA Nuevo

El hook useChat conecta tu frontend a los endpoints de agentes IA de DYPAI con streaming, visibilidad de tool calls, historial y gestión de sesiones.

Inicio rápido

JavaScript

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

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

  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}>Enviar</button>
    </div>
  )
}

Opciones de useChat

Parameter	Type	Description
`endpoint`required	`string`	Nombre del endpoint del agente IA
`id`	`string`	ID de sesión. Se genera automáticamente si no se proporciona
`loadHistory`	`boolean`= true	Cargar mensajes previos al montar
`body`	`object`	Campos extra enviados con cada mensaje
`onFinish`	`function`	Se ejecuta cuando el asistente termina de responder
`onToolCall`	`function`	Se ejecuta cuando se recibe un tool call

Retorno de useChat

Parameter	Type	Description
`messages`	`ChatMessage[]`	Todos los mensajes de la conversación
`status`	`string`	Estado actual: ready, submitted, streaming, error
`sendMessage(text?)`	`async`	Enviar mensaje. Usa el valor de input si no se pasa texto
`stop()`	`function`	Detener la respuesta en streaming
`isLoading`	`boolean`	Si el asistente está respondiendo
`chatId`	`string`	ID de la sesión
`newChat()`	`function`	Limpiar mensajes y empezar nueva sesión

Tool calls

Cuando el agente llama herramientas, puedes verlas en parts:

JavaScript

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

Historial de chats

JavaScript

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

function BarraLateral() {
  const { chats } = useChatList()

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

Inicio rápido

JavaScript

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

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

  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}>Enviar</button>
    </div>
  )
}

Opciones de useChat

Parameter	Type	Description
`endpoint`required	`string`	Nombre del endpoint del agente IA
`id`	`string`	ID de sesión. Se genera automáticamente si no se proporciona
`loadHistory`	`boolean`= true	Cargar mensajes previos al montar
`body`	`object`	Campos extra enviados con cada mensaje
`onFinish`	`function`	Se ejecuta cuando el asistente termina de responder
`onToolCall`	`function`	Se ejecuta cuando se recibe un tool call

Retorno de useChat

Parameter	Type	Description
`messages`	`ChatMessage[]`	Todos los mensajes de la conversación
`status`	`string`	Estado actual: ready, submitted, streaming, error
`sendMessage(text?)`	`async`	Enviar mensaje. Usa el valor de input si no se pasa texto
`stop()`	`function`	Detener la respuesta en streaming
`isLoading`	`boolean`	Si el asistente está respondiendo
`chatId`	`string`	ID de la sesión
`newChat()`	`function`	Limpiar mensajes y empezar nueva sesión

Tool calls

Cuando el agente llama herramientas, puedes verlas en parts:

JavaScript

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

import { useChatList } from '@dypai-ai/client-sdk/react' function BarraLateral() { const { chats } = useChatList() return ( <ul> {chats?.map(chat => ( <li key={chat.id}>{chat.title} ({chat.messageCount} mensajes)</li> ))} </ul> ) }