Charlotte
The Web, Readable.
An MCP (Model Context Protocol) server that transforms web pages into structured, text-native representations for AI agents. Charlotte uses headless Chromium to expose semantic browser understanding — accessibility trees, layout geometry, landmark detection, and interactive element mapping — without requiring vision models or fragile CSS selectors.
Quick Install
npx @anthropic-ai/claude-code \
mcp add charlotte -- \
npx -y @anthropic-ai/charlotte-mcp@latestKey Features
Everything an AI agent needs to understand and interact with web pages programmatically.
Structured Page Representation
Outputs structured JSON with landmarks, headings, interactive elements, forms, and content summaries at three verbosity levels.
Accessibility Tree Extraction
Exposes semantic browser understanding through accessibility trees — no vision models or fragile CSS selectors required.
30+ Browser Tools
Navigation, observation, interaction, session management, development mode, and utility tools — all exposed via MCP.
Stable Element IDs
Hash-based element identifiers that survive minor DOM mutations, enabling reliable interaction across page states.
Structural Diffing
Compare page snapshots to detect added, removed, moved, and changed elements between actions.
Development Mode
Local file serving with hot-reload, CSS/JS injection, and built-in accessibility and performance auditing.
Tool Categories
30+ tools organized into six categories for complete browser control via MCP.
Navigation
Page traversal and history
navigate, back, forward, reloadObservation
Multi-detail rendering and search
observe, find, screenshot, diffInteraction
DOM manipulation and input
click, type, select, scroll, hover, keySession
Browser state management
tabs, viewport, cookies, headers, networkDevelopment
Local dev and auditing
dev_serve, dev_inject, dev_auditUtilities
JS execution and control
evaluate, wait_for, configureHow It Works
Charlotte sits between your AI agent and the web. It renders pages in headless Chromium and extracts a structured representation that agents can understand without vision capabilities.
Render Pipeline
Headless Chromium renders the full page, then Charlotte extracts accessibility trees, layout geometry, and landmark structure into a compact representation.
Stable Element IDs
Each interactive element receives a hash-based ID that survives minor DOM mutations, so agents can reliably reference elements across multiple tool calls.
Snapshot Ring Buffer
Page state is captured after every action into a configurable ring buffer, enabling structural diffing to detect exactly what changed.
// Charlotte page representation (summary)
{
"url": "https://example.com",
"title": "Example Page",
"structure": {
"landmarks": [
{ "role": "banner", "label": "..." },
{ "role": "navigation", "label": "..." },
{ "role": "main", "label": "..." },
{ "role": "contentinfo", "label": "..." }
],
"headings": [
{ "level": 1, "text": "Page Title" },
{ "level": 2, "text": "Section" }
],
"content_summary": "main: 3 headings,
5 paragraphs, 2 links, 1 form"
},
"interactive": [
{ "id": "btn-a1b2",
"type": "button",
"label": "Submit" },
{ "id": "lnk-c3d4",
"type": "link",
"label": "Learn More" }
]
}Ready to Get Started?
Add Charlotte to your Claude Code setup in one command, or explore the documentation and source on GitHub.