"# From Idea to Prod: Build a Streaming AI App with Next.js 15, Server Components, and Vercel AI Gateway\n\n## Introduction\n\nBuilding AI-powered applications has become increasingly accessible, but creating a production-ready solution that's secure, performant, and maintainable requires careful architecture. In this comprehensive guide, we'll walk through building a streaming AI chat application using Next.js 15's latest features, React Server Components, and the Vercel AI SDK with AI Gateway.\n\nBy the end of this tutorial, you'll have a fully functional chat application that streams responses in real-time, securely manages API keys, implements intelligent caching, and supports multiple AI providers—all while following modern best practices for production deployments.\n\n## Why This Stack?\n\nBefore diving into the implementation, let's understand why this particular combination of technologies is ideal for production AI applications:\n\n- **Next.js 15**: Offers server-side rendering, edge runtime support, and seamless API routes\n- **React Server Components**: Enables better performance by reducing client-side JavaScript and improving initial load times\n- **Vercel AI SDK**: Provides a unified interface for working with multiple AI providers and handling streaming responses\n- **Vercel AI Gateway**: Adds enterprise-grade features like provider routing, response caching, rate limiting, and centralized key management\n\nThis stack ensures your application is not only functional but also scalable, secure, and cost-effective.\n\n## Prerequisites\n\nTo follow along with this tutorial, you'll need:\n\n- Node.js 18+ installed on your machine\n- A Vercel account (free tier works fine)\n- An API key from at least one AI provider (OpenAI, Anthropic, etc.)\n- Basic familiarity with React and TypeScript\n- A code editor (VS Code recommended)\n\n## Setting Up Your Next.js 15 Project\n\nLet's start by creating a new Next.js 15 project with all the necessary configurations:\n\n```bash\nnpx create-next-app@latest ai-chat-app\n```\n\nWhen prompted, select the following options:\n\n- TypeScript: Yes\n- ESLint: Yes\n- Tailwind CSS: Yes\n- `src/` directory: Yes\n- App Router: Yes\n- Customize default import alias: No\n\nNavigate to your project directory:\n\n```bash\ncd ai-chat-app\n```\n\n## Installing Required Dependencies\n\nNext, install the Vercel AI SDK and its streaming utilities:\n\n```bash\nnpm install ai @ai-sdk/openai @ai-sdk/anthropic zod\n```\n\nThese packages provide:\n\n- `ai`: Core Vercel AI SDK functionality\n- `@ai-sdk/openai`: OpenAI provider integration\n- `@ai-sdk/anthropic`: Anthropic (Claude) provider integration\n- `zod`: Runtime type validation for request/response handling\n\n## Configuring Environment Variables\n\nCreate a `.env.local` file in your project root:\n\n```env\n# AI Provider Keys (stored securely, not used directly in production)\nOPENAI_API_KEY=your_openai_key_here\nANTHROPIC_API_KEY=your_anthropic_key_here\n\n# Vercel AI Gateway (we'll set this up next)\nAI_GATEWAY_URL=https://gateway.ai.vercel.com\n```\n\n**Important**: Never commit API keys to version control. Add `.env.local` to your `.gitignore` file (Next.js does this by default).\n\n## Setting Up Vercel AI Gateway\n\nVercel AI Gateway acts as an intelligent proxy between your application and AI providers, offering several production-critical features:\n\n### Creating Your AI Gateway\n\n1. Log in to your Vercel dashboard\n2. Navigate to the AI Gateway section\n3. Click \"Create Gateway\"\n4. Configure your gateway with:\n - **Name**: Your app identifier (e.g., \"ai-chat-app\")\n - **Providers**: Add OpenAI, Anthropic, or other providers\n - **API Keys**: Securely store your provider keys\n\n### Gateway Configuration Benefits\n\nThe AI Gateway provides:\n\n- **Centralized Key Management**: Store API keys securely on Vercel's infrastructure\n- **Provider Routing**: Automatically route requests to different providers\n- **Response Caching**: Cache identical requests to reduce costs and latency\n- **Rate Limiting**: Protect against abuse and control usage\n- **Analytics**: Monitor token usage, costs, and performance metrics\n- **Fallback Support**: Automatically switch providers if one fails\n\n## Building the Server-Side API Route\n\nWith Next.js 15 and the App Router, we'll create a route handler using React Server Components principles. Create a new file at `src/app/api/chat/route.ts`:\n\n```typescript\nimport { openai } from '@ai-sdk/openai';\nimport { anthropic } from '@ai-sdk/anthropic';\nimport { streamText } from 'ai';\n\n// Configure runtime for edge deployment\nexport const runtime = 'edge';\n\nexport async function POST(req: Request) {\n try {\n const { messages, model = 'gpt-4-turbo' } = await req.json();\n\n // Validate input\n if (!messages || !Array.isArray(messages)) {\n return new Response('Invalid messages format', { status: 400 });\n }\n\n // Select provider based on model\n const provider = model.startsWith('claude') \n ? anthropic(model)\n : openai(model);\n\n // Stream the AI response\n const result = await streamText({\n model: provider,\n messages,\n maxTokens: 2000,\n temperature: 0.7,\n // AI Gateway configuration\n headers: {\n 'x-vercel-ai-gateway': process.env.AI_GATEWAY_URL!,\n },\n });\n\n // Return streaming response\n return result.toAIStreamResponse();\n } catch (error) {\n console.error('Chat API Error:', error);\n return new Response('Internal Server Error', { status: 500 });\n }\n}\n```\n\n### Understanding the API Route\n\nThis route handler:\n\n1. **Runs on the Edge**: Uses Vercel's edge runtime for low latency globally\n2. **Accepts POST requests**: Receives messages array and optional model selection\n3. **Validates input**: Ensures messages are properly formatted\n4. **Routes to providers**: Dynamically selects OpenAI or Anthropic based on model\n5. **Streams responses**: Returns tokens as they're generated for better UX\n6. **Uses AI Gateway**: Routes through Vercel's gateway for all the benefits discussed earlier\n\n## Creating the Chat UI with Server Components\n\nNow let's build the user interface. Create `src/app/page.tsx`:\n\n```typescript\n'use client';\n\nimport { useChat } from 'ai/react';\nimport { useState } from 'react';\n\nexport default function ChatPage() {\n const [selectedModel, setSelectedModel] = useState('gpt-4-turbo');\n \n const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({\n api: '/api/chat',\n body: {\n model: selectedModel,\n },\n });\n\n return (\n

