Find the right pattern for your next AI product

Agent DOCX Artifact

Download-first Word artifact pattern. The agent streams Markdown through a tool call, renders a document preview, and exports a real .docx file.

aiword+6

Agent PDF Artifact

Download-first PDF artifact pattern. The agent streams Markdown through a tool call, renders a live PDF preview, and exports a real .pdf file.

aipdf+5

Loop Control: stopWhen

Demonstrate ToolLoopAgent loop control with stopWhen. Covers stepCountIs, hasToolCall, combined conditions, and a custom StopCondition with step timeline visualization.

PrepareStep: Trim Message History

Demonstrate ToolLoopAgent prepareStep for trimming long message history. Pre-seeded 24-message conversation shows context compression on the first run with per-step trim telemetry.

aiagents+6

Dynamically configure one ToolLoopAgent per request with callOptionsSchema and prepareCall. A customer-support agent rewrites instructions, gates tools, tunes reasoning effort, and injects RAG context based on account tier and urgency.

Tool Context: experimental_context

Inject request-scoped context (user identity, database handles, session) into ToolLoopAgent tools via experimental_context, so the model never supplies sensitive identity in tool inputs.

OpenAI Prompt Caching (AI Gateway)

Lightweight ToolLoopAgent pattern for OpenAI prompt caching through Vercel AI Gateway: stable system instructions, promptCacheKey, and per-turn cachedPromptTokens metrics.

Anthropic Cache Control (AI Gateway)

Lightweight ToolLoopAgent pattern for Anthropic ephemeral cache control through Vercel AI Gateway: cached system instructions with cacheControl and reports cache read/write tokens.

Brand Mood Board Generator

Paste a website URL to extract brand signals with Firecrawl, generate a structured mood-scene brief for abstract and environmental imagery, auto-create four brand-world images, and click any result into a local edit flow.

aibranding+10

Brand Guidelines Image Generator

Paste a website URL to extract brand signals with Firecrawl, generate a structured brand-standards brief, render manual-style spreads (color, typography, grid, photography, and more), and refine any image with edit instructions.

aibranding+9

Agent Slides Artifact

Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.

aislides+5

Agent Mermaid Artifact

Template-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.

aimermaid+5

Agent Map Artifact

Template-style GeoJSON map artifact with data-mapDelta streaming, MapLibre preview and JSON source editor, GeoJSON export, in-memory versions, and quick prompts — no database persistence.

aimap+6

Canvas Draw Artifact

Excalidraw whiteboard artifact with data-whiteboardDelta streaming, uncontrolled canvas, SVG/PNG/.excalidraw export, scene templates (architecture, user flow, org chart), and in-memory versions — no database persistence.

aiexcalidraw+6

JSON Render Data Table

AI-generated data tables using json-render. Describe columns, rows, sorting, and filters — stream specs into an interactive DataTable with toolbar satellites.

json-renderdata-table+3

Agent Sheet Artifact

Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.

aispreadsheet+5

Agent Text Artifact

Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.

aimarkdown+4

Agent Code Artifact

Template-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, in-memory versions, and quick prompts — no database persistence.

aipython+5

Markdown multi-format file export

Parse markdown into H1 sections with unified and remark, then export normalized content as JSON, CSV, Markdown, HTML, PDF, or plain text in the browser.

markdownremark+6

CSV / TSV ↔ JSON tabular export

Paste CSV, TSV, or JSON arrays; detect delimiters with Papa Parse; validate rectangular rows; preview in a table; export JSON, CSV, TSV, or Markdown tables in the browser.

csvtsv+6

XLSX → CSV export

Load Excel .xlsx or .xls workbooks in the browser with SheetJS, pick a sheet, preview rows, and download CSV—with optional UTF-8 BOM and multi-sheet export.

xlsxexcel+5

Marketing agent with skills + readFile

Chat UI wired to a ToolLoopAgent that loads filesystem skills and exposes readFile on the skill sandbox—demo includes ad-creative, copywriting, and paid-ads skill packs for campaign workflows.

aiagents+4

Just Bash Skills Agent

Minimal ToolLoopAgent chat demo: on-call-style skills (incident triage + stakeholder comms) on disk, skill tool loads SKILL.md + paths, readFile pulls reference checklists and templates from the sandbox.

