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

Tiếng Việt | English

---

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

1. Clone this repository:

   git clone https://github.com/mvtcode/mcp-server-browser.git

2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode (top right).
4. Click Load unpacked and select the chrome-extension folder from this repo.
5. 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

1. Open Cursor Settings > Features > MCP Servers.
2. Click + Add New MCP Server.
3. Name: Browser-Core-MCP
4. Type: command
5. Command: npx -y mcp-server-browser

---

🇻🇳 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

1. Chrome Extension: Cài đặt folder chrome-extension qua chế độ Developer Mode trong Chrome (chrome://extensions/).
2. Cấu hình IDE: Thêm lệnh npx -y mcp-server-browser và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]

Loading

🤝 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