Claude Code / AI エージェント連携

Miseru の中心ユースケースは「AI エージェントが動作確認で撮ったスクリーンショットを、そのまま PR で見せる」ことです。このページでは Claude Code を例に連携を組みます(MCP 対応エージェントなら同じ構成が使えます)。

構成の全体像

Claude Code ──(MCP: miseru_push)──▶ Miseru ──▶ 署名付き URL + markdown
     │                                              │
     └── markdown を PR コメントに貼る               └ GitHub Action が
         (または Action に任せる)                      1 PR = 1 コメントに集約

エージェント側の仕事は「撮る → miseru_push → 返ってきた markdown を使う」だけです。

1. トークンを環境変数で渡す

ダッシュボードで発行した Upload Token を、エージェントが動く環境に渡します。

export MISERU_TOKEN=msr_••••

シークレットなので、リポジトリにコミットせず、環境変数・シークレットマネージャ・.env(gitignore 済み)などで渡してください。

2. MCP サーバーを設定する

プロジェクトの .mcp.json(または Claude Code の MCP 設定)に追加します。

{
  "mcpServers": {
    "miseru": { "command": "npx", "args": ["-y", "miseru", "mcp"] }
  }
}

これで miseru_push(アップロード) / miseru_expire(失効)の2ツールが使えるようになります。各ツールの入出力は MCP サーバーリファレンスを参照してください。

MCP を使わない場合は、CLI 直叩きでも同じことができます。

npx miseru push ./shot.png --name home --pr 482

3. エージェントへの指示例

CLAUDE.md や AGENTS.md に次のような一節を足すと、動作確認のたびにスクリーンショットが PR に届くようになります。

## 動作確認スクリーンショット

UI に影響する変更を検証したら、スクリーンショットを撮って PR に見せること:

1. Playwright 等でスクリーンショットを撮る(PNG、5MB 未満)
2. `miseru_push` ツール(または `npx miseru push <file> --name <論理名> --pr <PR番号>`)でアップロード
3. 返ってきた markdown を PR コメントに貼る
   (GitHub Action を設定済みならアップロードだけでよい — コメントは Action が集約更新する)

- `--name` は `home` / `login@mobile` のような論理名にする
- PR 番号は `gh pr view --json number` で取得できる

4. コメント投稿はどちらに任せるか

方式	動き	向いている場面
GitHub Action に任せる(推奨)	エージェントはアップロードのみ。CI の Action が 1 PR = 1 コメントを維持	チームで常用する場合。コメントが散らからない
エージェントが直接貼る	`miseru_push` が返す markdown を `gh pr comment` 等で投稿	Action をまだ設定していない場合・一時的な利用

GitHub Action の設定は GitHub Action セットアップを参照してください。PR クローズ時の自動失効も Action が担うため、失効ポリシーが「PR クローズで失効」の場合は Action の設定を強く推奨します。

Claude Code プラグイン

リポジトリの claude-code-plugin/ に、上記の構成(MCP 設定 + 「撮って PR に見せる」フローの skill)をまとめたプラグインがあります。プラグインとして読み込むと、「スクショを PR に貼って」のような指示で定型フローが動きます。

動作の確認

エージェントに「この画面のスクショを PR #N に見せて」と指示する
PR に 📸 スクリーンショット コメントが付く(Action 使用時)、または markdown が返る
ダッシュボードのプロジェクト詳細に画像が PR 単位で並ぶ

表示されない場合はトラブルシューティングへ。