Charlotte

Name: Charlotte
Author: TickTockBent

@TickTockBent

About Charlotte

Charlotte is an MCP server that renders web pages into structured, agent-readable representations using headless Chromium. It exposes the browser's semantic understanding — accessibility tree, layout geometry, interactive elements — to AI agents via Model Context Protocol tools,

#web #mcp #server #charlotte #agent #dev-tool

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "charlotte": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@ticktockbent/charlotte"
      ],
      "env": {}
    }
  }
}

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Charlotte?

Charlotte is an MCP server that renders web pages into structured, agent-readable representations using headless Chromium. It exposes the browser’s semantic understanding — accessibility tree, layout geometry, interactive elements — to AI agents via the Model Context Protocol, enabling navigation, observation, and interaction without vision models or brittle selectors.

How to use Charlotte?

Install globally with npm install -g @ticktockbent/charlotte (Node.js >= 22). Run with charlotte (default browse profile) or with a specific profile (e.g., charlotte --profile core). Configure your MCP client to use the stdio command; examples are provided for Claude Code and Claude Desktop. Docker images are also available on Docker Hub and GitHub Container Registry.

Key features of Charlotte?

Navigation, observation, and interaction via structured page representation
Three detail levels (minimal, summary, full) to control token consumption
Tool profiles reduce definition overhead up to 77%
Stable element IDs survive minor DOM mutations
Development tools: static server, CSS/JS injection, audits
Console monitoring and full HTTP request history

Use cases of Charlotte

Browse and interact with web pages using minimal tokens per call
Fill out forms and submit data programmatically
Local development feedback loop with live reload and accessibility audits

FAQ from Charlotte

How does Charlotte reduce token usage compared to other browser MCP servers?

It returns a compact orientation (e.g., 336 characters for Hacker News) on navigation and lets agents request more detail via three levels, rather than dumping the full accessibility tree every time.

What are the dependencies and runtime requirements?

Node.js >= 22 and npm are required for installation. A headless Chromium instance is managed by Charlotte (bundled via Puppeteer); Docker images include all dependencies.

Can agents activate more tools mid-session?

Yes. Use charlotte:tools enable <profile> to activate additional tools and charlotte:tools disable <profile> to deactivate them, all without restarting the server.