AI-powered MCP (Model Context Protocol) 서버는 브라우저 자동화에 자연스러운 언어 인터페이스를 제공합니다. 이 서버는 공식 Playwright MCP 서버 주변의 지능형 래퍼로서 Claude를 통해 일반 영어 명령을 사용하여 브라우저를 제어 할 수 있습니다.

특징

• Natural Language Browser Control: 일반 영어 명령을 사용하여 브라우저 자동화 작업을 수행
• Claude Integration: OAuth를 통해 Claude의 AI 기능을 레버리지(클래드 코드 구독 사용)
• Intelligent Tool Mapping: AI는 적절한 Playwright 도구 호출로 명령을 자동으로 번역합니다.
• Session Management: 여러 브라우저 자동화 명령을 통한 컨텍스트 유지
• Error Recovery: 유용한 피드백을 통한 스마트 오류 처리

설치

Smithery를 통해 설치

Smithery를 통해 Claude Desktop용 브라우저 AI를 설치하려면:

수동 설치

또는 npx에 직접 사용:

설치

##1. 인증

브라우저 AI MCP 서버는 Anthropic API 액세스를 요구합니다. 두 가지 인증 옵션이 있습니다:

옵션 1: OAuth 인증 (클래드 가입자에 대한 권장)

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”