Watch an AI agent build and manage a task board in real time — powered by Zephyr Framework.
- You type a natural language request in the chat widget (e.g., "Create 5 tasks for a product launch")
- The AI agent calls Zephyr tools (
zephyr_act,zephyr_get_state, etc.) to interact with the board - Components update in real time — cards appear, move between columns, modals open, themes switch
No custom prompt engineering. The <z-board> custom element registers its actions into Zephyr's agent system, so the AI discovers them automatically through the standard MCP tools.
Browser Server Anthropic
┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ <z-agent> │─────▶│ /api/chat │─────▶│ Claude API │
│ chat widget │◀─────│ (Vercel fn) │◀─────│ │
│ │ └──────────────────┘ └──────────────┘
│ Zephyr.agent │
│ ├── getState() │ ← Agent discovers components
│ ├── describe() │ ← Agent inspects a component
│ ├── act() │ ← Agent performs actions
│ └── setState() │ ← Agent sets attributes
│ │
│ <z-board> │
│ ├── addTask │ ← Custom actions registered
│ ├── moveTask │ into Zephyr.agent._actions
│ ├── deleteTask │
│ ├── editTask │
│ └── clearBoard │
└──────────────────┘
git clone https://github.com/daltlc/zephyr-agent-demo.git
cd zephyr-agent-demo
# Add your Anthropic API key
cp .env.example .env
# Edit .env and add your key
# Run with Vercel dev (handles the serverless proxy)
npx vercel devOpen http://localhost:3000 and start chatting with the agent.
No API key? You can still explore the board UI — drag and drop tasks, switch themes, click cards for details. The agent chat just won't respond without a valid key.
Set ANTHROPIC_API_KEY in your Vercel environment variables.
| Prompt | What Happens |
|---|---|
| "Create 5 tasks for a product launch" | Cards appear across columns with titles, priorities, and assignees |
| "Move 'Design review' to Done" | Card slides to the Done column |
| "Show me details for 'Ship v2'" | Modal opens with task info |
| "Show only high priority tasks" | Priority filter updates |
| "Switch to dark mode" | Theme flips instantly |
| "Clear the board and plan a sprint" | Board resets, then new cards are created |
- Zephyr Framework — the first UI framework built for AI agents
- Zero build step, zero bundler, zero runtime JS for interactions
<z-agent>chat widget with Anthropic Claude integration- Vercel serverless function for API key proxy
MIT