mcpField
B
browser-mcp

browser-mcp

Local
github.com/djydeBrowser Automation83Updated 82w ago
Repository

About browser-mcp

browser-mcp pairs a browser extension with an MCP server so MCP clients can interact with the browser in use. It suits users who want an LLM to read web pages or change how they look. The project is licensed under AGPL-3.0-or-later.

Key features

  1. 01Get current page content as Markdown
  2. 02Append CSS styles to the current page
  3. 03Search browser history

Use cases

  1. 01Asking the LLM to summarize the page currently open
  2. 02Switching the current page to dark mode
  3. 03Finding previously visited pages by keyword
#browser-mcp#browser-extension#mcp-server

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "-y",
        "@djyde/mcp-browser"
      ]
    }
  }
}
Run commandnpx -y @djyde/mcp-browser

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@djyde/mcp-browser

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

browser-mcp

A browser extension and MCP server that allows you to interact with the browser you are using.

mcp

jkXeswNy@2x

Usage

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

Tools

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

get_current_page_markdown

Get the markdown from current browser browsing page.

example:

Summarize the current page.
append_style

Append a css style to the current browser browsing page.

example:

Change the current page to dark mode.
history_search

Search the browser history.

example:

Search the browser history for "github".

Roadmap

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

Build

pnpm i
Extension
cd extension

# chrome
npm run build

# edge
npm run build:edge

# firefox
npm run build:firefox

After building, the extension will be in the extension/.output directory.

Server

cd server

# dev
npm run dev

# build
npm run build

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

Contributing

Add a new tool
  1. Add the tool schema to the tools array in server/src/tools.ts.
  2. Add a extension callable handler in extension/calls.ts.
  3. Add a tool handler in server/src/tools.ts. Use the call function to call the extension handler.

License

AGPL-3.0-or-later

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.