Claude Quickstarts

Claude Quickstarts

Overview

Claude Quickstarts is the official Anthropic repository of deployable reference applications built on the Claude API. Each project is a self-contained, runnable implementation demonstrating a distinct Claude capability: computer use (desktop control via Docker), browser automation (Playwright integration), autonomous multi-session coding (Claude Agent SDK two-agent pattern), a customer support agent (Next.js + TypeScript UI), a financial data analyst (interactive Recharts visualization), and a minimal agent loop reference implementation (<300 lines of Python). All projects include setup instructions, tests, and CLAUDE.md development guides aimed at getting developers from zero to running application without reading API documentation first.

Problem Addressed

Key Statistics

Key Features

Included Quickstart Projects

Computer Use Demo (computer-use-demo/)

• Docker container with full Linux desktop (VNC + noVNC + Streamlit interface)
• Exposes ports 5900 (VNC), 8501 (Streamlit), 6080 (noVNC), 8080 (web)
• Supports Anthropic API, AWS Bedrock, and Google Vertex backends
• Uses computer_use_20251124 tool version with zoom actions
• Uses str_replace_based_edit_tool (replaces deprecated str_replace_editor)
• Supports Claude 4 models (Opus 4.5, Sonnet 4.5, Sonnet 4, Opus 4, Haiku 4.5)
• Pre-built Docker image: ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest

Browser Tools API Demo (browser-use-demo/)

• Playwright integration for web navigation, DOM inspection, form manipulation
• Docker + docker-compose deployment
• pytest suite with browser_use_demo/ package structure
• CHANGELOG.md and NOTICE file indicating third-party attribution requirements

Autonomous Coding Agent (autonomous-coding/)

• Two-agent pattern: initializer agent (session 1) + coding agent (sessions 2+)
• Requires Claude Code CLI (npm install -g @anthropic-ai/claude-code) and claude-code-sdk Python package
• Progress persisted via feature_list.json (200 test cases) and git commits across sessions
• Defense-in-depth security: OS sandbox + filesystem restriction to project dir + bash command allowlist
• Allowed commands: ls, cat, head, tail, wc, grep, npm, node, git, ps, lsof, sleep, pkill
• Configurable via --project-dir, --max-iterations, --model CLI flags

Agents Reference Implementation (agents/)

• <300 lines of Python demonstrating agent loop fundamentals
• agent.py handles Claude API interactions and tool execution loop
• Supports both local tool classes and MCP server connections (stdio and other transports)
• tools/ directory with ThinkTool and MCP tool wrappers; utils/ for message history + MCP connections
• Includes Jupyter notebook agent_demo.ipynb for interactive exploration
• Explicitly not a production SDK — educational reference only

Customer Support Agent (customer-support-agent/)

• Next.js application with TypeScript strict mode
• shadcn/ui component library; Tailwind CSS
• Three layout variants: left sidebar, right sidebar, chat-only (via npm run dev:left/right/chat)
• AWS Amplify deployment config (amplify.yml)

Financial Data Analyst (financial-data-analyst/)

• Next.js + TypeScript with Recharts visualization
• Interactive financial data analysis via chat interface
• React hooks for state management

Development Infrastructure

• Monorepo with pyproject.toml and .pre-commit-config.yaml at root
• Python projects: ruff (lint + format) + pyright type checking + pytest
• TypeScript projects: ESLint Next.js configuration
• CLAUDE.md at repo root documents all build commands for Claude Code context

Technical Architecture

Repository Structure

claude-quickstarts/
├── CLAUDE.md                    # Claude Code dev guide (build cmds, code style per project)
├── pyproject.toml               # Root Python config
├── .pre-commit-config.yaml      # Repo-wide pre-commit hooks
├── agents/                      # Minimal agent loop reference (<300 lines Python)
│   ├── agent.py                 # Core API + tool loop
│   ├── tools/                   # ThinkTool + MCP tool wrappers
│   └── utils/                   # Message history, MCP connections
├── autonomous-coding/           # Multi-session coding agent (Claude Agent SDK)
│   ├── autonomous_agent_demo.py # CLI entry point
│   ├── agent.py                 # Session logic
│   ├── client.py                # SDK client config
│   ├── security.py              # Bash allowlist + OS sandbox
│   ├── prompts/                 # initializer_prompt.md, coding_prompt.md, app_spec.txt
│   └── progress.py              # Session tracking
├── browser-use-demo/            # Playwright + Claude Browser Tools API (Docker)
├── computer-use-demo/           # Desktop control (Docker + VNC + Streamlit)
│   ├── computer_use_demo/       # Python agent loop
│   └── Dockerfile               # Full Linux desktop image
├── customer-support-agent/      # Next.js + shadcn/ui + Amplify
└── financial-data-analyst/      # Next.js + Recharts

