Claude API Playground

A single-file developer interface for the Anthropic Claude API. Open index.html in your browser and start prompting — no build step, no dependencies.

Table of Contents

• Features
• Models
• Usage
• Notes
• License

Features

• Streaming responses — real-time token output with live metrics (tokens/sec)
• Model selection — Sonnet 4.6, Opus 4.6, Haiku 4.5, Sonnet 4 (legacy)
• Extended thinking — manual mode with budget tokens, adaptive mode for Opus 4.6
• Adjustable parameters — temperature, max_tokens sliders (auto-disabled during thinking)
• Auto-optimize — adjusts settings based on prompt size and selected model
• Token counter — live character/token estimation with context window tracking
• Output tools — copy, download as .txt, clear
• Dark terminal aesthetic — monospace font, green accent, dev-focused UI
• Keyboard shortcuts — Cmd/Ctrl+Enter to run, Escape to stop
• Zero dependencies — single HTML file

Models

Model	Max Output	Context Window	Thinking
Claude Sonnet 4.6	64K tokens	200K (1M beta)	Manual + Adaptive
Claude Opus 4.6	128K tokens	200K (1M beta)	Adaptive only
Claude Haiku 4.5	64K tokens	200K	Manual
Claude Sonnet 4	64K tokens	200K (1M beta)	Manual

Usage

1. Get an Anthropic API key from console.anthropic.com
2. Open index.html in your browser
3. Paste your API key in the Configuration panel
4. Select a model, write a prompt, and hit Run

open index.html

Notes

• Uses anthropic-dangerous-direct-browser-access header for direct browser API calls. For production, proxy requests through a backend.
• API key is stored in localStorage for convenience — never sent to third parties.
• Extended thinking disables temperature (not compatible per API docs).
• Opus 4.6 uses adaptive thinking (type: "adaptive"), other models use manual mode (type: "enabled" with budget_tokens).

License

MIT