Browser MCP

🚀 Browser MCP

A browser extension and MCP server that allows you to interact with your currently used browser.

🚀 Quick Start

Configuration Example

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@djyde/mcp-browser@latest"
      ]
    }
  }
}

✨ Features

Tool List

All available tools are listed in server/src/tools.ts.

get_current_page_markdown

Retrieve the Markdown content of the current browser page.

Example:

Summarize the current page.

append_style

Append CSS styles to the current browser page.

Example:

Set the current page to dark mode.

history_search

Search the browser history.

Example:

Search for "github" in the browsing history.

📈 Future Plans

• [ ] Publish the extension to the app store.
• [ ] Write documentation.
• [ ] Add more tools.

📦 Installation

Build the Project

pnpm i

Build the Extension

cd extension

# Build for Chrome
npm run build

# Build for Edge
npm run build:edge

# Build for Firefox
npm run build:firefox

After the build is complete, the extension files are located in the extension/.output directory.

Server-side

cd server

# Start in development mode
npm run dev

# Build the server
npm run build

server/dist/cli.js is the entry file for the MCP server.

🤝 Contribution Guidelines

Adding New Tools

1. Add the tool pattern to the tools array in the tools.ts file.
2. Implement the extensible call handler in extension/calls.ts.
3. Add a handler for the tool in server/src/tools.ts. Use the call function to invoke the handler on the extension side.

📄 License

AGPL-3.0 or later