The Browser Tools MCP Extension server provides a comprehensive suite of tools that enable AI agents to interact with browsers and APIs for autonomous frontend development and debugging.
Browser Control & Analysis:
Capture screenshots of the current browser tab for visual analysis
Navigate to specific URLs programmatically
Read and filter console logs with formatted summaries and statistics
Inspect recent network requests to debug HTTP failures, analyze payloads, headers, and request sequences
Advanced UI Debugging:
Get extensive debugging context for elements selected in DevTools, including computed CSS styles, layout issues, parent/child relationships, accessibility audits, interactive state, and performance hints
API Discovery & Interaction:
Search API documentation (Swagger/OpenAPI) for endpoints, methods, and parameters
List all available API tags with operation counts
Execute live HTTP requests (GET, POST, PUT, PATCH, DELETE) with support for query parameters, request bodies, and optional authentication
These tools work together to provide comprehensive context extraction from browsers and APIs, facilitating automated testing, debugging, and frontend development workflows.
Integrates with OpenAI's API for embedding models to analyze and process content during frontend development workflows
Frontend Development Tools (AFBT)
🚀 Optimized for Autonomous AI-Powered Frontend Development Workflows
⚠️ IMPORTANT NOTE: This is a complex setup requiring careful configuration. Please read setup process carefully before proceeding. The setup involves multiple components (MCP server, browser tools server, Chrome extension) that must be properly configured for the tools to work correctly.
- Autonomous Frontend Browser Tools enables AI coding agents to interact with your browser for autonomous frontend development workflows by giving them context that is needed and used by actual developers. This document provides an overview of the available tools within the MCP server.
- For indetail setup instructions, please refer to
SETUP_GUIDE.md
, this readme has quickstart guide below. - For future plans refer to
FUTURE_PLANS.md
. - For few helper instructions on how to use these tools
HOW_TO_USE.md
. - How it works and architecture is in
PROJECT_OVERVIEW.md
. - For understandig how each tool works
each-tool-explained
directory.
Prerequisites
- Node.js 20+ (or 22 LTS) is required. Node 18 lacks the global
File
Web API used byundici
, which will causeReferenceError: File is not defined
when launching via npx. - Recommended: pnpm (the setup script will install it if missing).
Quickstart (npx)
- Make a new folder at your prefered location and then open terminal in that folder, making a new folder is necessary.
- Start the connector + setup UI
Requires Node ≥ 20. Verify with node -v
.
- The Browser Connector runs in your terminal, you can see the logs there.
- A Setup UI opens at
http://127.0.0.1:5055
. - Configure
projects.json
and.env
via the Setup UI. - verify everything then remember to close the UI by clicking on "finish" button ( this way it will save background resources) — the UI stops; the connector keeps running.
- Check the folder that you made, it will now have a chrome extension for you to load in chrome and use.
- Load the Chrome extension (manual once)
- Open
chrome://extensions
→ Enable Developer mode → "Load unpacked" → selectchrome-extension/
(npx overlays the packaged folder on updates; click Reload after updates)
- Configure your MCP client (Cursor example)
Notes:
- The single entry auto-detects mode: non-interactive (MCP) vs interactive (Setup UI). You can force with
mcp
/setup
subcommands. - Node 20 is used automatically when the system Node is older.
- Open DevTools on your target tab (localhost:3000 or any other port) and start using tools
Active Project gotchas
api.searchEndpoints
uses headerX-ACTIVE-PROJECT
(set by the MCP layer automatically). If results look wrong, verify the active project.- Other tools resolve the active project via
ACTIVE_PROJECT
env ordefaultProject
inprojects.json
. - When switching between projects/IDEs, set
ACTIVE_PROJECT
per IDE instance. you can set project wise mcp.json file in each project folder based on the AI IDE you are using.
Environment variables ( for generating embeddings of API docs, very minimal cost)
- Preferred: set in
.env
from the Setup UI (Environment tab) or in your shell - Keys/models supported:
OPENAI_API_KEY
(+ optionalOPENAI_EMBED_MODEL
)GEMINI_API_KEY
(+ optionalGEMINI_EMBED_MODEL
)
Notes:
- Health shows disconnected until DevTools is open on the inspected tab
Troubleshooting (quick)
- Extension must be loaded and DevTools open on the tab.
- Server discovery scans ports 3025–3035; override with
BROWSER_TOOLS_PORT
if needed. - If
api.request
withincludeAuthToken: true
fails, ensureAUTH_STORAGE_TYPE
,AUTH_TOKEN_KEY
, and optionalAUTH_ORIGIN
are set. - If API search returns an embedding mismatch error, reindex via the Setup UI (Embeddings tab).
Motivation
At this point in time, I think the models are capable of doing a lot of things, but they are not able to do it in a way that is helpful to the user because of a lack of context they have access to.
We humans can do tasks accurately because we have a lot of context about the task we are doing, and we can use that context to make decisions.
Too much context also makes it hard for LLMs to make decisions. So, giving the right context at the right time is very important, and this will be the key to making LLMs more helpful to the user. MCP servers are one of the ways to provide context to LLMs at the right time.
One day, I came across AgentDeskAI's repo (https://github.com/AgentDeskAI/browser-tools-mcp). This repo consisted of a Chrome extension and an MCP server. It had tools like get browser logs, get network status, etc. This inspired me, and I started using these tools in my development workflow. I came to the realization that when I am writing code, I am juggling a lot of things and managing this context in my mind so I know what to write. So, what if we can provide this context to LLMs at the right time? AgentDeskAI was a huge inspiration and starting point for this project, and that is why you will see that this is a fork of that repository. Though at this moment, I am not using most of the tools they had in their repo except the getSelectedElement
tool, they do have many interesting tools, and I am planning to use some again depending on how this workflow works.
I am a Frontend Developer and Applied AI enthusiast, and I am working on this project to make already good AI coding IDEs better by creating a custom workflow on top of these tools. This workflow allows me to automate my work of frontend development and delegate the tasks to these AI IDEs, and they can autonomously work. This allows me to focus on important tasks like future-proof project setup. Oh yeah, one important thing to note is that currently, this workflow only works if the project is already set up and has basic things like auth context, API calling structure, routing, and how those routes are exposed, etc. All of this context should be set up in AI IDEs. I initially used Windsurf's Memories to store this context, which allowed the agent to retrieve the important memories based on my prompt. Now i have shifted to cursor because windsurf launched it's own browser and in that i can't load my extension so windsurf's internal system prompt conflicts with this workflow. You can use Cursor's Rule files or memories, i prefer rules files in cursor.
Now, to make Frontend development autonomous, we have to understand what a frontend developer uses to code and how he/she thinks.
A frontend developer uses API documentation, browser, browser logs, browser errors, the ability to make API calls, functional requirement documents, developer tools, and his/her visual capability to see the UI and make decisions. Considering these aspects of frontend development, we can create an MCP server that can provide context to AI IDEs at the right time. So, I made tools that can access all these aspects of frontend development and provide context to AI IDEs at the right time. These tools include: browser.network.inspect
, browser.screenshot
, ui.interact
(planned), browser.console.read
, api.request
, api.listTags
, api.searchEndpoints
, browser.navigate
... and more coming soon.
I plan to make such workflows for backend and QA testers also, but primarily I am a frontend guy, so I chose this first. If you are interested in this project, please let me know, and I will be happy to help you. We can create something big and awesome.
local-only server
The server can only run on the client's local machine because it depends on local resources.
Tools
Enables AI tools to interact with browsers for enhanced frontend development, providing developer context to LLMs through tools like API call analysis, screenshots, element selection, and API documentation ingestion.
Related MCP Servers
- AsecurityFlicenseAqualityEnables AI agents to interact with web browsers using natural language, featuring automated browsing, form filling, vision-based element detection, and structured JSON responses for systematic browser control.Last updated -52
- -securityFlicense-qualityEnables AI assistants to control a browser through a set of tools, allowing them to perform web automation tasks like navigation, typing, clicking, and taking screenshots.Last updated -
- AsecurityAlicenseAqualityProvides AI assistants with Safari browser automation and developer tools access, enabling LLMs to control Safari, access console logs, monitor network activity, and perform browser automation tasks.Last updated -1305MIT License
- -securityFlicense-qualityEnables AI assistants to control a browser through a set of tools, allowing them to perform web automation tasks like navigation, typing, clicking, and taking screenshots.Last updated -