Vercel AI SDK Chatbot

The Vercel AI SDK provides the fastest path from zero to production chatbot, with excellent streaming UX and seamless Vercel deployment. This stack is ideal for product teams shipping customer-facing chat features.

Architecture

┌─────────────────────────────────────────────────────┐
│                   Next.js App                        │
│  ┌─────────────────────────────────────────────────┐│
│  │              React Chat UI                       ││
│  │         (useChat hook + streaming)              ││
│  └─────────────────────────────────────────────────┘│
│                        │                             │
│                   API Route                          │
│  ┌─────────────────────────────────────────────────┐│
│  │           streamText / generateText              ││
│  │                    +                             ││
│  │              Tool Definitions                    ││
│  └─────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────┤
│                  AI SDK Core                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐            │
│  │  OpenAI  │ │Anthropic │ │  Groq    │   ...      │
│  │ Provider │ │ Provider │ │ Provider │            │
│  └──────────┘ └──────────┘ └──────────┘            │
├─────────────────────────────────────────────────────┤
│               Vercel Infrastructure                  │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐               │
│  │   KV    │ │Postgres │ │  Blob   │               │
│  │(session)│ │  (RAG)  │ │ (files) │               │
│  └─────────┘ └─────────┘ └─────────┘               │
└─────────────────────────────────────────────────────┘

Code Example

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      getWeather: {
        description: 'Get weather for a location',
        parameters: z.object({
          location: z.string()
        }),
        execute: async ({ location }) => {
          return { temperature: 72, condition: 'sunny' };
        }
      }
    }
  });

  return result.toDataStreamResponse();
}

// app/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

When to Use This Stack

• Product teams shipping chatbots quickly
• Web-first applications with React/Next.js
• Projects requiring streaming responses and great UX
• Teams already on Vercel infrastructure