Prompt UI Improver

Transform short, vague UI requests into production-grade design briefs with strong visual, interaction, and implementation detail.

aiprompt-engineering+3

JSON Render Email

Generate production-ready React Email templates with live preview plus copyable HTML and plain-text output.

json-renderreact-email+3

Brand Product Placement Generator (Nano Banana)

Paste a website URL to extract brand signals with Firecrawl, generate a structured product photography brief, auto-create four Nano Banana placement images, and click any result into a local edit flow.

aibranding+8

JSON Render Three.js

AI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.

json-renderthreejs+3

JSON Render Image

Generate social cards and marketing images from natural language using @json-render/image with live spec streaming and SVG/PNG export.

json-renderimage+3

Firecrawl Brand PDF

Generate structured brand brief PDFs from any website URL using Firecrawl branding extraction and JSON Render PDF streaming.

firecrawlbranding+3

Firecrawl Landing Page Teardown PDF

Generate a conversion-focused landing page teardown PDF using one landing URL plus 2-5 competitor URLs.

firecrawlcro+3

JSON Render Remotion

AI-generated video from natural language using @json-render/remotion. Describe a video and watch it stream in as a timeline spec, then render in a Remotion Player.

json-renderremotion+3

JSON Render Shadcn

AI-generated UI using @json-render/shadcn. Describe a UI in natural language and watch it render with shadcn components.

json-rendershadcn+3

JSON Render React

AI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.

json-renderai+3

JSON Render PDF

Generate PDF documents from natural language using @json-render/react-pdf. Describe a document or refine examples to create professional PDFs with streaming spec and live preview.

json-renderpdf+3

SEO Audit

Audit any website for on-page SEO issues using Firecrawl. Scrapes a URL, then renders a full-screen report analyzing meta tags, content structure, links, keywords, and schema markup with exportable reports.

seoaudit+6

AI Wizard Brand Strategy

A full-screen AI levee interface where each stage is an adaptive interview with lock-based progression and dynamic tool-driven prompts.

aiwizard+5

Competitor Research Agent

Enter a competitor URL to get comprehensive competitive intelligence. Uses Firecrawl Map + Parallel Scrape for fast extraction (~3-5s). Analyzes positioning, pricing, features, tech stack, and generates sales battle cards.

aiagents+10

Data Analysis Agent

Upload CSV or JSON data and get AI-powered analysis with interactive visualizations. Detect patterns, correlations, outliers, and generate insights with confidence scores. Export comprehensive reports.

aiagents+10

Accessibility Audit Agent

Audit any website for WCAG 2.1 accessibility compliance using Firecrawl, then use AI tools to analyze issues by severity, check color contrast, validate heading structure, generate alt text, and create prioritized remediation plans with visual tool outputs.

aiagents+11

Reddit Product Validation Agent

Validate startup ideas with a two-phase workflow: discover relevant subreddits, then analyze pain points, existing solutions, willingness to pay, demand trends, and early adopters. Get a go/no-go scorecard with actionable insights.

Branding Agent

Extract brand design systems from any website using Firecrawl, then use AI tools to export tokens, generate color palettes, check accessibility, and analyze brand personality.

Human in the Loop Plan Builder Agent

Uses ToolLoopAgent pattern to gather requirements and generate plans. Generates markdown plans with structured todo lists.

aihuman-in-the-loop+9

@exalabs webSearch Tool

Search with Exa AI SDK's webSearch tool and Anthropic Claude Sonnet 4.5. Uses @exalabs/ai-sdk for seamless integration.

aiwebsearch+10

AI Form Generator

Generate Zod schemas from natural language descriptions using AI. Automatically creates form schemas that render interactive forms with real-time validation.

aiform-generator+4

Sub-Agent Orchestrator

Custom Agent implementation demonstrating the Agent interface abstraction with an orchestrator that routes queries to specialized sub-agents (research, analysis, support). Shows options passing and structured outputs.

Research Agent Chain

Sequential three-agent chain demonstrating structured outputs flowing between agents. Research Agent 1 gathers research, Expand Agent 2 expands research, Synthesis Agent 3 synthesizes final answer. Uses Exa tools and AI SDK 6's stabilized structured output support.

