Patterns Overview

Patterns are production-ready AI implementations you can copy into your Next.js project. Each pattern solves a specific problem — generating text, building chat UIs, orchestrating agents, integrating tools.

How Patterns Work

Every pattern is a self-contained implementation with:

• Preview — live interactive demo in the browser
• Source code — all files needed (components, API routes, utilities)
• CLI install — one command to scaffold it into your project

Install via CLI

pnpm
npmyarnbun
Copy
pnpm dlx shadcn add https://shadcnagents.com/r/{pattern-slug}

For example:

Copy
# Add a basic chat interface
npx shadcn add https://shadcnagents.com/r/ai-elements-chat
 
# Add text streaming
npx shadcn add https://shadcnagents.com/r/basics-stream-text
 
# Add web search tool
npx shadcn add https://shadcnagents.com/r/tool-websearch-claude

Manual Installation

1. Visit any pattern page at /patterns
2. Switch to the Code tab
3. Copy the source files into your project
4. Install dependencies listed in the pattern

Categories

Patterns are organized into 9 categories based on what you're building.

Getting Started

The fundamentals. Text generation, streaming, image generation, speech, transcription, tool calling, and agent setup.

Chat & Conversations

Chat interfaces and display elements for building conversational AI products.

Agents & Orchestration

Multi-agent patterns for routing, orchestration, and parallel execution.

Human in the Loop

Patterns for human oversight, approval flows, and user input gathering.

Tools & Integrations

Web search, scraping, and file processing integrations.

Workflows & Pipelines

Sequential, parallel, and durable workflow patterns.

Artifacts & Generation

Structured output generation — tables, charts, JSON rendering.

Marketing & Landing

Pre-built sections for AI product landing pages.

Full Examples

Complete applications combining multiple patterns.

Architecture

Every AI pattern follows the same structure:

components/stacks/{pattern-name}/
├── {pattern-name}.tsx     # Main component (client-side)
├── actions.ts             # Server actions (AI SDK calls)
└── types.ts               # TypeScript types (optional)

Client component — handles UI, state, user interaction. Uses useChat, useCompletion, or custom hooks from the AI SDK.

Server actions — makes the actual AI API calls using generateText, streamText, tool, or agent from the Vercel AI SDK. Runs server-side, keeps API keys secure.

Switching Providers

All patterns use the Vercel AI SDK's provider abstraction. Swap models in one line:

Copy
// Anthropic
import { anthropic } from "@ai-sdk/anthropic"
const model = anthropic("claude-sonnet-4-20250514")
 
// OpenAI
import { openai } from "@ai-sdk/openai"
const model = openai("gpt-4o")
 
// Google
import { google } from "@ai-sdk/google"
const model = google("gemini-2.0-flash")

Every pattern that calls an AI model accepts a model parameter. Change the import and model string — everything else stays the same.