Use Layers Gateway

Track usage, costs, and billing automatically

AI SDK 6 Playground

Pattern-Based AI Development

Your complete reference for production-ready AI patterns. Test live demos, copy working code, and ship faster with battle-tested implementations.

Developed by Mirror Factory

What is a Pattern?

Each pattern in this playground is a complete, working implementation that you can use as a reference or copy directly into your project.

UI Component

Interactive React component with model selection and results display

API Route

Next.js API route with actual AI SDK implementation

Code Examples

Copy-pastable code showing exactly how it works

Using Patterns in Your Own Application

This playground is your reference library - test here, copy to your app

What This Playground Is For

Think of this as a working reference library for Vercel AI SDK patterns. Each pattern here is a complete, tested implementation. You can:

• Test patterns live - Try different models and inputs before using in your app
• See the actual code - Code tabs show the real API route that runs
• Verify it works - Use Model Tester to confirm patterns work with your chosen model
• Copy to your project - Take the API route and customize it

What to Copy to Your App

Each pattern has an API Route - this is the file you copy. Here's what that means:

app/api/playground/structured/object/route.ts

This file contains all the AI SDK code: the Zod schema, the generateText() call, and the response handling. Copy this entire file to your app.

app/api/playground/agents/basic/route.ts

Contains the tool definition (like calculatorTool), the generateText() with maxSteps, and response formatting.

Step-by-Step: Using a Pattern

Test the pattern here first

Select a pattern, pick a model, try it. Make sure it works for your use case.

Go to the "API Route" tab

This shows the actual code from the route file - it's 1:1 with what runs.

Copy to your project

Create a new file in your app: app/api/my-feature/route.ts

Customize for your needs

Change the tool, schema, prompts, or response format to match your use case.

Call from your frontend

Use fetch('/api/my-feature', ...) just like the patterns do here.

Pattern → Your App Mapping

If You Need	Use This Pattern	Copy This File
Type-safe JSON from AI	Structured Output	structured/object/route.ts
AI that uses tools	Basic Agent	agents/basic/route.ts
Multiple AI agents working together	Sub-Agent Orchestrator	agents/orchestrator/route.ts
Human approval for actions	Tool Approval	human-in-loop/approval/route.ts
Generate images	Text-to-Image	image/generate/route.ts
AI reasoning/thinking	Thinking Models	reasoning/thinking/route.ts
Generate UI from prompts	JSON Canvas	artifacts/canvas/route.ts + renderers

Key Insight: The code in the "API Route" tab is the actual code that runs when you click "Generate" in the demo. It's extracted from the real route file at build time - not a simplified example. What you see is what you get.

Supported Providers

40 models across 7 providers, all accessible through the Vercel AI Gateway

Anthropic

3 models

OpenAI

11 models

Google

10 models

Perplexity

3 models

Morph

2 models

Black Forest Labs

9 models

Recraft

2 models

Available Patterns

17 patterns across 11 categories - select from the sidebar to explore

Text Generation

Simple and streaming text generation with any model

Simple GenerationStreaming Text

Agents

New

Tool calling, multi-step agents, and orchestration

Basic AgentSub-Agent Orchestrator

Human-in-the-Loop

New

Tool approval workflows for human oversight

Tool Approval

Structured Outputs

Generate typed JSON objects with Zod schemas

Object Generation

Multi-modal

Image, audio, video, and document understanding

Vision (Images)Audio TranscriptionAudio Input (Gemini)Video Input (Gemini)PDF Processing (Gemini)

Web Search

Real-time web search with Perplexity models

Perplexity Search

Artifacts

New

JSON Canvas for structured UI generation

JSON Canvas

Reasoning

New

Extended thinking with Claude, GPT, and Gemini

Thinking Models

Prompt Caching

WIP

Cache system prompts to reduce costs and latency

Prompt Caching

MCP Integration

WIP

Model Context Protocol for external tool integration

Model Context Protocol

Image Generation

WIP

Create images with Flux, Imagen, and Gemini

Text-to-Image

1:1 Pattern Testing

Tests call the exact same API routes as the UI patterns

The Testing section runs automated tests against all patterns. Each test calls the actual pattern API route, ensuring 1:1 parity between what you see and what you test.

Tests call the same API routes as UI patterns

Model selection filters by registry capabilities

Single source of truth for all pattern definitions

Tip: Run tests after making changes to ensure nothing breaks. Check the How It Works page to understand the architecture.

Token Usage & Cost Tracking

Every API call returns usage data - tokens, cost, and tracking

All pattern routes return token usage data with every response. This allows you to track costs, monitor usage, and implement billing in your own applications.

How It Works

The AI SDK automatically tracks token usage for every API call. Our patterns expose this data in a consistent format:

// Every route returns usage data
return Response.json({
  text: result.text,        // or event, canvas, etc.
  usage: result.usage,      // Token counts
});

// Usage object contains:
{
  inputTokens: 150,         // Tokens in your prompt
  outputTokens: 75,         // Tokens in the response
  totalTokens: 225          // Total tokens used
}

Language Models

Per-token pricing: input & output tokens tracked separately

Image Models

Per-image pricing: tracks number of images generated

Guaranteed Usage Tracking:

100% token coverage across all 92+ tests

Streaming routes include usage in final SSE event

Agent routes use totalUsage for multi-step calls

Live gateway pricing from Vercel AI Gateway API

Cost Calculation: The test runner fetches live pricing from ai-gateway.vercel.sh/v1/models to calculate accurate costs. See the Model Capability tab for per-model pricing.

Getting Started

Select a Pattern

Choose from Text Generation, Agents, Structured Output, and more in the sidebar

Try the Demo

Each pattern has an interactive demo - select a model and test it live

Copy the Code

View the component and API code tabs, then copy what you need

Select Text Generation → Simple Generation in the sidebar to start