AI
AI SDK Patterns
Introducing Composer

AI SDK Patterns
that compose into apps

16 open-source AI SDK patterns — primitives, then the agent loop. Chat, tools, HITL, RAG, MCP. Pick patterns, generate a full-stack Next.js app.

Browse patternsCompose

New here? Learn to build agents from first principles

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

Start with the agent loop

10 patterns that cover calling a model, giving it tools, and stopping for a human. Compose them into one app.

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 generateText with Output.object.

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 stopWhen: stepCountIs() and automatic tool result forwarding.

agentsadvanced3 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

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
AI

RAG Pipeline

Popular

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

toolsadvanced4 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
[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

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.dev/r/streaming-chat
Open Composer

100% open source — no accounts, no paywalls