If you have not already configured BrowserToolsMCP, make sure to visit the installation page to get everything set up!

With BrowsersToolsMCP now installed and configured with your MCP client, you can enable your favorite AI code editors and agents to have access to the following capabilities:

​
Analyzing Logs for Debugging & Validation

  • Get Console Logs: Returns the most recent console logs

  • Get Console Errors: Returns the most recent console errors

  • Get XHR Network Logs: Returns all of the most recent xhr requests that results in an HTTP success response code like 200 or 300

  • Get XHR Network Errors: Returns the most recent xhr requests that returned a 400 or 500 HTTP error response code

    “Can you check console and network logs to see what went wrong?”
    Cursor agent will automatically use all four tools if you ask this when debugging.

  • Wipe Logs: Deletes all logs stored on the server

    “Wipe the logs”
    Cursor agent will delete all logs stored in the server so that you have a fresh slate for debugging. Useful if you don’t want to refresh to browser to wipe reset/wipe your logs.

​
Updating & Debugging UI Components

  • Capture Screenshot: Sends a screenshot to /user/Downloads/mcp-screenshots

    “Something doesn’t look right in the UI. Can you take a screenshot?”

    We suggest setting a custom path in the dev tools panel so screenshots are sent directly to AI code editors workspace / current project.

    Then you can easily drag n’ drop screenshots into your AI chat interface.

  • Get currently selected element: Returns the currently selected element.

    ”Can you edit the currently selected element to do x, y and z?”

    When using the chrome dev tools you can use the Element Selector tool to select any component in your UI.

    After selecting an element, you’ll be be able to ask Cursor to edit or find the currently selected element in your code. This makes traversing through a codebase and making UI changes much easier.

​
Requirements

Note: Model Context Protocol (MCP) is specific to Anthropic models. When using an editor like Cursor, make sure to enable composer agent with Claude 3.5 Sonnet selected as the model.

InstallationContributing