What We're Building
In this tutorial, you'll build a production-ready AI-powered application from scratch using Next.js 15, the Vercel AI SDK, and Claude. The app will include:
- AI Chat Interface: Real-time streaming chat with Claude
- Document Analysis: Upload PDFs and ask questions about them
- Structured Output: AI generates structured data (JSON) from natural language
- Tool Calling: AI can perform actions (search, calculate, fetch data)
- Authentication: User accounts with NextAuth.js
- Database: PostgreSQL with Drizzle ORM
- Deployment: Production deployment on Vercel
Prerequisites: Basic React/TypeScript knowledge. We'll use AI coding tools (Cursor or Claude Code) to speed up development — you'll see real-world AI-assisted development in action.
Time estimate: 3-4 hours for the complete build. With AI coding tools, many of the boilerplate steps take seconds instead of minutes.
Project Setup and Core Architecture
Step 1: Create the Next.js project
Run `npx create-next-app@latest ai-app --typescript --tailwind --app --src-dir` to scaffold the project.
Step 2: Install dependencies
Key packages: - `ai` (Vercel AI SDK) — unified interface for LLM providers - `@ai-sdk/anthropic` — Claude provider - `drizzle-orm` + `@vercel/postgres` — database - `next-auth` — authentication - `zod` — schema validation for structured output
Step 3: Architecture overview
The app follows a clean architecture: ``` src/ app/ api/chat/route.ts — Chat API with streaming api/analyze/route.ts — Document analysis endpoint (chat)/page.tsx — Main chat interface (auth)/login/page.tsx — Authentication components/ ChatMessages.tsx — Message display with markdown ChatInput.tsx — Input with file upload lib/ ai.ts — AI client configuration db.ts — Database connection tools.ts — AI tool definitions ```
Key architectural decisions: - Server Components for static content, Client Components for interactive chat - API routes for AI calls (never expose API keys to the client) - Streaming responses for instant perceived performance
Ready to Master AI?
Join 2,500+ professionals who transformed their careers with CodeLeap's 8-week AI Bootcamp.
Building the AI Chat with Streaming
The API Route (`app/api/chat/route.ts`):
Using the Vercel AI SDK, the chat API route is remarkably simple: - Import `streamText` from `ai` and `anthropic` from `@ai-sdk/anthropic` - Define a POST handler that receives messages from the client - Call `streamText()` with the model (`claude-sonnet-4-5-20250514`), system prompt, and messages - Return the streaming response with `result.toDataStreamResponse()`
The system prompt defines your AI's personality, knowledge boundaries, and behavior. This is where you configure what the AI can and cannot do.
The Client Component (`components/ChatInterface.tsx`):
The Vercel AI SDK provides the `useChat()` hook that handles: - Message state management - Streaming response handling - Loading states and error handling - Automatic message history
Your UI simply renders messages and provides an input — the SDK handles the hard parts.
Adding markdown rendering: Install `react-markdown` and `remark-gfm` to render AI responses with proper formatting — code blocks, tables, lists, and bold text.
Streaming UX tip: Show a subtle typing indicator while the AI is responding, and animate messages appearing character by character.
Tool Calling and Structured Output
Tool calling makes your AI app actually useful:
Define tools using Zod schemas: - `searchDatabase`: Queries your PostgreSQL database based on natural language - `calculateMetrics`: Performs business calculations (ROI, growth rates, forecasts) - `fetchWebData`: Retrieves live data from external APIs - `generateReport`: Creates structured reports from conversation context
The Vercel AI SDK makes tool calling declarative — define the tool's name, description, parameters (Zod schema), and execute function. The AI automatically decides when to use each tool.
Structured output with `generateObject()`:
Instead of free-form text, get AI to output structured JSON: - Define a Zod schema for the expected output - Call `generateObject()` with the schema and prompt - Get type-safe, validated data back
Use cases: - Extract structured data from documents (names, dates, amounts) - Generate form values from natural language descriptions - Create database entries from conversational input
Production considerations: - Rate limit your API routes (use `upstash/ratelimit`) - Add input validation and output sanitization - Implement request timeouts for long-running tool calls - Log all AI interactions for debugging and audit
Deploy with `vercel deploy` — your AI app is live in production with edge network distribution, automatic scaling, and zero-config SSL.