MCP Browser Server

Name: MCP Browser Server
Author: Wladastic

@Wladastic

リポジトリ

MCP Browser Server について

Allow your Github Copilot Chat to navigate your frontend projects. Also compatible with Chat.fans Agents

基本情報

カテゴリ

ブラウザ自動化

ライセンス

NOASSERTION

ランタイム

node

トランスポート

stdio

公開者

Wladastic

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "mcp-browser-server": {
      "command": "npx",
      "args": [
        "playwright",
        "install"
      ]
    }
  }
}

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is MCP Browser Server?

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. It enables AI assistants to interact with web pages through a standardized interface, supporting multi-browser automation (Chromium, Firefox, WebKit) with tools for navigation, clicking, typing, screenshotting, and JavaScript execution. It is designed for AI-powered web testing, scraping, and debugging workflows.

How to use MCP Browser Server?

Install dependencies via npm install, build with npm run build, and ensure Playwright browsers are installed using npx playwright install. For VS Code integration, configure the server in settings.json as an MCP server with the command node pointing to the built index.js. Once configured, any MCP-compatible AI assistant (such as Chat.fans agents or GitHub Copilot Chat) can invoke the provided tools.

Key features of MCP Browser Server

Multi-browser support: Chromium, Firefox, and WebKit
Comprehensive automation: navigate, click, type, screenshot, and more
JavaScript execution in the browser context
Element interaction: wait for elements, get text, interact with forms
Scroll tool with direction, pixel, and behavior control
Scrollability check tool
AI-powered screenshot analysis using Gemma3 via Ollama (optional)
Type-safe implementation with TypeScript and Zod

Use cases of MCP Browser Server

Automate web application testing with AI assistants
Perform web scraping and data extraction
Debug web pages by capturing screenshots and console logs
Run custom JavaScript on live pages for verification
Analyze page structure and content with vision-capable AI models

FAQ from MCP Browser Server

What are the system requirements?

Node.js, Playwright browsers installed (via npx playwright install), and on Linux additional system dependencies (via sudo npx playwright install-deps). The AI screenshot analysis feature requires Ollama with a Gemma3 model (e.g., gemma3:4b).

How do I integrate MCP Browser Server with VS Code?

Add an MCP server entry to your VS Code settings.json using the command node and the path to the built build/index.js. After configuration, Chat.fans agents and GitHub Copilot Chat can use the browser tools.

Which browsers are supported?

Chromium, Firefox, and WebKit are all supported.

Do I need Ollama to use the server?

No. All standard browser automation tools work without Ollama. The analyze_screenshot tool is optional and only available if Ollama is installed with a vision-capable model.

Where are screenshots and console logs saved?

Screenshots can be saved to a custom path specified in the tool call. By default, generated screenshots from tests are stored in a screenshots/ directory. Console logs are returned directly to the caller.