Build a Next.js Chatbot Quickly with Vercel AI SDK

Introduction

Vercel AI SDK provides a unified API, framework‑agnostic UI components, and multi‑model adapters to simplify integration of large language models (LLMs) into web applications, reducing engineering complexity for chatbots, knowledge‑base Q&A, and other AI‑driven projects.

Core Modules

AI SDK Core ( ai )

Unified, framework‑independent API for text generation, structured data output, tool calls, and streaming responses. Abstracts provider differences (OpenAI, Anthropic, DeepSeek, Google, etc.) via Provider adapters.

AI SDK UI ( @ai-sdk/react , @ai-sdk/vue , @ai-sdk/svelte )

Hooks and components such as useChat, useCompletion, useObject for building chat, generation, and streaming UIs in React, Vue, Svelte, or Angular projects.

Package responsibilities & when to use

ai : backend/API routes only, no UI.

@ai-sdk/openai : OpenAI‑compatible models (GPT‑4, GPT‑4o, etc.) or any service following the OpenAI API.

@ai-sdk/react : Front‑end projects that need interactive chat or generation interfaces.

Installation

npm install ai

npm install @ai-sdk/openai

npm install @ai-sdk/react

Example: Simple chatbot with Next.js

Step 1 – Create a Next.js project

# Create a new Next.js app
npx create-next-app@latest ai-chatbot
cd ai-chatbot

Step 2 – Install SDK dependencies

# Core, OpenAI provider, and React UI
npm install ai @ai-sdk/openai @ai-sdk/react

Step 3 – Configure environment variables

# .env.local
OPENAI_API_KEY=your_api_key_here
# Optional base URL for OpenAI‑compatible services
OPENAI_BASE_URL=https://api.moonshot.cn/v1

Step 4 – Backend API route (app/api/chat/route.ts)

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export const maxDuration = 30;
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toTextStreamResponse();
}

Step 5 – Front‑end chat page (app/page.tsx)

"use client";
import { useState } from 'react';
import { useChat } from '@ai-sdk/react';
import { TextStreamChatTransport } from 'ai';
export default function ChatPage() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status, error } = useChat({
    transport: new TextStreamChatTransport({ api: "/api/chat" }),
  });
  const isLoading = status === "streaming" || status === "submitted";
  // UI rendering omitted for brevity; the component returns a JSX layout that displays messages,
  // a loading indicator, error messages, and an input form that calls sendMessage.
}

Step 6 – Run the project

# Start development server
npm run dev

Open http://localhost:3000 to see the AI chat interface.

Repository

Official site: https://ai-sdk.dev Source code:

https://github.com/vercel/ai

Conclusion

Vercel AI SDK is a comprehensive open‑source solution for integrating LLMs with modern front‑end and back‑end frameworks (Next.js, React, Vue, Svelte, Node.js, serverless, etc.). It lowers the barrier for building chatbots, generative apps, agents, RAG systems, and multimodal applications, while providing a stable, extensible infrastructure for multi‑model, multi‑provider projects.

Ideal for rapid prototyping, MVPs, and demos.

Supports production‑grade, cross‑framework, and cross‑runtime deployments.

For highly customized, performance‑critical, or exotic model scenarios, a lower‑level implementation may still be required.