autonomous-frontend-browser-tools
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
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@autonomous-frontend-browser-toolstake a screenshot of the current page and analyze the layout"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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-explaineddirectory.
Prerequisites
Node.js 20+ (or 22 LTS) is required. Node 18 lacks the global
FileWeb API used byundici, which will causeReferenceError: File is not definedwhen launching via npx.Recommended: pnpm (the setup script will install it if missing).
Related MCP server: MCP Browser Use Server
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
npx @winds-ai/autonomous-frontend-browser-toolsRequires 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.jsonand.envvia 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)
{
"mcpServers": {
"autonomous-frontend-browser-tools": {
"command": "npx",
"args": ["-y", "@winds-ai/autonomous-frontend-browser-tools"],
"env": {
"ACTIVE_PROJECT": "my-frontend"
}
}
}
}Notes:
The single entry auto-detects mode: non-interactive (MCP) vs interactive (Setup UI). You can force with
mcp/setupsubcommands.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.searchEndpointsuses 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_PROJECTenv ordefaultProjectinprojects.json.When switching between projects/IDEs, set
ACTIVE_PROJECTper 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
.envfrom the Setup UI (Environment tab) or in your shellKeys/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_PORTif needed.If
api.requestwithincludeAuthToken: truefails, ensureAUTH_STORAGE_TYPE,AUTH_TOKEN_KEY, and optionalAUTH_ORIGINare 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.
Available Tools
9 toolsapi.listTagsB
List all API tags with operation counts (from Swagger/OpenAPI).
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the tool lists tags with operation counts, but doesn't describe whether this is a read-only operation, if it requires authentication, what the output format looks like, or any rate limits. For a tool with zero annotation coverage, this is insufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's function without any fluff. It's appropriately sized and front-loaded, with every word contributing to understanding the purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what the return values look like (e.g., format of tags and operation counts), behavioral traits, or usage context relative to siblings. For a tool in this environment, more detail is needed to be fully helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters with 100% schema description coverage, so the schema fully documents the absence of inputs. The description adds no parameter-specific information, which is appropriate here. A baseline of 4 is applied since no parameters exist, and the description doesn't need to compensate for gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('List') and resource ('API tags') with specific scope ('from Swagger/OpenAPI'), making the purpose unambiguous. However, it doesn't explicitly differentiate from sibling tools like 'api.searchEndpoints' or 'api.request', which prevents a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'api.searchEndpoints' or 'api.request', nor does it mention any prerequisites or contextual constraints. It only states what the tool does, not when it's appropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
api.requestA
Execute a live HTTP request to API_BASE_URL; optionally include an Authorization bearer token retrieved from configured browser storage. Use after 'api.searchEndpoints' or for known endpoints.
| Name | Required | Description | Default |
|---|---|---|---|
| endpoint | Yes | The API endpoint path (e.g., '/api/users', '/auth/profile'). Will be combined with API_BASE_URL from environment. | |
| method | No | HTTP method for the API call | GET |
| requestBody | No | Request body for POST/PUT/PATCH requests (will be JSON stringified) | |
| queryParams | No | Query parameters as key-value pairs | |
| includeAuthToken | No | Whether to include auth token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the authorization token mechanism and that it's a 'live HTTP request,' but doesn't cover important behavioral aspects like error handling, timeout behavior, rate limits, or what happens when the request fails. The description adds some context but leaves significant gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise and front-loaded with the core purpose in the first clause. Every sentence earns its place by providing essential context about authorization and usage guidelines without any fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 5-parameter tool with no annotations and no output schema, the description is somewhat incomplete. While it covers the basic purpose and usage context, it lacks information about response format, error handling, and other behavioral aspects that would be important for an API request tool. The 100% schema coverage helps, but the description itself could provide more contextual completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 100% schema description coverage, the baseline is 3. The description doesn't add any parameter-specific information beyond what's already in the schema descriptions. It mentions authorization tokens generally but doesn't provide additional context about the parameters themselves.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Execute a live HTTP request to API_BASE_URL' with specific details about authorization tokens and browser storage. It distinguishes itself from sibling tools like 'api.searchEndpoints' by being the execution tool rather than a discovery tool.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance on when to use this tool: 'Use after api.searchEndpoints or for known endpoints.' This gives clear context about the intended workflow and distinguishes it from other tools that don't involve API requests.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
api.searchEndpointsA
Semantic API documentation search returning essential info: path, method, params (GET), request body (POST/PUT/PATCH/DELETE), and success responses. If schemas are missing, suggests using 'api.request' for live testing.
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | Text query to match against path, summary, description, operationId, and tags | |
| tag | No | Filter by a specific tag (case-insensitive exact match) | |
| searchTerms | No | [DEPRECATED] Previous array of keywords. If provided, behaves like an OR search across terms. | |
| method | No | Filter results by HTTP method (optional) | |
| limit | No | Maximum number of endpoints to return (default: 10) | |
| maxResults | No | [DEPRECATED] Use 'limit' instead. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It describes the search behavior ('semantic', 'returning essential info') and fallback suggestion for missing schemas, but lacks details on permissions, rate limits, error handling, or response format. It provides basic context but misses key operational traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core purpose in the first sentence and adds a critical usage note in the second. Both sentences earn their place by providing essential information without redundancy or fluff, making it highly efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 6 parameters with full schema coverage and no output schema, the description is moderately complete. It covers purpose and guidelines well but lacks behavioral details like response structure or error cases, which are important for a search tool with no annotations or output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents all 6 parameters. The description adds no specific parameter semantics beyond implying a search query is needed, which is already covered in the schema. Baseline 3 is appropriate as the schema handles parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with specific verbs ('search', 'returning') and resources ('API documentation', 'essential info'), distinguishing it from siblings like 'api.listTags' (tag listing) and 'api.request' (live testing). It specifies the semantic search nature and what information is returned.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool ('Semantic API documentation search') and when to use an alternative ('If schemas are missing, suggests using api.request for live testing'), providing clear guidance on tool selection versus the sibling 'api.request'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser.console.readA
Read browser console logs with filters; returns formatted summary + stats. Captures JS errors/warnings/logs and browser-generated network errors (e.g., 'Failed to load resource'). For full HTTP payloads and headers, use 'browser.network.inspect'.
| Name | Required | Description | Default |
|---|---|---|---|
| level | No | Filter by console message level. Default: 'all' | |
| limit | No | Maximum number of entries to return. Default: no limit | |
| timeOffset | No | Time offset in seconds from current time. Use this for relative time filtering (e.g., 10 = last 10 seconds, 300 = last 5 minutes). Maximum allowed: 24 hours (86400 seconds). | |
| search | No | Search for specific text in console messages |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes what the tool captures (JS errors/warnings/logs, browser-generated network errors) and what it returns (formatted summary + stats). However, it doesn't mention potential limitations like whether it clears logs after reading, requires specific browser state, or has rate limits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is perfectly concise with two sentences that each earn their place. The first sentence states the core functionality and return value, while the second provides crucial sibling differentiation. There's zero wasted text.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only tool with 4 parameters and no output schema, the description provides good context about what's captured and returned, plus sibling differentiation. However, without annotations or output schema, it could benefit from more detail about the return format (what 'formatted summary + stats' means) and any behavioral constraints.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so all parameters are documented in the schema. The description doesn't add any parameter-specific information beyond what's in the schema. According to guidelines, when schema coverage is high (>80%), the baseline score is 3 even with no param info in the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Read browser console logs with filters') and resource ('browser console logs'), and explicitly distinguishes it from sibling 'browser.network.inspect' for full HTTP payloads. It specifies what types of logs are captured (JS errors/warnings/logs and browser-generated network errors).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance on when to use this tool vs. alternatives: 'For full HTTP payloads and headers, use 'browser.network.inspect''. This clearly defines the boundary between this console-focused tool and the network-focused sibling tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser.network.inspectA
Inspect recent browser network requests (DevTools-like). Use for debugging HTTP failures (4xx/5xx), payloads, and request sequences. Note: This captures network errors that console tools miss.
| Name | Required | Description | Default |
|---|---|---|---|
| urlFilter | Yes | Substring or pattern to filter request URLs. Tips: Use partial matches; try singular/plural variants if empty. | |
| details | Yes | Fields to include for each entry. 'timestamp' is useful for chronological ordering. | |
| timeOffset | No | Relative window in seconds (e.g., 300 = last 5 minutes, max 86400). | |
| orderBy | No | Sort field | timestamp |
| orderDirection | No | Sort direction | desc |
| limit | No | Max entries to return |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes the tool's behavior: it inspects 'recent' network requests (implying a time-bound scope), captures network errors missed by console tools, and is DevTools-like (suggesting detailed network data). However, it lacks details on permissions, rate limits, or whether it's read-only/destructive, leaving some behavioral aspects unclear for a tool with no annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized and front-loaded, with two sentences that efficiently convey purpose and usage. Every sentence earns its place: the first states the action and primary use case, and the second adds critical behavioral context about capturing network errors. There is no wasted text or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (6 parameters, no annotations, no output schema), the description is mostly complete. It clearly defines the tool's purpose and usage context, but lacks details on output format, error handling, or authentication needs. However, it compensates somewhat by specifying the debugging focus and network error capture, making it adequate though not fully comprehensive for a tool with no structured behavioral data.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description does not add any parameter-specific semantics beyond what the schema provides (e.g., it doesn't explain urlFilter patterns or details field implications). With high schema coverage, the baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract from the schema's documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Inspect recent browser network requests') and resource ('browser network requests'), distinguishing it from siblings like browser.console.read or browser.screenshot by focusing on network debugging rather than console output or visual capture. It specifies the DevTools-like nature and debugging context for HTTP failures, payloads, and request sequences.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool ('Use for debugging HTTP failures (4xx/5xx), payloads, and request sequences') and provides a key exclusion ('Note: This captures network errors that console tools miss'), which distinguishes it from browser.console.read. It also implies alternatives by mentioning what console tools might miss, guiding the agent away from using console-based tools for network error inspection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser.screenshotA
Capture current browser tab; saves to structured path and returns image. Requires extension connection with DevTools open.
| Name | Required | Description | Default |
|---|---|---|---|
| randomString | Yes | any string (ignored) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes the tool's behavior: capturing the current tab, saving to a structured path, returning an image, and requiring DevTools connection. This covers key operational aspects, though it doesn't mention potential limitations like file format, size, or error conditions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is perfectly concise with two sentences that each serve a clear purpose: the first explains what the tool does, and the second states the prerequisite. There's no wasted language or unnecessary information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (screenshot functionality with a prerequisite) and no annotations or output schema, the description is adequate but incomplete. It covers the core purpose and requirement but lacks details about the structured path format, image characteristics, or error handling that would be helpful for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, but the parameter description ('any string (ignored)') is confusing and unhelpful. The tool description doesn't add any meaningful clarification about why this parameter exists or how it should be used, failing to compensate for the schema's poor documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Capture current browser tab'), resource ('browser tab'), and outcome ('saves to structured path and returns image'). It distinguishes itself from sibling tools like browser.navigate or browser.console.read by focusing on screenshot functionality.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use this tool ('Capture current browser tab') and includes a prerequisite ('Requires extension connection with DevTools open'). However, it doesn't explicitly state when not to use it or name alternatives among sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui.inspectElementA
Enhanced UI Debugging Context Tool - Gets comprehensive debugging information for the element selected in browser DevTools.
Prerequisite: DevTools open, element selected in Elements panel.
Returns:
Computed CSS styles - All applied styles for layout debugging
Parent/child context - Understanding element relationships and layout flow
Layout debugging info - Automatic detection of common CSS issues with actionable suggestions
Accessibility audit - ARIA attributes, focus management, semantic information
Interactive state - Hover, focus, click handlers, event listeners
Material-UI context - Component type, variants, theme integration (when applicable)
Performance hints - Large images, deep nesting, optimization opportunities
Autonomous AI Usage: This tool provides enough context to understand and fix UI issues without additional tool calls. Use the layoutDebug.issues and layoutDebug.suggestions arrays for immediate actionable insights.
Best used in workflow: Screenshot ā Select Element ā Enhanced Inspect ā Apply Fixes
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It does an excellent job describing what information is returned (computed CSS styles, parent/child context, layout debugging, accessibility audit, etc.) and how the tool behaves (provides actionable suggestions, detects common CSS issues). However, it doesn't mention potential limitations like browser compatibility or performance characteristics.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with clear sections (Prerequisite, Returns, Autonomous AI Usage, Best used in workflow) and uses bullet points effectively. While comprehensive, it could be slightly more concise as some bullet points contain redundant phrasing. Every sentence adds value, but there's minor room for tightening.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (comprehensive debugging tool) with no annotations and no output schema, the description does an excellent job explaining what the tool returns and how to use it. However, without an output schema, the description could benefit from more specific details about the return format structure. The description compensates well but doesn't fully replace a proper output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters with 100% schema description coverage, so the baseline would be 4. The description appropriately explains that no parameters are needed because the tool works with the currently selected element in DevTools, which adds valuable context beyond the empty schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose as 'Gets comprehensive debugging information for the element selected in browser DevTools' with specific details about what information is retrieved. It distinguishes itself from sibling tools like browser.screenshot and ui.interact by focusing specifically on element inspection rather than general interaction or screenshot capture.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit usage guidance including prerequisites ('DevTools open, element selected in Elements panel'), when to use it ('Best used in workflow: Screenshot ā Select Element ā Enhanced Inspect ā Apply Fixes'), and autonomous usage context ('This tool provides enough context to understand and fix UI issues without additional tool calls'). It clearly positions this as a specialized debugging tool distinct from general browser tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ui.interactA
Interact with the active browser tab using semantic selectors (data-testid, role+name, label, placeholder, name, text, css, xpath). Supports actions: click, type, select, check/uncheck, keypress, hover, waitForSelector, scroll. Automatically scrolls into view and waits for visibility/enabled. Uses a CDP fallback in the extension when needed.
| Name | Required | Description | Default |
|---|---|---|---|
| action | Yes | ||
| target | Yes | How to locate the element | |
| scopeTarget | No | Optional container to scope the search (e.g., role=tablist) | |
| value | No | Text/value to type/select/keypress when applicable | |
| options | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden and provides good behavioral context: it discloses automatic behaviors (scrolling into view, waiting for visibility/enabled), fallback mechanism (CDP fallback), and supported selector types. However, it doesn't mention error handling, performance implications, or what happens with invalid inputs.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is efficiently structured in two sentences: the first states purpose and capabilities, the second adds behavioral context. Every phrase adds value, though it could be slightly more front-loaded with the core purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex 5-parameter tool with nested objects and no output schema, the description provides adequate but incomplete context. It covers the main functionality and some behaviors, but lacks details on return values, error cases, and comprehensive usage scenarios that would help an agent fully understand tool invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 60%, and the description adds minimal parameter semantics beyond the schema. It mentions 'semantic selectors' mapping to the 'target.by' enum and lists actions matching the 'action' enum, but doesn't explain parameter interactions or provide examples. The baseline 3 is appropriate given moderate schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Interact with the active browser tab using semantic selectors' with a specific list of supported actions (click, type, select, etc.). It distinguishes from siblings like browser.navigate (navigation) or ui.inspectElement (inspection only) by emphasizing interaction capabilities.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context ('active browser tab', 'when needed' for CDP fallback) but doesn't explicitly state when to use this tool versus alternatives like ui.inspectElement or browser.console.read. No clear exclusions or prerequisites are provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
1 tool update
v1.0.0- Added
ui.interact
8 tool updates
- First observed
api.listTags - First observed
api.request - First observed
api.searchEndpoints - First observed
browser.console.read - First observed
browser.navigate - First observed
browser.network.inspect - First observed
browser.screenshot - First observed
ui.inspectElement
TDQS
Most tools have distinct purposes, but some overlap exists. For example, 'browser.console.read' and 'browser.network.inspect' both handle error debugging, though they focus on console logs versus network requests respectively. The 'api.request' and 'api.searchEndpoints' tools are clearly differentiated, with one for execution and one for discovery.
Tool names follow a consistent dot-separated pattern (e.g., 'api.listTags', 'browser.navigate', 'ui.inspectElement'), using clear verb_noun structures. This predictability makes it easy for agents to understand the tool's domain and action at a glance, with no mixing of conventions.
With 9 tools, the set is well-scoped for autonomous frontend browser testing and debugging. It covers key areas like API interaction, browser navigation, network inspection, UI debugging, and interaction, providing a comprehensive toolkit without being overwhelming or sparse.
The toolset offers strong coverage for frontend automation, including API testing, browser navigation, debugging, and UI interaction. A minor gap exists in direct browser storage management or cookie handling, but core workflows like debugging, navigation, and interaction are well-supported.
Related MCP Connectors
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
61AI-powered browser automation ā navigate, click, fill forms, and extract data from any website.
Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to iā¦
E2LLM gives your AI eyes and hands in a real browser: structured perception (SiFR) plus action.
Related MCP Servers
- AlicenseBqualityBmaintenanceEnables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment10277299MIT
- AlicenseNot gradedqualityCmaintenanceEnables 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.62MIT
- FlicenseNot gradedqualityCmaintenanceEnables 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.-
- AlicenseBqualityDmaintenanceProvides 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.13933MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Winds-AI/Frontend-development-MCP-tools-public'
If you have feedback or need assistance with the MCP directory API, please join our Discord server