New Project

Claude Managed Agents

Demo app for Claude Managed Agents hosted on Vercel

DeployView Demo

Claude Managed Agents Template

An internal knowledge agent built with Claude Managed Agents. Connect your GitHub, Notion, and Slack via MCP and ask questions across all of them. Read more in the guide.

Stack

LayerChoice
AppNext.js 16 (App Router), React 19
UIshadcn/ui, Tailwind CSS v4
AuthBetter Auth + Sign in with Vercel
DataNeon + Drizzle ORM
BackgroundWorkflow SDK
AgentsClaude Managed Agents via @anthropic-ai/sdk

Quickstart

1. Clone, install skills, and provision integrations

git clone https://github.com/vercel-labs/claude-managed-agents.git
cd claude-managed-agents
npx skills add anthropics/skills --skill claude-api
npx skills add vercel/workflow
vercel link
vercel integration add neon

2. Generate secrets and pull environment variables

echo "$(openssl rand -base64 32)" | vercel env add BETTER_AUTH_SECRET production preview development
echo "$(openssl rand -hex 32)" | vercel env add TOKEN_ENCRYPTION_KEY production preview development
vercel env pull

This generates both secrets and writes .env.local with DATABASE_URL, Neon vars, and the secrets.

3. Set remaining environment variables

Add these to .env.local (or via vercel env add):

VariableHow to get it
ANTHROPIC_API_KEYconsole.anthropic.com/settings/keys
ANTHROPIC_AGENT_IDCreate an agent via the Managed Agents quickstart
ANTHROPIC_ENVIRONMENT_IDCreate an environment for the agent and copy its ID
BETTER_AUTH_URLhttp://localhost:3000 (or your deployment URL)
VERCEL_CLIENT_IDCreate an OAuth app via Sign in with Vercel. Callback: <url>/api/auth/callback/vercel
VERCEL_CLIENT_SECRETFrom the same Vercel OAuth app

Optional for GitHub integration:

VariableHow to get it
GITHUB_CLIENT_IDCreate a GitHub OAuth app
GITHUB_CLIENT_SECRETFrom the same GitHub OAuth app

4. Install dependencies and push schema

pnpm install
pnpm db:push

5. Run

pnpm dev

Key files

FilePurpose
lib/auth.tsBetter Auth config (Vercel OIDC + optional GitHub OAuth)
lib/session.tsgetSession() and requireUserId() server helpers
proxy.tsAuth guard — redirects unauthenticated users on protected routes
lib/schema.tsDrizzle schema (Better Auth tables + managed agent tables)
lib/db.tsNeon + Drizzle client
lib/anthropic.tsAnthropic SDK client factory
lib/managed-agents.tsSession creation + message sending
app/workflows/tail-session.tsDurable workflow: polls Anthropic events, persists to Postgres
app/api/managed-agents/REST API routes (session, message, transcript)

References

  • Managed Agents overview
  • Managed Agents quickstart
  • Workflow SDK docs
GitHub Repovercel-labs/claude-managed-agents
Use Cases
Starter
AI
Stack
Next.js
Tailwind
Database
Neon
DeployView Demo