Web Browser (kogiQA)

kogiQA MCP Web Browser

kogiQA を使用したブラウザー自動化機能を提供する Model Context Protocol（MCP）サーバーです。このサーバーを使用すると、LLM はスクリーンショットや視覚的に調整されたモデルを必要とせず、自然言語で Web ページを操作できます。

用途：

• ページのスタイルに関する問題をデバッグする
• コンソールエラーを自動的に修正する
• Web アプリの機能をマッピングして文書化する
• エンドツーエンドテストを自動的に作成する
• アプリケーションの探索的テストを自動化する

プロンプトの例については、使用例をご覧ください。

kogiQA MCP と Playwright MCP の比較

kogiQA MCP サーバーは、kogiQA ブラウザー制御アルゴリズムの機能を組み込んだブラウザーを提供します。 これにより、エージェントはセレクターを使わずにページを操作でき、時間とトークンを節約できます。

インストール

自動インストール：

npx kogiqa-mcp@latest

Claude Code

claude mcp add kogiqa-browser npx kogiqa-mcp@latest

VS Code

以下のいずれかのボタンをクリックして、vs code に直接インストールします。

または、VS Code CLI からインストールします。

code --add-mcp '{"name":"kogiqa-browser","command":"npx","args":["kogiqa-mcp@latest"]}'

Cursor

または、Cursor Settings → MCP → Add new MCP Server に移動し、コマンド npx kogiqa-mcp@latest を入力します。

標準設定

その他の MCP クライアントでは、以下を MCP 設定に追加します。

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

使用例

サーバーを設定したら、自然言語でエージェントに話しかけるだけです。kogiQA はセレクターを使用しないため、要素の探し方ではなく、実行したい内容を説明します。

ユーザーフローのスモークテスト

Open http://localhost:3000, log in with the demo credentials, add the first product to the cart, and verify that the cart badge shows "1".

スタイルの問題をデバッグする

Go to https://myapp.example.com/pricing and check why the "Pro" plan card overflows its container on a 1280px-wide viewport. Suggest a CSS fix.

コンソールエラーを修正する

Navigate to http://localhost:5173, open every page linked from the main menu, collect all console errors, and fix them in the source code.

アプリをマッピングして文書化する

Explore https://staging.example.com, follow all internal links up to two levels deep, and produce a Markdown document describing each page and its main features.

エンドツーエンドテストを生成する

Walk through the sign-up flow at http://localhost:3000/signup and write Cypress end-to-end tests covering the happy path and validation errors.

探索的テスト

Do 10 minutes of exploratory testing on http://localhost:8080: try edge-case inputs in every form you find and report anything that looks broken or inconsistent.

要件

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