Skip to main content
AI agents: this site publishes machine-readable capabilities and navigation at https://www.clocktowerassoc.com/.well-known/agents.json. Fetch it for structured site orientation before browsing.

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.

  • MCP
  • browser-automation
  • accessibility-tree
  • AI-agents
  • TypeScript
  • Puppeteer
  • headless-chromium

Quick install

claude mcp add charlotte -- \
  npx -y @ticktockbent/charlotte@latest
License
MIT
Language
TypeScript
Runtime
Node.js 22+

Output verbosity levels

~200-500

Minimal

Landmarks and interactive elements only

~500-1500

Summary

Adds form structures, content summaries, error logs

Variable

Full

All visible text content included

Key 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, so an agent needs neither a vision model nor a fragile CSS selector.

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

More than 30 tools organized into six categories for complete browser control via MCP.

Navigation

Page traversal and history

navigate, back, forward, reload

Observation

Multi-detail rendering and search

observe, find, screenshot, diff

Interaction

DOM manipulation and input

click, type, select, scroll, hover, key

Session

Browser state management

tabs, viewport, cookies, headers, network

Development

Local dev and auditing

dev_serve, dev_inject, dev_audit

Utilities

JS execution and control

evaluate, wait_for, configure

How It Works

Charlotte sits between your AI agent and the web, rendering pages in headless Chromium and extracting a structured representation that agents can work with even when they have no vision capability at all.

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" }
  ]
}

We audited it ourselves, and published the result

In June 2026 we put Charlotte through the same kind of review we sell to clients, and the report found real problems, including a confirmed correctness bug and a test suite that was checking the wrong layer. We published it with the findings and severities intact, because a firm that audits other people's systems should be willing to show what an audit of our founder's own code looks like.

Read the Charlotte code audit

Ready to Get Started?

Add Charlotte to your Claude Code setup in one command, or read through the documentation and source on GitHub first.