[{"_1":2,"_125":-5,"_126":-5},"loaderData",{"_3":4,"_124":-5},"routes/libros/ai_sdk",{"_5":6,"_7":8,"_15":16,"_20":21,"_25":26,"_71":72,"_73":74,"_75":76,"_77":76,"_78":76,"_79":76,"_80":76,"_81":-5,"_82":83,"_101":102,"_103":104,"_120":121},"content","# Capítulo 2: React y el Hook useChat\n\nEn el capítulo anterior generamos texto con streaming en la terminal. Ahora llevaremos el streaming a React con `useChat`, el hook que hace que construir interfaces de chat sea casi trivial.\n\n## Por qué necesitas un hook especializado\n\nTu primer instinto podría ser: \"Es solo un fetch con useState\". Pero hay varios problemas con ese approach:\n\n1. **No hay streaming**: El usuario ve pantalla vacía hasta que termina la respuesta\n2. **No hay historial estructurado**: Mensajes como strings planos, sin roles ni metadata\n3. **No hay manejo de errores mid-stream**: ¿Qué pasa si la conexión falla a mitad?\n4. **Re-renders excesivos**: Cada token causa un re-render de todo el componente\n\n`useChat` resuelve todo con una API declarativa:\n\n```tsx\nimport { useChat } from \"@ai-sdk/react\";\nimport { useState } from \"react\";\n\nfunction Chat() {\n const [input, setInput] = useState(\"\");\n const { messages, sendMessage, status, error } = useChat();\n\n return (\n \n );\n}\n```\n\n> **Cambio en v6:** El hook ya no maneja el input internamente. Usas `useState` para el campo de texto, `sendMessage` para enviar, `status` en lugar de `isLoading`, y los mensajes tienen `parts` en lugar de `content`.\n\n## Anatomía de useChat\n\nEl hook devuelve un objeto con estas propiedades esenciales:\n\n```typescript\ninterface UseChatReturn {\n // Estado\n messages: Message[];\n status: \"ready\" | \"submitted\" | \"streaming\" | \"error\";\n error: Error | undefined;\n\n // Acciones\n sendMessage: (message: { text: string }) => Promise;\n regenerate: () => Promise; // Antes era reload()\n stop: () => void;\n setMessages: (messages: Message[]) => void;\n}\n```\n\nLos estados de `status`:\n- `ready`: Listo para recibir input\n- `submitted`: Mensaje enviado, esperando respuesta\n- `streaming`: Recibiendo tokens del servidor\n- `error`: Hubo un error en la petición\n\n### El tipo Message en v6\n\nLos mensajes usan `parts` en lugar de `content`:\n\n```typescript\ninterface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\" | \"tool\";\n parts: MessagePart[];\n createdAt?: Date;\n}\n\ntype MessagePart =\n | { type: \"text\"; text: string }\n | { type: \"tool-invocation\"; toolInvocation: ToolInvocation }\n | { type: \"tool-result\"; toolResult: ToolResult };\n```\n\nEsta estructura permite mensajes más ricos que pueden contener texto, invocaciones de herramientas, y resultados — todo en el mismo mensaje.\n\n## El protocolo de streaming\n\n`useChat` usa un protocolo de texto optimizado para streaming, no JSON plano. Cada línea tiene un prefijo:\n\n| Prefijo | Significado |\n|---------|-------------|\n| `0:` | Chunk de texto |\n| `2:` | Tool call |\n| `8:` | Tool result |\n| `d:` | Metadata final (finish reason, usage) |\n| `e:` | Error |\n\nJSON requiere el documento completo para parsearlo. Con este protocolo, cada línea es independiente y parseable inmediatamente.\n\n## Implementación paso a paso\n\n### 1. El servidor (React Router v7)\n\n```typescript\n// app/routes/api.chat.ts\nimport { streamText } from \"ai\";\nimport { openai } from \"@ai-sdk/openai\";\nimport { convertToModelMessages } from \"ai\";\nimport type { Route } from \"./+types/api.chat\";\n\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n const modelMessages = await convertToModelMessages(messages);\n\n const result = streamText({\n model: openai(\"gpt-4o-mini\"),\n system: \"Eres un asistente útil que responde en español.\",\n messages: modelMessages,\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n> **Nota v6:** `convertToModelMessages` reemplaza a `convertToCoreMessages` y ahora es **async**. También `toDataStreamResponse()` fue reemplazado por `toUIMessageStreamResponse()`.\n\n### 2. El cliente\n\n```tsx\n// app/routes/chat.tsx\nimport { useChat } from \"@ai-sdk/react\";\nimport { useState } from \"react\";\n\nexport default function ChatPage() {\n const [input, setInput] = useState(\"\");\n const { messages, sendMessage, status } = useChat();\n\n return (\n

\n {messages.map((m) => (\n \n {m.parts.map((part, i) =>\n part.type === \"text\" ? {part.text} : null\n )}\n

\n ))}\n

\n\n

{\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput(\"\");\n }\n }} className=\"flex gap-2\">\n setInput(e.target.value)}\n placeholder=\"Escribe un mensaje...\"\n className=\"flex-1 p-2 border rounded\"\n />\n \n {status === \"streaming\" ? \"...\" : \"Enviar\"}\n \n \n \n );\n}\n```\n\n### 3. Registrar la ruta\n\n```typescript\n// routes.ts\nexport default [\n route(\"api/chat\", \"./routes/api.chat.ts\"),\n];\n```\n\nEn v6, `useChat()` usa `/api/chat` por defecto.\n\n## Patrones de UI para Chat\n\n### Indicador de escritura\n\n```tsx\n{(status === \"submitted\" || status === \"streaming\") &&\n messages[messages.length - 1]?.role === \"user\" && (\n

\n ●\n ●\n ●\n

\n)}\n```\n\n### Scroll automático inteligente\n\nEl scroll debe respetar cuando el usuario está leyendo mensajes anteriores:\n\n```tsx\nfunction useAutoScroll(deps: any[], threshold = 100) {\n const containerRef = useRef(null);\n const endRef = useRef(null);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n // Solo scrollea si está cerca del fondo\n const isNearBottom =\n container.scrollHeight - container.scrollTop - container.clientHeight < threshold;\n\n if (isNearBottom) {\n endRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }\n }, deps);\n\n return [containerRef, endRef] as const;\n}\n\n// Uso\nfunction Chat() {\n const { messages } = useChat();\n const [containerRef, endRef] = useAutoScroll([messages]);\n\n return (\n

\n {messages.map((m) =>

{/* ... */}

)}\n

\n );\n}\n```\n\n## Optimización de Re-renders\n\n`useChat` puede causar muchos re-renders — cada token actualiza el estado.\n\n### React.memo para mensajes\n\n```tsx\nconst Message = React.memo(function Message({ message }: { message: Message }) {\n return (\n

\n {message.parts.map((part, i) =>\n part.type === \"text\" ? {part.text} : null\n )}\n

\n );\n});\n```\n\n### Separar mensaje en streaming\n\n```tsx\nfunction Chat() {\n const { messages, status } = useChat();\n\n // Mensajes completados (no cambian durante streaming)\n const completedMessages = messages.slice(0, -1);\n\n // Mensaje en progreso (cambia con cada token)\n const streamingMessage = status === \"streaming\"\n ? messages[messages.length - 1]\n : null;\n\n return (\n <>\n {completedMessages.map((m) => )}\n {streamingMessage && }\n \n );\n}\n```\n\n## Customización\n\n### Callbacks\n\n```tsx\nconst { messages } = useChat({\n onFinish: (message) => {\n console.log(\"Mensaje completado:\", message);\n },\n onError: (error) => {\n console.error(\"Error:\", error);\n },\n});\n```\n\n### Transport personalizado\n\n```tsx\nimport { DefaultChatTransport } from \"@ai-sdk/react\";\n\nconst { messages } = useChat({\n transport: new DefaultChatTransport({\n api: \"/api/my-custom-chat\",\n headers: { Authorization: `Bearer ${token}` },\n body: { userId: currentUser.id },\n }),\n});\n```\n\n### Cancelación\n\n```tsx\nconst { stop, status } = useChat();\n\n{status === \"streaming\" && (\n \n)}\n```\n\n## Edge Cases\n\n### Enviar mientras genera\n\n```tsx\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n if (status === \"streaming\") {\n stop(); // Detener generación actual\n }\n sendMessage({ text: input });\n setInput(\"\");\n};\n```\n\n### Múltiples instancias\n\n```tsx\nconst chat1 = useChat({ id: \"soporte\" });\nconst chat2 = useChat({ id: \"ventas\" });\n```\n\n### Persistir conversación\n\n```tsx\nconst { messages, setMessages } = useChat();\n\nuseEffect(() => {\n const saved = localStorage.getItem(\"chat-messages\");\n if (saved) setMessages(JSON.parse(saved));\n}, []);\n\nuseEffect(() => {\n localStorage.setItem(\"chat-messages\", JSON.stringify(messages));\n}, [messages]);\n```\n\n### Error mid-stream\n\n```tsx\nconst { error, regenerate, status } = useChat();\n\n{status === \"error\" && (\n

Error: {error?.message}

\n \n

\n)}\n```\n\n## Resumen\n\n| Concepto | Qué aprendiste |\n|----------|----------------|\n| `useChat` | Hook que maneja estado y streaming de chat |\n| `sendMessage` | Reemplaza a `append` — envía mensajes |\n| `status` | Estados: `ready`, `submitted`, `streaming`, `error` |\n| `message.parts` | Nuevo formato con array de partes tipadas |\n| `transport` | Configuración de endpoint y headers |\n| `regenerate` | Reemplaza a `reload` — reintenta última respuesta |\n| Optimización | React.memo y split components |\n\n### Migración automática v5 → v6\n\n```bash\nnpx @ai-sdk/codemod v6\n```\n\n---\n\nEn el próximo capítulo abriremos el capó del streaming. Usaremos Hono como microscopio para ver exactamente qué viaja por el wire—cada `text-delta`, cada `finish-step`. Cuando tu chat falle en producción, este conocimiento te salvará.\n","currentChapter",{"_9":10,"_11":12,"_13":14},"id","02","title","React y el Hook useChat","slug","capitulo-02","prevChapter",{"_9":17,"_11":18,"_13":19},"01","Tu Primera Inferencia con IA","capitulo-01","nextChapter",{"_9":22,"_11":23,"_13":24},"03","Dentro del Streaming","capitulo-03","chapters",[27,31,16,8,21,35,39,43,47,51,55,59,63,67],{"_9":28,"_11":29,"_13":30},"prólogo","Prólogo","prologo",{"_9":32,"_11":33,"_13":34},"intro","Introducción","introduccion",{"_9":36,"_11":37,"_13":38},"04","React Router v7 — Tu Chat Full-Stack","capitulo-04",{"_9":40,"_11":41,"_13":42},"05","Structured Output — Respuestas Tipadas","capitulo-05",{"_9":44,"_11":45,"_13":46},"06","Tools — Dándole Manos al Modelo","capitulo-06",{"_9":48,"_11":49,"_13":50},"07","Agentes — Encapsulando la Inteligencia","capitulo-07",{"_9":52,"_11":53,"_13":54},"08","generateImage — Creando Imágenes con Código","capitulo-08",{"_9":56,"_11":57,"_13":58},"09","Embeddings — Búsqueda Semántica","capitulo-09",{"_9":60,"_11":61,"_13":62},"10","RAG — Retrieval Augmented Generation","capitulo-10",{"_9":64,"_11":65,"_13":66},"11","Agentic RAG — Agentes con Conocimiento","capitulo-11",{"_9":68,"_11":69,"_13":70},"12","Audio y Speech — Voz e IA","capitulo-12","hasAccess",true,"accessLevel","public","isSubscribed",false,"isPurchased","hasFullAccess","showSubscriptionDrawer","showPurchaseDrawer","userEmail","chaptersAccessInfo",{"_30":84,"_34":86,"_19":87,"_14":88,"_24":89,"_38":90,"_42":92,"_46":93,"_50":94,"_54":95,"_58":97,"_62":98,"_66":99,"_70":100},{"_73":74,"_85":76},"isLocked",{"_73":74,"_85":76},{"_73":74,"_85":76},{"_73":74,"_85":76},{"_73":74,"_85":76},{"_73":91,"_85":72},"paid",{"_73":74,"_85":76},{"_73":74,"_85":76},{"_73":74,"_85":76},{"_73":96,"_85":72},"subscriber",{"_73":96,"_85":72},{"_73":96,"_85":72},{"_73":91,"_85":72},{"_73":91,"_85":72},"bookSlug","ai-sdk","bookConfig",{"_11":105,"_106":107,"_108":109,"_110":111,"_112":102,"_113":114,"_115":116,"_117":118,"_119":-5},"IA aplicada con React y TypeScript","priceUSD",1500,"priceMXN",24900,"chaptersCount",12,"contentPath","routePath","ai_sdk","epubS3Key","fixtergeek/books/ai-sdk.epub","epubFilename","ai-sdk-react-router.epub","epubPublicPath","searchParams",{"_122":76,"_123":76},"success","subscribed","root","actionData","errors"]

¿Ya compraste el libro?