🌐 English | 한국어

Claude Context Editor

Real-time context window viewer and editor for Claude Code.

See exactly what Claude Code sends to the API — system prompts, messages, tool definitions, and token counts — and optionally edit messages before they're sent.

How it works

Claude Code ──POST /v1/messages──▶ Proxy (8080) ──▶ api.anthropic.com
                                      │
                                      │ WebSocket
                                      ▼
                                   Web UI (3000)

A local proxy intercepts Claude Code's API requests using the ANTHROPIC_BASE_URL environment variable. A web UI displays the full context window in real-time via WebSocket.

Quick Start

# Install
npm install -g claude-context-editor

# Start the proxy + web UI
cce

# Then in another terminal:
ANTHROPIC_BASE_URL=http://localhost:8080 claude

The web UI opens automatically in your browser.

CLI

cce                    # Start the proxy + web UI
cce list               # List available providers
cce use <provider>     # Select a provider (anthropic, glm)
cce upstream <url>     # Start with a one-off custom upstream
cce --version          # Show version
cce --help             # Show help

Features

Observe Mode (default)

• View every API request in real-time
• Inspect system prompt, messages, and tool definitions
• See token counts per section (system, messages, tools)
• Track API response usage (input/output tokens, stop reason)

Raw HTTP View

See the actual wire text of each call, in three tabs:

| Tab | What it shows | |-----|---------------| | Inbound | The request exactly as Claude Code sent it to the proxy | | Upstream | The request as forwarded to the API — host rewritten, hop-by-hop headers dropped | | Response | Status line and response headers (plus the body for non-200 responses) |

Comparing Inbound against Upstream is the fastest way to see what the proxy changed — a wrong host: line, for instance, explains a 401 immediately.

Credentials (authorization, x-api-key, cookie) are masked by default so the view is safe to screenshot; Reveal secrets unmasks them. Bodies are fetched per-request rather than held in the browser, so the view stays responsive on 200 KB+ contexts.

The Upstream tab is a reconstruction — the request is sent via fetch(), so the on-wire protocol (usually HTTP/2) is negotiated by the HTTP client. Headers it manages itself (host, content-length) are annotated as such.

Intercept Mode

• Pause requests before they reach the API
• Edit or delete individual messages
• Send modified or original request
• 5-minute timeout (auto-sends original if no action)

Cache Safety

| What you edit | Cache impact | |---------------|-------------| | Messages | Safe — no cache bust | | System prompt | Read-only in UI (would bust cache) | | Tools | Read-only in UI (would bust cache) |

Auto Port Selection

If the default ports (8080, 3000) are in use, the proxy and UI automatically find the next available port (up to +10).

Configuration

Environment variables:

| Variable | Default | Description | |----------|---------|-------------| | PROXY_PORT | 8080 | Proxy server port | | UI_PORT | 3000 | Web UI port | | UPSTREAM_URL | provider, else https://api.anthropic.com | Upstream API URL |

# Custom ports
PROXY_PORT=9090 UI_PORT=4000 cce
ANTHROPIC_BASE_URL=http://localhost:9090 claude

Providers

cce use <provider> stores an upstream + API key variable in ~/.cce/config.json:

| Provider | Upstream | API key from | |----------|----------|--------------| | anthropic | https://api.anthropic.com | ANTHROPIC_API_KEY | | glm | https://api.z.ai/api/anthropic | ANTHROPIC_AUTH_TOKEN |

When the key variable is set, it replaces authorization/x-api-key on the forwarded request. When it is unset, whatever Claude Code sent is forwarded unchanged — so pointing a provider at a non-Anthropic upstream without setting its key sends your Claude Code credentials to that host. The Raw HTTP view flags this case in red.

UPSTREAM_URL and cce upstream <url> override the provider's upstream. In that case no provider key is injected, since a key minted for one host must not be sent to another.

How Claude Code connects

Claude Code supports ANTHROPIC_BASE_URL natively. When set, all API calls go through the specified URL instead of api.anthropic.com — including the OAuth token from your Claude subscription, so no API key configuration is needed for the default anthropic provider. The proxy forwards headers (authorization, x-api-key, anthropic-version, etc.) and relays SSE streaming responses transparently.

License

MIT