CCPhoto

スマートフォンのカメラを、ローカルネットワーク経由でClaude Codeに接続します。

CCPhotoは、スマートフォンで写真を撮り、それを直接Claude Codeに送信できるMCPサーバーです。回路基板、ホワイトボード、ラベルなど、スマートフォンを何に向けても、Claudeはそれを即座に認識します。アプリのインストールは不要で、スマートフォンのブラウザのカメラがすべてを担います。

 +----------+        WiFi        +-----------+       MCP        +-------------+
 |  Phone   |  photos, voice,   |  CCPhoto  |   image/text     |  Claude     |
 |  Camera  |  mode switches    |  Server   |   data            |  Code       |
 |  + Mic   | <--------------- |  (local)  | <--------------- |             |
 +----------+   TTS, guidance   +-----------+   send_to_phone  +-------------+

クイックスタート

npx ccphoto --setup        # One-time: register CCPhoto as an MCP server

その後は、Claude Codeで**「写真を撮って」**と言うだけです。Claudeが残りを処理します。

Related MCP server: Xcode MCP Server

仕組み

1. Claudeがcapture_photo MCPツールを呼び出します。

2. ターミナルにQRコードが表示されます。

3. スマートフォンでそれをスキャンすると、ブラウザにカメラページが開きます。

4. 写真を撮ると、Claudeが直接画像を受け取ります。

アプリのインストールは不要です。スマートフォンのネイティブカメラは、<input capture> HTML属性を通じてアクセスされます。

常時接続モード

サーバーは最初のcapture_photo呼び出しで起動し、セッション中ずっと実行され続けます。スマートフォンは接続されたままだので、QRコードを再スキャンする必用はありません。好きなだけ写真を撮ることができ、Claudeに頼めばそのいずれも取得できます。

写真リクエスト通知

スマートフォンがすでに接続されている状態でClaudeが再びcapture_photoを呼び出すと、スマートフォンにSSEプッシュ通知が届きます。キャプチャボタンが点滅して、Claudeが新し写真を待っていることを知らせます。タップして撮影するだけです。

双方向メッセージング

Claudeはsend_to_phoneツールを使ってスマートフォンにコンテンツを送信できます。テキスト、マークダウン、画像がスマートフォンの折りたたみ可能なパネルに表示されます。これにより、スマートフォンはリファレンス画面になります。Claudeは、両手を使いながら配線手順、ピン配図、コードスニペッとなどを表示できます。

写真注釈

写真を撮ると、送信前に画像に描画できる注釈画面が表示されます。色付きペン（赤、青、緑、白）を使っいて、部品を丸で囲んだり、矢印を描いたり、注目したい領域を強調したりできます。「送信」をタップすると注釈付き画像がアップロードされ、「スキップ」をタップすると注釈なしの元の写真が送信されます。

ライブビデオアシスタント

スマートフォンのカメラから半リアルタイムのビデオストリームを開始します。Claudeはライブフィード（3秒ごとに1フレーム）を監視し、リアルタイムでガイダンスを提供します。Claudeが指示した場所にカメラを向けると、スマートフォンの画面に指示が表示されます。

カメラアクセスにはHTTPSが必要です。Android Chromeでは、証明書の警告を一度受け入れてください。現在はAndroid/Chromeのみ対応で、iOSサポートは予定されています。

音声操作

スマートフォンのマイクボタンをタップしてClaudeに話しかけます。音声はブラウザ組み込みの音声認識APIを使って文字起こしされ、テキストとして送信されます。Claudeは、speak: trueを指定したsend_to_phoneを使うことで、音声で応答できます。スマートフォンがText-to-Speechでその応答を読み上げます。

これにより、ハンズフリー・ワークフローが可能になります。はんだごてを持ったまま質問し、画面を見ずに答えを聞くことができます。マイクボタンは、音声認識をサポートするブラウザ（Android Chrome）でのみ表示されます。

ジェネレーテブUI

Claudeは、見たものに基づいて、スマートフォン上にリッチでコンテキストに応じたUIを生成できます。カメラを商品、部品、レシピなど、何にでも向けてください。Claudeはそれを分析し、カスタムのインタラクティブなインターフェースをスマートフォンの画面に送信します。

12種類のコンポーネント：Card、Text、Image、Metric、MetricGrid、Checklist、StepByStep、Alert、Table、Timer、Badge、Divider。Claudeはこれらをコンテキストに応じたレイアウトに組み合わせます。水やリチェックリスト付きの植物ケアカード、ピン図付きの回路部品テーブル、タイマー付きのステップバイステップ修理ガイドなどです。

send_to_phoneをui_specパラメータ付きで使用して、カスタムUIを生成します。

