SDK Chat IA Nuevo

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

useChat entiende las respuestas Vercel AI SDK UI Message Stream de HeroMate, incluyendo deltas de texto, tool calls, resultados de tools y errores durante el stream. También mantiene fallback para engines antiguos que todavía emiten texto plano.

De dónde salen los endpoints de agente

Un "endpoint de agente IA" es simplemente un endpoint que ejecuta el nodo de workflow agent. Lo creas en el API Builder. El modelo que hay detrás corre como HeroMate Managed (sin API key, facturado como Créditos IA, limitado por plan en la página de AI Models de la organización) o vía credenciales BYOK. Consulta Agentes IA para el nodo agent y IA Gestionada para el modelo de facturación.

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>
))}

Reanudar una conversación

Pasa un id en las opciones para continuar un chat existente (carga su historial):

JavaScript

const { messages, sendMessage } = useChat('mi_agente', { id: 'conv-123' })

La opción es id (no sessionId). A nivel HTTP el campo del body de la petición es session_id.

Historial de chats

useChatList recibe un objeto de opciones y devuelve helpers para gestionar conversaciones previas:

JavaScript

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

function BarraLateral() {
  const { chats, isLoading, deleteChat, renameChat, refetch } = useChatList({
    endpointId: '<endpoint_id>',
    limit: 20,
  })

  return (
    <ul>
      {chats?.map(chat => (
        <li key={chat.id}>
          {chat.title} ({chat.messageCount} mensajes)
          <button onClick={() => renameChat(chat.id, 'Renombrada')}>Renombrar</button>
          <button onClick={() => deleteChat(chat.id)}>Eliminar</button>
        </li>
      ))}
    </ul>
  )
}

Parameter	Type	Description
`useChatList({ endpointId, limit, enabled })`	`Hook`	Objeto de opciones — endpointId acota la lista, limit limita resultados, enabled activa/desactiva la carga
`chats`	`Chat[]`	Conversaciones previas del endpoint
`deleteChat(chatId)`	`async`	Eliminar una conversación (la forma principal de borrar un chat)
`renameChat(chatId, title)`	`async`	Renombrar una conversación
`refetch()`	`async`	Recargar la lista de conversaciones
`isLoading / error`	`state`	Estado de carga y error

Salida estructurada

Si el endpoint del agente define un output_schema, el resultado estructurado llega en el campo object del mensaje (coincidiendo con tu esquema), no en content.

SDK Chat IA Nuevo

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

De dónde salen los endpoints de agente

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>
))}

Reanudar una conversación

Pasa un id en las opciones para continuar un chat existente (carga su historial):

JavaScript

const { messages, sendMessage } = useChat('mi_agente', { id: 'conv-123' })

La opción es id (no sessionId). A nivel HTTP el campo del body de la petición es session_id.

Historial de chats

useChatList recibe un objeto de opciones y devuelve helpers para gestionar conversaciones previas:

JavaScript

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

function BarraLateral() {
  const { chats, isLoading, deleteChat, renameChat, refetch } = useChatList({
    endpointId: '<endpoint_id>',
    limit: 20,
  })

  return (
    <ul>
      {chats?.map(chat => (
        <li key={chat.id}>
          {chat.title} ({chat.messageCount} mensajes)
          <button onClick={() => renameChat(chat.id, 'Renombrada')}>Renombrar</button>
          <button onClick={() => deleteChat(chat.id)}>Eliminar</button>
        </li>
      ))}
    </ul>
  )
}

Parameter	Type	Description
`useChatList({ endpointId, limit, enabled })`	`Hook`	Objeto de opciones — endpointId acota la lista, limit limita resultados, enabled activa/desactiva la carga
`chats`	`Chat[]`	Conversaciones previas del endpoint
`deleteChat(chatId)`	`async`	Eliminar una conversación (la forma principal de borrar un chat)
`renameChat(chatId, title)`	`async`	Renombrar una conversación
`refetch()`	`async`	Recargar la lista de conversaciones
`isLoading / error`	`state`	Estado de carga y error

Salida estructurada

Si el endpoint del agente define un output_schema, el resultado estructurado llega en el campo object del mensaje (coincidiendo con tu esquema), no en content.