Github TickTockBent Charlotte
Renders web pages into structured, agent-readable representations using headless Chromium.
About This MCP Server
Charlotte maintains a persistent headless Chromium session and acts as a translation layer between the visual web and the agent's text-native reasoning. Every page is decomposed into a structured representation:
Agents receive landmarks, headings, interactive elements with typed metadata, bounding boxes, form structures, and content summaries — all derived from what the browser already knows about every page.
The Renderer Pipeline is the core — it calls extractors in order and assembles a PageRepresentation:
1. Accessibility tree extraction (CDP Accessibility.getFullAXTree) 2. Layout extraction (CDP DOM.getBoxModel) 3. Landmark, heading, interactive element, and content extraction 4. Element ID generation (hash-based, stable across re-renders)
All tools go through renderActivePage() which handles snapshots, reload events, dialog detection, and response formatting.
Tools & Endpoints
Example Workflow
Once connected, an agent can use Charlotte's tools:
What Problems It Solves
- Once connected
- an agent can use Charlotte's tools:
Specifications
Requirements
- • Node.js >= 22
Hosting
Hosting Options
- Package
API
Integrate this server into your application. Choose a connection method below.
Install
npm install -g @ticktockbent/charlotteConfigure
{
"mcpServers": {
"charlotte": {
"type": "stdio",
"command": "npx",
"args": ["@ticktockbent/charlotte"],
"env": {}
}
}
}Performance
Usage
Quick Reference
- Name
- Github TickTockBent Charlotte
- Function
- Renders web pages into structured, agent-readable representations using headless Chromium.
- Transport
- Package
- Language
- JavaScript/TypeScript
- Install
- npm install -g @ticktockbent/charlotte
- Source
- External (Registry)
- License
- Open Source
Ready to integrate this MCP server?
Book a demo to see how this server fits your workflow, or explore the full catalog.