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
مستعد لإتقان الذكاء الاصطناعي؟
انضم إلى أكثر من 2,500 محترف غيّروا مسارهم المهني مع معسكر CodeLeap.
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.