Renders web pages into structured, agent-readable representations using headless Chromium.
If you already use Charlotte, the charlotte mcp server is the piece that lets your assistant work with it directly. Renders web pages into structured, agent-readable representations using headless Chromium.
Your AI agent burns ~60,000 characters of accessibility tree just to look at the Hacker News front page. Charlotte does it in 337.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
Benchmarks — A Charlotte navigate returns a usable orientation by default — landmarks, headings, and interactive element counts grouped by page region. To get thePrerequisites — The Prerequisites tool exposed by this serverInstallation — The Installation tool exposed by this serverCursor — The Cursor tool exposed by this serverWindsurf — The Windsurf tool exposed by this serverCline — Add to Cline MCP settings (via the Cline sidebar > MCP Servers > Configure):Full — Everything in summary, plus all visible text content on the pageArchitecture — The Renderer Pipeline is the core — it calls extractors in order and assembles a PageRepresentation:Installation goes through your MCP client rather than a global install: point it at tsx on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.
Among the browser automation options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Charlotte's toolset — Benchmarks, Prerequisites, Installation and 5 more — is a fair guide to whether it matches your workflow. It is maintained by TickTockBent; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| Benchmarks | A Charlotte navigate returns a usable orientation by default — landmarks, headings, and interactive element counts grouped by page region. To get the equivalent with Playwright MCP, an agent calls browser_snapshot, which |
| Prerequisites | The Prerequisites tool exposed by this server. |
| Installation | The Installation tool exposed by this server. |
| Cursor | The Cursor tool exposed by this server. |
| Windsurf | The Windsurf tool exposed by this server. |
| Cline | Add to Cline MCP settings (via the Cline sidebar > MCP Servers > Configure): |
| Full | Everything in summary, plus all visible text content on the page. |
| Architecture | The **Renderer Pipeline** is the core — it calls extractors in order and assembles a PageRepresentation: |
{
"mcpServers": {
"charlotte": {
"command": "npx",
"args": ["-y", "tsx"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.