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
16
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.
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.Recommend
Start here
4 highlighted demos
ReadyFoundation
Number OneUltra 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
Number TwoGenerative 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
ReadyLangGraph
Number ThreeLangGraph 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
Number FourOpenAI 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
16 of 16 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
ReadyRAG
RAG Chatbot
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
Generative 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
ReadyTools
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
Loop 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
ReadyLangGraph
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
ReadySkills
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
ReadySandbox
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
ReadyMCP
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
ReadyTools
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