Production-ready AI components for the modern web

This is the most basic way to talk to AI. You send a question or instruction (the prompt), wait for the AI to think, and get back a complete answer all at once. It's like texting someone — you send the message, wait, then get their full reply. The 'usage' tells you how many tokens (roughly 4 characters = 1 token) were used, which matters for billing.

• 1.
  Email Writer — Paste a rough draft, get back a polished professional email instantly
• 2.
  Code Explainer — Drop in code, get a plain-English explanation of what it does
• 3.
  Product Description Generator — Input product details, get SEO-optimized descriptions for your store

useChat is like a magic box that handles everything annoying about building a chat: it remembers all messages, streams responses, handles the loading state, manages the input field, and even lets users stop mid-response. Without it, you'd write 100+ lines of code. With it, you write 10. The hook talks to a /api/chat route you create on your server.

• 1.
  Customer Support Bot — Build a 24/7 AI assistant that answers questions about your product
• 2.
  AI Tutor — Create a learning companion that explains concepts and answers follow-up questions
• 3.
  Interview Practice App — Build a mock interviewer that asks questions and gives feedback on answers

This is generateObject() but with live updates. Instead of waiting for the whole JSON to be ready, each field appears as soon as it's generated. Think of a form that fills itself in one field at a time while you watch. The skeleton loading states can show exactly which fields are still 'thinking'. Users see progress instead of staring at a spinner.

• 1.
  AI Form Auto-Fill — User describes what they want, form fields populate one-by-one in real-time
• 2.
  Live Data Dashboard — Generate analytics summaries where each metric appears as it's calculated
• 3.
  Character Creator — AI generates RPG character stats, abilities, and backstory field-by-field

Server Actions are functions that run on your server but you can call them like regular functions from your React components. The magic: they can STREAM data back. So instead of creating a separate API route, you just write a function with 'use server' at the top, and call it from a button click. createStreamableValue lets you send chunks of text as they're generated, making your UI feel instant.

• 1.
  One-Click Report Generator — Button that generates a full analysis report streaming directly into the page
• 2.
  Form with AI Enhancement — Submit a form, server action processes it AND adds AI-generated suggestions inline
• 3.
  Real-time Translation Widget — Type in one language, see the streaming translation appear below instantly

AI responses aren't just text anymore. A single message might contain: text, a code block, an image, a tool being called, a file attachment, and a source citation. In AI SDK v5, each message has a 'parts' array where each part has a 'type' that tells you what it is. You switch on the type and render each part differently — text gets rendered as paragraphs, tools get a special UI, files show previews, etc.

• 1.
  Rich Chat Interface — Display code with syntax highlighting, images inline, and interactive tool UIs all in one message
• 2.
  Document Generator — AI outputs mixed content — headings, paragraphs, charts, tables — each rendered properly
• 3.
  Research Assistant with Citations — AI answers with text + clickable source links that show where info came from

Normal AI does one thing and stops. Agents are AI that can PLAN and EXECUTE multiple steps on their own. You say 'build me a landing page' and it thinks: 'First I'll research best practices, then write the hero section, then the features...' — each step using different tools. The 'stopWhen' prevents infinite loops (so it doesn't run forever). This is how AI coding assistants actually work.

• 1.
  Research Agent — Give it a topic, it searches multiple sources, cross-references, and writes a report
• 2.
  Bug Fixer — Agent that reads error logs, finds the file, understands the code, and proposes fixes
• 3.
  Content Pipeline — Automatically research → outline → write → edit → format blog posts end-to-end

Embeddings turn words into numbers that capture MEANING. 'Happy' and 'joyful' become similar number sequences, while 'happy' and 'refrigerator' are very different. This lets you search by concept instead of exact keywords. When someone searches 'cheap flights' your app can also find results about 'budget travel' and 'affordable airfare' because they're mathematically close. It's how AI 'understands' language.

• 1.
  Smart Search Bar — Search your docs by meaning — 'how to cancel' finds 'subscription management' pages
• 2.
  Recommendation Engine — Find similar products, articles, or users based on semantic similarity
• 3.
  Duplicate Detector — Find near-duplicate support tickets even when worded completely differently

'Multimodal' means the AI can see, not just read. You can send images, screenshots, PDFs, even audio files alongside your text prompt. The AI looks at the image and can describe it, answer questions about it, or extract information. It's the same models behind 'upload a photo and ask questions' features you see in ChatGPT and Claude.

• 1.
  Screenshot-to-Code — Upload a design screenshot, get working HTML/CSS/React code generated
• 2.
  Food Calorie Tracker — Snap a photo of your meal, AI estimates calories and nutritional info
• 3.
  Accessibility Alt-Text Generator — Bulk generate accurate image descriptions for your entire website

Middleware is code that runs BEFORE your actual API route. Every request to /api/ai/* passes through this first. You can check if the user is logged in, add tracking headers, block certain countries, log everything — all without touching your actual AI code. It runs at the 'edge' (close to users) so it's super fast. Think of it as a bouncer checking IDs before letting people into the club.

• 1.
  Geographic Blocking — Block AI access from certain countries for compliance or cost reasons
• 2.
  Request Logging — Log every AI request with timestamps, IPs, and unique IDs for debugging
• 3.
  A/B Testing — Route 10% of users to a new AI model, 90% to the stable one

'Edge' means running your code on servers spread across the world — close to your users. A user in Tokyo hits a Tokyo server, not one in Virginia. The 'runtime = edge' flag tells Vercel to deploy this route globally. Your code can't use Node.js-specific stuff (like fs for file system), but in exchange you get crazy fast response times. The AI call still goes to OpenAI's servers, but YOUR code responds instantly.

• 1.
  Global AI App — Serve users in 100 countries with <50ms latency to your server
• 2.
  Real-time AI Assist — Typing suggestions that appear instantly, not after network delay
• 3.
  Competitive Gaming Bot — AI opponent responses so fast they feel like local computation

AI calls cost money. Without rate limiting, one user (or bot) could make 1000 requests and blow your budget. Rate limiting says 'each user can only make 10 requests per minute'. Upstash Redis stores the count in a super-fast database. 'Sliding window' means it's a rolling 60-second window, not fixed minutes — smoother and fairer than simple counting.

• 1.
  Freemium Tier Control — Free users get 10 AI requests/day, paid users get unlimited
• 2.
  API Abuse Prevention — Stop scrapers and bots from draining your AI budget
• 3.
  Fair Usage Enforcement — Prevent one power user from hogging all your server resources

The onFinish callback fires when the AI is completely done responding. It gives you usage stats: how many tokens were in the prompt, how many in the response. You can log this to a database, send to analytics tools, or use for billing. Tokens are how AI companies charge you, so tracking them is essential for understanding costs and preventing surprises.

• 1.
  Cost Dashboard — See exactly how much you're spending per day, week, feature, or user
• 2.
  Slow Query Detector — Find prompts that take too long and optimize or cache them
• 3.
  Per-User Billing — Charge customers based on their actual AI usage, not flat fees

Vercel Blob is simple file storage — upload images, PDFs, audio, whatever. The 'put' function uploads the file and gives you a URL. That URL can then be passed to AI for analysis. Unlike temporary URLs that expire, Blob gives you permanent storage. Perfect for when users upload files you need to reference later or process with AI.

• 1.
  Document Analyzer — Users upload contracts, AI extracts key terms and summarizes them
• 2.
  Image-Based Search — Upload product photos, AI describes them for searchable text database
• 3.
  Audio Transcription Service — Upload podcast episodes, AI transcribes and generates show notes

MCP (Model Context Protocol) is a standard way for AI to connect to external services. Instead of writing custom code for each integration, MCP servers provide a plug-and-play interface. Connect the Linear MCP and your AI instantly gets tools like 'create_issue', 'list_issues', etc. Anthropic created the standard, and companies are building MCP servers for their products. One protocol, hundreds of integrations.

• 1.
  AI Project Manager — 'Create a bug for the login issue' → AI creates Linear issue with proper labels and assignee
• 2.
  Smart Documentation Bot — AI searches and updates Notion docs based on conversation, no manual navigation
• 3.
  Error Resolution Assistant — AI checks Sentry for recent errors, analyzes stack traces, and suggests fixes

Computer Use gives AI eyes and hands. It takes screenshots to SEE what's on screen, then clicks, types, and scrolls to INTERACT. Playwright is a browser automation library — it runs a real Chrome instance that AI controls like a human would. The AI looks at a screenshot, decides 'I need to click that button', and sends the coordinates. It can browse websites, fill forms, anything a human could do.

• 1.
  Web Scraper on Steroids — AI navigates complex sites, handles logins, clicks through pagination, extracts data
• 2.
  Automated Testing — 'Test the checkout flow' → AI clicks through your app and reports bugs it finds
• 3.
  AI Personal Assistant — 'Book me a flight to Tokyo' → AI opens travel site, searches, selects, and books

Property editors let non-coders tweak components without touching code. Drag a slider → padding changes → you see it instantly. It's how Figma, Webflow, and v0's Design Mode work. Under the hood, it's just React state connected to component props. The slider updates state, state updates the prop, prop updates the visual. Two-way binding between UI and code.

• 1.
  v0-style Design Mode — Click any element, adjust padding/colors/fonts with sliders instead of typing CSS
• 2.
  CMS Component Builder — Marketing team edits hero sections, button colors, fonts — no developer needed
• 3.
  Theme Customizer — Let users tweak your app's appearance — spacing, roundness, colors — and save preferences

Export turns your visual design into actual code you can use. Prettier formats it nicely. TSX for React projects, JSON for data structures, PNG for screenshots/mockups, GitHub to push directly to a repo. The key is converting the internal component structure (objects, props, children) into valid, readable, production-ready code that developers can actually use.

• 1.
  v0-style Code Download — Design it visually, click Export, get clean React code you can drop into your project
• 2.
  Design Handoff — Designer creates components, exports JSON spec, developer imports into codebase
• 3.
  Component Library Generator — Build components visually, export to GitHub, auto-publish as npm package