Streaming

Esperar 20 segundos a que un agente termine antes de ver nada es una mala experiencia. Los agentes de DYPAI hacen streaming de su output — texto, tool calls y resultados de tools — en tiempo real, para que tu UI pueda renderizar respuestas parciales según se generan.

Con el SDK de React (recomendado)

El hook useChat de @dypai-ai/client-sdk/react envuelve toda la mecánica de streaming por ti:

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

function ChatBox() {
  const {
    messages,      // historial completo de mensajes
    sendMessage,   // enviar un mensaje nuevo
    isStreaming,   // true mientras el agente responde
    stop,          // abortar el stream actual
    error,         // cualquier error ocurrido
  } = useChat('my_agent_endpoint')

  return (
    <div>
      <div className="messages">
        {messages.map((m, i) => (
          <div key={i} className={`msg msg-${m.role}`}>
            {m.content}
          </div>
        ))}
        {isStreaming && <div className="typing">...</div>}
      </div>

      <ChatInput
        onSubmit={text => sendMessage(text)}
        disabled={isStreaming}
      />

      {isStreaming && (
        <button onClick={stop}>Parar</button>
      )}

      {error && <div className="error">{error.message}</div>}
    </div>
  )
}

Esa es una UI de chat completa en unas 20 líneas. messages se actualiza según llegan los tokens, disparando re-renders de React para que los usuarios vean el texto aparecer progresivamente.

Session IDs y memoria

Si tu agente usa memoria, pasa un sessionId para que el hook cargue y persista la conversación correcta:

const { messages, sendMessage } = useChat('my_agent_endpoint', {
  sessionId: 'conv-123',
})

Guarda sessionId en estado (para una sola conversación) o en tu base de datos (para un sidebar con múltiples conversaciones). El hook useChatList ayuda con esto último — ver Memoria.

Qué contiene un mensaje

Cada mensaje en messages tiene:

• role — "user", "assistant" o "tool"
• content — el texto que se le muestra al usuario
• parts — los parts crudos del Vercel AI SDK (text, tool-call, tool-result). Útil si quieres renderizar tool calls de forma especial.

Para una UI de chat típica, usa content. Para una UI más rica que muestre "El agente está buscando productos…", inspecciona parts y renderiza componentes personalizados por tipo de part.

Mostrar tool calls en la UI

Si quieres que los usuarios vean qué está haciendo el agente (p. ej. "Buscando pedidos…", "Consultando el usuario…"), inspecciona parts:

messages.map((m, i) => (
  <div key={i}>
    {m.parts?.map((p, j) => {
      if (p.type === 'text') return <span key={j}>{p.text}</span>
      if (p.type === 'tool-call')
        return <ToolBadge key={j} name={p.toolName} args={p.args} />
      if (p.type === 'tool-result')
        return <ToolResult key={j} result={p.result} />
    })}
  </div>
))

Este patrón te da indicadores de "pensando" estilo ChatGPT sin coste.

Parar mid-stream

stop() cancela la generación actual. La respuesta parcial se conserva en messages (truncada), y la memoria guarda lo que se generó hasta ese punto.

Útil para:

• Un botón "Parar de generar"
• Cancelar cuando el usuario navega fuera
• Limitar un agente que se descontrola

Sin el SDK

Si no usas React, o quieres construir tu propia UI, llama al endpoint directamente. Los endpoints de agente hacen streaming con el formato Vercel AI SDK data stream (un event stream separado por saltos de línea sobre HTTP).

const res = await fetch(`${DYPAI_URL}/api/v0/my_agent_endpoint`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${jwt}`,
  },
  body: JSON.stringify({
    messages: [{ role: 'user', content: 'Hola' }],
    session_id: 'conv-123',
  }),
})

const reader = res.body.getReader()
const decoder = new TextDecoder()

while (true) {
  const { value, done } = await reader.read()
  if (done) break
  // Cada chunk contiene uno o más eventos del stream.
  // Ver los docs del Vercel AI SDK para el protocolo completo.
  console.log(decoder.decode(value))
}

Para la mayoría de casos, usa el SDK — gestiona reconexión, error boundaries y formato de mensajes por ti.

Llamadas sin streaming

Si necesitas una respuesta final como JSON plano (para una llamada server-to-server, un cron, o un webhook que no gestiona streams), llama al agente como cualquier otro endpoint con dypai.api.post:

const { data, error } = await dypai.api.post('my_agent_endpoint', {
  prompt: 'Resume los pedidos de hoy',
})

console.log(data.content)        // respuesta final en texto
console.log(data.usage)          // tokens usados
console.log(data.steps)          // tool calls hechas

DYPAI espera automáticamente a la respuesta completa y devuelve el objeto final.

Gotchas comunes

Siguientes pasos