Browser MCP Server
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 ServerNavigate 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.
Browser MCP Server
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.
🎯 Purpose
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
✨ Features
🔍 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
📦 Installation
npm install @your-org/browser-mcp-server🚀 Usage
Claude Desktop Integration
Add to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"browser": {
"command": "npx",
"args": ["@your-org/browser-mcp-server"]
}
}
}VS Code + Copilot Chat
Configure in your VS Code MCP settings to use with Copilot Chat.
Windsurf Integration
Add to your Windsurf MCP configuration.
Local Development
# Link for local development
npm link @your-org/browser-mcp-server
# Use in your project
const browserMCP = require('@your-org/browser-mcp-server');🛠️ Available Tools
browser_navigate
Navigate to a URL and get page information.
{
"url": "https://example.com"
}browser_analyze_page
Get comprehensive page structure analysis.
{
"includeContent": true,
"includeForms": true,
"includeLinks": true,
"maxDepth": 2
}browser_extract_text
Extract text content from page or specific elements.
{
"selector": "h1, h2, p",
"includeHidden": false
}browser_get_elements
Find elements with detailed attributes and accessibility info.
{
"selector": "button, input, a[href]",
"includeAttributes": true,
"maxResults": 20
}📋 Example AI Conversations
Understanding Page Flow
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.Content Extraction
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...]🔧 Development
# 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 start🎯 Perfect For
AI 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
🏗️ Architecture
├── 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 definitions🔒 Requirements
Node.js 18+
Chromium (auto-installed via Playwright)
MCP-compatible AI agent (Claude Desktop, VS Code, Windsurf, etc.)
📜 License
MIT
Built for AI agents to understand the web, not just see it. 🤖🌐
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- 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/persi123/browser-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server