Jak zbudować chatbota z Vercel AI SDK w Next.js (App Router)?

Next.js razem z Vercel AI SDK pozwala na proste i szybkie tworzenie aplikacji, które pozwalają “wszczepić” funkcjonalności sztucznej inteligencji. Aby zacząć rozumieć jak działa najpopularniejszy SDK do tworzenia aplikacji webowych z AI, polecamy zbudować prostego, działającego chatbota z wykorzystaniem modeli od OpenAI.

Czego potrzebujesz na start?

Zanim zaczniesz, upewnij się, że masz:

• Node.js w wersji 18+ oraz pnpm do zarządzania paczkami
• Klucz API OpenAI, (do wygenerowania tutaj)

Tworzymy aplikację Next.js

Na początek w wybranym przez Ciebie edytorze (np. VS Code), w dedykowanym folderze stwórz nowy projekt Next.js z App Routerem oraz Tailwind CSS poprzez terminal:

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

Następnie, przejdź do katalogu z projektem:

cd my-ai-app

Instalujemy potrzebne biblioteki

Zainstaluj paczki potrzebne do obsługi AI oraz walidacji danych (rekomendujemy Zod):

pnpm add ai @ai-sdk/react @ai-sdk/openai zod

Pamiętaj, żeby używać biblioteki ai w wersji 3.1 lub wyższej.

Dodajemy klucz API OpenAI

W folderze “my-ai-app” stwórz plik .env.local i dodaj tam swój klucz API poprzez wpisanie następującej linijki:

OPENAI_API_KEY=twój-klucz-api

Ustawiamy endpoint do rozmów z chatbotem

W katalogu app/api/chat/ stwórz plik route.ts:

import { openai } from '@ai-sdk/openai'; // Importujemy OpenAI provider
import { streamText } from 'ai'; // Import do strumieniowania tekstu z pakietu Vercel AI SDK

export const maxDuration = 30; // Maksymalny czas działania endpointu w sekundach

// Funkcja obsługująca żądania POST
export async function POST(req: Request) { 
  const { messages } = await req.json(); // Pobieramy i destrukturyzujemy wiadomości od użytkownika z body przychodzącego żądania

// Wybieramy model AI od OpenAI - nie musi być konkretnie ten
  const result = streamText({
    model: openai('gpt-4o'), 
    messages, // Przekazujemy historię wiadomości
  });

// Zwracamy odpowiedź jako strumień danych
  return result.toDataStreamResponse(); 
}

Teraz masz działający endpoint /api/chat, do którego możesz wysyłać wiadomości.

Tworzymy interfejs użytkownika

W pliku app/page.tsx dodaj interfejs do czatowania:

'use client'; // Oznaczamy komponent jako klientowy

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

// Pobieramy dane i funkcje przy użyciu hooka useChat - deklarujemy komponent 
<Chat />

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat(); 
  
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto">
      {messages.map(message => (
        <div key={message.id} className="whitespace-pre-wrap">
          {message.role === 'user' ? 'Ty: ' : 'AI: '}
          {message.parts.map((part, i) => (
            <div key={`${message.id}-${i}`}>{part.text}</div>
          ))}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border rounded shadow-xl"
          value={input}
          placeholder="Napisz coś..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Uruchamiamy aplikację

Teraz wystarczy uruchomić projekt lokalnie:

pnpm run dev

Twoja aplikacja jest dostępna pod http://localhost:3000.

Dodajemy narzędzia (np. pogoda)

Chatbot zyska na przydatności, jeśli dasz mu dodatkowy dostęp do zewnętrznych danych – np. aplikacja pogodowa. Dodaj narzędzie do pliku route.ts:

import { openai } from '@ai-sdk/openai'; // Provider OpenAI
import { streamText, tool } from 'ai'; // Strumień tekstowy i narzędzia
import { z } from 'zod'; // WAŻNE - importujemy bibliotekę do walidacji danych wejściowych

export const maxDuration = 30; // Limit czasowy endpointu

export async function POST(req: Request) {
  const { messages } = await req.json(); // Odczytujemy wiadomości od użytkownika

  const result = streamText({
    model: openai('gpt-4o'), // Ustawiamy model OpenAI (nie musi być ten)
    messages, // Tak jak wyżej, przekazujemy historię konwersacji
    tools: {
      weather: tool({ // Narzędzie pogodowe
        description: 'Podaje pogodę dla lokalizacji w Fahrenheitach',
        parameters: z.object({ // UWAGA - używamy biblioteki Zod!
          location: z.string().describe('Lokalizacja'),
        }),
        execute: async ({ location }) => ({
          location,
          temperature: Math.round(Math.random() * (90 - 32) + 32), // Symulacja pogody
        }),
      }),
    },
  });

  return result.toDataStreamResponse();
}

Rozszerzamy na wieloetapowe odpowiedzi

W pliku app/page.tsx ustaw maksymalną ilość kroków interakcji:

const { messages, input, handleInputChange, handleSubmit } = useChat({
  maxSteps: 5, // Limitujemy 5 kroków na jedną interakcję
});

Teraz chatbot może wykonywać skomplikowane zadania krok po kroku, np. sprawdzić pogodę i przekonwertować temperaturę na inne jednostki.

Podsumowanie

To tylko podstawowe demo – jak widać, przy użyciu AI SDK oraz Next.js można bardzo szybko i łatwo stworzyć funkcjonalnego chatbota. Chcesz zgłębiać ten tandem głębiej? Poniżej znajdziesz link do oficjalnej dokumentacji od Vercel!