Skip to main content
Glama
Winds-AI

autonomous-frontend-browser-tools

by Winds-AI
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault
ACTIVE_PROJECTYesThe name of the active project to work with
GEMINI_API_KEYNoYour Gemini API key for AI capabilities
OPENAI_API_KEYNoYour OpenAI API key for AI capabilities
GEMINI_EMBED_MODELNoOptional Gemini embedding model to use
OPENAI_EMBED_MODELNoOptional OpenAI embedding model to use

Instructions

Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.

This server publishes no instructions, or was last inspected before Glama recorded them.

Capabilities

Server capabilities have not been inspected yet.

Tools

Functions exposed to the LLM to take actions

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

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.

api.listTagsB

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

browser.screenshotA

Capture current browser tab; saves to structured path and returns image. Requires extension connection with DevTools open.

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

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.

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.

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

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

Prompts

Interactive templates invoked by user choice

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription

No resources

Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A3.9/5.0

Scored across 9 tools

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.

Resources