Charlotte vs Playwright MCP
Both Charlotte and Playwright MCP give AI agents the ability to browse the web. The difference is cost. Charlotte is a token-efficient browser MCP that returns 25–182x less data on real websites — saving thousands of dollars across production workloads.
Why response size matters
Every character an MCP server returns enters the AI agent's context window as input tokens. Playwright MCP sends the full accessibility snapshot on every call — whether the agent needs the entire page or just a single button. On a Wikipedia article, that's over a million characters per navigation.
Charlotte takes a different approach. It defaults to minimal detail on navigation — a compact summary with interactive element counts per landmark region. When the agent needs more, it asks for it with observe or find. This demand-driven model means agents only pay for the context they actually use.
If you're evaluating a Playwright MCP alternative for cost-sensitive or high-volume agent workflows, the numbers below tell the story.
Response size: navigate
Characters returned when an agent first lands on a page. Charlotte defaults to minimal detail; Playwright returns the full accessibility tree. Measured on Charlotte v0.2.0 and Playwright MCP v1.0.
What this means in practice: A Playwright agent reading Hacker News headlines receives 61,230 characters of accessibility tree data. A Charlotte agent gets 336 characters — enough to see the page structure and landmarks — then calls find({ type: "link" }) to retrieve exactly the links it needs. The agent decides what level of detail is worth paying for.
Cost per 100-page session
Input token cost for a 100-page browsing session at Hacker News complexity. Charlotte uses the default browse profile (22 tools); Playwright loads all tools on every call.
| Model | Charlotte | Playwright | You save |
|---|---|---|---|
| Claude Sonnet 4 | $0.05 | $9.18 | $9.13 |
| Claude Opus 4 | $0.09 | $15.30 | $15.21 |
| GPT-4o | $0.04 | $7.65 | $7.61 |
| Claude Haiku 4 | $0.01 | $2.45 | $2.43 |
With tiered tool profiles, Charlotte further reduces overhead. The default browse profile loads 22 tools instead of 40, cutting tool definition tokens by 48%. The core profile (7 tools) cuts definition overhead by 77%.
Feature comparison
Charlotte v0.4.0 (40 tools) vs Playwright MCP (36 tools). Both are open-source MCP servers for browser automation. The capability overlap is substantial — the difference is in design philosophy.
| Feature | Charlotte | Playwright |
|---|---|---|
| Detail level control | Yes | No |
| Stable hash-based element IDs | Yes | No |
| Structural diff tool | Yes | No |
| Semantic find | Yes | No |
| Form structure extraction | Yes | No |
| Accessibility audits | Yes | No |
| Tiered tool profiles | Yes | No |
| Element bounding boxes | Yes | No |
| Async condition polling | Yes | Yes |
| Console message retrieval | Yes | Yes |
| Network request monitoring | Yes | Yes |
| Dialog handling | Yes | Yes |
| Drag and drop | Yes | Yes |
| Tab management | Yes | Yes |
| JavaScript evaluation | Yes | Yes |
| Screenshot capture | Yes | Yes |
| File upload | No | Yes |
| Coordinate-based interaction | No | Yes |
| PDF generation | No | Yes |
| Testing assertions | No | Yes |
| Multi-browser engines | No | Yes |
| Trace recording | No | Yes |
Where each tool wins
Choose Charlotte when
- •Token cost matters. Long browsing sessions, high-volume pipelines, or expensive models where every input token adds up.
- •Agents need surgical precision. Semantic find, detail levels, and structural diffs let agents request exactly the data they need instead of parsing a full page dump.
- •Accessibility is a priority. Built-in a11y audits and form structure extraction help agents understand page semantics, not just raw DOM.
- •You want stable references. Hash-based element IDs survive re-renders. No more broken selectors when the DOM shifts.
- •Context window headroom. Smaller responses leave more room for agent reasoning, tool results from other sources, and longer conversations.
Choose Playwright MCP when
- •You need file uploads. Playwright MCP has a dedicated file upload tool. Charlotte doesn't yet.
- •Cross-browser testing matters. Playwright supports Chrome, Firefox, and WebKit. Charlotte runs on Chromium only.
- •Vision-based interaction. Playwright's vision group provides coordinate-based tools for canvas elements and non-accessible UIs.
- •You need trace recording. Playwright can record browser traces and video for debugging test failures.
- •Built-in test assertions. Five verification tools for checking element visibility, text content, and values.
Different design, different strengths
Playwright MCP was built by the Playwright team to expose their browser automation engine over MCP. It gives agents the full page state on every call — comprehensive, but expensive when the agent only needs a fraction of it.
Charlotte was designed from scratch as a token-efficient browser MCP. Every response is structured around what agents actually need at each step: a minimal overview on arrival, targeted queries for specific elements, and full detail only when explicitly requested. This demand-driven model can reduce input token costs by 96–99% on content-heavy pages.
Charlotte also introduces capabilities that Playwright MCP doesn't offer: structural diffs between page states, semantic search across the accessibility tree, form structure extraction with grouped fields and labels, and tiered tool profiles that reduce tool definition overhead by up to 77%.
Tool definition overhead
MCP tool definitions are sent as input tokens on every API call. More tools means higher per-call overhead — even when the agent doesn't use them. Charlotte's tiered profiles let you control this cost.
| Configuration | Tools | Tokens/call | vs Full |
|---|---|---|---|
| Charlotte full | 40 | 7,187 | — |
| Charlotte browse (default) | 22 | 3,727 | 48% less |
| Charlotte core | 7 | 1,677 | 77% less |
Try Charlotte
Charlotte is open-source, MIT-licensed, and available on npm. Add it to any MCP-compatible client in one step.
Common questions
Is Charlotte a drop-in replacement for Playwright MCP?
Not exactly. Charlotte uses different tool names and a different response format. But the core workflow is the same: navigate to a URL, observe the page, interact with elements. Most agents adapt to Charlotte's tools naturally since MCP clients discover capabilities at connection time. The main functional gaps are file upload, multi-browser support, and coordinate-based vision tools.
How much does Charlotte actually save on tokens?
On navigation, Charlotte returns 25–182x fewer characters than Playwright MCP depending on page complexity. For a 100-page browsing session on Claude Sonnet 4, that's $0.05 vs $9.18 in input token costs. Content-heavy pages like Wikipedia see the largest gains (136x smaller). Simple pages like example.com show modest improvement (1.3x). Real-world pages consistently fall in the 7–182x range.
Can I use Charlotte with Claude, GPT-4, or other LLMs?
Yes. Charlotte implements the standard Model Context Protocol. Any MCP-compatible client works: Claude Desktop, Claude Code, Cursor, Windsurf, Cline, or custom MCP clients. The server communicates over stdio and doesn't depend on any specific LLM provider.
What makes this different from other browser MCP servers?
Charlotte was purpose-built for token efficiency. The demand-driven detail model, stable hash-based element IDs, structural diffing, semantic find, and tiered tool profiles are all designed to minimize the tokens agents spend on browsing. Most browser MCP servers, including Playwright MCP, send the full page state on every call regardless of what the agent needs.