Cómo Crear un Chatbot con Next.js y Vercel AI SDK 4.1

Table Of Contents

Introducción

En este artículo, aprenderás cómo crear un chatbot utilizando Next.js junto con el Vercel AI SDK 4.1. Te guiaré a través de los pasos necesarios para configurar el proyecto, crear el frontend y el backend, y hacer que tu chatbot sea funcional con herramientas adicionales.

Requisitos Previos

Asegúrate de tener los siguientes requisitos antes de comenzar:

Node.js instalado en tu sistema.
Una cuenta en OpenAI para obtener tu clave API.
Conocimientos básicos de JavaScript y React.

Crear una Nueva Aplicación Next.js

Primero, debes crear una nueva aplicación Next.js utilizando el siguiente comando:

npx create-next-app@latest my-ai-app

Navega a la carpeta de la aplicación:

cd my-ai-app

Instalar Dependencias

A continuación, instala las dependencias necesarias:

npm install ai @ai-sdk/react @ai-sdk/openai zod

Configurar la Clave API de OpenAI

Crea un archivo .env.local y agrega tu clave API de OpenAI:

OPENAI_API_KEY=tu_clave_api_aqui

Crear el Endpoint del Chatbot

Ahora, crea el manejador de ruta para tu chatbot en app/api/chat/route.ts:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o'), messages });
  return result.toDataStreamResponse();
}

Crear el Frontend del Chatbot

Actualiza la página principal de tu aplicación en app/page.tsx:

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map((m) => (
        <div>{m.content}</div>
      ))}
      <form>
        <input type="text" value="{input}" placeholder="Say something...">
      </form>
    </div>  
    );
  }

Probar el Chatbot

Para ejecutar tu aplicación, usa el siguiente comando:

npm run dev

Visita http://localhost:3000 en tu navegador y prueba el chatbot.

Conclusiones y Próximos Pasos

Has creado un chatbot básico utilizando Next.js y el Vercel AI SDK 4.1. Puedes extender la funcionalidad del chatbot integrando más herramientas, como la obtención de información sobre el clima, mediante la implementación de funciones personalizadas en tu código.