CCPhoto

Verbinde deine Handykamera über das lokale Netzwerk mit Claude Code.

CCPhoto ist ein MCP-Server, mit dem du Fotos auf deinem Telefon aufnehmen und direkt an Claude Code senden kannst. Halte dein Telefon auf eine Leiterplatte, ein Whiteboard, ein Etikett – auf alles – und Claude sieht es sofort. Keine App-Installation erforderlich; die Browserkamera deines Telefons erledigt die ganze Arbeit.

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

Schnellstart

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

Sage dann in Claude Code einfach „mach ein Foto“ – Claude erledigt den Rest.

Related MCP server: Xcode MCP Server

So funktioniert's

1. Claude ruft das MCP-Tool capture_photo auf.

2. In deinem Terminal erscheint ein QR-Code.

3. Scanne ihn mit deinem Telefon – in deinem Browser öffnet sich eine Kameraseite.

4. Mache ein Foto – Claude empfängt das Bild direkt.

Keine App-Installation nötig. Die native Kamera des Telefons wird über das HTML-Attribut <input capture> angesprochen.

Always-On-Modus

Der Server startet beim ersten capture_photo-Aufruf und bleibt während der gesamten Sitzung aktiv. Dein Telefon bleibt verbunden – ein erneutes Scannen des QR-Codes ist nicht nötig. Du kannst so viele Fotos aufnehmen, wie du möchtest, und jedes davon abrufen, indem du Claude darum bittest.

Benachrichtigungen bei Fotoanfragen

Wenn dein Telefon bereits verbunden ist und Claude erneut capture_photo aufruft, erhält das Telefon eine SSE-Push-Benachrichtigung. Der Aufnahmebutton pulsiert, um dich darauf hinzuweisen, dass Claude auf ein neues Foto wartet. Einfach tippen und aufnehmen.

Bidirektionale Nachrichtenübermittlung

Claude kann Inhalte über das Tool send_to_phone an dein Telefon senden. Text, Markdown und Bilder erscheinen in einem ausklappbaren Bereich auf dem Telefon. So wird dein Telefon zum Referenzbildschirm – Claude kann Schaltanweisungen, Pinbelegungsdiagramme oder Codeausschnitte anzeigen, während du mit beiden Händen arbeitest.

Foto-Anmerkungen

Nach der Aufnahme eines Fotos erscheint ein Anmerkungsbildschirm, auf dem du das Bild bearbeiten kannst, bevor du es sendest. Verwende farbige Stifte (Rot, Blau, Grün, Weiß), um Komponenten einzukreisen, Pfeile zu zeichnen oder Bereiche hervorzuheben. Tippe auf „Senden“, um das mit Anmerkungen versehene Bild hochzuladen, oder auf „Überspringen“, um das Originalfoto ohne Anmerkungen zu senden.

Live-Video-Assistent

Starte einen halb-echtzeit Videostream von deiner Telefonkamera. Claude beobachtet das Live-Bild (ein Bild alle 3 Sekunden) und gibt in Echtzeit Anweisungen – richte die Kamera dorthin, worum Claude bittet, und erhalte Anweisungen auf deinem Telefonbildschirm.

Erfordert HTTPS (für den Kamerazugriff). Akzeptiere in Android Chrome einmalig die Zertifikatswarnung. Derzeit nur Android/Chrome; iOS-Unterstützung geplant.

Sprachinteraktion

Tippe auf dem Telefon auf die Mikrofontaste, um mit Claude zu sprechen. Sprache wird mithilfe der integrierten Spracherkennungs-API des Browsers transkribiert und als Text gesendet. Claude kann mit gesprochenem Audio über send_to_phone mit speak: true antworten – das Telefon spricht die Antwort per Text-to-Speech laut aus.

Das ermöglicht freihändige Arbeitsabläufe: Stelle eine Frage, während du einen Lötkolben hältst, und höre die Antwort, ohne auf einen Bildschirm zu schauen. Die Mikrofontaste erscheint nur in Browsern, die Spracherkennung unterstützen (Android Chrome).

Generative UI

Claude kann auf der Grundlage dessen, was es sieht, umfangreiche, kontextbezogene Benutzeroberflächen auf deinem Telefon erzeugen. Richte deine Kamera auf ein Produkt, eine Komponente, ein Rezept oder irgendetwas anderes – Claude analysiert es und sendet eine individuelle interaktive Oberfläche an dein Telefondisplay.

12 Komponententypen: Card, Text, Image, Metric, MetricGrid, Checklist, StepByStep, Alert, Table, Timer, Badge und Divider. Claude setzt diese zu kontextbezogenen Layouts zusammen – eine Pflanzenpflegekarte mit Bewässerungs-Checkliste, eine Schaltkreiskomponententabelle mit Pinbelegungsdiagrammen oder eine Schritt-für-Schritt-Reparaturanleitung mit Timern.

