Charlotte

About

What You'll Need

Set these up before or after installing:

Getting Started

Once installed, try these example prompts and explore these capabilities:

• 1"Navigate to example.com and describe what you see" — uses charlotte:navigate + charlotte:observe
• 2"Click the login button and fill in the form" — uses charlotte:click + charlotte:type + charlotte:submit
• 3"Take a screenshot of the current page" — uses charlotte:screenshot
• 4"Check this page for accessibility issues" — uses charlotte:dev_audit
• 5"Serve my local project folder and test it in the browser" — uses charlotte:dev_serve + charlotte:navigate
• 6Tool: charlotte:observe — Read the current page structure: landmarks, headings, interactive elements, and content
• 7Tool: charlotte:find — Search for elements by text, role, or state
• 8Tool: charlotte:evaluate — Run JavaScript in the page and return results
• 9Tool: charlotte:diff — Compare snapshots to see what changed after an action

Add this to your MCP configuration file:

{
  "mcpServers": {
    "mcp-server": {
      "args": [
        "-y",
        "@ticktockbent/charlotte"
      ],
      "command": "npx"
    }
  }
}

Security Report

Reviews