kogiQA MCP Web Browser
公式これは、Claude Codeなどのコーディングエージェントがあなたに代わってウェブサイトにアクセスし、バグの特定やUIテストケースの作成を支援するためのウェブブラウザです。
Kogi QA Web Browser MCPで何ができますか？
- デバッグスタイルの問題 — エージェントに特定のビューポート幅でページを検査させ、レイアウトの問題を特定し、CSSの修正案を提案させます。
- コンソールエラーを自動修正 — メニューからリンクされているすべてのページをエージェントに巡回させ、コンソールエラーを収集し、ソースコードに修正を適用させます。
- Webアプリの機能をマッピングして文書化 — エージェントに内部リンクを設定した深さまでクロールさせ、各ページとその機能を説明するMarkdown文書を生成させます。
- エンドツーエンドテストを生成 — ユーザーフロー（例：サインアップ）を説明し、エージェントにそれを実行させ、正常系とバリデーションエラーをカバーするCypressテストを出力させます。
- 探索的テストを実行 — すべてのフォームに対してエッジケースの入力を用いた時間制限付きの探索的テストを依頼し、壊れている箇所や一貫性のない箇所のレポートを出力させます。
ドキュメント
kogiQA MCP Web Browser
kogiQA を使用したブラウザ自動化機能を提供する Model Context Protocol (MCP) サーバーです。このサーバーにより、LLM はスクリーンショットや視覚調整済みモデルを必要とせず、自然言語で Web ページと対話できます。
用途
- ページ上のスタイルの問題をデバッグ
- コンソールエラーを自動修正
- Web アプリの機能をマッピングして文書化
- エンドツーエンドテストを自動生成
- アプリケーションの探索的テストを自動化
使用例のプロンプトは Usage Examples を参照してください
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 クライアント