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., "@Browser MCP Server Navigate to https://example.com and analyze the page structure."
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.
A Model Context Protocol (MCP) server that enables AI agents to understand web page structure and content without screenshots. Built with Playwright for reliable browser automation.
Solves the problem where AI agents give "wrong and random suggestions" about web pages by providing them with structured page data instead of requiring visual screenshots.
Related MCP server: Playwright MCP
š Page Structure Analysis - Understand layout, forms, and interactive elements
š Smart Content Extraction - Extract text using CSS selectors
šÆ Element Discovery - Find and analyze specific page elements with accessibility info
š Fast & Local - Uses Playwright's accessibility tree (no screenshots needed)
š¤ AI-Optimized - Designed specifically for AI agent integration
npm install @your-org/browser-mcp-serverAdd to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"browser": {
"command": "npx",
"args": ["@your-org/browser-mcp-server"]
}
}
}Configure in your VS Code MCP settings to use with Copilot Chat.
Add to your Windsurf MCP configuration.
# Link for local development
npm link @your-org/browser-mcp-server
# Use in your project
const browserMCP = require('@your-org/browser-mcp-server');browser_navigateNavigate to a URL and get page information.
{
"url": "https://example.com"
}browser_analyze_pageGet comprehensive page structure analysis.
{
"includeContent": true,
"includeForms": true,
"includeLinks": true,
"maxDepth": 2
}browser_extract_textExtract text content from page or specific elements.
{
"selector": "h1, h2, p",
"includeHidden": false
}browser_get_elementsFind elements with detailed attributes and accessibility info.
{
"selector": "button, input, a[href]",
"includeAttributes": true,
"maxResults": 20
}Human: Go to https://github.com/login and help me understand the login process
AI: I'll navigate to the GitHub login page and analyze its structure.
[Uses browser_navigate and browser_analyze_page]
The login page has:
- 2 input fields: username/email and password (both required)
- 1 "Sign in" submit button
- Links for "Forgot password" and "Create account"
- Form submits to /session with POST method
- Additional 2FA field may appear after initial submission
The typical flow is: enter credentials ā click Sign in ā (optional 2FA) ā redirect to dashboard.Human: Extract all the main article titles from https://news.ycombinator.com
AI: [Uses browser_navigate and browser_extract_text with CSS selectors]
Found 30 article titles including:
1. "Show HN: My new startup idea"
2. "Why distributed systems are hard"
3. "The future of web development"
[etc...]# Clone and setup
git clone <your-repo>
cd browser-mcp-server
npm install
# Install browser
npx playwright install chromium
# Build
npm run build
# Test locally
npm startAI Agents that need to understand web page workflows
Automated Analysis of website structure
Content Extraction without visual parsing
Form Discovery for automation planning
Accessibility Analysis of web pages
āāā src/
ā āāā index.ts # MCP server entry point
ā āāā server.ts # MCP server implementation
ā āāā browser/ # Browser management
ā ā āāā manager.ts # Playwright browser lifecycle
ā āāā tools/ # MCP tools
ā ā āāā navigate.ts # Page navigation
ā ā āāā analyze.ts # Page structure analysis
ā ā āāā extract.ts # Content extraction
ā ā āāā elements.ts # Element discovery
ā āāā types.ts # TypeScript definitionsNode.js 18+
Chromium (auto-installed via Playwright)
MCP-compatible AI agent (Claude Desktop, VS Code, Windsurf, etc.)
MIT
Built for AI agents to understand the web, not just see it. š¤š
Analyze the current page structure, forms, and interactive elements to help understand page flow and functionality
| Name | Required | Description | Default |
|---|---|---|---|
| maxDepth | No | Maximum depth for element analysis | |
| includeForms | No | Include form analysis | |
| includeLinks | No | Include link analysis | |
| includeContent | No | Include text content of elements |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full responsibility for disclosing behavioral traits. The term 'analyze' hints at read-only non-destructive behavior, but it does not explicitly state that the page is not modified, nor does it mention any safety or side-effect considerations. The lack of explicit behavioral disclosure is a notable gap.
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, concise sentence that front-loads the action ('Analyze') and the resource ('current page structure'), with no filler or redundant wording. Every word earns its place.
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 low-complexity tool with fully described parameters, the description adequately conveys the core purpose. However, since no output schema exists, the description should provide some indication of what the analysis returns (e.g., a structured report or list of elements), and it does not. The behavior of maxDepth is also not clarified, leaving some expectations unmet.
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 covers all four parameters with descriptions, giving a baseline of 3. The description adds general context about forms and interactive elements but does not explain parameter-specific behavior beyond what the schema already provides, so no additional credit is warranted.
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 uses the specific verb 'analyze' and clearly identifies the resource as the current page structure, forms, and interactive elements, with the goal of understanding page flow and functionality. It is clear and informative, though it does not explicitly distinguish itself from sibling tools like browser_get_elements, which may overlap in 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 implies when to use the tool (when understanding page structure and flow is needed) but provides no explicit comparison with alternatives like browser_get_elements or browser_extract_text, nor any exclusions or conditions. The usage context is implied rather than explicitly stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Extract text content from the current page or specific elements using CSS selectors
| Name | Required | Description | Default |
|---|---|---|---|
| selector | No | CSS selector to target specific elements (optional, extracts all text if not provided) | |
| includeHidden | No | Include text from hidden elements |
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 only states the core function and does not mention return format, whether hidden elements are included by default, or any side effects. The includeHidden parameter hints at behavior, but the description itself adds no transparency.
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 succinct sentence that is front-loaded with the primary action 'Extract text content'. Every word earns its place, and there is no redundancy or filler.
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?
The tool is simple with two optional parameters, and the description plus schema cover the basic mechanics. However, without an output schema or annotations, the agent does not know the return format or details about hidden text handling. It is adequate but leaves room for improvement.
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 coverage is 100%, as both selector and includeHidden have descriptions. The tool description adds minimal semantic value beyond the schema, only repeating the CSS selector concept. It does not clarify selector syntax or behavior for missing elements, so baseline 3 is appropriate.
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 action (extract text content) and the resource (current page or specific elements using CSS selectors). It immediately distinguishes itself from siblings like browser_navigate and browser_get_elements, which target navigation and element retrieval, respectively.
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 implicitly defines when to use the tool (when text content is needed) but does not explicitly contrast it with alternatives such as browser_get_elements or browser_analyze_page. There is no mention of when not to use it or which sibling is more appropriate for non-text retrieval.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get detailed information about elements matching a CSS selector, useful for understanding page structure and interactive elements
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector to find elements | |
| maxResults | No | Maximum number of elements to return | |
| includeAttributes | No | Include element attributes in the response |
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 states the operation is 'Get detailed information', implying a read-only action, but it does not disclose potential behaviors such as pagination limits (maxResults default 20), inclusion of attributes, error handling when no elements match, or any permissions/rate limits. This is a significant gap for a tool with no annotation safety net.
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, focused sentence that front-loads the core operation ('Get detailed information about elements matching a CSS selector') and adds a brief usage hint. Every word earns its place, with no redundancy or tangential detail.
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?
The tool is relatively simple (3 params, no output schema), but the description does not fully compensate for the missing output schema. It doesn't explain what 'detailed information' includes (e.g., text, attributes, position) or how maxResults and includeAttributes shape the response. While it gives a general sense of page structure understanding, it leaves the response format ambiguous. This is adequate but with clear gaps.
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 input schema already documents each parameter (selector, maxResults, includeAttributes). The description adds only the high-level notion of 'matching a CSS selector', which maps to the required selector parameter. It does not add meaning beyond the schema for maxResults or includeAttributes, so the baseline score of 3 is appropriate.
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 function: 'Get detailed information about elements matching a CSS selector'. The verb 'get' plus the resource 'elements matching a CSS selector' is specific and distinguishes it from siblings like browser_navigate (navigation) and browser_extract_text (text extraction). The added context 'useful for understanding page structure and interactive elements' reinforces its purpose.
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 for 'understanding page structure and interactive elements', which gives situational context. However, it does not explicitly state when to use this tool versus alternatives like browser_analyze_page or browser_extract_text, nor does it mention any exclusions or prerequisites. This is implied usage, not explicit guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.1.0browser_analyze_pagebrowser_extract_textbrowser_get_elementsbrowser_navigateEach tool has a distinct purpose: navigation, high-level page analysis, text extraction, and element inspection. There is slight overlap between analyze_page and get_elements, but the descriptions clarify that one provides an overview while the other targets specific selectors.
All tools follow a consistent 'browser_verb_noun' pattern (navigate, analyze_page, extract_text, get_elements). This makes the set predictable and easy to understand.
With only 4 tools, the server is well-scoped for its apparent read-only browser analysis purpose. Each tool is necessary and there is no redundancy.
The tool set covers the core workflow of navigating to a page and extracting both text and structural information. It lacks interaction capabilities like clicking or typing, but for a read-only analysis server this is a minor gap rather than a fatal omission.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
AI-powered web automation. Navigate websites using AI agents for one page or a thousand
AI-powered web automation. Navigate websites using AI agents for one page or a thousand
Turn the web into structured, reliable, actionable enterprise data for AI Agents
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/persi123/browser-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
