SnappySnag

SnappySnag Model Context Protocol（MCP）サーバー

SnappySnag の公式 Model Context Protocol（MCP） インテグレーションです。Flutter アプリ内のバグ報告、ピン注釈、画面診断、デバイスログを Cursor、Windsurf、Claude Desktop などの AI コーディングアシスタントに直接シームレスに連携します。

---

⚡ SnappySnag MCP とは？

Flutter アプリケーションのテスト中、QA テスターやエンドユーザーはモバイル画面上で視覚的なバグや予期しない動作を直接指摘します。SnappySnag は以下をキャプチャします。

• 正確な視覚的ピン座標とフィードバックコメント
• 注釈付きの高解像度スクリーンショット
• アクティブな画面クラスとウィジェットツリーの階層
• デバイスログ（OS、プラットフォーム、バージョン、デバイスのメタデータ）
• AI が生成した根本原因の分析と解決プロンプト

SnappySnag MCP サーバーを使用すると、AI コーディングエージェント（Cursor、Windsurf、Claude など）がバグ報告を直接確認し、該当する Flutter ウィジェットのコードにすぐ移動して修正を実装し、エディターからコンテキストを切り替えることなくチケットを解決済みにできます。

---

🛠️ 利用可能な MCP ツール

ツール	説明	主なパラメーター
get_latest_feedback	最新のバグ報告またはユーザーフィードバックを、詳細情報（アクティブなピン、スクリーンショット、メタデータ、デバイス情報）とともに取得します。	status（open | all）、include_screenshot（true | false）
list_feedbacks	フィルター条件（ステータス、重大度、キーワード）に一致するフィードバックチケットを検索して一覧表示します。簡潔な概要を返します。	status（open | resolved | ignored | all）、severity、source、keyword、limit
get_feedback_detail	指定したフィードバック ID の詳細情報を取得します。スクリーンショット画像、アクティブなピン、ディスカッションメモを含みます。	feedback_id（必須）、include_screenshot
update_feedback_status	チケットのステータス（resolved / ignored / open）を更新し、任意で開発者の解決メモを添付します。	feedback_id（必須）、status（必須）、comment

---

🚀 クイックスタート／設定

SnappySnag は 2 つの接続方法に対応しています。

1. オプション A（コマンド／stdio、デモモード付き）：標準の MCP stdio 経由でローカルに実行します。キーを指定しない場合、モックの Flutter バグチケットを使ったインタラクティブな デモモード が有効になります。
2. オプション B（リモート SSE／Streamable HTTP）：ローカルの依存関係なしで、SnappySnag のホストされたエンドポイントに直接接続します。

---

1. MCP シークレットキーを取得する（デモでは任意）

1. SnappySnag Dashboard にサインインします。
2. Project Settings（歯車アイコン）を開き、Integrations または MCP タブを選択します。
3. Generate MCP Secret Key をクリックして、キー（snag_mcp_...）をコピーします。

---

2. AI エディターを設定する

🔹 オプション A：コマンド／stdio（npx またはローカルビルド）

Cursor（.cursor/mcp.json）

{
  "mcpServers": {
    "snappysnag": {
      "command": "node",
      "args": ["path/to/snappy-snag-mcp/dist/index.js", "--key=YOUR_MCP_SECRET_KEY"]
    }
  }
}

（ヒント：デモデータでテストするには、--key を省略するか、--key=demo を指定してください！）

Claude Desktop（claude_desktop_config.json）

{
  "mcpServers": {
    "snappysnag": {
      "command": "node",
      "args": ["path/to/snappy-snag-mcp/dist/index.js", "--key=YOUR_MCP_SECRET_KEY"]
    }
  }
}

---

🔹 オプション B：Streamable HTTP（リモート SSE）

Cursor（.cursor/mcp.json）

{
  "mcpServers": {
    "snappysnag": {
      "url": "https://snappysnag.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_MCP_SECRET_KEY"
      }
    }
  }
}

Windsurf（~/.codeium/windsurf/mcp_config.json）

{
  "mcpServers": {
    "snappysnag": {
      "serverUrl": "https://snappysnag.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_MCP_SECRET_KEY"
      }
    }
  }
}

---

💡 プロンプトを使ったワークフローの例

接続したら、AI アシスタントに自然な言葉で指示できます。

「SnappySnag の最新の未解決バグ報告を確認して、問題を修正してください。」

AI エージェントは以下を行います。

1. get_latest_feedback(status: "open") を呼び出し、報告された画面、ピンの位置、デバイスの仕様を確認します。
2. リポジトリ内の、参照されている Flutter ウィジェットファイルを読み取ります。
3. 必要なコード修正またはレイアウト調整を適用します。
4. update_feedback_status(feedback_id: "...", status: "resolved", comment: "Fixed overflow in ProductCard layout") を呼び出します。

---

🔒 セキュリティとプライバシー

• プロジェクトごとにスコープ設定されたキー：各 MCP Secret Key は、指定されたプロジェクトのみに厳密にスコープ設定されています。
• 即時失効：キーが漏えいした場合、ダッシュボードでワンクリックするだけで再生成または失効できます。
• 暗号化された転送：すべてのデータとスクリーンショットのアセットは、有効期間の短い署名付き URL を使用して HTTPS 経由で配信されます。

---

📚 リソースとリンク

• SnappySnag 公式サイト：https://snappysnag.com
• Flutter SDK（snappy_snag）：pub.dev/packages/snappy_snag
• Model Context Protocol（Anthropic）：modelcontextprotocol.io

---

📄 ライセンス

このリポジトリはMIT Licenseの下でライセンスされています。