kogiQA MCP Web Browser

公式

これは、Claude Codeなどのコーディングエージェントがあなたに代わってウェブサイトにアクセスし、バグの特定やUIテストケースの作成を支援するためのウェブブラウザです。

GitHub

103

このMCPを試すスポンサー

kogiQA Web Browser MCPで何ができますか？

アシスタントに自然言語で実際のブラウザを操作させましょう。セレクタは不要です。

スタイルの問題をデバッグ — アシスタントにページを検査させ、要素がはみ出したり、位置がずれたりする理由を説明させ、CSSの修正案を提案させます。
コンソールエラーを修正 — アシスタントにページ間を移動させ、コンソールエラーを収集させ、ソースコードに修正を適用させます。
アプリのマッピングとドキュメント化 — アシスタントに内部リンクを探索させ、各ページの機能のMarkdown概要を生成させます。
エンドツーエンドテストを生成 — フローの正常系パスとバリデーションエラーをカバーするCypressテストをリクエストします。
探索的テストを実行 — アシスタントにフォームでエッジケースの入力を試させ、壊れた動作や一貫性のない動作を報告させます。

ドキュメント

kogiQA MCP Web Browser

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

用途:

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

プロンプトの例は使用例を参照してください

kogiQA MCP vs 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クライアント