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
| Metric | Value |
|---|---|
| Source Files Analyzed | 1,902 |
| Lines of Code | 514,587 |
| Modules Mapped | 35 |
| Technical Articles | 31+ |
| Languages | English, 中文, 日本語 |
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
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS 4 |
| Code Highlighting | Shiki |
| Search | FlexSearch |
| Articles | MDX via next-mdx-remote |
| i18n | next-intl |
| Animations | Motion |
| Diagrams | Mermaid |
| Monorepo | Turbo |
| Deployment | Vercel |
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/ # (source no longer distributed — see its README)
│ ├── 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 Claude Code source (provided locally) into structured metadata:
- File Tree — Recursively scans the source directory into a hierarchical JSON tree (1,902 entries)
- Module Stats — Analyzes 35 top-level modules with file/line counts
- Source Summary — Aggregates totals across the entire codebase
- 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 |
| (not distributed) |
+--------------------+
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