Evaluator Workflow Pattern

Demonstrates an evaluator-optimizer workflow pattern using Workflow DevKit. Features iterative improvement through AI evaluation and optimization loops.

aiworkflow+6

Orchestrator-Worker Workflow Pattern

Demonstrates an orchestrator-worker workflow pattern using Workflow DevKit. Features parallel execution of specialized workers for different change types (create, modify, delete).

Parallel Review Workflow Pattern

Demonstrates a parallel review workflow pattern using Workflow DevKit. Features concurrent code reviews (security, performance, maintainability) with result aggregation.

aiworkflow+8

Routing Workflow Pattern

Demonstrates a routing workflow pattern using Workflow DevKit. Features query classification and conditional routing to specialized handlers based on type and complexity.

Sequential Workflow Pattern

Demonstrates a sequential workflow pattern using Workflow DevKit. Features step-by-step execution with quality gates and conditional regeneration.

AI SDK Nano Banana Image Merge

Generate, edit, and merge images using Nano Banana 2.5 Flash. Create new images from text, edit existing ones with natural language, or merge two images together. Includes version history and image comparison.

aiimage-generation+9

Tool Input Lifecycle Hooks

Explore tool input lifecycle hooks: onInputStart, onInputDelta, and onInputAvailable. See how to track tool input generation in real-time during streaming.

aitools+7

Preliminary Tool Results

Return preliminary tool results using async iterables. Stream status updates during tool execution before the final result is available.

aitools+6

Tool API Context

Pass arbitrary context from generateText/streamText to tool execution via experimental_context. Access context in tool execute functions for dynamic behavior.

aitools+5

Tool Call Repair

Repair invalid tool calls using experimental_repairToolCall. Fix schema validation errors without requiring additional steps that pollute message history.

aitools+6

Dynamic Tool

Create dynamic tools with runtime-generated schemas using dynamicTool. Demonstrates unit conversion tools where schema adapts based on conversion type (temperature, length, weight, currency) and supports dynamic model selection.

aitools+8

Structured Agent Output: Output.choice

Demonstrate structured agent outputs using ToolLoopAgent with Output.choice. Constrain agent outputs to predefined choices for predictable, type-safe responses.

Structured Agent Output: Output.array

Demonstrate structured agent outputs using ToolLoopAgent with Output.array. Returns structured array output with element schema for predictable, type-safe responses.

Chat-Base Clone

A comprehensive Chatbase clone demo with widget interface, model selection, web search integration, and human-in-the-loop tool approval workflows.

aichat+8

Plan

A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.

aiplan+4

Claude Web Search Tool

Search the web with Claude AI. Includes result filtering, multiple search types, and language support.

aiwebsearch+7

Tool Approval

Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.

aitool-approval+6

HIL Needs Approval

Demonstrate tool approval with async generators. Includes real-time feedback, approval workflows, and interactive management.

HIL Inquire Multiple Choice

Gather information through AI-driven multiple choice questions. Includes approval workflows and real-time rendering.

aihuman-in-the-loop+8

HIL Inquire Text Input

Gather detailed information through AI-driven text input questions. Includes approval workflows and real-time rendering.

aihuman-in-the-loop+9

Queue

Queue management assistant using AI agents. Generate structured queues with messages, todos, and attachments through conversation.

aiqueue-management+6

HIL Tool Approval Basic

Chat assistant with human approval workflows for safe tool execution.

aihuman-in-the-loop+6

CSV Editor Artifact

Spreadsheet editor with AI chat for data analysis and manipulation. Edit tables through conversation.

aitable+7

HIL Agentic Context Builder

Build brand context through AI-guided questioning and web research. Gathers insights to create detailed brand profiles.

aihuman-in-the-loop+8

Chart Artifact

Generate burn rate charts and financial analysis through AI chat. Creates interactive visualizations from conversation.

aiartifacts+5

Exa Web Search Tool

Search with Exa's semantic API and real-time crawling. Includes live content extraction and relevance scoring.

aiwebsearch+8

Firecrawl Scrape Tool Chat