インストール

npx（推奨、インストール不要）

npx ccphoto --setup

グローバルインストール

npm install -g ccphoto
ccphoto --setup

ソースから

git clone https://github.com/stepankaiser/ccphoto.git
cd ccphoto
npm install
npm run build
node dist/index.js --setup

--setupを使用せずにMCPサーバーを手動で登録する場合は：

claude mcp add ccphoto -- npx ccphoto --mcp

MCPツールリファレンス

スタンドアローンCLIモード

CCPhotoは、Claude Codeなしで単独でも実行できます：

npx ccphoto                                  # Start with defaults
npx ccphoto --port 4000 --output-dir ./photos  # Custom port and directory

QRコードがターミナルに印字されます。それをスキャンして写真を撮ると、デスクに保存されます。サーバーは複数回のキャプチャにわたり起動し続けます。

CLIオプション

設定

セキュリティ

• セッショントークン -- サーバーセッションごとに暗号学的にランダムな32文字の16進トークンが生成されます。すべてのリクエストにトークンを含める必要があります。

• タイミングセーフな比較 -- トークンの検証にはcrypto.timingSafeEqualを使用して、タイミング攻撃を防ぎます。

• ローカルネットワークのみ -- サーバーはローカルネットワークのIPにバインドされます。データがネットワークの外に出ることはありません。

• 外部サービスなし -- 写真はスマートフォンとサーバーの間でLAN上のHTTPを通じて直接転送されます。クラウドにアップロードされることはありません。

トラブルシューティング

ローカルネットワークIPを検出できません

コンピュータがWi-Fiに接続されていることを確認してください（一部の構成では、Ethernetだけでは不十分な場合があります）。CCPhotoは、スマートフォンが到達できるLAN IPアドレスを必用とします。

QRコードがスキャンできない

QRコードがスキャン可能な解像度で表示されるように、ターミナルのフォントサイズを大くするか、ターミナルの幅を狭くしてみてください。QRコードの下に表示されるURLをコピーして、スマートフォンのブラウザに手動で入カすることもできます。

スマートフォンのカメラが開かない

カメラキャプチャ機能は一部のブラウザでHTTPSが必要ですが、ほとんどのモバイルブラウザでは、ローカルネットワークアドレスに対して平文HTTPを許可しています。ブラウザがカメラアクセスをブロックする場合は、Safari（iOS）またはChrome（Android）をお試しください。

アップロードが失敗する

スマートフォンとコンピュータが同じWi-Fiネットワークに接続されていることを確認してください。クライアント分離が設定された企業ネットワークでは、デバイス間の通信がブロックされる場合があります。代わりに、個人用ホットスポットまたは自宅のネットワークをお試しください。

開発

npm install          # Install dependencies
npm run build        # Compile TypeScript
npm run dev          # Watch mode (recompile on change)
npm test             # Run the test suite (94 tests)

テストはNode.js組み込みのテストランナーを使用し、TypeScript実行にはtsx開発依存関係が必要です。

プロジェクト構成：

src/
  index.ts        CLI entry point and arg parsing
  mcp.ts          MCP server with tool definitions
  server.ts       HTTP server, SSE, upload handling
  mobile-page.ts  Self-contained HTML for the phone camera page
  storage.ts      Photo file management
  network.ts      Local IP detection
  token.ts        Session token generation and validation
  types.ts        Shared TypeScript interfaces

ロードマップ

• 実ドメイン + Let's Encrypt証明書 -- iOS Safarariを含むすべのデバイスでブラウザ警告をゼロにするため、有効な証明書を持つ登録ドメインを使用します。

• iOSラブビデオ対応 -- ラブビデオストリーミングは現在Android/Chromeで動作します。iOS Safarari対応には信賴できる証明書が必要です。

• カメラフードへのARオーバーレイ -- ラブのカメラビューに注釈をリアルタイムで直接描きます。

• マルチカメラ対応 -- 複数のスマートフォンを同時に接続して、異なる視角を実現します。

• WebRTCストリーミング -- Claudeのビジョン処理のレテンシが改蓋されたら、HTTPフレーポーリングをWebRTCに置き換えます。

貢献

貢献を歓迎します。

1. リポジトりをフォークします

2. フイチャーブランチを作成します（git checkout -b my-feature）

3. 変更を加えます

4. npm testを実行して、何も壊れていないことを確認します

5. 変更をコッミトします（git commit -m "Add my feature"）

6. ブランチにプッシュします（git push origin my-feature）

7. プルリクエストを開きます

バグを報告する際は、Node.jsバージョン、OS、再現手順を含めてください。

ライセンス

MIT