Debugg Ai MCP

🚀 🧪 Debugg AIの公式MCPサーバー

Model Context Protocol (MCP)を実装したAI駆動のブラウザ自動化およびE2Eテストサーバーです。このサーバーは、AIエージェントがUIの変更をテストし、ユーザー行動をシミュレートし、実行中のWebアプリケーションの視覚的出力を分析するのを支援するために設計されており、自然言語とCLIツールを通じてすべてを行うことができます。

エンドツーエンドテストはこれまで夢魔のような存在でした。セットアップだけでなく、アプリに変更を加えるたびに管理するのも大変でした。

Debugg AIのMCPサーバーは、完全にリモートで管理されるブラウザを備え、安全なtunnelを介してローカルまたはリモートで実行されるサーバーに簡単に接続できるため、playwrightやローカルブラウザ、プロキシのセットアップを心配する必要がない、新しいテスト方法を提供します。

つまり、テスト実行中に邪魔なChromeのポップアップが表示されず、ChromeやPlaywrightのバージョンを管理する必要もなく、最も重要なのはゼロ設定です。APIキーを取得し、MCPサーバーリストに追加するだけです。

後でこれらのテストを再実行したり、CI / CDパイプラインで実行するテストスイートを作成したい場合は、ダッシュボード - Debugg.AIアプリですべての過去のテスト結果を確認できます。

✨ 主な機能

• 🧠 MCPプロトコルサポート CLIとツールレジストリをサポートする完全なMCPサーバー実装。

• 🧪 エンドツーエンドテスト自動化 debugg_ai_test_page_changesツールを介して、ユーザーストーリーまたは自然言語の説明に基づいてUIテストをトリガーします。

• 🌐 ローカルホストWebアプリ統合 シミュレートされたユーザーフローで、任意のlocalhostポートで実行中の開発アプリをテストします。

• 🧾 MCPツール通知 ステップの説明とUI状態の目標を含むリアルタイムの進捗更新をクライアントに送信します。

• 🧷 スクリーンショットサポート 画像レンダリングをサポートするLLM用に、ページの最終的な視覚的状態をキャプチャします。

• 🧱 Stdioサーバー互換性 stdin/stdoutを介して、任意のMCP互換クライアント（Claude Desktop、LangChainエージェントなど）に接続できます。

💻 使用例

入力プロンプト: "アカウントを作成してログインする機能をテストする"

結果:

**タスク完了**

- 所要時間: 86.80秒
- 最終結果: メールアドレス 'alice.wonderland1234@example.com' でアカウントのサインアップとログインのタスクを正常に完了しました。
- ステータス: 成功

完全なデモ:

より詳細な完全なユースケースデモをご覧ください。

📦 インストール

無料アカウントを作成し、APIキーを生成してください - DebuggAI

オプション1: NPX (ローカル開発)

npx -y @debugg-ai/debugg-ai-mcp

Claude Desktopや独自のAIエージェントなどのツールでのテストまたは統合に使用します。

オプション2: Docker

docker run -i --rm --init \
  -e DEBUGGAI_API_KEY=your_api_key \
  -e TEST_USERNAME_EMAIL=your_test_email \
  -e TEST_USER_PASSWORD=your_password \
  -e DEBUGGAI_LOCAL_PORT=3000 \
  -e DEBUGGAI_LOCAL_REPO_NAME=your-org/your-repo \
  -e DEBUGGAI_LOCAL_BRANCH_NAME=main \
  -e DEBUGGAI_LOCAL_REPO_PATH=/app \
  -e DEBUGGAI_LOCAL_FILE_PATH=/app/index.ts \
  quinnosha/debugg-ai-mcp

📚 詳細ドキュメント

🧰 MCPツール: debugg_ai_test_page_changes

説明

実行中のWebアプリに対してエンドツーエンドテストを実行し、自然言語で記述されたUI機能またはフローをテストします。任意のコード生成プラットフォームのAIエージェントが提案された変更を迅速に評価し、新しい機能が期待どおりに動作することを確認できます。

入力パラメータ

🧪 クロードデスクトップの設定例

{
  "mcpServers": {
    "debugg-ai-mcp": {
      "command": "npx",
      "args": ["-y", "@debugg-ai/debugg-ai-mcp"],
      "env": {
        "DEBUGGAI_API_KEY": "YOUR_API_KEY",
        "TEST_USERNAME_EMAIL": "test@example.com",
        "TEST_USER_PASSWORD": "supersecure",
        "DEBUGGAI_LOCAL_PORT": 3000,
        "DEBUGGAI_LOCAL_REPO_NAME": "org/project",
        "DEBUGGAI_LOCAL_BRANCH_NAME": "main",
        "DEBUGGAI_LOCAL_REPO_PATH": "/Users/you/project",
        "DEBUGGAI_LOCAL_FILE_PATH": "/Users/you/project/index.ts"
      }
    }
  }
}

🔐 環境変数

🧑‍💻 ローカル開発

# リポジトリをクローンし、依存関係をインストールする
npm install

# テスト設定をコピーし、資格情報を挿入する
cp test-config-example.json test-config.json

# ローカルでMCPサーバーを実行する
npx @modelcontextprotocol/inspector --config debugg-ai-mcp/test-config.json --server debugg-ai-mcp

📁 リポジトリ構造

.
├── e2e-agents/             # E2Eブラウザテストランナー
├── services/               # DebuggAI APIのクライアント
├── tunnels /               # リモートウェブブラウザへの安全な接続
├── index.ts                # メインのMCPサーバーエントリー
├── Dockerfile              # Dockerビルド設定
└── README.md

🧱 構築に使用されたもの

• Model Context Protocol SDK

💬 フィードバックと問題の報告

バグ、アイデア、または統合に関するヘルプが必要な場合は、イシューを開くか、直接DebuggAIチームに連絡してください。

📄 ライセンス

MITライセンス © 2025 DebuggAI

Made with 🩸, 💦, and 😭 in San Francisco