Crawl and extract content using Firecrawl's API. Includes URL processing, markdown conversion, and structured data extraction.

aiwebsearch+8

Code Block 1

Feature section with animated code block and syntax highlighting

Code Block 2

Feature section with animated code block and syntax highlighting

Code Block 3

Feature section with animated code block and syntax highlighting

Bento Layout 1

Animated bento grid for presenting install methods, integrations, and product features.

Model Comparison

Compare AI models like GPT-4, Claude, and Gemini. Includes filtering, sorting, performance metrics, and pricing data.

aimodel-comparison

Model Comparison Compact

Compare AI models in a compact table format. Includes horizontal scrolling, sortable columns, and condensed data for quick evaluation.

aimodel-comparison

Model Comparison Hover

Compare AI models with hover details for GPT-4, Claude, and Gemini. Includes filtering, sorting, and performance metrics.

aimodel-comparison

Comparison Table 1

Sortable AI model table with pricing, performance, and capability columns for side-by-side evaluation.

Integration Showcase 1

Integration cards with connection status, configuration controls, and connectivity testing.

AI Integrations Circle

Circular fan-out layout showcasing AI integrations with radiating connection lines. Features interactive hover effects, tooltips, and dynamic positioning for visual integration highlights.

Agent ROI Calculator

Interactive agent ROI calculator with labeled inputs, live savings, and mobile-friendly cost comparison.

Changelog 1

Filterable changelog with version history, release notes, and category labels.

Workflow - URL Analysis

Analyze URLs through AI prompt chaining. Scrapes content, analyzes it, and generates summaries.

Web Search Tool

Search the web using OpenAI's tool with real-time results. Includes source verification, citation tracking, and contextual answers.

aiwebsearch+1

PDF Analysis Tool

Process PDFs with AI analysis. Extract text, generate summaries, and identify key insights.

aipdf+2

AI SDK Gemini Flash Text

Generate text and analyze market research using Google's Gemini 2.5 Flash. Includes interactive charts and data visualization.

googletext-generation+8

AI SDK Nano Banana Image

Generate images using Nano Banana 2.5 Flash with prompt optimization. Includes style adaptation and customizable parameters.

googleimage-generation+3

AI SDK Nano Banana Image Edit

Generate and edit images using Nano Banana 2.5 Flash. Create new images from text or edit existing ones with natural language. Includes version history and image comparison.

aiimage-generation+10

Jina AI Web Scraper

Scrape websites using Jina AI with JavaScript rendering and proxy rotation. Handles rate limiting and bot detection.

jinascraper+3

Cheerio Web Scraper

Extract content from websites using Cheerio. Includes parsing, link discovery, and rate limiting.

cheerioscraper+2

Tool Execution

Connect AI agents with external APIs and services. Demonstrates tool calling with weather data, error handling, and visual feedback.

aitools+4

Reasoning

Chat that shows AI's step-by-step reasoning. Includes decision trees, logical breakdowns, and explanatory tooltips.

aichat+4

Image Generation Demo

Generate images using DALL-E 3 with prompt optimization and style presets. Includes real-time preview, downloads, and batch processing.

Inline Citations Demo

Generate content with embedded citations and clickable references. Includes source verification and formatting for research writing.

aicitations+4

Parallel Processing Pattern

Process content with multiple AI agents running simultaneously. Demonstrates concurrent analysis for faster results.

aiparallel-processing+4

Multi-Step Tool Pattern

Execute multi-step workflows with typed tools. Includes streaming, tool chaining, and decision-making for automated tasks.

Orchestrator-Worker Pattern

Coordinate multiple worker agents for project management. Handles task distribution, progress tracking, and result synthesis.

Evaluator-Optimizer Pattern

Improve output quality with dual agents. Evaluator analyzes quality while optimizer refines results through iterative feedback.

aiagents+9

Task Management Demo

Task management with AI workflow automation. Creates tasks, tracks progress, and assigns work automatically.

aitask-management+4

Basic Chat Interface

Chat interface with streaming responses and message history. Includes typing indicators and message status tracking.

aichat+2

Sources & Citations

Chat with source citations using Perplexity's Sonar model. Answers include clickable links for fact-checking.