\n AI Chat Assistant\n

\n Powered by Next.js 15, Server Components, and Vercel AI Gateway\n

\n\n {/* Model Selector */}\n

\n \n Select Model\n \n setSelectedModel(e.target.value)}\n className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={isLoading}\n >\n \n \n \n \n \n

\n\n {/* Messages Container */}\n

\n {messages.length === 0 ? (\n

Start a conversation by typing a message below...

\n ) : (\n

\n {messages.map((message) => (\n \n \n

{message.content}

\n ))}\n {isLoading && (\n

\n )}\n

\n\n {/* Error Display */}\n {error && (\n

Error: {error.message}

\n )}\n\n {/* Input Form */}\n

\n );\n}\n```\n\n### UI Component Breakdown\n\nThe chat interface includes:\n\n1. **Model selector**: Switch between different AI models in real-time\n2. **Messages display**: Shows conversation history with distinct styling for user and AI messages\n3. **Loading states**: Visual feedback during API calls\n4. **Error handling**: Displays errors gracefully to users\n5. **Input form**: Clean, accessible message input with submit handling\n\nThe `useChat` hook from Vercel AI SDK handles:\n- Message state management\n- Streaming response handling\n- Automatic UI updates as tokens arrive\n- Error states and retry logic\n\n## Implementing Advanced Features\n\n### Adding Response Caching\n\nModify your API route to leverage AI Gateway's caching capabilities:\n\n```typescript\nconst result = await streamText({\n model: provider,\n messages,\n maxTokens: 2000,\n temperature: 0.7,\n headers: {\n 'x-vercel-ai-gateway': process.env.AI_GATEWAY_URL!,\n // Enable caching for identical requests\n 'x-vercel-ai-cache': 'hit',\n // Cache for 1 hour\n 'x-vercel-ai-cache-ttl': '3600',\n },\n});\n```\n\nThis configuration:\n- Caches responses for identical prompts\n- Reduces API costs significantly\n- Improves response times for common queries\n- Automatically invalidates after TTL expires\n\n### Adding Rate Limiting\n\nProtect your application from abuse by implementing rate limiting. Create `src/app/api/chat/middleware.ts`:\n\n```typescript\nimport { NextResponse } from 'next/server';\nimport type { NextRequest } from 'next/server';\n\n// Simple in-memory rate limiter (use Redis in production)\nconst rateLimits = new Map();\n\nexport function rateLimit(req: NextRequest, maxRequests = 10, windowMs = 60000) {\n const ip = req.ip || 'unknown';\n const now = Date.now();\n \n const userLimit = rateLimits.get(ip);\n \n if (!userLimit || now > userLimit.resetTime) {\n rateLimits.set(ip, { count: 1, resetTime: now + windowMs });\n return true;\n }\n \n if (userLimit.count >= maxRequests) {\n return false;\n }\n \n userLimit.count++;\n return true;\n}\n```\n\nUpdate your route handler to use the rate limiter:\n\n```typescript\nimport { rateLimit } from './middleware';\n\nexport async function POST(req: Request) {\n // Check rate limit\n if (!rateLimit(req as any)) {\n return new Response('Rate limit exceeded', { status: 429 });\n }\n \n // ... rest of your code\n}\n```\n\n### Adding System Prompts and Context\n\nEnhance your AI responses by adding system prompts:\n\n```typescript\nconst result = await streamText({\n model: provider,\n messages,\n system: `You are a helpful AI assistant. You provide accurate, concise responses.\n Always be respectful and professional. If you don't know something, admit it.`,\n maxTokens: 2000,\n temperature: 0.7,\n});\n```\n\n## Deploying to Production\n\n### Preparing for Deployment\n\n1. **Update your environment variables** in Vercel dashboard:\n - Navigate to your project settings\n - Add all environment variables from `.env.local`\n - Ensure AI Gateway URL is correctly configured\n\n2. **Optimize your build**:\n\n```json\n// next.config.js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n serverActions: true,\n },\n // Enable production optimizations\n compress: true,\n poweredByHeader: false,\n // Security headers\n async headers() {\n return [\n {\n source: '/:path*',\n headers: [\n {\n key: 'X-DNS-Prefetch-Control',\n value: 'on'\n },\n {\n key: 'X-Frame-Options',\n value: 'SAMEORIGIN'\n },\n {\n key: 'X-Content-Type-Options',\n value: 'nosniff'\n },\n ],\n },\n ];\n },\n};\n\nmodule.exports = nextConfig;\n```\n\n### Deploying to Vercel\n\nDeploying is straightforward with Vercel:\n\n```bash\n# Install Vercel CLI\nnpm i -g vercel\n\n# Login to Vercel\nvercel login\n\n# Deploy\nvercel --prod\n```\n\nAlternatively, connect your GitHub repository to Vercel for automatic deployments on every push.\n\n## Monitoring and Analytics\n\nOnce deployed, leverage Vercel AI Gateway's analytics dashboard to monitor:\n\n- **Request volume**: Track usage patterns over time\n- **Token consumption**: Monitor costs across different models\n- **Response times**: Identify performance bottlenecks\n- **Error rates**: Catch and fix issues quickly\n- **Cache hit rates**: Measure caching effectiveness\n\nAccess these metrics through your Vercel dashboard under the AI Gateway section.\n\n## Performance Optimization Tips\n\n### 1. Implement Streaming Properly\n\nStreaming responses improves perceived performance dramatically:\n\n```typescript\n// Client-side: useChat automatically handles streaming\nconst { messages } = useChat({\n api: '/api/chat',\n // Optional: custom streaming handler\n onResponse(response) {\n console.log('Stream started');\n },\n onFinish(message) {\n console.log('Stream completed', message);\n },\n});\n```\n\n### 2. Optimize Message History\n\nLimit conversation context to reduce token usage:\n\n```typescript\nconst result = await streamText({\n model: provider,\n // Only send last 10 messages\n messages: messages.slice(-10),\n maxTokens: 2000,\n});\n```\n\n### 3. Use Edge Runtime\n\nThe edge runtime provides global low latency:\n\n```typescript\n// Ensures your API runs on edge locations closest to users\nexport const runtime = 'edge';\n```\n\n### 4. Implement Progressive Enhancement\n\nEnsure basic functionality works without JavaScript:\n\n```typescript\n// Add no-js fallback\nexport default function ChatPage() {\n return (\n \n {/* ... rest of component */}\n );\n}\n```\n\n## Security Best Practices\n\n### 1. Never Expose API Keys Client-Side\n\nAlways keep API keys on the server:\n\n```typescript\n// ✅ GOOD: Keys stay on server\nexport async function POST(req: Request) {\n const apiKey = process.env.OPENAI_API_KEY;\n // Use key securely server-side\n}\n\n// ❌ BAD: Never do this\nconst apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;\n```\n\n### 2. Validate and Sanitize Input\n\nAlways validate user input:\n\n```typescript\nimport { z } from 'zod';\n\nconst messageSchema = z.object({\n messages: z.array(z.object({\n role: z.enum(['user', 'assistant', 'system']),\n content: z.string().min(1).max(10000),\n })),\n model: z.string().optional(),\n});\n\nexport async function POST(req: Request) {\n const body = await req.json();\n const validated = messageSchema.parse(body);\n // Use validated data\n}\n```\n\n### 3. Implement Content Filtering\n\nAdd content moderation to prevent abuse:\n\n```typescript\nasync function moderateContent(text: string): Promise {\n // Use OpenAI's moderation endpoint or similar\n const moderation = await openai.moderations.create({ input: text });\n return !moderation.results[0].flagged;\n}\n\nexport async function POST(req: Request) {\n const { messages } = await req.json();\n const lastMessage = messages[messages.length - 1].content;\n \n if (!(await moderateContent(lastMessage))) {\n return new Response('Content violated policies', { status: 400 });\n }\n \n // Continue processing...\n}\n```\n\n## Testing Your Application\n\n### Unit Testing the API Route\n\nCreate `src/app/api/chat/route.test.ts`:\n\n```typescript\nimport { POST } from './route';\n\ndescribe('Chat API', () => {\n it('should reject invalid messages', async () => {\n const req = new Request('http://localhost/api/chat', {\n method: 'POST',\n body: JSON.stringify({ messages: 'invalid' }),\n });\n \n const response = await POST(req);\n expect(response.status).toBe(400);\n });\n \n it('should accept valid messages', async () => {\n const req = new Request('http://localhost/api/chat', {\n method: 'POST',\n body: JSON.stringify({\n messages: [{ role: 'user', content: 'Hello' }],\n }),\n });\n \n const response = await POST(req);\n expect(response.status).toBe(200);\n });\n});\n```\n\n### Integration Testing\n\nTest the full flow with Playwright:\n\n```typescript\nimport { test, expect } from '@playwright/test';\n\ntest('chat flow', async ({ page }) => {\n await page.goto('http://localhost:3000');\n \n // Type a message\n await page.fill('input[placeholder*=\"Type your message\"]', 'Hello, AI!');\n \n // Submit\n await page.click('button[type=\"submit\"]');\n \n // Wait for response\n await page.waitForSelector('text=Hello', { timeout: 10000 });\n \n // Verify AI responded\n const messages = await page.locator('.message').count();\n expect(messages).toBeGreaterThan(1);\n});\n```\n\n## Troubleshooting Common Issues\n\n### Issue: Streaming Not Working\n\n**Solution**: Ensure you're returning the correct response format:\n\n```typescript\n// Make sure you're using toAIStreamResponse()\nreturn result.toAIStreamResponse();\n\n// Not toDataStreamResponse() or other methods\n```\n\n### Issue: Rate Limiting Errors\n\n**Solution**: Check your AI Gateway configuration and increase limits:\n\n1. Visit Vercel dashboard\n2. Go to AI Gateway settings\n3. Adjust rate limits per endpoint\n\n### Issue: High Latency\n\n**Solution**: \n- Enable AI Gateway caching\n- Use edge runtime\n- Optimize message history size\n- Select geographically closer providers\n\n### Issue: CORS Errors\n\n**Solution**: Add CORS headers in `next.config.js`:\n\n```typescript\nasync headers() {\n return [\n {\n source: '/api/:path*',\n headers: [\n { key: 'Access-Control-Allow-Origin', value: '*' },\n { key: 'Access-Control-Allow-Methods', value: 'GET,POST,OPTIONS' },\n { key: 'Access-Control-Allow-Headers', value: 'Content-Type' },\n ],\n },\n ];\n}\n```\n\n## Extending Your Application\n\n### Adding Voice Input\n\nIntegrate Web Speech API for voice-to-text:\n\n```typescript\n'use client';\n\nimport { useState } from 'react';\n\nexport function VoiceInput({ onTranscript }: { onTranscript: (text: string) => void }) {\n const [isListening, setIsListening] = useState(false);\n \n const startListening = () => {\n const recognition = new (window as any).webkitSpeechRecognition();\n recognition.continuous = false;\n recognition.interimResults = false;\n \n recognition.onresult = (event: any) => {\n const transcript = event.results[0][0].transcript;\n onTranscript(transcript);\n setIsListening(false);\n };\n \n recognition.start();\n setIsListening(true);\n };\n \n return (\n \n );\n}\n```\n\n### Adding Image Understanding\n\nEnable vision capabilities with GPT-4 Vision:\n\n```typescript\nconst result = await streamText({\n model: openai('gpt-4-vision-preview'),\n messages: [\n {\n role: 'user',\n content: [\n { type: 'text', text: 'What is in this image?' },\n { type: 'image_url', image_url: { url: imageUrl } },\n ],\n },\n ],\n});\n```\n\n### Adding Conversation Memory\n\nImplement persistent chat history with a database:\n\n```typescript\nimport { prisma } from '@/lib/prisma';\n\nexport async function POST(req: Request) {\n const { messages, userId } = await req.json();\n \n // Save messages to database\n await prisma.conversation.create({\n data: {\n userId,\n messages: JSON.stringify(messages),\n },\n });\n \n // Continue with AI processing...\n}\n```\n\n## Cost Optimization Strategies\n\n### 1. Leverage Caching Aggressively\n\nCache common queries to reduce API calls:\n\n```typescript\nheaders: {\n 'x-vercel-ai-cache': 'hit',\n 'x-vercel-ai-cache-ttl': '86400', // 24 hours for common queries\n}\n```\n\n### 2. Use Smaller Models When Possible\n\nDefault to efficient models and upgrade when needed:\n\n```typescript\n// Use GPT-3.5 for simple queries\nconst modelSelection = isComplexQuery(messages) \n ? 'gpt-4-turbo' \n : 'gpt-3.5-turbo';\n```\n\n### 3. Implement Smart Token Limits\n\nDynamically adjust token limits based on context:\n\n```typescript\nconst estimatedTokens = estimateTokenCount(messages);\nconst maxTokens = Math.min(2000, 4000 - estimatedTokens);\n\nconst result = await streamText({\n model: provider,\n messages,\n maxTokens,\n});\n```\n\n### 4. Monitor and Alert on Usage\n\nSet up monitoring for unexpected cost spikes:\n\n```typescript\n// In your API route\nimport { trackUsage } from '@/lib/analytics';\n\nexport async function POST(req: Request) {\n const startTime = Date.now();\n const result = await streamText(/* ... */);\n \n // Track usage metrics\n await trackUsage({\n model: selectedModel,\n tokens: result.usage.totalTokens,\n latency: Date.now() - startTime,\n cached: result.cached,\n });\n \n return result.toAIStreamResponse();\n}\n```\n\n## Conclusion\n\nYou've now built a production-ready AI chat application that leverages the best of modern web development: Next.js 15's performance optimizations, React Server Components for efficient rendering, and Vercel AI Gateway for secure, scalable AI integration.\n\n### Key Takeaways\n\n1. **Server Components** keep your application secure by handling sensitive operations server-side\n2. **AI Gateway** provides enterprise features like caching, routing, and analytics out of the box\n3. **Streaming responses** dramatically improve user experience by showing progress in real-time\n4. **Edge runtime** ensures low latency globally\n5. **Proper architecture** makes your app maintainable, testable, and scalable\n\n### Next Steps\n\nConsider enhancing your application with:\n\n- **Authentication**: Add user accounts with NextAuth.js\n- **Conversation persistence**: Store chat history in a database\n- **Advanced features**: Implement RAG (Retrieval-Augmented Generation), function calling, or multi-modal inputs\n- **Custom UI**: Add markdown rendering, code highlighting, and rich media support\n- **Analytics**: Integrate deeper analytics for user behavior and model performance\n- **A/B testing**: Test different models and prompts to optimize responses\n\nThe foundation you've built is solid and ready for production. As AI technology evolves, Vercel AI Gateway will continue adding new capabilities, and your architecture will be ready to take advantage of them.\n\n### Resources\n\n- [Next.js 15 Documentation](https://nextjs.org/docs)\n- [Vercel AI SDK Documentation](https://sdk.vercel.ai/docs)\n- [Vercel AI Gateway Guide](https://vercel.com/docs/ai-gateway)\n- [Example GitHub Repository](https://github.com/vercel/ai)\n\nHappy building, and welcome to the future of AI-powered web applications!"

05, January 2026

From Idea to Prod: Build a Streaming AI App with Next.js 15, Server Components, and Vercel AI Gateway

Product

Company

Support

Legal