Chatbot con IA en Next.js usando Vercel AI SDK
Construye un chatbot con IA en tu app Next.js. Streaming de respuestas, historial de conversacion y UI completa con Vercel AI SDK y TypeScript.
Chatbot con IA en Next.js usando Vercel AI SDK
Construir un chatbot con IA en tu app Next.js es sorprendentemente simple con Vercel AI SDK. El SDK te da streaming de respuestas, manejo de historial y hooks de React listos para usar. En menos de 50 lineas de codigo tienes un chat funcional.
Si no conoces el AI SDK, revisa primero la guia de Vercel AI SDK para agentes. Aqui nos enfocamos en el caso de uso mas comun: un chatbot conversacional.
Setup
npm install ai @ai-sdk/openaiAgrega tu API key en .env.local:
OPENAI_API_KEY=sk-tu-api-key-aquiLa API route (backend)
// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: openai("gpt-4o-mini"),
system: "Eres un asistente tecnico que responde en espanol. Respuestas concisas y directas.",
messages,
});
return result.toDataStreamResponse();
}Eso es todo el backend. streamText conecta con el modelo, y toDataStreamResponse devuelve un stream que el frontend consume en tiempo real.
El componente de chat (frontend)
"use client";
import { useChat } from "ai/react";
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
return (
<div className="max-w-2xl mx-auto p-4">
<div className="space-y-4 mb-4">
{messages.map((m) => (
<div
key={m.id}
className={`p-3 rounded-lg ${
m.role === "user"
? "bg-blue-900/30 ml-8"
: "bg-zinc-800 mr-8"
}`}
>
<p className="text-sm text-zinc-400 mb-1">
{m.role === "user" ? "Tu" : "Asistente"}
</p>
<p className="text-zinc-100">{m.content}</p>
</div>
))}
</div>
<form onSubmit={handleSubmit} className="flex gap-2">
<input
value={input}
onChange={handleInputChange}
placeholder="Escribe tu mensaje..."
className="flex-1 p-2 bg-zinc-800 border border-zinc-700 rounded-lg text-zinc-100"
/>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 bg-green-600 text-white rounded-lg disabled:opacity-50"
>
Enviar
</button>
</form>
</div>
);
}useChat hace todo el trabajo pesado: maneja el estado de los mensajes, el input, el envio, y procesa el stream del servidor. Las respuestas aparecen token por token en tiempo real.
Personalizar el comportamiento
System prompt dinamico
// app/api/chat/route.ts
const result = streamText({
model: openai("gpt-4o-mini"),
system: `Eres el asistente de soporte de MiApp.
Solo respondes preguntas sobre nuestro producto.
Si te preguntan algo fuera de tema, redirige amablemente.
Fecha actual: ${new Date().toLocaleDateString("es-MX")}.`,
messages,
});Limitar longitud de respuesta
const result = streamText({
model: openai("gpt-4o-mini"),
system: "Responde en maximo 3 oraciones.",
messages,
maxTokens: 200,
});Cambiar de modelo en una linea
import { anthropic } from "@ai-sdk/anthropic";
// Cambiar de OpenAI a Anthropic
const result = streamText({
model: anthropic("claude-sonnet-4-6"),
messages,
});Esta es la ventaja del AI SDK: la interfaz es identica sin importar el proveedor.
Agregar contexto con herramientas
Si quieres que tu chatbot pueda consultar tu base de datos o APIs externas, usa tools:
import { streamText, tool } from "ai";
import { z } from "zod";
const result = streamText({
model: openai("gpt-4o-mini"),
messages,
tools: {
buscarProducto: tool({
description: "Busca un producto por nombre en la base de datos",
parameters: z.object({
nombre: z.string().describe("Nombre del producto a buscar"),
}),
execute: async ({ nombre }) => {
// Tu logica de busqueda aqui
const producto = await db.product.findFirst({
where: { name: { contains: nombre, mode: "insensitive" } },
});
return producto ?? "No encontre ese producto";
},
}),
},
});El modelo decide cuando usar la herramienta basado en el mensaje del usuario. Si alguien pregunta "cuanto cuesta el plan pro?", el modelo llama a buscarProducto automaticamente.
Siguiente paso
Si quieres que tu chatbot busque en documentos especificos (PDFs, markdown, bases de conocimiento), necesitas RAG. Revisa la guia de RAG con Next.js para implementar busqueda semantica sobre tus propios datos.
Preguntas frecuentes
Como crear un chatbot con IA en Next.js?
Con Vercel AI SDK. Instalas el paquete, creas una API route que conecta con el modelo (OpenAI, Anthropic, etc.), y usas el hook useChat en tu componente. El SDK maneja el streaming y el historial automaticamente.
Que modelo de IA usar para un chatbot?
Para prototipos y uso general, gpt-4o-mini de OpenAI es rapido y barato. Para produccion donde necesitas calidad, Claude Sonnet de Anthropic o GPT-4o. El AI SDK te permite cambiar de proveedor con una linea.
Cuanto cuesta correr un chatbot con IA?
Depende del modelo y el volumen. GPT-4o-mini cuesta ~$0.15 por millon de tokens de input. Para un proyecto con 100 usuarios diarios, espera entre $5 y $30 al mes dependiendo de la longitud de las conversaciones.
Puedo usar modelos open source para mi chatbot?
Si. El AI SDK soporta modelos via Ollama (local) o proveedores como Together AI y Fireworks. Puedes usar Llama, Mistral o DeepSeek sin depender de OpenAI o Anthropic.
Articulos relacionados
Zod Avanzado: Discriminated Unions, Transforms y Pipes
Patrones avanzados de Zod: discriminated unions, transforms, pipes, preprocess, y como validar datos complejos en TypeScript con schemas reutilizables.
tRPC + Next.js: APIs Type-Safe sin REST
Implementa tRPC en Next.js para APIs 100% type-safe. Sin schemas de API, sin fetch manual, sin types duplicados. End-to-end type safety con TypeScript.
Webhooks en Next.js: Recibe y Procesa Eventos
Implementa webhooks en Next.js para recibir eventos de Stripe, GitHub, Clerk y otros servicios. Verificacion de firmas, tipado y manejo de errores.