Charlotte
Token-efficient browser MCP server — structured web pages for AI agents, not raw accessibility dumps
What is Charlotte?
Charlotte is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to token-efficient browser mcp server — structured web pages for ai agents, not raw accessibility dumps
Token-efficient browser MCP server — structured web pages for AI agents, not raw accessibility dumps
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Token-efficient browser MCP server — structured web pages fo
Use Cases
Maintainer
Works with
Installation
NPM
npx -y @ticktockbent/charlotteManual Installation
npx -y @ticktockbent/charlotteConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Charlotte
Charlotte is a token-efficient browser automation MCP server built on Puppeteer/Chromium that delivers structured, AI-readable web page representations instead of raw accessibility dumps or HTML. It exposes up to 43 browser tools covering navigation, structured content observation, element interaction, form filling, screenshot capture, JavaScript evaluation, network monitoring, and local development utilities — all through three configurable profiles (core, browse, full) to balance capability against token cost. AI agents use Charlotte to browse the web, fill forms, audit accessibility and performance, and automate UI workflows without drowning in noisy HTML or accessibility tree output.
Prerequisites
- Node.js 18 or later with npx available
- Chromium (bundled automatically via Puppeteer on first run — approximately 300 MB download)
- An MCP-compatible client such as Claude Desktop, Claude Code, Cursor, or Windsurf
- No API keys required
Install Charlotte globally
Install the @ticktockbent/charlotte package globally via npm. Puppeteer will download Chromium on first launch.
npm install -g @ticktockbent/charlotteOr run directly with npx
Run Charlotte without installing globally using npx. This is also the recommended form for MCP client configs.
npx @ticktockbent/charlotteChoose a tool profile
Charlotte offers three profiles to control how many tools are exposed. Start with the default browse profile for most use cases.
charlotte # browse profile (default)
charlotte --profile core # 7 core tools only
charlotte --profile full # all 43 toolsConfigure your MCP client
Add Charlotte to your claude_desktop_config.json. The npx form is recommended so you always run the latest published version.
{
"mcpServers": {
"charlotte": {
"command": "npx",
"args": ["-y", "@ticktockbent/charlotte"]
}
}
}Optional: create a charlotte.config.json
Place a config file in your working directory to customise browser settings, output directory, iframe handling, and content size limits.
{
"browser": {"headless": true, "noSandbox": false},
"tools": {"profile": "browse"},
"rendering": {"includeIframes": false, "iframeDepth": 3},
"output": {"dir": "./charlotte-output"},
"limits": {
"maxInteractiveElements": 2000,
"maxFullContentChars": 200000
}
}Restart your MCP client and test navigation
Restart Claude Desktop or your editor. Ask the AI to navigate to a URL to confirm Charlotte responds and returns structured page content.
Charlotte Examples
Client configuration
claude_desktop_config.json entry for Charlotte using npx so the latest version is always used.
{
"mcpServers": {
"charlotte": {
"command": "npx",
"args": ["-y", "@ticktockbent/charlotte"]
}
}
}Prompts to try
Example prompts that leverage Charlotte's navigation, observation, interaction, and audit tools.
- "Navigate to https://example.com and give me a structured summary of the main content"
- "Go to https://myapp.com/login, fill in the email field with [email protected], type the password, and click Sign In"
- "Take a screenshot of https://staging.myapp.com/dashboard and describe what you see"
- "Navigate to https://myapp.com and run an accessibility audit — list any WCAG violations"
- "Check the network requests made when loading https://example.com and identify any slow resources or failed requests"Troubleshooting Charlotte
Chromium fails to launch with sandbox errors on Linux
Set the CHARLOTTE_NO_SANDBOX environment variable to true in your MCP client config: add "env": {"CHARLOTTE_NO_SANDBOX": "true"} to the charlotte entry in claude_desktop_config.json. This is commonly needed in Docker or CI environments.
observe returns very little content for dynamic pages
Some pages load content via JavaScript after the initial page load. Use the navigate tool first, then wait a moment before calling observe. For heavily dynamic SPAs, try the screenshot tool to visually confirm the page has rendered before extracting text content.
npx @ticktockbent/charlotte hangs on first run
The first run downloads Chromium (~300 MB). Wait for the download to complete — it can take several minutes depending on your connection. Subsequent starts will be fast. If it hangs indefinitely, check disk space and firewall rules that might block the Puppeteer download URL.
Frequently Asked Questions about Charlotte
What is Charlotte?
Charlotte is a Model Context Protocol (MCP) server that token-efficient browser mcp server — structured web pages for ai agents, not raw accessibility dumps It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Charlotte?
Install via npm with the command: npx -y @ticktockbent/charlotte. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Charlotte?
Charlotte works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Charlotte free to use?
Yes, Charlotte is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Charlotte Alternatives — Similar Browser Automation Servers
Looking for alternatives to Charlotte? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Charlotte in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Charlotte?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.