[{"_1":2,"_107":-5,"_108":-5},"loaderData",{"_3":4},"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,"_84":85,"_86":87,"_103":104},"content","# Capítulo 4: React Router v7 — Tu Chat Full-Stack\n\nYa entiendes el streaming. Viste cada `text-delta`, cada `finish-step`, cada byte viajando por el wire.\n\nAhora veamos cuánto código desaparece cuando usas un framework full-stack.\n\n## El mismo chat, menos código\n\nAsí se ve el endpoint de chat en Hono:\n\n```typescript\n// Hono (Capítulo 3)\nimport { serve } from '@hono/node-server';\nimport { streamText } from 'ai';\nimport { openai } from '@ai-sdk/openai';\nimport { Hono } from 'hono';\n\nconst app = new Hono();\n\napp.post('/api/chat', async (c) => {\n const { messages } = await c.req.json();\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n messages,\n });\n\n return result.toUIMessageStreamResponse();\n});\n\nserve({ fetch: app.fetch, port: 8080 });\n```\n\nAsí se ve en React Router v7:\n\n```typescript\n// React Router v7\n// app/routes/api.chat.ts\nimport { streamText } from 'ai';\nimport { openai } from '@ai-sdk/openai';\nimport type { Route } from './+types/api.chat';\n\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n messages,\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\nSin `Hono()`. Sin `serve()`. Sin configurar puerto. React Router v7 maneja todo eso por ti.\n\n## El endpoint como action\n\nEn React Router v7, cada archivo en `app/routes/` puede exportar un `action`. Cuando haces POST a esa ruta, se ejecuta el action.\n\n```typescript\n// app/routes/api.chat.ts\nimport { streamText } from 'ai';\nimport { openai } from '@ai-sdk/openai';\nimport type { Route } from './+types/api.chat';\n\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n system: 'Eres un asistente útil. Responde en español.',\n messages,\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\nRegistra la ruta en `routes.ts`:\n\n```typescript\n// app/routes.ts\nimport { type RouteConfig, route } from '@react-router/dev/routes';\n\nexport default [\n // ... otras rutas\n route('api/chat', './routes/api.chat.ts'),\n] satisfies RouteConfig;\n```\n\nListo. POST a `/api/chat` ejecuta tu action y retorna el stream.\n\n## Lo que React Router v7 hace por ti\n\n### Headers correctos\n`toUIMessageStreamResponse()` configura automáticamente:\n- `Content-Type: text/plain; charset=utf-8`\n- `x-vercel-ai-ui-message-stream: v1`\n- `Cache-Control: no-cache`\n- `Transfer-Encoding: chunked`\n\nNo tienes que pensar en esto.\n\n### Type safety con Route types\nEl tipo `Route.ActionArgs` viene generado automáticamente. TypeScript sabe exactamente qué propiedades tiene `request`.\n\n```typescript\n// TypeScript sabe que request es Request\nexport async function action({ request }: Route.ActionArgs) {\n const body = await request.json(); // Tipado\n}\n```\n\n### Hot reload\nCambias el código, el servidor se recarga. Sin reiniciar manualmente.\n\n### Deploy integrado\nUn `fly deploy` y tu app está en producción. El mismo código corre en desarrollo y producción.\n\n## useChat apuntando a tu action\n\nEn el cliente, `useChat` se conecta al action mediante `transport`:\n\n```typescript\n// app/routes/chat.tsx\nimport { useChat, DefaultChatTransport } 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 transport: new DefaultChatTransport({\n api: '/api/chat',\n }),\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput('');\n }\n };\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 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> **Nota AI SDK v6:** El hook usa `transport` con `DefaultChatTransport` para configurar el endpoint. Usamos `useState` de React para el input, y `sendMessage({ text })` para enviar. Los mensajes tienen `parts` en lugar de `content`.\n>\n> Si tu endpoint es exactamente `/api/chat` (el default), puedes omitir `transport` completamente:\n> ```typescript\n> const { messages, sendMessage, status } = useChat();\n> ```\n\n## Callbacks en el servidor RRv7\n\nLos callbacks funcionan igual que en Hono:\n\n```typescript\n// app/routes/api.chat.ts\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n messages,\n\n onStepFinish({ usage, finishReason }) {\n console.log(`Paso terminado: ${usage.totalTokens} tokens`);\n },\n\n onFinish({ text, usage, steps }) {\n const costoMXN = usage.totalTokens * 0.00000015 * 20;\n console.log(`Costo: $${costoMXN.toFixed(4)} MXN`);\n\n // Guardar en base de datos\n // await db.conversacion.create({...});\n },\n\n onError({ error }) {\n console.error('Error:', error);\n }\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n**Mismo código que en Hono.** El AI SDK no cambia—solo cambia el framework que lo envuelve.\n\n## Datos custom en RRv7\n\n`createUIMessageStream` también funciona igual:\n\n```typescript\n// app/routes/api.chat.ts\nimport {\n streamText,\n createUIMessageStream,\n createUIMessageStreamResponse\n} from 'ai';\n\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n\n const stream = createUIMessageStream({\n execute: async ({ writer }) => {\n // Metadata antes del streaming\n writer.write({\n type: 'data-context',\n data: {\n modelo: 'gpt-4o-mini',\n timestamp: Date.now()\n }\n });\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n messages,\n });\n\n writer.merge(result.toUIMessageStream());\n }\n });\n\n return createUIMessageStreamResponse({ stream });\n}\n```\n\nEl cliente recibe los datos en `message.parts` exactamente igual.\n\n## Un chat completo en RRv7\n\nAquí está el ejemplo completo con contexto dinámico, callbacks, y persistencia:\n\n```typescript\n// app/routes/api.chat.ts\nimport { streamText, createUIMessageStream, createUIMessageStreamResponse } from 'ai';\nimport { openai } from '@ai-sdk/openai';\nimport type { Route } from './+types/api.chat';\n// import { db } from '~/lib/db.server';\n\nexport async function action({ request }: Route.ActionArgs) {\n const { messages } = await request.json();\n\n const hora = new Date().getHours();\n const periodo = hora < 12 ? 'mañana' : hora < 18 ? 'tarde' : 'noche';\n\n const stream = createUIMessageStream({\n execute: async ({ writer }) => {\n writer.write({\n type: 'data-context',\n data: { periodo, hora, modelo: 'gpt-4o-mini' }\n });\n\n const result = streamText({\n model: openai('gpt-4o-mini'),\n system: `Eres un asistente amigable.\n Es de ${periodo} (${hora}:00).\n Saluda apropiadamente y responde en español.`,\n messages,\n\n onFinish: async ({ text, usage }) => {\n console.log(`[${periodo}] Tokens: ${usage.totalTokens}`);\n\n // Persistir conversación\n // await db.conversacion.create({\n // data: {\n // hora,\n // tokens: usage.totalTokens,\n // respuesta: text.substring(0, 200)\n // }\n // });\n }\n });\n\n writer.merge(result.toUIMessageStream());\n }\n });\n\n return createUIMessageStreamResponse({ stream });\n}\n```\n\nY el cliente:\n\n```typescript\n// app/routes/chat.tsx\nimport { useChat, DefaultChatTransport } 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 transport: new DefaultChatTransport({\n api: '/api/chat',\n }),\n });\n\n return (\n

Chat con IA

\n\n

\n {messages.length === 0 ? (\n

\n Envía un mensaje para comenzar\n

\n ) : (\n

\n {messages.map((m) => (\n \n {m.parts.map((part, i) => {\n if (part.type === 'text') {\n return {part.text};\n }\n if (part.type === 'data-context') {\n return (\n \n {part.data.periodo} • {part.data.modelo}\n \n );\n }\n return null;\n })}\n

\n ))}\n

\n )}\n

\n\n {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput('');\n }\n }}\n className=\"flex gap-2\"\n >\n setInput(e.target.value)}\n placeholder=\"Escribe algo...\"\n className=\"flex-1 p-3 border rounded-lg\"\n disabled={status === 'streaming'}\n />\n \n Enviar\n \n \n

