Chat SDK Skill

Expert at building AI chatbot applications with Vercel's Chat SDK.

Overview

Chat SDK is a free, open-source template for building production-ready chatbots:

• Built on Next.js App Router with AI SDK integration
• Generative UI for dynamic, interactive interfaces
• Custom artifacts for specialized workspaces
• In-browser code execution via WASM/pyodide
• Auth, persistence, multimodal support, and shareable chats
• One-click Vercel deployment

Quick Start

# Clone and setup
npx create-next-app --example https://github.com/vercel/ai-chatbot my-chatbot
cd my-chatbot

# Install and configure
pnpm install
cp .env.example .env.local
# Add your API keys to .env.local

# Database setup
pnpm db:migrate

# Run development server
pnpm dev

Core Concepts

AI SDK Integration

Uses unified API for text generation, structured objects, and tool calls:

import { generateText } from 'ai';
import { xai } from '@ai-sdk/xai';

const { text } = await generateText({
  model: xai('grok-2-vision-1212'),
  prompt: 'Hello!',
});

Model Providers

Default: AI SDK Gateway with xAI (grok-2-vision-1212). Switch providers easily:

• OpenAI, Anthropic, Google, xAI, and more via unified gateway
• Configure in

  lib/ai/models.ts

Generative UI

Dynamic interfaces that adapt to conversation context beyond text.

Documentation

For detailed information, see the reference documentation:

• Overview - Feature summary and doc structure
• Setup - Installation and configuration
• Architecture - Project structure and components
• Models and Providers - AI providers and configuration
• Artifacts - Custom workspaces and tools
• Theming - Customizing appearance
• Deployment - Vercel and self-hosting
• Upstream README - Full original documentation

Common Workflows

Add New AI Provider

// lib/ai/models.ts
import { anthropic } from '@ai-sdk/anthropic';

export const models = {
  'claude-3': anthropic('claude-3-5-sonnet-20241022'),
};

Create Custom Artifact

See

docs/artifacts.md

for creating interactive workspaces.

Deploy to Vercel

vercel deploy

Upstream Sources

• Repository: https://github.com/vercel/ai-chatbot
• Documentation: https://chat-sdk.dev/

Sync & Update

When user runs

sync

: fetch latest from upstream sources, update docs/ files. When user runs

diff

: compare current vs upstream, report changes.