Introducing Composer

AI SDK Patterns
that compose into apps

23+ open-source, composable AI SDK patterns — chat, agents, tools, workflows. Pick patterns, generate a full-stack Next.js app.

23
Patterns
5
Categories
3
Providers
100%
Free & OSS

Provider-agnostic — works with any AI SDK provider

Anthropic
OpenAI
Google

Interactive feature showcase

Explore core AI SDK capabilities with animated examples. Click any card to see the actual pattern implementation.

23 patterns, free and composable

Use individually or combine them into one app with the Composer

View all
Hello!

Streaming Chat

Stream text responses from AI models in real-time using streamText and the useChat hook.

chatbeginner3 files
{
"name": "..."
"score": 42
}

Structured Output

Generate typed, validated JSON data using Zod schemas and the generateObject function.

corebeginner2 files
AI
fn()
api()
db()

Tool Calling

Let the AI model call functions and use external tools with the multi-step tool loop.

agentsintermediate2 files
Show weather
72°F

Generative UI

Render dynamic React components from AI tool calls using streamText and useChat.

coreintermediate2 files
1
2
3
think → act → repeat

Multi-Step Agent

Build an agent that orchestrates multiple tool calls in sequence, using the AI SDK's maxSteps and automatic tool result forwarding.

agentsadvanced3 files

Web Search Agent

Integrate third-party search APIs (Tavily, Exa) with the AI SDK to build a grounded search agent with source citations.

toolsintermediate3 files
Approve action?
✓ Yes
✕ No

Human-in-the-Loop

Pause AI execution to get human approval before executing sensitive tool calls. Uses tool confirmation flow with the AI SDK.

workflowsintermediate2 files
AI

RAG Pipeline

Retrieval-Augmented Generation: embed documents, store in a vector database, and retrieve context for grounded AI responses.

toolsadvanced4 files
{ }

JSON Renderer

AI generates structured JSON data that's automatically rendered as interactive visual components — cards, charts, tables, and more.

coreadvanced3 files

Markdown Chat

A polished chat interface with rich markdown rendering — code blocks with syntax highlighting, tables, lists, headings, and inline formatting.

chatintermediate2 files
Thinking...

Reasoning Display

Show the AI's chain-of-thought reasoning in a collapsible thinking section, then display the final answer — like Claude's extended thinking.

chatintermediate2 files
AI

Text Generation

Basic non-streaming text generation with generateText. Submit a topic and get a generated paragraph — the simplest AI SDK pattern.

corebeginner2 files
A sunset...

Image Generation

Generate images from text prompts using generateImage. Enter a description, click generate, and see the AI-created image.

coreintermediate2 files
{
"title": "..."
"tags": [...]
"body":
}

Streaming Object

Stream structured JSON output in real-time using streamText with Output.object and a Zod schema. Watch a recipe build up field-by-field as the AI generates it.

coreintermediate2 files

Code Artifact

AI-powered code generation with syntax highlighting and copy support. Describe what you need, and the AI generates clean, runnable code.

coreadvanced2 files
?
R
code
math
write

Routing Agent

Routes user queries to specialized sub-agents based on content analysis. A classifier agent determines intent and delegates to the appropriate specialist.

agentsadvanced2 files
O
A
B
C
merged

Orchestrator Agent

A parent agent that decomposes complex tasks, delegates subtasks to specialized child agents via tools, and merges their results into a cohesive response.

agentsadvanced3 files
G
E
O
generate → evaluate → optimize

Evaluator-Optimizer

Generate-evaluate-iterate loop that self-improves output quality. Generates a draft, evaluates it against criteria, and regenerates until the quality threshold is met.

agentsadvanced2 files
1
2
3
4
research → summarize → translate → format

Sequential Workflow

Chain multiple AI calls in sequence, passing the output of one step as input to the next. Implements a research-summarize-translate-format pipeline.

workflowsintermediate2 files
IN
task A
task B
task C
M

Parallel Workflow

Run multiple AI calls concurrently with Promise.all and merge the results. Performs sentiment analysis, entity extraction, and summarization in parallel.

workflowsadvanced2 files
[1]
[2]

Chat with Citations

A chat interface that includes inline source citations with expandable source cards. Responses include numbered references that link to source details.

chatintermediate2 files
Describe form...

Form Generator

AI generates dynamic forms from natural language descriptions using generateObject with Zod schemas. Describe a form in plain English and get a fully rendered, interactive form.

coreadvanced2 files

CSV Editor

AI-assisted tabular data editing. Paste CSV data, ask AI to transform, analyze, or clean it, and see the results in an editable table with AI suggestions.

coreadvanced2 files

One pattern or many — your call

Install a single pattern via CLI, or use the Composer to merge several into one integrated Next.js app.

npx shadcn add https://ai-sdk-patterns.vercel.app/r/streaming-chat
Open Composer

100% open source — no accounts, no paywalls