Skip to main content
Glama
Winds-AI

autonomous-frontend-browser-tools

Frontend Development Tools (AFBT)

CodeRabbit Pull Request Reviews

šŸš€ 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 by undici, which will cause ReferenceError: File is not defined when launching via npx.

  • Recommended: pnpm (the setup script will install it if missing).

Related MCP server: MCP Browser Use Server

Quickstart (npx)

  1. Make a new folder at your prefered location and then open terminal in that folder, making a new folder is necessary.

  2. Start the connector + setup UI

npx @winds-ai/autonomous-frontend-browser-tools

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.

  1. Load the Chrome extension (manual once)

  • Open chrome://extensions → Enable Developer mode → "Load unpacked" → select chrome-extension/ (npx overlays the packaged folder on updates; click Reload after updates)

  1. 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/setup subcommands.

  • Node 20 is used automatically when the system Node is older.

  1. Open DevTools on your target tab (localhost:3000 or any other port) and start using tools

Active Project gotchas

  • api.searchEndpoints uses header X-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 or defaultProject in projects.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 (+ optional OPENAI_EMBED_MODEL)

    • GEMINI_API_KEY (+ optional GEMINI_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 with includeAuthToken: true fails, ensure AUTH_STORAGE_TYPE, AUTH_TOKEN_KEY, and optional AUTH_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.

Available Tools

9 tools
api.listTagsB

List all API tags with operation counts (from Swagger/OpenAPI).

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
endpointYesThe API endpoint path (e.g., '/api/users', '/auth/profile'). Will be combined with API_BASE_URL from environment.
methodNoHTTP method for the API callGET
requestBodyNoRequest body for POST/PUT/PATCH requests (will be JSON stringified)
queryParamsNoQuery parameters as key-value pairs
includeAuthTokenNoWhether to include auth token

TDQS

A4.1/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
queryNoText query to match against path, summary, description, operationId, and tags
tagNoFilter by a specific tag (case-insensitive exact match)
searchTermsNo[DEPRECATED] Previous array of keywords. If provided, behaves like an OR search across terms.
methodNoFilter results by HTTP method (optional)
limitNoMaximum number of endpoints to return (default: 10)
maxResultsNo[DEPRECATED] Use 'limit' instead.

TDQS

A4.1/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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'.

ParametersJSON Schema
NameRequiredDescriptionDefault
levelNoFilter by console message level. Default: 'all'
limitNoMaximum number of entries to return. Default: no limit
timeOffsetNoTime 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).
searchNoSearch for specific text in console messages

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.navigateA

Navigates the current active browser tab to a new URL. Use for automated testing, navigation flows, or redirecting to specific pages. Requires Chrome extension to be connected.

Route Reference: ROUTES_FILE_PATH variable is not set so make sure you know the routes to use

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesThe URL to navigate to (must be a valid URL including protocol, e.g., 'https://example.com')

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and discloses key behavioral traits: it requires a Chrome extension connection and navigates the active tab. However, it lacks details on error handling, timeouts, or what happens if the URL is invalid, leaving gaps for a mutation tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized with two sentences: the first states purpose and usage, the second notes requirements. The route reference note is somewhat extraneous but not wasteful, keeping it efficient and front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and a simple parameter, the description covers purpose and prerequisites adequately. However, for a navigation tool that mutates browser state, it could better explain behavioral aspects like success indicators or common errors to enhance completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

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 the 'url' parameter fully. The description does not add meaning beyond this, such as examples of valid URLs or constraints not in the schema, meeting the baseline for high coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('navigates') and resource ('current active browser tab to a new URL'), distinguishing it from sibling tools like browser.screenshot or ui.interact by focusing on URL navigation rather than visual capture or UI interaction.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It provides explicit usage contexts ('automated testing, navigation flows, or redirecting to specific pages') and a prerequisite ('Requires Chrome extension to be connected'), but does not specify when not to use it or name alternatives among siblings like api.request for non-browser navigation.

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlFilterYesSubstring or pattern to filter request URLs. Tips: Use partial matches; try singular/plural variants if empty.
detailsYesFields to include for each entry. 'timestamp' is useful for chronological ordering.
timeOffsetNoRelative window in seconds (e.g., 300 = last 5 minutes, max 86400).
orderByNoSort fieldtimestamp
orderDirectionNoSort directiondesc
limitNoMax entries to return

TDQS

A4.4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
randomStringYesany string (ignored)

TDQS

A4/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters2/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
actionYes
targetYesHow to locate the element
scopeTargetNoOptional container to scope the search (e.g., role=tablist)
valueNoText/value to type/select/keypress when applicable
optionsNo

TDQS

A3.8/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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. 1 tool updatev1.0.0
    • Addedui.interact
  2. 8 tool updates
    • First observedapi.listTags
    • First observedapi.request
    • First observedapi.searchEndpoints
    • First observedbrowser.console.read
    • First observedbrowser.navigate
    • First observedbrowser.network.inspect
    • First observedbrowser.screenshot
    • First observedui.inspectElement

TDQS

A3.9/5.0
Disambiguation4/5

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.

Naming Consistency5/5

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.

Tool Count5/5

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.

Completeness4/5

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

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables 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.
    62
    MIT
  • F
    license
    Not graded
    quality
    C
    maintenance
    Enables 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.
    -
  • A
    license
    B
    quality
    D
    maintenance
    Provides 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.
    13
    9
    33
    MIT

Latest Blog Posts

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