🌐 Browser MCP Server

A professional Model Context Protocol (MCP) system that enables AI assistants (like Claude, Cursor, Antigravity, 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.

Quick demo video: Quick Demo

Tiếng Việt | English

🚀 Quick Start

There are three components to run this MCP tool:

1. Install our Chrome extension from the Chrome Web Store: MCP Browser Tools
2. Install Node.js version >= 22 from nodejs.org
3. Configure the MCP server in your AI client (Claude Desktop, Cursor, Antigravity, etc.) — see Installation & Setup below.

✨ Key Features

🔧 Tools for AI Agents

📑 Tab Management

| Tool | Description | | ------------------ | --------------------------------------------------------------- | | get_list_tab | List all open tabs with IDs, URLs, titles, status, and favicons | | get_active_tab | Get detailed info about the currently active tab | | set_active_tab | Switch focus to a specific tab by ID | | new_tab | Open a new browser tab with a given URL | | close_tab | Close a specific tab by ID | | set_url_tab | Navigate a specific tab to a new URL | | pin_active_tab | Pin a tab by ID | | unpin_active_tab | Unpin the currently active tab |

📄 Content & DOM

| Tool | Description | | ---------------------- | -------------------------------------------------------- | | get_tab_content_html | Retrieve the full HTML source of the active tab | | get_tab_content_text | Extract clean, readable text content from the active tab | | query_selector | Query DOM elements using a CSS selector | | execute_script | Execute arbitrary JavaScript in the active tab |

🖥️ Console Monitoring

| Tool | Description | | ------------------- | --------------------------------- | | get_console_log | Retrieve console.log messages | | get_console_warn | Retrieve console.warn messages | | get_console_error | Retrieve console.error messages | | get_console_info | Retrieve console.info messages | | get_console_debug | Retrieve console.debug messages |

🌐 Network Monitoring

| Tool | Description | | ---------------------------- | ----------------------------------------------------- | | get_network_request | List all captured network requests | | get_network_request_detail | Get full details for a specific network request by ID |

💡 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 and get_network_request_detail to track traffic and report failed endpoints. | | Automation | "Open a new tab and navigate to github.com." | AI uses new_tab to open the URL in a new browser tab. | | Tab Control | "Switch to the tab that has Gmail open." | AI uses get_list_tab to find the Gmail tab and set_active_tab to switch to it. |

🛠️ Installation & Setup

1. Install Chrome Extension

Option A — Chrome Web Store (Recommended):

Install directly from the Chrome Web Store: MCP Browser Tools

Option B — Manual (Developer Mode):

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 toggle).
4. Click Load unpacked and select the chrome-extension folder from this repo.

The extension will automatically connect to the MCP Server via WebSocket 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@latest"]
    }
  }
}

💻 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

🪐 Antigravity

Add this to your Antigravity MCP configuration:

{
  "mcpServers": {
    "Browser-Core-MCP": {
      "command": "npx",
      "args": ["-y", "mcp-server-browser@latest"]
    }
  }
}

🇻🇳 Tiếng Việt

Một hệ thống hoàn chỉnh cho phép AI Agent (như Claude, Cursor hay Antigravity) giao tiếp trực tiếp với trình duyệt web của bạn thông qua giao thức Model Context Protocol (MCP).

🚀 Khởi động nhanh

1. Cài tiện ích Chrome từ Chrome Web Store: MCP Browser Tools
2. Cài Node.js >= 22 từ nodejs.org
3. Cấu hình MCP server trong AI client của bạn (xem bên dưới)

🛠️ Cài đặt

Tiện ích Chrome (Khuyến nghị): Cài trực tiếp từ Chrome Web Store.

Cài thủ công: Clone repo, vào chrome://extensions/, bật Developer Mode, nhấn Load unpacked và chọn thư mục chrome-extension.

Cấu hình IDE: Thêm lệnh sau vào phần cấu hình MCP của Claude Desktop, Cursor hoặc Antigravity:

{
  "mcpServers": {
    "Browser-Core-MCP": {
      "command": "npx",
      "args": ["-y", "mcp-server-browser@latest"]
    }
  }
}

🌟 Tính năng chính

• ✅ Quản lý tab: Liệt kê, chuyển, mở, đóng, ghim, điều hướng tab.
• ✅ Trích xuất dữ liệu: Lấy HTML, Text, truy vấn DOM bằng CSS Selector.
• ✅ Tự động hóa: Chạy JavaScript tùy ý trong tab đang mở.
• ✅ Giám sát console: Lấy log, warn, error, info, debug từ DevTools.
• ✅ Giám sát mạng: Theo dõi tất cả network request và xem chi tiết từng request.

💡 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 dùng get_tab_content_text đọc nội dung và trả về bản tóm tắt. | | 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 dùng query_selector quét DOM và trả về danh sách sản phẩm kèm giá. | | Debug | "Kiểm tra xem trang web này có lỗi console nào không." | AI dùng get_console_error và liệt kê các lỗi hiện có. | | Theo dõi mạng | "Theo dõi các request mạng và báo nếu có API nào bị lỗi." | AI dùng get_network_request và get_network_request_detail để báo cáo. | | Tự động hóa | "Mở tab mới và truy cập github.com." | AI dùng new_tab để mở URL trong tab mới. | | Điều hướng tab | "Chuyển sang tab đang mở Gmail." | AI dùng get_list_tab tìm tab và set_active_tab để chuyển sang đó. |

🏗️ Architecture

graph LR
    A[Chrome Extension] <-->|WebSocket :23456| B[MCP Server\nnpx mcp-server-browser]
    B <-->|stdio| C[AI Client\nClaude / Cursor / Antigravity]
    A <-->|Browser APIs| D[Web Pages]

Luồng hoạt động:

1. Chrome Extension kết nối với MCP Server qua WebSocket tại cổng 23456.
2. AI Client (Claude, Cursor, v.v.) giao tiếp với MCP Server qua stdio.
3. Khi AI gọi một tool, MCP Server chuyển tiếp lệnh tới Extension qua WebSocket.
4. Extension thực thi lệnh trong trình duyệt và trả kết quả về.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request on GitHub.

📄 License

This project is licensed under the Apache License 2.0.

Created with ❤️ by mvtcode