Agent Demos

Agent Demos

Turn agent prototypes into deployable apps

Pick a production-ready demo slice, hand the guide to Codex, and ship a working Next.js agent app in about an hour. Already have a LangGraph agent? Use this as the launch path to a real web product.

Ready now

24

Roadmap

0

Ready demos follow stable AI SDK Recipes and docs sources while roadmap cards stay separate.

shadcn registry guide

Start a new AI agent project from this registry

The guide gives humans and coding agents one path: create a styled shadcn Next.js app, add Foundation Chat from the registry, run a real AI Gateway chat check, and prepare the same env for Vercel.

Open registry guide

agent task brief

Read https://agent-demos.hsawana9.com/registry-guide first. Then create a new shadcn Next.js app, install @agent-demos/foundation-chat, configure AI_GATEWAY_API_KEY, verify one local chat message, and prepare the Vercel deployment env.

Builder tool

Make a depth video in the browser

Turn a short clip into a stabilized grayscale motion reference for AI video models. Five seconds is the recommended working length, fifteen seconds is the limit, and the source file never leaves the browser.

Open depth video tool

New

Latest additions

4 newest demos

ReadyMultimodal

Cloudflare AI Gateway

Generate and edit images through interchangeable Cloudflare and Vercel AI Gateway adapters using the same request contract.

Image gatewayMultimodal

+--------------------------+
|  [:::]       [o]  [o]    |
|      \       /  /       |
|       +-----+---+        |
|       | / / / / |        |
|       +----+----+        |
|         /     \          |
|     +--+       +--+      |
|     |@@|       |##|      |
+--------------------------+

Source: Cloudflare provider-native routes and AI SDK 6 image generation

cloudflare-ai-gatewayOpen demo

ReadyLoop Agent

A service-triage chat agent on Vercel's eve framework — agent files live in agents/service-triage/ (filesystem-first: agent.ts, instructions.md, tools/), deployed as a peer Vercel service via withEve in vercel.ts, reachable at /eve/service-triage/v1/*.

Eve agent loopLoop Agent

╭───────────╮
│ ┌───────┐ │
│ ↓       │ │
│ ◇     ▶ │ │
│ └◄──────┘ │
╰───────────╯

Source: vercel/eve

eve-agentOpen demo

ReadyGenerative UI

Agent UX Primitives

A copyable showcase of all 19 beautifului.dev-inspired agent-UX primitives — from prompt bar, thinking trace, and streaming text to tables, nav, search, and selection actions — implemented on our ai-elements and shadcn base.

UX primitivesGenerative UI

╭────────────╮
│ ╭────────╮ │
│ │ ··  ▶ │ │
│ ╰────────╯ │
│ ◇─◇─◇  ▮▮ │
╰────────────╯

Source: original/beautifului-inspired

agent-ux-primitivesOpen demo

Multi-Agent Explorer

A lead agent decomposes a research question, fans subtopics out to parallel explorer subagents with their own tool loops, then synthesizes a cited report with every hop visible in the stream.

Lead + fan-outTools

╭─────────╮
│    ◆    │
│  ╱ │ ╲  │
│ ◎  ◎  ◎ │
│  ╲ │ ╱  │
│    ▣    │
╰─────────╯

Source: ai-sdk/orchestration

multi-agent-explorerOpen demo

Recommend

Start here

4 highlighted demos

ReadyFoundation

Ultra Chatbot Agent

An application-shape chatbot port with visitor-owned URLs, model selection, Postgres persistence, and resumable streams as the base for the full vercel/chatbot capability set.

App-shape portFoundation

+----------------------------------------+
|   .---------.        .------------.    |
|  /  [] [][]  \----->|  ~~~~~~~~  |    |
|  \  [] [][]  /<-----|  ========  |    |
|   '---------'        '------------'    |
|        |                    ^          |
|        v                    |          |
|   .------------.      .------------.   |
|   |  [][] + [] |----->|  [] + []   |   |
|   |  [][] + [] |<-----|  [] + []   |   |
|   '------------'      '------------'   |
|                                        |
+----------------------------------------+