Verwende send_to_phone mit dem Parameter ui_spec, um benutzerdefinierte Benutzeroberflächen zu erzeugen.

Installation

npx (empfohlen, keine Installation)

npx ccphoto --setup

Globale Installation

npm install -g ccphoto
ccphoto --setup

Aus dem Quellcode

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

Wenn du den MCP-Server lieber manuell registrieren möchtest, anstatt --setup zu verwenden:

claude mcp add ccphoto -- npx ccphoto --mcp

Referenz der MCP-Tools

Standalone-CLI-Modus

CCPhoto kann auch unabhängig von Claude Code ausgeführt werden:

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

Ein QR-Code wird im Terminal ausgegeben. Scanne ihn, mache Fotos, und sie werden auf der Festplatte gespeichert. Der Server bleibt für mehrere Aufnahmen aktiv.

CLI-Optionen

Konfiguration

Sicherheit

• Sitzungstoken – Für jede Serversitzung wird ein kryptographisch zufälliger Hex-Token mit 32 Zeichen generiert. Jede Anfrage muss den Token enthalten.

• Timing-sicherer Vergleich – Die Tokenvalidierung verwendet crypto.timingSafeEqual, um Timing-Angriffe zu verhindern.

• Nur lokales Netzwerk – Der Server bindet an deine lokale Netzwerk-IP. Keine Daten verlassen dein Netzwerk.

• Keine externen Dienste – Fotos werden direkt zwischen deinem Telefon und dem Server über HTTP in deinem LAN übertragen. Nichts wird in die Cloud hochgeladen.

Fehlerbehebung

Lokale Netzwerk-IP konnte nicht erkannt werden

Stelle sicher, dass dein Computer mit WLAN verbunden ist (in manchen Konfigurationen reicht Ethernet nicht aus). CCPhoto benötigt eine LAN-IP-Adresse, die dein Telefon erreichen kann.

QR-Code lässt sich nicht scannen

Versuche, die Terminal-Schriftgröße zu vergrößern oder die Terminalbreite zu verringern, damit der QR-Code in einer scannbaren Auflösung dargestellt wird. Du kannst auch die unter dem QR-Code angezeigte URL kopieren und manuell in den Browser deines Telefons eingeben.

Telefonkamera öffnet sich nicht

Die Kameraaufnahmefunktion erfordert in einigen Browsern HTTPS, aber die meisten mobilen Browser erlauben sie über einfaches HTTP für lokale Netzwerkadressen. Wenn dein Browser den Kamerazugriff blockiert, versuche Safari (iOS) oder Chrome (Android).

Upload schlägt fehl

Stelle sicher, dass sich dein Telefon und dein Computer im selben WLAN-Netzwerk befinden. Unternehmensnetzwerke mit Client-Isolation können den Geräte-zu-Geräte-Verkehr blockieren. Versuche stattdessen einen persönlichen Hotspot oder ein Heimnetzwerk.

Entwicklung

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)

Die Tests verwenden den in Node.js integrierten Test-Runner und benötigen die tsx-Entwicklungsabhängigkeit für die Ausführung von TypeScript.

Projektstruktur:

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

Roadmap

• Echte Domain + Zertifikate von Let's Encrypt – Verwende eine registrierte Domain mit gültigen Zertifikaten für null Browserwarnungen auf jedem Gerät, einschließlich iOS Safari.

• iOS-Live-Video-Unterstützung – Live-Videostreaming funktioniert derzeit auf Android/Chrome. Die iOS-Safari-Unterstützung erfordert vertrauenswürdige Zertifikate.

• AR-Overlays im Kamerabild – Zeichne Anmerkungen direkt in Echtzeit auf die Live-Kameraansicht.

• Multi-Kamera-Unterstützung – Verbinde mehrere Telefone gleichzeitig für verschiedene Blickwinkel.

• WebRTC-Streaming – Ersetze das HTTP-Frame-Polling durch WebRTC, sobald sich die Verarbeitungslatenz von Claudes Vision verbessert.

Mitwirken

Beiträge sind willkommen.

1. Forke das Repository

2. Erstelle einen Feature-Branch (git checkout -b my-feature)

3. Nimm deine Änderungen vor

4. Führe npm test aus, um sicherzustellen, dass nichts kaputt ist

5. Committe deine Änderungen (git commit -m "Add my feature")

6. Pushe deinen Branch (git push origin my-feature)

7. Erstelle einen Pull-Request

Wenn du einen Fehler meldest, gib bitte deine Node.js-Version, dein Betriebssystem und die Schritte zur Reproduktion des Problems an.

Lizenz

MIT