Skip to content

Latest commit

 

History

History
55 lines (41 loc) · 2.1 KB

File metadata and controls

55 lines (41 loc) · 2.1 KB

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

  • 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