English | 中文 | 日本語

Claude Harness

Deconstructing Claude Code — interactive source code analysis, guided walkthroughs, and deep architectural exploration.

Claude Harness is an open-source platform for exploring and understanding the internals of Claude Code, Anthropic's official AI coding agent. Through interactive code browsing, in-depth technical articles, and module-level analysis, it transforms 500K+ lines of TypeScript into an accessible learning experience.

Why This Project Exists

Claude Code is one of the most sophisticated AI agent harnesses ever built — a masterclass in tool design, context management, permission governance, and multi-agent coordination. But understanding its architecture from raw source alone is daunting.

Claude Harness makes that architecture legible. It provides:

• Guided articles that walk through each subsystem with real code references
• Interactive code browser with syntax highlighting and full-text search
• Module visualizations that reveal the structural relationships in the codebase

Whether you're building your own AI agent, studying harness engineering patterns, or simply curious about how Claude Code works under the hood — this project is for you.

At a Glance

Key Features

Interactive Code Browser

Browse the full Claude Code source tree with a file explorer, syntax highlighting powered by Shiki, and instant client-side search via FlexSearch.

In-Depth Technical Articles

31 guided walkthroughs covering every major subsystem:

Module Explorer

Visualize the 35 major modules with file counts, line counts, and descriptions:

utils          564 files   181K lines   Utility functions
components     389 files    82K lines   Ink UI components (~140)
services       130 files    54K lines   External service integrations
tools          184 files    51K lines   Agent tool implementations (~40)
commands       207 files    27K lines   Slash commands (~50)
hooks          104 files    19K lines   React hooks
ink             96 files    20K lines   Ink renderer wrapper
...and 28 more

Multi-Language Support

Full internationalization with English, Chinese (中文), and Japanese (日本語) — with locale-aware routing and automatic fallback.

Tech Stack

Getting Started

Prerequisites

• Node.js 22+ (see .node-version)
• pnpm (or npm)

Installation

# Clone the repository
git clone https://github.com/anthropics/claude-harness.git
cd claude-harness

# Install dependencies
pnpm install

# Generate metadata (file tree, module stats, search index)
pnpm generate

# Start development server
pnpm dev

The app will be available at http://localhost:3000.

Build for Production

pnpm build

Project Structure

claude-harness/
├── content/
│   └── articles/
│       ├── en/                    # English articles
│       ├── zh/                    # Chinese articles (31 guides)
│       └── ja/                    # Japanese articles
│
├── packages/
│   ├── claude-code-source/        # Claude Code source archive (read-only)
│   │   └── src/
│   │       ├── commands/          # ~50 slash commands
│   │       ├── tools/             # ~40 agent tools
│   │       ├── components/        # ~140 Ink UI components
│   │       ├── services/          # External integrations
│   │       ├── bridge/            # IDE integration (VS Code, JetBrains)
│   │       ├── hooks/             # React hooks
│   │       └── ...               # 35 modules total
│   │
│   ├── scripts/                   # Metadata generation pipeline
│   │   └── src/
│   │       ├── generate-file-tree.ts
│   │       ├── generate-module-stats.ts
│   │       ├── generate-search-index.ts
│   │       └── generate-source-summary.ts
│   │
│   └── web/                       # Next.js web application
│       └── src/
│           ├── app/[locale]/      # Locale-aware pages
│           │   ├── articles/      # Article list & detail
│           │   ├── code/          # Interactive code browser
│           │   └── modules/       # Module explorer
│           ├── components/        # Shared UI components
│           ├── lib/               # Utilities & data loading
│           └── i18n/              # Internationalization config
│
├── turbo.json                     # Turbo monorepo config
├── vercel.json                    # Vercel deployment config
└── package.json                   # Root workspace config

Data Generation Pipeline

The pnpm generate command runs four scripts that process the Claude Code source into structured metadata:

1. File Tree — Recursively scans the source directory into a hierarchical JSON tree (1,902 entries)
2. Module Stats — Analyzes 35 top-level modules with file/line counts
3. Source Summary — Aggregates totals across the entire codebase
4. Search Index — Builds a full-text FlexSearch index for client-side search

These generated files power the web UI's code browser, module explorer, and search functionality.

Architecture

+---------------------------------------------------+
|                  Web Application                   |
|                                                    |
|  +----------+ +----------+ +--------+ +---------+  |
|  | Articles | |   Code   | | Module | | Search  |  |
|  |  (MDX)   | | Browser  | |Explorer| | (Flex)  |  |
|  +----+-----+ +----+-----+ +---+----+ +----+----+  |
|       |             |           |           |       |
|  +----v-------------v-----------v-----------v----+  |
|  |             Generated Metadata                |  |
|  |  file-tree.json module-stats.json search-idx  |  |
|  +------------------------+----------------------+  |
+---------------------------|-------------------------+
                            |
                  +---------v---------+
                  | Generation Scripts |
                  | (packages/scripts) |
                  +---------+---------+
                            |
                  +---------v---------+
                  | Claude Code Source |
                  | (read-only archive)|
                  | 1,902 files  514K  |
                  +--------------------+

Contributing

Contributions are welcome! Here are some ways to help:

• Add articles — Write new technical walkthroughs in content/articles/
• Translate — Help expand English and Japanese article coverage
• Improve UI — Enhance the code browser, module explorer, or search experience
• Fix bugs — Check the Issues tab for open items

Writing Articles

Articles are MDX files in content/articles/{locale}/. Each file needs frontmatter:

---
title: "Your Article Title"
description: "Brief description"
order: 32
tags: ["tag1", "tag2"]
readTime: "15 min"
---

Your content here...

Related Projects

• Claude Code — Anthropic's official AI coding agent

License

MIT