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

18

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.

New

Latest additions

4 newest demos

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

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

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

18 of 18 demos

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

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