@TickTockBent
基本情報
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,
以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。
{
"mcpServers": {
"charlotte": {
"type": "stdio",
"command": "npx",
"args": [
"@ticktockbent/charlotte"
],
"env": {}
}
}
}Load a URL in the active page. Returns page representation after navigation. Default minimal detail includes landmarks, headings, and interactive element counts — use charlotte_find to locate specific elements, or pass detail: 'summary' to get the full element list.
Navigate back in browser history. Returns page representation after navigation.
Navigate forward in browser history. Returns page representation after navigation.
Reload the current page. Returns page representation after reload.
Get current page state without performing any action. Use detail levels to control verbosity: "minimal" for landmarks, headings, and interactive element counts by landmark (use charlotte_find to get specific elements with actionable IDs, or observe({ detail: "summary" }) to see all elements), "summary" (default) for content summaries and full element list, "full" for all text content. Use view: "tree" for a compact structural outline (cheapest orientation tool), or view: "tree-labeled" to include labels on interactive elements (still much cheaper than minimal JSON, and shows which button/link/input is which).
Search for elements matching criteria. Filters interactive elements by text, role, type, or spatial proximity. Use the selector parameter to find DOM elements by CSS selector — this reaches elements not in the accessibility tree (custom widgets, non-semantic divs). Selector results return Charlotte element IDs usable with click, hover, drag, etc.
Capture a visual screenshot. Fallback for when structured representation isn't sufficient (complex visualizations, canvas elements, images). Use save: true to persist as a file artifact that can be referenced later.
List all saved screenshot artifacts. Returns metadata for each saved screenshot including ID, filename, page URL, and timestamp.
Retrieve a previously saved screenshot artifact by its ID. Returns the image data and metadata.
Delete a saved screenshot artifact by its ID. Removes the file from disk.
Compare current page state to a previous snapshot. Returns structural diff showing added, removed, moved, and changed elements.
Click an interactive element on the page. Returns full page representation after the click.
Click at specific page coordinates. Use when target elements are not in the accessibility tree (custom widgets, canvas, non-semantic interactive divs). Dispatches real CDP-level mouse events. Returns full page representation after the click.
Type text into an input element. Returns full page representation after typing.
Select an option in a select/dropdown element. Returns full page representation after selection.
Toggle a checkbox or switch element. Returns full page representation after toggle.
Submit a form. Can submit by form ID or by clicking its submit button. Returns full page representation after submission.
Scroll the page or a specific container. Returns full page representation after scrolling.
List all open browser tabs with their URLs, titles, and active status.
Open a new browser tab. Optionally navigate to a URL. The new tab becomes the active tab.
Switch to a different browser tab by its tab ID. Returns the page representation of the activated tab.
Close a browser tab by its ID. If the closed tab was active, switches to the first remaining tab.
Manage Charlotte tool visibility. Lists available tool groups and their status. Use 'enable' or 'disable' to control which tools are loaded. Disabled tools don't appear in the tool list — enable a group to access its tools. Groups: 'interaction' for form filling, clicking, and drag-and-drop. 'session' for cookie/auth management, tab switching, viewport, and network. 'dev_mode' for local development serving and audits. 'evaluate' for JavaScript execution. 'monitoring' for console and network request logs. 'dialog' for JavaScript dialog handling.
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.
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.
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.
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.
Yes. Use `charlotte:tools enable <profile>` to activate additional tools and `charlotte:tools disable <profile>` to deactivate them, all without restarting the server.
Charlotte communicates over stdio using the Model Context Protocol, making it compatible with MCP clients like Claude
MCP server paired with a browser extension that enables AI agents to control the user's browser.
Parse allows your agent to access thousands of APIs instantly. You can use Parse to build an API for any action on any website and edit any previously existing API in our catalogue.
Loadster is a load testing, stress testing, and synthetic monitoring platform. Run Playwright, Browser Bots, and Protocol Bots to test and monitor your websites, web apps, and APIs. Loadster MCP gives your agents the abi
The Apify MCP server enables your AI agents to extract data from social media, search engines, maps, e-commerce sites, or any other website using thousands of ready-made scrapers, crawlers, and automation tools available on the Apify Store.
Capture screenshots of webpages as images or PDFs with Screenshot Scout.
コメント