Skip to content

Repository files navigation

Build a Claude Managed Agent on Vercel

A hands-on workshop where you build a real-time chat app powered by Claude Managed Agents and Vercel Workflows — guided by a coding agent.

What you'll build

A chat interface where Claude can run tools, browse the web, and stream responses back in real-time. The backend uses a durable Vercel Workflow that polls the Anthropic events API, streams results via SSE, and pauses between turns with zero compute cost.

Getting started

1. Clone the starter branch

git clone https://github.com/mbaiza27/WRKSHP-workflows-claudema.git --branch starter
cd WRKSHP-workflows-claudema
pnpm install

2. Open the workshop guide

Everything you need is in WORKSHOP.md. It walks you through each step with your coding agent (Claude Code, Cursor, etc.).

3. Prerequisites

Before starting, make sure you have:

  • Claude Code or another coding agent
  • A Vercel account
  • An Anthropic account with credits loaded
  • A Managed Agent created in the Anthropic console (you'll need the Agent ID and Environment ID)
  • Node.js 20+ and pnpm

Branches

Branch Description
starter Scaffolding only — clone this to follow the workshop
main Completed reference implementation — check this if you get stuck

Tech stack

  • Next.js 16 with React 19
  • Vercel Workflows for durable agent orchestration
  • Anthropic Managed Agents for the AI runtime
  • Neon Postgres via Vercel Marketplace
  • Drizzle ORM for database access
  • shadcn/ui + Tailwind CSS v4 for the UI
  • Server-Sent Events for real-time streaming

Architecture

Browser                          Next.js / Workflow              Anthropic
  |                                |                               |
  |  POST /api/session             |  sessions.create()            |
  |------------------------------->|------------------------------>|
  |  { id, runId }                 |  start(sessionWorkflow)       |
  |<-------------------------------|                               |
  |                                |                               |
  |  GET /api/readable/{runId}     |  sendMessage (step)           |
  |------------------------------->|------------------------------>|
  |  (SSE stream opens)            |                               |
  |                                |  sleep("3s")                  |
  |                                |  pollAndStream (step)         |
  |                                |------------------------------>|
  |  data: { agent.message }       |  writer.write(event)          |
  |<-------------------------------|                               |
  |                                |  session.status_idle          |
  |                                |  hook.create() (pauses)       |
  |                                |                               |
  |  POST /api/message             |  messageHook.resume()         |
  |------------------------------->|  (workflow wakes up)           |

Resources

About

No description, website, or topics provided.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages