Webvizio MCP

Webvizio について

Webvizio は、エンドユーザー、技術者以外のチーム、開発者間のコミュニケーションを効率化します。

使いやすい ブラウザー拡張機能を使うと、ウェブページ上で直接、視覚的なフィードバックやバグレポートを記録できます。関連するすべてのデータは自動的に収集され、実行可能な、コンテキストが豊富な開発タスクに変換されます。

技術者以外からのプロダクトに関するフィードバックを、数日ではなく数秒でバグのないコードに変換します。開発者向け Webvizio の詳細についてはこちらをご覧ください。

Webvizio MCP サーバー

Webvizio API への安全かつ構造化されたアクセスを提供する、TypeScript ベースの Model Context Protocol（MCP）サーバーです。このサーバーにより、MCP クライアントは標準化されたインターフェースを通じて、Webvizio のプロジェクトや開発タスクをシームレスに操作できます。

Webvizio MCP Server は、ウェブサイトやウェブアプリからのフィードバックやバグレポートを、実行可能な、コンテキストが豊富な開発者タスクに自動変換します。AI コーディングツールに直接届けられるため、AI エージェントはタスクを迅速かつ正確に解決するために必要なすべてのデータを取得できます。

📋 利用可能なツール

ツール	メソッド	説明
get_projects	GET	利用可能な Webvizio プロジェクトをすべて取得します
get_current_project	GET	現在選択されているプロジェクトの詳細を取得します
set_project	POST	プロジェクトのタスクを扱うために、現在の Webvizio プロジェクトを設定します
get_tasks	GET	ユーザーに割り当てられた未完了タスクの一覧を取得します
get_task_description	GET	タスクの説明を取得します
get_task_prompt	GET	タスクを実行するための AI プロンプトを取得します
get_task_error_logs	GET	タスクのエラーログを取得します
get_task_console_logs	GET	タスクのコンソールログを取得します
get_task_network_logs	GET	タスクのネットワークログを取得します
get_task_action_logs	GET	タスクの操作ログ（再現手順）を取得します
get_task_screenshot	GET	タスクのスクリーンショットを取得します
close_task	POST	Webvizio でタスクのステータスを「完了」に設定します

🛠 インストール

1. デバイスに Node.js 18 以上がインストールされていることを確認します。
2. MCP サーバーの設定コードを、AI クライアントの設定ファイルの mcpServers セクションにコピーします。

   "webvizio": {
      "command": "npx",
      "args": [
         "-y",
         "@webvizio/mcp-server"
      ],
      "env": {
         "WEBVIZIO_API_KEY": "<your-api-key>"
      }
   }
   

3. AI Settings ページ https://app.webvizio.com/profile/ai で、MCP サーバー用の API キーを生成してコピーします。
4. API キーを WEBVIZIO_API_KEY 環境変数に設定します。
5. 変更を保存します。
6. これで完了です。MCP サーバーの設定が完了し、使用できる状態になりました。

🚀 使用方法

1. IDE のチャットを開きます（例：Cursor のエージェントモード、または Windsurf の Cascade）。
2. Webvizio タスクへのリンクを貼り付けます。または、AI エージェントにすべてのタスクを表示するよう依頼します。
3. 選択したタスクを実行するよう AI エージェントに指示します。
4. AI エージェントは、タスクに関する詳細情報（スクリーンショット、コンソールログなど）を収集するために、ツールの使用をリクエストすることがあります。エージェントが処理を続けられるよう、これらのリクエストを承認してください。
5. タスクが正しく完了したことを確認するため、エージェントの作業をチェックします。
6. タスクが完了したら、AI エージェントにタスクを終了するよう依頼します。