@frontend-debugger/server

MCP server for frontend UI debugging — component inspection, visual regression, a11y auditing, and session replay.

Works with any MCP-compatible client (Claude Desktop, Claude Code, Cursor, etc.) to give AI assistants deep visibility into your running frontend.

Features

• 35+ tools across 6 namespaces: core, audit, replay, react, vue, storybook
• Progressive tool loading — starts with 5 core tools, expands on demand
• Zero runtime dependencies in your app — operates via CDP injection
• Framework-aware — React component tree, Vue devtools, Storybook stories
• CI-ready — SARIF and JUnit output via @frontend-debugger/ci

Quick Start

npm install -g @frontend-debugger/server

Add to your MCP client config:

{
  "mcpServers": {
    "frontend-debugger": {
      "command": "frontend-debugger-mcp",
      "env": {
        "FRONTEND_DEBUGGER_PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

npx (no install)

{
  "mcpServers": {
    "frontend-debugger": {
      "command": "npx",
      "args": ["-y", "@frontend-debugger/server"]
    }
  }
}

Environment Variables

| Variable | Default | Description | |---|---|---| | FRONTEND_DEBUGGER_PROJECT_ROOT | cwd() | Project root for file operations | | FRONTEND_DEBUGGER_ALL_TOOLS | 0 | Set to 1 to register all tools at startup instead of progressive loading |

License

MIT