aichat+4

Agent Routing Pattern

Route user queries to specialized AI agents based on context and intent. Includes dynamic agent selection, load balancing, and fallback handling.

aiagents+2

AI SDK Prompt Few-Shot Editor

Create and test prompts with few-shot examples. Evaluate AI responses and tune model performance through experimentation.

aiprompt-engineering+2

AI Profile Enrichment Form

Analyze user profiles with AI and provide personalized suggestions. Enriches data, suggests improvements, and offers career insights.

aiform+5

Cloudflare Markdown.new Web Scraper

Convert any webpage to markdown using Cloudflare's markdown.new. Clean, structured output for AI pipelines and content processing.

cloudflaremarkdown+3

chat-gpt

Advanced conversational AI interface powered by GPT-4o with intelligent context management, streaming responses, and conversation persistence. Features message history, typing indicators, and responsive design for seamless AI-powered communication experiences.

chat-claude

Sophisticated AI chat interface powered by Claude with advanced reasoning capabilities, context awareness, and natural conversation flow. Features intelligent response generation, conversation memory, and user-friendly interaction design for enhanced AI communication.

chat-grok

Dynamic AI chat interface powered by Grok with real-time information access, conversational intelligence, and contextual understanding. Features live data integration, witty responses, and engaging conversation patterns for interactive AI-powered communication experiences.

Generate Speech (OpenAI)

Convert text to speech using OpenAI's API. Includes multiple voices, speed control, and real-time playback for voiceovers and accessibility.

aigenerate-speech+3

Transcribe Audio (OpenAI)

Transcribe audio files using OpenAI's API. Includes real-time transcription and language detection.

aitranscribe+3

Generate Text

Generate text from prompts using AI. Simple interface with character counting and response rendering.

aiprompt+3

Stream Text

Stream text responses from AI prompts in real-time. Includes character counting and live response rendering with useCompletion.

aiprompt+4

Streaming Structured Output

Stream structured output from AI prompts in real-time using streamText with Output.object(). Generate typed data with useObject and live rendering.

aiprompt+6

OpenAI Structured Output

Generate structured output from AI prompts using OpenAI. Create typed data with generateText and Output.object().

aiprompt+5

Claude Structured Output

Generate structured output from AI prompts using Anthropic Claude. Create typed data with generateText and Output.object().

aiprompt+6

Gemini Structured Output

Generate structured output from AI prompts using Google Gemini. Create typed data with generateText and Output.object().

aiprompt+6

Generate Image (OpenAI)

Generate images from text prompts using OpenAI's DALL-E 3. Create high-quality images with AI.

Generate Image (Fal.ai)

Generate images from text prompts using Fal.ai's Flux model. Fast and high-quality image generation.

Generate Image (Google Gemini)

Generate images from text prompts using Google Gemini's image model.

Generate Speech (ElevenLabs)

Convert text to speech using ElevenLabs API. Includes multiple voices and high-quality audio generation.

aigenerate-speech+4

Transcribe Audio (ElevenLabs)

Transcribe audio files using ElevenLabs API. Includes real-time transcription and language detection.

aitranscribe+4

Search - Exa AI (robust)

Search the web using Exa's semantic API and real-time crawling. Includes URL search, content extraction, Wikipedia, Reddit, and news search tools.

aisearch+6

Search - Firecrawl (robust)

Search the web using Firecrawl's API and real-time crawling. Includes URL search, content extraction, Wikipedia, Reddit, and news search tools.

aisearch+6

Scrape - Cheerio (lightweight)

Scrape websites using Cheerio's fast HTML parser. Includes URL scraping, website crawling, and content extraction without external API costs.

aiscrape+8

Scrape - Jina AI (advanced)

Scrape websites using Jina AI's reader service with JavaScript rendering. Includes URL scraping, website crawling, and content extraction with AI-powered parsing.

aiscrape+8

Scrape - Markdown.new (free)

Scrape websites using Cloudflare's markdown.new service. Extract clean markdown content from any URL. No API key required.

aiscrape+6

Feature Grid 1

Feature grid showcasing AI marketing agents with tilted card previews and hover effects. Perfect for highlighting product capabilities and use cases.