Agent Loop Pattern (from agents/agent.py)

User message
    → Claude API call (with tools + MCP tool list)
    → Response: text block OR tool_use block
    → If tool_use: execute locally or via MCP server
    → Append tool_result to message history
    → Loop until no more tool_use blocks
    → Return final text response

Autonomous Coding Two-Agent Pattern

Session 1 (Initializer):
    app_spec.txt → generate feature_list.json (200 test cases) → git init → project scaffold

Sessions 2+ (Coding Agent):
    Read feature_list.json → pick next incomplete feature → implement → run tests → mark passing → git commit
    (Each session: fresh context window; progress via feature_list.json + git history)

Computer Use Tool Version

Beta tool: computer_use_20251124
Actions: screenshot, click, type, scroll, key, zoom (new in 20251124)
Editor: str_replace_based_edit_tool (replaces str_replace_editor)
Ports: 5900/VNC, 8501/Streamlit, 6080/noVNC, 8080/web

Installation and Usage

Computer Use Demo (quickest start)

export ANTHROPIC_API_KEY=your_api_key
docker run \
    -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 5900:5900 -p 8501:8501 -p 6080:6080 -p 8080:8080 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
# Then open http://localhost:8080

Agents Reference (Python)

git clone https://github.com/anthropics/claude-quickstarts.git
cd claude-quickstarts
pip install anthropic mcp
python -c "
from agents.agent import Agent
from agents.tools.think import ThinkTool
agent = Agent(name='demo', system='You are helpful.', tools=[ThinkTool()])
print(agent.run('What are 3 key benefits of async I/O?'))
"

Autonomous Coding Agent

cd autonomous-coding
npm install -g @anthropic-ai/claude-code
pip install -r requirements.txt
export ANTHROPIC_API_KEY=your_key
python autonomous_agent_demo.py --project-dir ./my_project --max-iterations 5

Customer Support Agent (Next.js)

cd customer-support-agent
npm install
npm run dev           # full UI at localhost:3000
npm run dev:chat      # chat-only variant

Relevance to Claude Code Development

Direct Applications

1. CLAUDE.md Pattern: The repo-root CLAUDE.md documents build commands and code style conventions for each sub-project — a direct reference for how Anthropic structures CLAUDE.md for multi-language monorepos. The format is per-project headings with Setup, Testing, and Code Style subsections.

2. Agent SDK Integration: The autonomous-coding/ project demonstrates the claude-code-sdk Python package integration pattern — specifically how to spawn Claude Code sessions programmatically, manage context windows across sessions, and persist state via file + git. Directly applicable to Claude Code skill orchestration patterns.

3. Two-Agent Orchestration: The initializer + coding agent split (session 1 generates plan; sessions 2+ execute) is a concrete multi-session orchestration pattern applicable to claude_skills multi-agent workflows.

4. Security Hook Pattern: security.py shows how to implement a bash command allowlist as a pre-execution hook — directly analogous to Claude Code PreToolUse hooks for constraining tool execution scope.

5. MCP Integration Reference: agents/ shows how to connect both local tools and MCP servers in a single agent loop — relevant to the mcp-ecosystem research category and claude_skills MCP plugin development.

6. Computer Use Tool Version: Documents the computer_use_20251124 tool API with zoom support and str_replace_based_edit_tool — authoritative reference for current beta computer use tool versions.

Patterns Worth Examining

1. Feature list as session handoff: feature_list.json as the durable cross-session progress tracker (rather than a database or external state store) is a simple, git-trackable pattern for long-running agent workflows.

2. Per-project CLAUDE.md in monorepo: Project-level build command docs in a single shared CLAUDE.md at monorepo root — provides all tool context without per-directory CLAUDE.md proliferation.

3. Layout variants via npm scripts: npm run dev:left/right/chat for shipping multiple UI configurations from one codebase — relevant when building multi-surface Claude Code skill UIs.

4. Docker as isolation boundary for computer use: Using Docker to scope filesystem access and network exposure for computer use agents — a security pattern for any Claude Code plugin that invokes desktop tools.

References

Research Method: GitHub API for repository metadata, language breakdown, and contributor count (Link header pagination). README and sub-project READMEs decoded from base64 GitHub contents API. CLAUDE.md read for development patterns.

Freshness Tracking

Review Triggers:

• New quickstart project added to the repository
• Computer use tool version update (currently computer_use_20251124)
• str_replace_based_edit_tool replaced or versioned
• Claude Agent SDK (claude-code-sdk) major version change affecting autonomous-coding patterns
• Stars exceed 20K (indicates sustained developer adoption)
• Versioned releases introduced