Vercel AI SDK Chat Application Builder

Create a streaming AI chat application for the following use case:

Application Overview

• Use Case: [e.g., Customer support chatbot, Code assistant, Creative writing helper, Document Q&A]
• Target Users: [Developers / End customers / Internal team / Students]
• Deployment: [Vercel / Self-hosted / Cloud platform]

AI Provider Configuration

• AI Provider: [OpenAI / Anthropic Claude / Google Gemini / Cohere / Hugging Face / Multiple]
• Model: [gpt-4 / gpt-3.5-turbo / claude-3-5-sonnet / gemini-pro / Custom]
• Streaming: [Required / Optional / Disabled]
• Fallback Model: [Specify if primary fails / None]

Chat Features

Select and configure features:

Core Chat Functionality

• Message Types: [Text only / Text + Images / Multimodal]
• Chat History: [Persist in database / Session only / Local storage]
• Multiple Conversations: [Support separate chats / Single conversation]
• Message Actions: [Copy / Edit / Delete / Regenerate / Share]

AI Capabilities

• System Prompt: [Provide default system prompt or "Custom per session"]
• Temperature: [0.0-2.0, specify preference]
• Max Tokens: [Specify limit or "Dynamic"]
• Function Calling: [Required with functions: [LIST] / Not needed]
• Tool Usage: [Web search / Code execution / API calls / None]

User Experience

• Typing Indicators: [Yes / No]
• Streaming Display: [Token-by-token / Word-by-word / Sentence-by-sentence]
• Message Formatting: [Markdown support / Plain text / Rich text]
• Code Syntax Highlighting: [Required / Not needed]
• Loading States: [Custom loader / Standard / Skeleton]

Function Calling Setup

If function calling is required, define functions:

Function 1: [Name]

• Purpose: [e.g., Get weather, Search database, Calculate]
• Parameters: [List parameters with types]
• Return Type: [What data it returns]

Function 2: [Name]

• Purpose: [What this function does]
• Parameters: [List parameters with types]
• Return Type: [What data it returns]

[Add 1-5 functions if needed]

UI/UX Requirements

• Framework: [Next.js App Router / Pages Router / React / Other]
• Styling: [Tailwind CSS / CSS Modules / styled-components / Custom]
• Layout: [Full page / Embedded widget / Modal / Sidebar]
• Theme: [Light/Dark toggle / Light only / Dark only / System]
• Mobile Responsive: [Yes / Desktop only]

Chat Interface Elements

• Input Area: [Single line / Multiline textarea / Auto-expanding]
• Send Button: [Yes / Enter to send / Both]
• File Uploads: [Images / Documents / Code files / None]
• Voice Input: [Required / Not needed]
• Clear Chat Button: [Yes / No]
• Export Chat: [JSON / Markdown / PDF / Not needed]

Data Management

• Message Storage: [PostgreSQL / MongoDB / Supabase / Redis / None]
• User Authentication: [Required with: [NextAuth / Clerk / Supabase Auth] / Anonymous]
• Rate Limiting: [Per user / Per IP / None]
• Cost Tracking: [Track token usage / Not needed]

Advanced Features

• Conversation Branching: [Yes / No]
• Suggested Prompts: [Initial prompts / Dynamic suggestions / None]
• Context Injection: [RAG with vector database / Document upload / URL scraping / None]
• Multi-turn Context: [Remember last N messages / Full history / Sliding window]

Callbacks and Hooks

• onStart Callback: [Log to analytics / Initialize session / None]
• onToken Callback: [Real-time processing / Stream to multiple clients / None]
• onCompletion Callback: [Save to database / Send notification / None]
• onError Callback: [Custom error handling / Standard / None]

API Route Configuration

• Runtime: [Edge / Node.js / Both]
• Endpoint: [/api/chat / Custom path]
• Authentication: [API key / JWT / Session / None]
• CORS: [Allow all origins / Specific domains / None]

Environment Variables

List required environment variables:

• [e.g., OPENAI_API_KEY, DATABASE_URL, NEXT_PUBLIC_APP_URL]

Generate a complete AI chat application with:

• Next.js API route with streaming support
• Client component using useChat hook from Vercel AI SDK
• Proper message rendering with streaming display
• Function calling implementation (if required)
• Custom callbacks for start, token, completion, and error
• UI components for chat interface
• Message history management
• Error handling and loading states
• Environment configuration
• TypeScript types for all components

Output production-ready code with proper error handling, type safety, and optimized streaming performance.