BrowserTools MCP for VS Code: Setup & Config

What you can do with BrowserTools in VS Code

Browser evidence and Lighthouse audits in one MCP workflow, with an explicit inactive-project caveat.

• Investigate front-end failures using console and network evidence.
• Run accessibility, performance, and SEO checks from an AI editor.

Before you start: BrowserTools in VS Code

• Chrome with the BrowserTools extension
• A compatible MCP client
• Node.js tooling
• A separate browser-tools-server process
• The BrowserToolsMCP DevTools panel open

Run npx @agentdeskai/browser-tools-server@latest separately. The MCP package belongs in the client configuration. The project is no longer active.

BrowserTools VS Code configuration

1. Choose VS Code configuration scope

   For BrowserTools MCP, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add BrowserTools MCP to VS Code

   Use the browser-tools-mcp entry below in servers. Keep BrowserTools MCP's documented stdio connection fields and your other VS Code entries.

3. Check BrowserTools MCP in VS Code

   BrowserTools MCP: Start in VS Code’s MCP controls; inspect output and trust prompts.

{
  "servers": {
    "browser-tools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@agentdeskai/browser-tools-mcp@latest"
      ],
      "env": {}
    }
  }
}

BrowserTools tools available to VS Code

BrowserTools's stored tool list documents 7 tools; compare it with VS Code's connected tool list, because the stored list is not a live check.

runAccessibilityAudit

Look for runAccessibilityAudit among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

runPerformanceAudit

Look for runPerformanceAudit among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

Inspect page loading and rendering performance.

runSEOAudit

Look for runSEOAudit among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

Review page-level search optimization factors.

runBestPracticesAudit

Look for runBestPracticesAudit among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

runAuditMode

Look for runAuditMode among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

Run auditing tools in sequence, adding a NextJS check when detected.

runNextJSAudit

Look for runNextJSAudit among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

Provide NextJS-focused SEO and development guidance.

runDebuggerMode

Look for runDebuggerMode among VS Code's agent-mode tools after starting BrowserTools through the MCP controls.

BrowserTools: full stored tool descriptions

Troubleshooting BrowserTools in VS Code

• Make npx @agentdeskai/browser-tools-mcp@latest (Node.js/npm) available in the workspace, container, or remote environment hosting BrowserTools MCP. Start through VS Code's MCP controls; inspect output and trust prompts.
• BrowserTools MCP uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: The project explicitly states that it is no longer active.
• Known limitation: Requires an extension and two distinct server components.
• General VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions