ブラウザの自動化に自然言語インターフェイスを提供するAIを搭載したMCP(Model Context Protocol)サーバー。 このサーバーは、公式のPlaywright MCPサーバーの周りのインテリジェントなラッパーとして機能し、Claudeを介してプレーンな英語コマンドを使用してブラウザを制御することができます。

##特徴

• 自然言語ブラウザコントロール: プレーン・イングリッシュ・コマンドを使用してブラウザの自動化タスクを実行 -Claudeインテグレーション:OAuthによるClaudeのAI機能を活用する(Claudeコードサブスクリプションを使用)
• インテリジェントツールマッピング:AIは、コマンドを適切なPlaywrightツール呼び出しに自動的に翻訳します
• セッション管理: 複数のブラウザの自動化コマンドでコンテキストを維持
• Recovery:有用なフィードバックとスマートなエラー処理

インストール

##Smitheryでインストールする

ブラザーAIをClaudeデスクトップにインストールするには、Smithery経由で自動的に:

手動インストール

npx で直接使用するか:

セットアップ

##1. 認証

ブラウザ AI MCP サーバーでは、Anthropic API アクセスが必要です。 2つの認証オプションがあります。

オプション1: OAuth 認証(Claude 加入者に推奨)

Browser AI MCP Server

An AI-powered MCP (Model Context Protocol) server that provides a natural language interface to browser automation. This server acts as an intelligent wrapper around the official Playwright MCP server, allowing you to control browsers using plain English commands through Claude.

Features

• Natural Language Browser Control: Execute browser automation tasks using plain English commands
• Claude Integration: Leverages Claude’s AI capabilities through OAuth (using your Claude Code subscription)
• Intelligent Tool Mapping: AI automatically translates your commands into appropriate Playwright tool calls
• Session Management: Maintain context across multiple browser automation commands
• Error Recovery: Smart error handling with helpful feedback

Installation

Installing via Smithery

To install Browser AI for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @qckfx/browser-ai --client claude

Manual Installation

npm install -g @qckfx/browser-ai

Or use directly with npx:

npx @qckfx/browser-ai

Setup

1. Authentication

The Browser AI MCP server requires Anthropic API access. You have two authentication options:

Option 1: OAuth Authentication (Recommended for Claude Subscribers)

If you have a Claude subscription, authenticate with your Claude account to use your subscription credits:

npx @qckfx/browser-ai --auth

This will open a browser window for OAuth authentication. After authorizing, the token will be saved securely and your API usage will be charged to your Claude subscription rather than requiring separate API credits.

Option 2: API Key Authentication

Alternatively, you can use an Anthropic API key by setting the environment variable:

export ANTHROPIC_API_KEY="your-api-key-here"

2. Configure with Claude Code

After authentication, add the server to Claude Code:

claude mcp add browser-ai -- npx --yes @qckfx/browser-ai@latest

If using API key authentication, you can pass it as an environment variable:

claude mcp add browser-ai --env ANTHROPIC_API_KEY="your-api-key-here" -- npx --yes @qckfx/browser-ai@latest

3. Configure Claude Desktop (Alternative)

If using Claude Desktop instead, add the following to your Claude Desktop configuration file (claude_desktop_config.json):

{
  "mcpServers": {
    "browser-ai": {
      "command": "npx",
      "args": ["@qckfx/browser-ai"],
      "env": {
        "PLAYWRIGHT_MCP_PATH": "@playwright/mcp@latest"
      }
    }
  }
}

Usage

Once configured, you can use natural language commands in Claude to control browser automation:

Example Commands

• Navigation: “Go to example.com and wait for the page to load”