🌐 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

🛠️ 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

🏗️ 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