\n \n );\n}\n```\n\n## Cuándo elegir cada uno\n\n| Escenario | Usa |\n|-----------|-----|\n| API standalone para múltiples clientes | Hono |\n| Microservicio de IA en el edge | Hono |\n| App full-stack con React | React Router v7 |\n| Debugging profundo del protocolo | Hono |\n| Máxima productividad | React Router v7 |\n| Deploy a Cloudflare Workers | Hono |\n| Ya tienes una app RRv7 | React Router v7 |\n\n**No es una competencia.** Son herramientas para diferentes contextos.\n\n## En una frase\n\n- **RRv7**: El framework hace el trabajo sucio. Tú escribes la lógica.\n- **El conocimiento de Hono no fue en vano**: Cuando algo falle, sabrás dónde buscar.\n- **Mismo AI SDK, diferente envoltorio**: Los callbacks, el protocolo, todo funciona igual.\n\n---\n\nHasta ahora el modelo solo genera texto plano. En el próximo capítulo veremos cómo obtener datos estructurados: objetos tipados que tu código puede consumir directamente, sin parsear strings.\n","currentChapter",{"_9":10,"_11":12,"_13":14},"id","04","title","React Router v7 — Tu Chat Full-Stack","slug","capitulo-04","prevChapter",{"_9":17,"_11":18,"_13":19},"03","Dentro del Streaming","capitulo-03","nextChapter",{"_9":22,"_11":23,"_13":24},"05","Structured Output — Respuestas Tipadas","capitulo-05","chapters",[27,31,35,39,16,8,21,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},"01","Tu Primera Inferencia con IA","capitulo-01",{"_9":40,"_11":41,"_13":42},"02","React y el Hook useChat","capitulo-02",{"_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",{},"bookSlug","ai-sdk","bookConfig",{"_11":88,"_89":90,"_91":92,"_93":94,"_95":85,"_96":97,"_98":99,"_100":101,"_102":-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",{"_105":76,"_106":76},"success","subscribed","actionData","errors"]

¿Ya compraste el libro?