Browser Use Mcp Server

Browser Use MCP Server

Puppeteer の構造化されたアクセシビリティデータを使って LLM にブラウザー自動化機能を提供する、高速で軽量な Model Context Protocol（MCP）サーバーです。複雑な視覚的理解に対応するオプションのビジョンモードと、柔軟なクロスプラットフォーム設定を備えています。

主な機能

• ⚡ 高速かつ軽量。ピクセルベースの入力ではなく、Puppeteer のラベルインデックスとアクセシビリティ DOM ツリーを利用します。
• 👁️ ビジョンモードに対応。構造化データだけでは不十分な複雑なレイアウトや視覚要素に対して、オプションで視覚的理解機能を利用できます。
• 🤖 LLM に最適化。ビジョンモデルを必要とせず、構造化データのみで動作するため、コンテキストが少なく、コンテキストトークンの使用量を抑えられます。
• 🧩 柔軟なランタイム設定。HTTP ヘッダーを使って、ビューポートサイズ、座標系の係数、User-Agent を実行時にカスタマイズできます。
• 🌐 クロスプラットフォーム対応と拡張性。リモートおよびローカルブラウザーに対応し、カスタムブラウザーエンジンも使用できます。

要件

• Node.js 18 以降
• VS Code、Cursor、Windsurf、Claude Desktop、またはその他の MCP クライアント

はじめに

ローカル（Stdio）

まず、お使いのクライアントに Browser MCP サーバーをインストールします。一般的な設定は次のとおりです。

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "@agent-infra/mcp-server-browser@latest"
      ]
    }
  }
}

# For VS Code
code --add-mcp '{"name":"browser","command":"npx","args":["@agent-infra/mcp-server-browser@latest"]}'

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "@agent-infra/mcp-server-browser@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "@agent-infra/mcp-server-browser@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "@agent-infra/mcp-server-browser@latest"
      ]
    }
  }
}

同時に、--port $your_port 引数を指定して起動すると、ブラウザー MCP を SSE および Streamable HTTP サーバーに変換できます。

# normal run remote mcp server
npx @agent-infra/mcp-server-browser --port 8089

# run with DISPLAY environment for VNC or other virtual display
DISPLAY=:0 npx @agent-infra/mcp-server-browser --port 8089

次のいずれかの MCP サーバーのリモートエンドポイントを使用できます。

• Streamable HTTP（推奨）：http://127.0.0.1::8089/mcp
• SSE：http://127.0.0.1::8089/sse

次に、MCP クライアントの設定で、url に SSE エンドポイントを設定します。

{
  "mcpServers": {
    "browser": {
      "url": "http://127.0.0.1::8089/sse"
    }
  }
}

Streamable HTTP の場合は、url を次のように設定します。

{
  "mcpServers": {
    "browser": {
      "type": "streamable-http", // If there is MCP Client support
      "url": "http://127.0.0.1::8089/mcp"
    }
  }
}

インメモリ呼び出し

MCP クライアントが JavaScript / TypeScript ベースで開発されている場合、インプロセス呼び出しを直接使用することで、Browser MCP を利用するためにユーザーがコマンドラインインターフェースをインストールする必要がなくなります。

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';

// type: module project usage
import { createServer } from '@agent-infra/mcp-server-browser';
// commonjs project usage
// const { createServer } = await import('@agent-infra/mcp-server-browser')

const client = new Client(
  {
    name: 'test browser client',
    version: '1.0',
  },
  {
    capabilities: {},
  },
);

const server = createServer();
const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();

await Promise.all([
  client.connect(clientTransport),
  server.connect(serverTransport),
]);

// list tools
const result = await client.listTools();
console.log(result);

// call tool
const toolResult = await client.callTool({
  name: 'browser_navigate',
  arguments: {
    url: 'https://www.google.com',
  },
});
console.log(toolResult);

設定

Browser MCP サーバーでは、次の引数をサポートしています。上記の JSON 設定で、"args" リストの一部として指定できます。

> npx @agent-infra/mcp-server-browser@latest -h
  -V, --version              output the version number
  --browser <browser>        browser or chrome channel to use, possible values: chrome, edge, firefox.
  --cdp-endpoint <endpoint>  CDP endpoint to connect to, for example "http://127.0.0.1:9222/json/version"
  --ws-endpoint <endpoint>   WebSocket endpoint to connect to, for example "ws://127.0.0.1:9222/devtools/browser/{id}"
  --executable-path <path>   path to the browser executable.
  --headless                 run browser in headless mode, headed by default
  --host <host>              host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
  --port <port>              port to listen on for SSE and HTTP transport.
  --proxy-bypass <bypass>    comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"
  --proxy-server <proxy>     specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"
  --user-agent <ua string>   specify user agent string
  --user-data-dir <path>     path to the user data directory.
  --viewport-size <size>     specify browser viewport size in pixels, for example "1280, 720"
  --output-dir <path>        path to the directory for output files
  --vision                   Run server that uses screenshots (Aria snapshots are used by default)
  -h, --help                 display help for command

ランタイム設定

ブラウザーのランタイムでは、Viewport Size、Vision Model Coordinate Factors、User Agent の設定が必要です。これらは、対応する HTTP ヘッダーで指定できます。

注記： ヘッダー名では大文字と小文字が区別されません。

例：

x-viewport-size: 1920,1080
x-vision-factors: 1.0,1.0
x-user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

Docker

VNC と MCP のデプロイを単一の URL エンドポイントに統合しました。Dockerfile と DockerHub イメージは同時に公開されます！ 動画

API

ツール

リソース

開発

http://127.0.0.1:6274/ にアクセスします：

npm run dev

拡張 CLI エントリーポイント

#!/usr/bin/env node

const {
  BaseLogger,
  setConfig,
  addMiddleware,
} = require('@agent-infra/mcp-server-browser/request-context');

class CustomLogger extends BaseLogger {
  info(...args) {
    console.log('custom');
    console.log(...args);
  }
}

addMiddleware((req, res, next) => {
  console.log('req', req.headers);
  next();
});

setConfig({
  logger: new CustomLogger(),
});

// start server
require('@agent-infra/mcp-server-browser/index');