Lab: Setup y API Backend

Vamos a construir un Chatbot Fullstack desde cero. En esta primera parte, prepararemos el terreno y crearemos el endpoint que conectará nuestro frontend con Gemini.

1. Crear el proyecto

Usaremos Next.js para tener backend y frontend en un solo lugar.

1. Ejecuta el comando de creación

   Crea un nuevo proyecto con el siguiente comando y acepta todas las opciones por defecto (TypeScript: Yes, App Router: Yes).

   npx create-next-app@latest ai-chat-lab
   cd ai-chat-lab

2. Instala las dependencias de IA

   Solo necesitamos dos paquetes: el core del SDK y el proveedor de Google.

   npm install ai @ai-sdk/google

3. Configura tu API Key

   Crea un archivo .env.local en la raíz del proyecto y agrega tu llave de Google AI Studio.

   .env.local

   GOOGLE_GENERATIVE_AI_API_KEY=tu_api_key_aqui

2. El Backend (API Route)

El SDK necesita un endpoint HTTP para comunicarse. En Next.js (App Router), esto se hace creando un archivo route.ts.

1. Crea la ruta

   Navega a la carpeta app y crea esta estructura de carpetas:

   • Directorioapp

     • Directorioapi

       • Directoriochat

         • route.ts (Aquí vive el cerebro)
     • page.tsx

2. Escribe el código del servidor

   Copia este código en app/api/chat/route.ts. Este archivo recibe los mensajes, llama a Gemini y devuelve el stream.

   app/api/chat/route.ts

   import { google } from '@ai-sdk/google';
   import { convertToModelMessages, streamText } from 'ai';
   
   // Permitir streaming por más de 30 segundos (importante para respuestas largas)
   export const maxDuration = 30;
   
   export async function POST(req: Request) {
     // 1. Extraer el historial de mensajes del cuerpo de la petición
     const { messages } = await req.json();
   
     // 2. Convertir mensajes UI a mensajes del modelo
     const modelMessages = await convertToModelMessages(messages);
   
     // 3. Llamar al modelo
     const result = streamText({
       model: google('gemini-3-flash-preview'),
       messages: modelMessages,
       system: 'Eres un asistente experto en programación. Responde con código limpio y preciso.',
     });
   
     // 4. Devolver la respuesta como un flujo UI
     return result.toUIMessageStreamResponse();
   }

Análisis del código

Fíjate en lo simple que es comparado con lo que hacíamos antes:

1. Sin bucles manuales: No hay for await.... La función streamText maneja toda la complejidad.
2. toTextStreamResponse(): Esta función mágica empaqueta el texto, el uso de tokens y cualquier llamada a herramientas en un formato HTTP optimizado que el frontend entenderá automáticamente.
3. system: Definimos la personalidad del bot directamente aquí.

Pruébalo ahora

Aunque no tenemos Frontend, puedes probar que tu API funciona usando curl en otra terminal (asegúrate de correr npm run dev primero):

curl -X POST http://localhost:3000/api/chat \
-H "Content-Type: application/json" \
-d '{"messages": [{"role": "user", "parts": [{"type": "text", "text": "Hola"}]}]}'

Deberías ver una respuesta parecida a un flujo de datos.

En el siguiente paso, construiremos la interfaz visual para consumir este stream de forma elegante.