Source: Pinned vercel/ai-chatbot snapshot ported into this repo architecture

ultra-chatbot-agentOpen demo

ReadyGenerative UI

A chat workspace where the model can use hosted web search when recency matters, then choose a comparison matrix or recommendation card as the primary UI output.

UI toolsGenerative UI

+----------------------------------------+
|                                        |
|        .------------.   .------.       |
|        |  <>  <>   |-->|  []  |       |
|        |  <>  <>   |   |  []  |       |
|        '------------'   '------'       |
|               |              |         |
|               v              v         |
|        .------------.   .------.       |
|        |  ::  ::   |   |  ##  |       |
|        |  ::  ::   |   |  ##  |       |
|        '------------'   '------'       |
|                                        |
+----------------------------------------+

Source: AI SDK UI Generative User Interfaces guide

generative-uiOpen demo

LangGraph Agent

A Next.js and AI Elements frontend wired to the official LangGraph thread-scoped Agent Server streaming API.

LangGraph bridgeLangGraph

+----------------------------------------+
| o o o  ------------------------------ |
|----------------------------------------|
| o----o----o----o                       |
|           |                            |
|           v                            |
|        o----o----o                     |
|                                        |
|  .----.    .----.    .----.           |
|  '----' -> '----' -> '----'           |
|----------------------------------------|
|  [][][][][][][][][][][][][][][][]     |
+----------------------------------------+

Source: LangGraph Agent Server API plus AI SDK UI message streams

langgraph-agentOpen demo

ReadyFoundation

OpenAI Agents SDK Demo

An official OpenAI Agents SDK backend bridged into the existing AI SDK UI workspace without rewriting the agent runtime into repo-local orchestration.

Official bridgeFoundation

+----------------------------------------+
|                                        |
|                                        |
|    OOO   PPPP  EEEEE N   N   AAA   III |
|   O   O  P   P E     NN  N  A   A   I  |
|   O   O  PPPP  EEE   N N N  AAAAA   I  |
|   O   O  P     E     N  NN  A   A   I  |
|    OOO   P     EEEEE N   N  A   A  III |
|                                        |
|                                        |
|                                        |
|                                        |
|                                        |
|                                        |
+----------------------------------------+

Source: OpenAI Agents SDK guides and official AI SDK UI bridge example

openai-agents-sdk-demoOpen demo

Ready demos

Interactive now

24 of 24 demos

ReadyGenerative UI

Agent UX Primitives

A copyable showcase of all 19 beautifului.dev-inspired agent-UX primitives — from prompt bar, thinking trace, and streaming text to tables, nav, search, and selection actions — implemented on our ai-elements and shadcn base.

UX primitivesGenerative UI

╭────────────╮
│ ╭────────╮ │
│ │ ··  ▶ │ │
│ ╰────────╯ │
│ ◇─◇─◇  ▮▮ │
╰────────────╯

Source: original/beautifului-inspired

agent-ux-primitivesOpen demo

ReadyFoundation

Foundation Chat

A production-ready base chat wired to AI Gateway and AI SDK 6, built as the copyable starting point for future demos.

Base chatFoundation

+----------------------------------------+
| o o o  --------------                  |
|----------------------------------------|
|  .--------.                            |
|  | ...... |             .------------. |
|  '--------'             | .......... | |
|                         '------.-----' |
|      .--------------.          |       |
|      | ............ |          |       |
|      '--------------'    .-----'       |
|  .-----------.                         |
|  | ......... |              _          |
|----------------------------------------|
|  >_ [][][][][]                         |
+----------------------------------------+

Source: AI SDK 6 stable runtime contract

foundation-chatOpen demo

Knowledge-base ingestion and retrieval over durable storage, following the stable AI SDK recipe with a productized workspace.

