charlotte

Overview

Charlotte is a specialized MCP server that dramatically reduces token consumption when AI agents interact with web pages. Instead of dumping the full accessibility tree (which can exceed 1M characters), Charlotte provides structured, typed representations with configurable detail levels. It maintains a persistent headless Chromium session and offers comprehensive navigation, observation, interaction, and development tools. Its benchmark results show 25-182x less data per page compared to Playwright MCP, resulting in significant cost savings for production workloads.

Try asking AI

After installing, here are 7 things you can ask your AI assistant:

• navigate

  Navigate to a URL and get a minimal page summary

  Try:Navigate to https://example.comTry:Go to the Hacker News homepage
• observe

  Observe the current page with configurable detail levels

  Try:Show me the full page contentTry:Get a summary of interactive elements
• find

  Find elements by type, text, or CSS selector

  Try:Find the login buttonTry:Search for links containing 'privacy policy'
• click

  Click on a specific element

  Try:Click on the submit buttonTry:Click the element with ID 'btn-submit'
• type

  Type text into a text input or textarea

  Try:Type 'hello@example.com' into the email fieldTry:Enter my password in the password input
• submit

  Submit a form by its ID

  Try:Submit the login formTry:Process the registration form
• screenshot

  Take a screenshot of the current page

  Try:Capture a screenshot of the current pageTry:Take a full page screenshot
• fill_form

  Fill multiple fields in a form at once

  Try:Fill out the contact form with my detailsTry:Complete the checkout form with shipping information
• tab_open

  Open a new tab

  Try:Open a new tabTry:Create a new tab for YouTube
• dev_serve

  Start a local development server

  Try:Serve my local project folderTry:Start a development server with auto-reload
• dev_audit

  Run accessibility, performance, or SEO audits

  Try:Check this page for accessibility issuesTry:Audit the page for broken links
• evaluate

  Execute JavaScript in the page context

  Try:Run 'document.title' in the pageTry:Execute 'localStorage.getItem('user')'

Comparable tools

Installation

# Install with npm
npm install -g @ticktockbent/charlotte

# Or with Docker
docker pull ticktockbent/charlotte:alpine

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

FAQ

How does Charlotte reduce token consumption?

Charlotte provides structured page representations with configurable detail levels instead of dumping the full accessibility tree. It returns minimal orientation data by default and only provides specific details when explicitly requested.

What browser does Charlotte use?

Charlotte maintains a persistent headless Chromium session as its rendering engine.

Can I use Charlotte with other MCP clients?

Yes, Charlotte supports multiple MCP clients including Claude Code, Cursor, Windsurf, VS Code with Copilot, Cline, and Amp.

Compare charlotte with