Brave DevTools MCP vs Charlotte
A side-by-side look at the Brave DevTools MCP and Charlotte MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Brave DevTools MCP for browser automation work as a local process; choose Charlotte for browser automation as a local process. You can also run both side by side in one mcpServers block.
Which MCP server should you choose?
Choose Brave DevTools MCP when
- You need dedicated capabilities in the Browser Automation domain.
- You prefer a local stdio subprocess transport.
- You want tools like
click, close_page, drag.
Choose Charlotte when
- You need dedicated capabilities in the Browser Automation domain.
- You prefer a local stdio subprocess transport.
- You want tools like
charlotte_navigate, charlotte_back, charlotte_forward.
Feature & specification comparison
Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Browser Automation | Browser Automation |
| Quality signal | 67/100 · Great | 68/100 · Great |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | Not declared | Not declared |
| Pricing | Not declared | Not declared |
| Required env vars | None listed | None listed |
| Verified owner | Community listing | Community listing |
| GitHub stars | 45 | 183 |
| Directory activity | 0 views 0 installs 0 upvotes | 2 views 0 installs 0 upvotes |
| Tools | 32 | 23 |
| Full listing | View Brave DevTools MCP | View Charlotte |
Tools & capabilities
Brave DevTools MCP tools 32
clickClicks on the provided elementclose_pageCloses the page by its index. The last open page cannot be closed.dragDrag an element onto another elementemulateEmulates various features on the target page. Each call replaces all emulation settings (except extraHttpHeaders), so pass all desired settings in a single call.evaluate_scriptEvaluate JavaScript inside the target page. The source can be provided inline or loaded from a local file. Returns the response as JSON, so returned values have to be JSON-serializable.fillType text into an input, text area or select an option from a <select> element.fill_formFill out multiple form elements (inputs, selects, checkboxes, radios) at once. ALWAYS prefer this tool over multiple individual 'fill' or 'click' calls when interacting with forms. It is significantly faster, more reliable, and reduces turn count. Example: Fill username, password, and check "Remember Me" in one call.get_console_messageGets a console message by its ID. You can get all messages by calling list_console_messages.get_css_stylesRetrieve matched CSS rules, inline styles (element.style), inherited styles, custom properties, and cascade wrappers (@layer, @media, @container, @scope) for an element identified by its UID. Rules are ordered from highest to lowest cascade precedence and include source line numbers (e.g. index:196). Active (winning) declarations have no prefix tag, while (losing) overridden declarations are prefixed with [overloaded]. Treat the output as authoritative and complete. Results are paginated (10 rules per page by default); use pageIdx to page through the remaining rules. Requires a UID from take_snapshot.get_network_requestGets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel. Useful for inspecting request headers (including 'Cookie') and response headers (including 'Set-Cookie' and directives).handle_dialogIf a browser dialog was opened, use this command to handle ithoverHover over the provided element- +20 more on the listing page
Charlotte tools 23
charlotte_navigateLoad 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.charlotte_backNavigate back in browser history. Returns page representation after navigation.charlotte_forwardNavigate forward in browser history. Returns page representation after navigation.charlotte_reloadReload the current page. Returns page representation after reload.charlotte_observeGet 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).charlotte_findSearch 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.charlotte_screenshotCapture 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.charlotte_screenshotsList all saved screenshot artifacts. Returns metadata for each saved screenshot including ID, filename, page URL, and timestamp.charlotte_screenshot_getRetrieve a previously saved screenshot artifact by its ID. Returns the image data and metadata.charlotte_screenshot_deleteDelete a saved screenshot artifact by its ID. Removes the file from disk.charlotte_diffCompare current page state to a previous snapshot. Returns structural diff showing added, removed, moved, and changed elements.charlotte_clickClick an interactive element on the page. Returns full page representation after the click.- +11 more on the listing page
Ready-to-paste client configs
Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
Brave DevTools MCP
{
"mcpServers": {
"brave-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"brave-mcp@latest"
]
}
}
}
Charlotte
{
"mcpServers": {
"charlotte": {
"command": "npx",
"args": [
"@ticktockbent/charlotte"
]
}
}
}
Frequently asked questions
Brave DevTools MCP is categorized under Browser Automation and uses a local stdio subprocess. Charlotte belongs to Browser Automation and uses a local stdio subprocess. Pick Brave DevTools MCP for browser automation work and Charlotte for browser automation.
Copy the mcpServers block from the config section on this page into your client's config (for example claude_desktop_config.json or ~/.cursor/mcp.json), then fully restart the client.
Brave DevTools MCP has no declared pricing — check the project's own site. Charlotte has no declared pricing — check the project's own site. If a server needs environment variables such as API keys, define them under the env key in your client's MCP config.
Yes. MCP clients support multiple servers: add brave-devtools-mcp and charlotte as separate keys in the same mcpServers object, and your assistant will call tools from either one.
On AllMCPs, Brave DevTools MCP has a quality signal of 67/100 (Great) with 0 views, 0 installs and 45 GitHub stars. Charlotte has 68/100 (Great) with 2 views, 0 installs and 183 GitHub stars.
