Lab: Frontend con useChat

Es hora de conectar los cables. Usaremos la nueva librería @ai-sdk/react para consumir el endpoint que creamos en el paso anterior.

Construyendo la UI

1. Instala la dependencia de React

   En las versiones más recientes del SDK, los hooks de React viven en su propio paquete para mantener el core ligero.

   npm install @ai-sdk/react

2. Abre el archivo principal

   Ve a app/page.tsx y borra todo su contenido actual.

3. Escribe el código del Cliente

   Copia y pega el siguiente código. Nota cómo manejaremos los mensajes por “partes” (parts), lo que nos prepara para soportar imágenes o llamadas a herramientas en el futuro.

   app/page.tsx

   'use client';
   
   import { useChat } from '@ai-sdk/react';
   import { DefaultChatTransport } from 'ai';
   import { useState } from 'react';
   
   export default function Chat() {
     // 1. El Hook mágico
     const { messages, sendMessage, status } = useChat({
       transport: new DefaultChatTransport({
         api: '/api/chat'
       })
     });
   
     // 2. Estado local para el input
     const [input, setInput] = useState('');
   
     // 3. Handler para enviar mensajes
     const handleSubmit = (e: React.FormEvent) => {
       e.preventDefault();
       if (input.trim()) {
         sendMessage({ text: input });
         setInput('');
       }
     };
   
     return (
       <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
   
         {/* Área de Mensajes */}
         <div className="space-y-4">
           {messages.map(m => (
             <div key={m.id} className="whitespace-pre-wrap">
               <span className="font-bold">{m.role === 'user' ? 'Tú: ' : 'AI: '}</span>
               {m.parts.map((part, i) =>
                 part.type === 'text' ? <span key={i}>{part.text}</span> : null
               )}
             </div>
           ))}
         </div>
   
         {/* Indicador de carga */}
         {status === 'streaming' && <div className="text-gray-500 text-sm mt-2">Escribiendo...</div>}
   
         {/* Formulario de Input */}
         <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md mb-8 bg-white">
           <input
             className="w-full p-2 border border-gray-300 rounded shadow-xl text-black"
             value={input}
             placeholder="Pregunta algo sobre programación..."
             onChange={(e) => setInput(e.target.value)}
           />
         </form>
       </div>
     );
   }

4. Ejecuta la aplicación

   Si no tenías el servidor corriendo, inícialo:

   npm run dev

   Abre http://localhost:3000.

¿Qué acabamos de lograr?

¡Pruébalo! En el campo de entrada puedes escribir lo siguiente: “Escribe un hola mundo en Python” y dale Enter.

Verás algo impresionante:

1. Streaming real: El texto aparece letra por letra, igual que en ChatGPT. No tuviste que configurar WebSockets ni nada complejo.
2. Gestión de estado: Si escribes otro mensaje, se añade a la lista automáticamente.
3. Persistencia del contexto: useChat envía toda la conversación previa al servidor cada vez, por lo que Gemini “recuerda” lo que dijiste antes.