Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
🌐 Browser MCP Server
A professional Model Context Protocol (MCP) system that enables AI assistants (like Claude, Cursor, etc.) to interact directly with your web browser. This project provides a bridge between AI agents and real-time browser data, automation, and debugging tools.
<a name="english"></a>
🚀 Quick Start
Run the server instantly using npx:
npx mcp-server-browser✨ Key Features
🔧 Tools for AI Agents
- `get_list_tab`: List all open tabs with IDs, URLs, and titles.
- `get_active_tab`: Get detailed state of the current tab.
- `get_tab_content_html`: Retrieve full HTML content.
- `get_tab_content_text`: Extract clean, readable text content.
- `query_selector`: Precise DOM element extraction using CSS.
- `execute_script`: Run custom JavaScript in the browser.
- `get_console_log` / `warn` / `error`: Monitor browser console logs.
- `get_network_request`: Analyze real-time network traffic.
📚 Resources
browser://active-tab: Live state of the active tab.browser://tab-content: Real-time HTML/Text content.browser://console-logs: Aggregated browser logs.browser://network-requests: Captured network activity.
💡 Example Prompts
| Use Case | Prompt | Expected Result |
|---|---|---|
| Research | "Summarize the key points of the current article." | AI uses get_tab_content_text to read the page and provides a concise summary. |
| Data Extraction | "Find the price of 'iPhone 15' on this page and list top 3 results." | AI uses query_selector to extract product names and prices into a formatted list. |
| Debugging | "Check the browser console and tell me if there are any errors." | AI uses get_console_error and returns detailed error messages. |
| Monitoring | "Monitor network requests and tell me if any API calls to /api/v1 fail." | AI uses get_network_request to track traffic and reports failed endpoints. |
🛠️ Installation & Setup
1. Install Chrome Extension
This system requires a tiny bridge extension to communicate with the browser.
- Clone this repository:
git clone https://github.com/mvtcode/mcp-server-browser.git- Open Chrome and navigate to
chrome://extensions/. - Enable Developer mode (top right).
- Click Load unpacked and select the
chrome-extensionfolder from this repo. - The extension will automatically connect to the MCP Server at
ws://localhost:23456.
2. Configure MCP in your AI Client
#### 🤖 Claude Desktop Add this to your claude_desktop_config.json:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"Browser-Core-MCP": {
"command": "npx",
"args": ["-y", "mcp-server-browser"]
}
}
}#### 💻 Cursor IDE
- Open Cursor Settings > Features > MCP Servers.
- Click + Add New MCP Server.
- Name:
Browser-Core-MCP - Type:
command - Command:
npx -y mcp-server-browser
<a name="tiếng-việt"></a>
🇻🇳 Tiếng Việt
Một hệ thống hoàn chỉnh cho phép AI Agent (như Claude hay Cursor) giao tiếp trực tiếp với web trình duyệt của bạn thông qua giao thức Model Context Protocol (MCP).
🚀 Khởi động nhanh
Chạy server ngay lập tức với npx:
npx mcp-server-browser🛠️ Cài đặt
- Chrome Extension: Cài đặt folder
chrome-extensionqua chế độ Developer Mode trong Chrome (chrome://extensions/). - Cấu hình IDE: Thêm lệnh
npx -y mcp-server-browservào phần cấu hình MCP của Claude Desktop hoặc Cursor.
🌟 Tính năng chính
- ✅ Quản lý tab (Liệt kê, lấy tab hiện tại).
- ✅ Trích xuất dữ liệu (HTML, Text, CSS Selector).
- ✅ Tự động hóa (Chạy JavaScript).
- ✅ Giám sát (Console logs, Network requests).
💡 Ví dụ Prompt
| Trường hợp | Prompt | Kết quả mong đợi |
|---|---|---|
| Nghiên cứu | "Tóm tắt các ý chính của bài viết hiện tại." | AI sử dụng get_tab_content_text để đọc nội dung trang và cung cấp bản tóm tắt súc tích. |
| Trích xuất dữ liệu | "Lấy giá và tên 5 sản phẩm đầu tiên trên trang Shopee này." | AI sử dụng query_selector để quét các phần tử DOM và trả về danh sách sản phẩm kèm giá. |
| Lập trình / Debug | "Kiểm tra xem trang web này có lỗi console nào không." | AI sử dụng get_console_error và liệt kê các lỗi kỹ thuật hiện có trên trang. |
| Theo dõi mạng | "Theo dõi các yêu cầu mạng và báo cho tôi nếu có lỗi API nào." | AI sử dụng get_network_request để kiểm tra traffic và báo cáo các endpoint bị lỗi. |
🏗️ Architecture
graph LR
A[Browser Extension] <-->|WebSocket: 23456| B[MCP Server]
B <-->|stdio| C[AI Client: Claude/Cursor]
A <-->|Browser APIs| D[Web Pages]🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
This project is licensed under the ISC License.
Created with ❤️ by mvtcode