Knowledge baseRAG

+----------------------------------------+
| .----.  .----.                         |
| |....|  |....|        .------------.   |
| |....|  |....|  --->  | . . . . .  |   |
| '----'  '----'        | . . . . .  |   |
|    .----.             '-----+------'   |
|    |....|                   |          |
|    '----'               .---+---.      |
|                         |  ( )  |      |
|   .--------------.      |  ---  |      |
|   | . . . . . .  +------+   |   |      |
|   '--------------'          |          |
|                         .---+------.   |
|                         |  ......  |   |
|                         '----------'   |
+----------------------------------------+

Source: AI SDK 6 stable RAG recipe

rag-chatbotOpen demo

ReadyMultimodal

Multi-Modal Chatbot

Chat over user-provided images and PDFs in a single turn, preserving the official AI SDK multimodal guide with a productized workspace.

Mixed inputMultimodal

+----------------------------------------+
| .----------------.   .--------------.  |
| |      .--.      |   |\             |  |
| |     /    \     |   | \  ......... |  |
| |    / /\   \    |   |  \ ........ |   |
| |   /_/  \___\   |   |   \....... |    |
| |  ~~~~~~~~~~~~  |   |------------  |  |
| |  ~~~    ~~~~~  |   |------------  |  |
| |                |   |------------  |  |
| |     .    .     |   |------------  |  |
| |________________|   |------------  |  |
|                      | .......... |    |
|                      | .......... |    |
|                      |____________|    |
|                                        |
+----------------------------------------+

Source: AI SDK 6 stable multimodal guide

multimodal-chatbotOpen demo

ReadyStructured Output

Object Generation

Generate a structured object from text, images, and PDFs, then render that object directly inside the assistant message.

Structured objectStructured Output

+----------------------------------------+
|      .--------------------------.      |
|      |  []   []   []   []   []  |      |
|      |--------------------------|      |
|      |  ..........              |      |
|      |  ...............         |      |
|      |  .........    [ ]        |      |
|      |--------------------------|      |
|      |  []  ...............     |      |
|      |  []  ..........          |      |
|      |  []  ..............      |      |
|      |--------------------------|      |
|      |  [ ] [ ] [ ]   ======    |      |
|      '--------------------------'      |
|           []        []        []       |
|                                        |
+----------------------------------------+

Source: AI SDK 6 structured output and useObject docs

object-generationOpen demo

ReadyGenerative UI

A chat workspace where the model can use hosted web search when recency matters, then choose a comparison matrix or recommendation card as the primary UI output.

UI toolsGenerative UI

+----------------------------------------+
|                                        |
|        .------------.   .------.       |
|        |  <>  <>   |-->|  []  |       |
|        |  <>  <>   |   |  []  |       |
|        '------------'   '------'       |
|               |              |         |
|               v              v         |
|        .------------.   .------.       |
|        |  ::  ::   |   |  ##  |       |
|        |  ::  ::   |   |  ##  |       |
|        '------------'   '------'       |
|                                        |
+----------------------------------------+

Source: AI SDK UI Generative User Interfaces guide

generative-uiOpen demo

Minimal Chat Agent

A small tool-calling chat agent with provider-native web search, public GitHub repository lookup, and a questionnaire that returns human answers into the same agent loop.

Search + HITLTools

╭─────────╮
│ ◇ → ⌕  │
│ ↑   ↓  │
│ ? ← ✓  │
╰─────────╯

Source: shadcn-ui/chatbot-template

minimal-chat-agentOpen demo

Image Workflow Agent

A canvas-first image workflow demo where users and the agent both mutate the same validated graph, then run either prompt-only generation or reference-image editing.

Workflow canvasTools

