Introducing Composer

AI SDK Patterns
that compose into apps

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

26
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.

26 patterns, free and composable

Use individually or combine them into one app with the Composer

View all
Hello!

Streaming Chat

Popular

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

Popular

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

Popular

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

Popular

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

toolsadvanced4 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
A sunset...

Image Generation

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

coreintermediate2 files

Code Artifact

Popular

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

coreadvanced2 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
AI
calc()
search()

Durable Multi-Turn Chat Agent

Stateful conversation agent with Workflow DevKit that persists messages across pauses/resumes, calls tools, and streams responses using DurableAgent.

workflowsadvanced3 files
AI
MCP
fn()
api()

MCP Client Agent

New

Connect to any Model Context Protocol server, discover tools dynamically, and let the AI use them in a chat interface. Includes a demo MCP server with weather and calculator tools.

toolsadvanced4 files
Show top sales
SELECT *

Text-to-SQL

New

Natural language to SQL: ask questions about data in plain English, the AI generates and executes SQL queries, and displays results in a table. Uses an in-memory SQLite database with sample data.

toolsadvanced4 files
What is this?

Multi-Modal Chat

New

Chat with images, files, and text in a single conversation. Drag-and-drop or paste images for vision analysis, attach files for context, and get AI responses that understand all modalities.

chatintermediate3 files
Agent
generate()
stream()

Mastra Agent

New

Create a Mastra agent with tools, register it in a Mastra instance, and call it with generate() or stream().

agentsbeginner4 files
{
"id": "search"
"input": z.object()
"execute": async →
}

Mastra Tool

New

Create typed tools with Zod schemas that agents can call. Includes input validation, output schemas, and error handling.

toolsbeginner2 files
1
2
3
fetch → summarize → format

Mastra Workflow

New

Build multi-step workflows with createStep and createWorkflow. Chain steps with .then(), run in parallel, or branch conditionally.

workflowsintermediate2 files
🧠
history
working
semantic

Mastra Memory

New

Add conversation memory to agents with message history, working memory for user preferences, and semantic recall.

agentsintermediate2 files
embed
search

Mastra RAG

New

Build a retrieval-augmented generation pipeline with document chunking, vector embeddings, and semantic search.

agentsadvanced2 files
S
R
W

Mastra Multi-Agent

New

Compose multiple agents into a network where a router agent delegates tasks to specialized sub-agents.

agentsadvanced4 files
1
3
prepare → approve → execute

Mastra Human-in-the-Loop

New

Suspend a workflow mid-execution to collect human approval, then resume with the decision. Essential for agent guardrails.

workflowsintermediate2 files
💬
📝
observe

Mastra Observational Memory

New

Use background agents to maintain a dense observation log that replaces raw message history. Keeps context small while preserving long-term memory.

agentsadvanced1 files
{
"name": string
"email": email
"topics": string[]
}

Mastra Structured Output

New

Force agents to return typed, validated JSON using Zod schemas. Perfect for extraction, classification, and data transformation tasks.

agentsbeginner2 files
input
🛡
output

Mastra Guardrails

New

Add input/output guardrails to agents for content filtering, PII detection, and response validation before they reach users.

agentsintermediate1 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