Advanced 8 min read

Claude Web & Harness Engineering

Browser-based coding with devcontainers and session teleportation

Prerequisites

  • Basic Claude Code usage
  • Understanding of development environments

What You'll Learn

  • Understand devcontainer architecture
  • Teleport sessions between web and CLI
  • Grasp what a harness is and why it matters
  • Know how harness engineering affects LLM performance

claude.ai/codeTerminal$ npm installadded 245 packages$ npm run devServer running on :3000Filessrc/index.tsutils.tspackage.jsonFull development environment in your browserCloud
01/06
0:00 / 0:30

Web vs CLI: Same Power, Different Access

FeatureWebCLI
Setup RequiredNone (browser)Install npm package
File AccessDevcontainer workspaceFull local filesystem
IDE IntegrationWeb-based editorVS Code, JetBrains, etc.
Git OperationsFull supportFull support
Best ForQuick starts, demos, shared devicesDaily development, large projects

Inside the Devcontainer

Each web session spins up an isolated Linux container with pre-installed development tools:

Runtimes

  • Node.js 20 LTS
  • Python 3.11
  • Go 1.21
  • Rust (rustup)

Package Managers

  • npm / pnpm / yarn
  • pip / poetry
  • cargo

Dev Tools

  • Git
  • Docker
  • Make / CMake
  • LSP servers

Databases

  • SQLite
  • PostgreSQL client
  • Redis CLI

Utilities

  • curl / wget
  • jq
  • ripgrep
  • fd

Networking

  • Port forwarding
  • Preview URLs
  • SSH client

Session Teleportation

Move your entire work session from browser to local CLI seamlessly:

# In the web interface, get your session ID
# Click "Export Session" or use /export

# On your local machine:
$ claude --teleport session_0116r15MFQNNgYpysPJfgzMQ

Downloading session state...
Restoring 23 modified files...
Restoring conversation context...
Session restored! You can continue where you left off.
Files

All modified files are downloaded to your local directory

Context

Conversation history and memory are preserved

State

Environment variables and configuration transfer too

🔧 Understanding Harness Engineering

A harness is the complete system that wraps an LLM to create a useful product. The same base model can produce dramatically different results depending on its harness:

Components of a Harness

📝
System Prompt

Instructions that define behavior, persona, and constraints

🔨
Tool Definitions

What actions the LLM can take (read files, run code, search)

🧠
Context Window Management

How conversation history and relevant info is maintained

📤
Output Parsing

How LLM responses are interpreted and executed

🔄
Error Handling

Recovery strategies when things go wrong

🔁
Agentic Loops

Multi-step reasoning and self-correction patterns

Why Harness Engineering Matters

Same model, different outcomes: Two products using the same Claude model can have vastly different performance because of their harness design.

Compound effects: Small improvements in each harness component multiply together. Better prompts + better tools + better error handling = exponentially better results.

Real-world optimization: Claude Code's harness is continuously refined based on millions of actual coding sessions, catching edge cases and improving workflows.

Key insight: When comparing AI coding tools, you're comparing harnesses as much as models. A well-engineered harness on a worse model can outperform a poor harness on a better model.

Claude Code's Harness Engineering

What makes Claude Code's harness particularly effective for software development:

Codebase-Aware Context

Intelligent summaries of project structure, relevant files loaded on-demand, and persistent memory of decisions made

Tool Chain Integration

Native Git, LSP, testing frameworks, and build tools—Claude can verify its own work and fix issues

Agentic Error Recovery

When builds fail or tests break, Claude automatically diagnoses and attempts fixes instead of giving up

Progressive Refinement

Complex tasks are broken into steps with checkpoints, allowing course correction and branch exploration

Harness Impact: A Real Example

Consider a task: "Add user authentication to this Express app"

Basic Harness

  • Generates auth code in isolation
  • Doesn't check existing patterns
  • Can't run tests to verify
  • No error recovery if it fails
  • User must manually integrate
Result: Working code 40% of time

Claude Code Harness

  • Scans codebase for existing auth patterns
  • Installs dependencies and updates configs
  • Runs tests, fixes failures automatically
  • Verifies the server starts correctly
  • Creates a commit with clear message
Result: Working code 95% of time

💡 Pro Tips

  • 1.Use the web version for quick experiments or when on a shared computer—all computation happens in the cloud.
  • 2.Teleport sessions when you need to continue work with local tools or connect to local databases/services.
  • 3.Understanding harness engineering helps you write better prompts—you're working with the system, not against it.
  • 4.When evaluating AI coding tools, test real-world tasks end-to-end—harness quality matters as much as model size.

Master Claude Code faster

Get notified when new animated guides are released.

Subscribe to the newsletter