+----------------------------------------+
| .--------.   .------------.   .------. |
| |  <>    |-->|  ////      |-->|  ##  | |
| |  []    |   |  ====      |   |  ##  | |
| '--------'   |  ....      |   '------' |
|              '------------'            |
|                                        |
|  [ + ] [ o ] [ ~ ] [ > ]               |
|                                        |
|  ::::::::::::::::::::::::::::::::::::  |
|  ....................................  |
|  ================================:::  |
+----------------------------------------+

Source: Original demo

image-workflow-agentOpen demo

Compose branching text and image workflows on an infinite canvas. Ask the agent to edit the graph, run generation, and reuse results in the next step.

Canvas and conversationTools

        [ ======== ]
             /     \
      [ //// ]   [ //// ]
           \      /
          [ ###### ]

      > ...................

Source: Original demo

canvas-agentOpen demo

ReadyMultimodal

Point at a page element, capture annotated screenshots, collect feedback, and turn the evidence into an actionable issue with AI.

Point → capture → triageMultimodal

╭────────────╮
│ ⌖ → ▣ → ✦ │
│ ▤ ▤ ▤      │
╰────────────╯

Source: makethisbetter/makethisbetter-js

feedback-agentOpen demo

Memory & Persistence Agent

Persist chat threads, explicit memory-tool writes, and handoff compactions so an agent can resume work across sessions.

Memory loopTools

+----------------------------------------+
|     .--------. .--------. .--------.   |
|     |  .--.  | |  .--.  | |  .--.  |   |
|     | (....) | | (....) | | (....) |   |
|     |  '--'  | |  '--'  | |  '--'  |   |
|     |--------| |--------| |--------|   |
|     | ------ | | ------ | | ------ |   |
|     | ----   | | ----   | | ----   |   |
|     | ----   | | ----   | | ----   |   |
|     |  [] [] | |  [] [] | |  [] [] |   |
|     '--------' '--------' '--------'   |
|        .--.        .--.        .--.    |
|       (....)      (....)      (....)   |
|        '--'        '--'        '--'    |
|                                        |
+----------------------------------------+

Source: AI SDK memory, persistence, and embeddings docs

customer-memory-agentOpen demo

ReadyFoundation

Persistent & Resume Agent

A URL-backed agent chat that persists messages in Postgres, isolates visitors with an HTTP-only cookie, and resumes live streams after refresh.

Persistent chatFoundation

+----------------------------------------+
|                                        |
|      .------.        .------.          |
|  --->|      |------->|      |---.      |
| .---<|      |<-------|      |<-. |     |
| |     '------'       '------'  | |     |
| |         \             /      | |     |
| |          \           /       | |     |
| |       .---'-.     .-'---.    | |     |
| |      /  .-.  \   /  .-.  \   | |     |
| |      \  '-'  /   \  '-'  /   | |     |
| |       '---.-'     '-.---'    | |     |
| '-----------<--------->--------' |     |
|              '---------'         |     |
|                                        |
+----------------------------------------+

Source: AI SDK UI message persistence and resume streams

persistent-agentOpen demo

ReadyFoundation

Streaming Chat Shell

A developer-facing chat runtime shell that demonstrates shared useChat state, feature-local request metadata, and a replayable SSE trace.

Streaming shellFoundation

+----------------------------------------+
|                                        |
|    .------------------------------.    |
|   /................................\   |
|  |..__/\....../\__....../\__/\......|  |
|  |../....\..../....\..../....\......|  |
|  |./......\__/......\__/......\.....|  |
|  |\........../........\........../..|  |
|  |..\__/\...\__/\....\__/\..........|  |
|  |..../..\..../..\..../..\..../.....|  |
|  |.../....\__/.../....\__/.../......|  |
|  |..\............................/..|  |
|  |.__/\....../\__....../\....../__..|  |
|   \________________________________/   |
|                                        |
+----------------------------------------+

Source: AI SDK 6 chat and streaming runtime recipes

streaming-chat-shellOpen demo

ReadyLoop Agent

A support triage agent that shows parallel context lookup, dependent SLA checks, human approval, visible tool state, and bounded loop control.

Approval gateLoop Agent

+----------------------------------------+
|                                        |
|    .------------.    .------------.    |
|   /  .--------.  \  /------------\     |
|  |  /  .--.    \  ||  .--.--.    ||    |
|  | |  (....)    | || |  |||| |    ||   |
|  | |   ----     |====|  |||| |====||   |
|  | |   ----     |====|  |||| |====||   |
|  | |   [] []    | || |  |||| |    ||   |
|  |  \__________/  ||  '----'      ||   |
|   \______________/ |---.    .----/     |
|                     |  /======\        |
|                     | |  ----  |       |
|                     | |  [] [] |       |
|                     |  \______/        |
+----------------------------------------+

Source: AI SDK 6 stable tool-calling, loop-control, and HITL recipes

loop-agentOpen demo

LangGraph Agent

A Next.js and AI Elements frontend wired to the official LangGraph thread-scoped Agent Server streaming API.

LangGraph bridgeLangGraph

+----------------------------------------+
| o o o  ------------------------------ |
|----------------------------------------|
| o----o----o----o                       |
|           |                            |
|           v                            |
|        o----o----o                     |
|                                        |
|  .----.    .----.    .----.           |
|  '----' -> '----' -> '----'           |
|----------------------------------------|
|  [][][][][][][][][][][][][][][][]     |
+----------------------------------------+

Source: LangGraph Agent Server API plus AI SDK UI message streams

langgraph-agentOpen demo

Skills Builder Agent

A sandbox-backed ToolLoopAgent that loads repo-local skills on demand, pressures a rough idea into durable context, and drafts reusable SKILL.md artifacts.

Skill folderSkills

+----------------------------------------+
|                                        |
|            .--------------.            |
|        .--/-------------. |            |
|       /__/_____________/| |            |
|      /_______________/ || |            |
|      |  .--------.   | || |            |
|      |  |  ----  |   | || |            |
|      |  |  ----  |   | || |            |
|      |  |  [] [] |   | || |            |
|      |  '--------'   | || |            |
|      |  .--------.   | ||/             |
|      |  |  ----  |   | |/              |
|      |  '--------'   | /               |
|      '---------------'/                |
|                                        |
+----------------------------------------+

Source: AI SDK Add Skills to Your Agent guide

skills-agentOpen demo

Sandbox Workspace Agent

A persistent Vercel Sandbox workspace that lets the agent generate frontend files, run commands, and publish a live preview.

Live previewSandbox

+----------------------------------------+
|                                        |
|      .--------------------------.      |
|     /__________________________/|      |
|    /__________________________/ |      |
|    |   .------.  .------.      | |     |
|    |   | ---- |  | ---- |      | |     |
|    |   | ---- |  | ---- |      | |     |
|    |   | [][] |  | [][] |      | |     |
|    |   '------'  '------'      | |     |
|    |   ------------------      | |     |
|    |___________________________|/      |
|                                        |
|                                        |
|                                        |
+----------------------------------------+

Source: Sandbox workspace and live preview batch

sandbox-agentOpen demo

MCP Runtime Doctor Agent

An AI SDK ToolLoopAgent that discovers MCP tools from project docs and a local Next.js runtime, then answers repo and runtime questions through namespaced tool calls.

Connector hubMCP

+----------------------------------------+
|                                        |
|   .------.             .--------.      |
|  /______/|            /  .----.  \     |
|  | ---- | |          |  |[] []|  |     |
|  | ---- | |----.  .--|  |----|  |      |
|  |______|/     |  |  |  '----'  |      |
|                .-+--+-. '--------'     |
|               / .----. \               |
|      .-----. | | [] | |                |
|     /_____/|-| | -- | |                |
|     |[] []| | | '----' |               |
|     |_____|/   '------'                |
|                                        |
|                                        |
+----------------------------------------+

Source: AI SDK MCP tools and Next.js dev MCP guide

mcp-agentOpen demo

ReadyFoundation

OpenAI Agents SDK Demo

An official OpenAI Agents SDK backend bridged into the existing AI SDK UI workspace without rewriting the agent runtime into repo-local orchestration.

Official bridgeFoundation

+----------------------------------------+
|                                        |
|                                        |
|    OOO   PPPP  EEEEE N   N   AAA   III |
|   O   O  P   P E     NN  N  A   A   I  |
|   O   O  PPPP  EEE   N N N  AAAAA   I  |
|   O   O  P     E     N  NN  A   A   I  |
|    OOO   P     EEEEE N   N  A   A  III |
|                                        |
|                                        |
|                                        |
|                                        |
|                                        |
|                                        |
+----------------------------------------+

Source: OpenAI Agents SDK guides and official AI SDK UI bridge example

openai-agents-sdk-demoOpen demo

Trace and Eval Agent

A live research agent that searches the web through AI Gateway, then scores the current conversation with source, answer-shape, and expected-path checks.

Trace + evalTools

+----------------------------------------+
|                                        |
|                                        |
|   o----o----o--------------.           |
|   |    |    |              |           |
|   :....:....:........      |           |
|                      /.    |           |
|                     /  .---+---.       |
|                        o---+---.       |
|                                |       |
|                           .----+---.   |
|                           | [][]  |    |
|                           '--------'   |
|                                        |
+----------------------------------------+

Source: AI SDK 6 Gateway search, telemetry, and testing recipes

trace-eval-agentOpen demo

ReadyFoundation

Ultra Chatbot Agent

An application-shape chatbot port with visitor-owned URLs, model selection, Postgres persistence, and resumable streams as the base for the full vercel/chatbot capability set.

App-shape portFoundation

+----------------------------------------+
|   .---------.        .------------.    |
|  /  [] [][]  \----->|  ~~~~~~~~  |    |
|  \  [] [][]  /<-----|  ========  |    |
|   '---------'        '------------'    |
|        |                    ^          |
|        v                    |          |
|   .------------.      .------------.   |
|   |  [][] + [] |----->|  [] + []   |   |
|   |  [][] + [] |<-----|  [] + []   |   |
|   '------------'      '------------'   |
|                                        |
+----------------------------------------+

Source: Pinned vercel/ai-chatbot snapshot ported into this repo architecture

ultra-chatbot-agentOpen demo

ReadyMultimodal

Cloudflare AI Gateway

Generate and edit images through interchangeable Cloudflare and Vercel AI Gateway adapters using the same request contract.

Image gatewayMultimodal

+--------------------------+
|  [:::]       [o]  [o]    |
|      \       /  /       |
|       +-----+---+        |
|       | / / / / |        |
|       +----+----+        |
|         /     \          |
|     +--+       +--+      |
|     |@@|       |##|      |
+--------------------------+

Source: Cloudflare provider-native routes and AI SDK 6 image generation

cloudflare-ai-gatewayOpen demo

Multi-Agent Explorer

A lead agent decomposes a research question, fans subtopics out to parallel explorer subagents with their own tool loops, then synthesizes a cited report with every hop visible in the stream.

Lead + fan-outTools

╭─────────╮
│    ◆    │
│  ╱ │ ╲  │
│ ◎  ◎  ◎ │
│  ╲ │ ╱  │
│    ▣    │
╰─────────╯

Source: ai-sdk/orchestration

multi-agent-explorerOpen demo

ReadyLoop Agent

A service-triage chat agent on Vercel's eve framework — agent files live in agents/service-triage/ (filesystem-first: agent.ts, instructions.md, tools/), deployed as a peer Vercel service via withEve in vercel.ts, reachable at /eve/service-triage/v1/*.

Eve agent loopLoop Agent

╭───────────╮
│ ┌───────┐ │
│ ↓       │ │
│ ◇     ▶ │ │
│ └◄──────┘ │
╰───────────╯

Source: vercel/eve

eve-agentOpen demo