This is a beginner's tutorial for getting started with BrowserMCP.



🚀 Let AI Grow "Eyes" and "Hands": Beginner's Guide to BrowserMCP

Have you ever thought about how convenient it would be if your frequently used AI assistant (like Cursor or Claude Desktop) could not only write code and chat but also directly control your browser to look up information, fill out forms, or scrape web data?

BrowserMCP is the tool designed for this purpose. It acts as a bridge, connecting your AI assistant with the Chrome browser, allowing AI to "see" the world and perform operations through the browser.

🛠️ Preparation

Before starting, ensure you have installed the following software:

Node.js: The foundation for running the service (must be installed).
AI tools supporting MCP: Currently supporting Cursor, Claude Desktop, Windsurf, or VS Code.
Chrome browser (or Chromium-based browser).

⚡️ Three Steps to Quickly Get Started

Step 1: Configure the "Brain" (MCP Server)

First, we need to tell your AI tool how to connect to the BrowserMCP service. Here, using Cursor as an example (Claude Desktop is similar):
Open the Cursor settings panel.
Find the "Tools" (Tools) tab.
Click "New MCP server" (Create New MCP Server).
Enter the following information in the configuration box:

{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
}

Click save/refresh. The AI is now ready to send commands.

Step 2: Install the "Hands" (Browser Extension)

Next, we need to install a "receiver" in the browser to execute commands sent by AI.

Go to the BrowserMCP official website or extension store, and install the Browser MCP extension.

📌 Key Step: After installation, it’s recommended to pin (Pin) the extension icon to the browser toolbar for convenience.

Click the Browser MCP icon in the top right corner of your browser.
Click the “Connect” (Connect) button.
Note: This step connects the current tab to AI. All subsequent operations will be performed in this tab.

Step 3: Witness the Magic (Start Automation)
Everything is ready! Now, return to your AI tool (like Cursor's chat interface) and give commands as usual:

User: Open Google, search for "Browser MCP," and tell me what the first search result is.

What happens behind the scenes?

Cursor transmits your command to the local Server via MCP protocol.

The Server translates the instruction and sends it to the browser extension.

The browser extension automatically navigates to Google, inputs the text, and clicks search.
The extension reads the webpage content and sends it back to Cursor.
Cursor summarizes the content and replies to you.

💡 Tips for Use

What can it do?

“Help me summarize this webpage.”

“Check the latest issues on this GitHub project.”

“Help me fill out this test form (provide data).”

Now, your AI is no longer confined to the chat window. Go ahead and try to let it surf the internet! 🌊

Video demonstration
NODE-8.51%
PIN1.16%
View Original
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Reward
  • Comment
  • Repost
  • Share
Comment
0/400
No comments
  • Pin
Trade Crypto Anywhere Anytime
qrCode
Scan to download Gate App
Community
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)