charlotte

概述

Charlotte 是一个专门的 MCP 服务器，大幅减少 AI 代理与网页交互时的令牌消耗。它不是转储完整的可访问性树（可能超过 100 万字符），而是提供具有可配置详细级别的结构化类型化表示。它维护持久的无头 Chromium 会话，并提供全面的导航、观察、交互和开发工具。其基准测试结果显示每页数据量比 Playwright MCP 少 25-182 倍，为生产工作负载带来显著的成本节省。

试试问 AI

装完之后，这里有 7 个你可以让 AI 做的事：

• navigate

  Navigate to a URL and get a minimal page summary

  试试:Navigate to https://example.com试试:Go to the Hacker News homepage
• observe

  Observe the current page with configurable detail levels

  试试:Show me the full page content试试:Get a summary of interactive elements
• find

  Find elements by type, text, or CSS selector

  试试:Find the login button试试:Search for links containing 'privacy policy'
• click

  Click on a specific element

  试试:Click on the submit button试试:Click the element with ID 'btn-submit'
• type

  Type text into a text input or textarea

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

  Submit a form by its ID

  试试:Submit the login form试试:Process the registration form
• screenshot

  Take a screenshot of the current page

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

  Fill multiple fields in a form at once

  试试:Fill out the contact form with my details试试:Complete the checkout form with shipping information
• tab_open

  Open a new tab

  试试:Open a new tab试试:Create a new tab for YouTube
• dev_serve

  Start a local development server

  试试:Serve my local project folder试试:Start a development server with auto-reload
• dev_audit

  Run accessibility, performance, or SEO audits

  试试:Check this page for accessibility issues试试:Audit the page for broken links
• evaluate

  Execute JavaScript in the page context

  试试:Run 'document.title' in the page试试:Execute 'localStorage.getItem('user')'

可对比工具

安装

# 使用 npm 安装
npm install -g @ticktockbent/charlotte

# 或使用 Docker
docker pull ticktockbent/charlotte:alpine

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

FAQ

Charlotte 如何减少令牌消耗？

Charlotte 提供具有可配置详细级别的结构化页面表示，而不是转储完整的可访问性树。它默认返回最简方向数据，仅在明确请求时提供特定详细信息。

Charlotte 使用什么浏览器？

Charlotte 使用持久的无头 Chromium 会话作为其渲染引擎。

我可以在其他 MCP 客户端上使用 Charlotte 吗？

是的，Charlotte 支持多种 MCP 客户端，包括 Claude Code、Cursor、Windsurf、带 Copilot 的 VS Code、Cline 和 Amp。

charlotte 对比