CCPhoto

Conecta la cámara de tu teléfono a Claude Code a través de la red local.

CCPhoto es un servidor MCP que te permite hacer fotos con tu teléfono y enviarlas directamente a Claude Code. Apunta tu teléfono a una placa de circuito, una pizarra, una etiqueta... lo que sea, y Claude lo ve al instante. No se requiere instalar ninguna aplicación; la cámara del navegador de tu teléfono hace todo el trabajo.

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

Inicio rápido

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

Luego, en Claude Code, solo di "toma una foto" — Claude se encarga del resto.

Related MCP server: Xcode MCP Server

Cómo funciona

1. Claude llama a la herramienta MCP capture_photo.

2. Aparece un código QR en tu terminal.

3. Escanéalo con tu teléfono: se abre una página de cámara en tu navegador.

4. Toma una foto: Claude recibe la imagen directamente.

No es necesario instalar ninguna aplicación. La cámara nativa del teléfono se accede mediante el atributo HTML <input capture>.

Modo siempre activo

El servidor se inicia en la primera llamada a capture_photo y permanece en ejecución durante toda la sesión. Tu teléfono permanece conectado: no es necesario volver a escanear el código QR. Toma todas las fotos que quieras y recupera cualquiera de ellas pidiéndoselo a Claude.

Notificaciones de solicitud de foto

Cuando tu teléfono ya está conectado y Claude vuelve a llamar a capture_photo, el teléfono recibe una notificación push SSE. El botón de captura parpadea para indicarte que Claude está esperando una nueva foto. Solo toca y dispara.

Mensajería bidireccional

Claude puede enviar contenido a tu teléfono mediante la herramienta send_to_phone. El texto, el markdown y las imágenes aparecen en un panel plegable en el teléfono. Esto convierte tu teléfono en una pantalla de referencia: Claude puede mostrar instrucciones de cableado, diagramas de pines o fragmentos de código mientras trabajas con las dos manos.

Anotaciones de fotos

Después de tomar una foto, aparece una pantalla de anotación donde puedes dibujar sobre la imagen antes de enviarla. Usa los rotuladores de colores (rojo, azul, verde, blanco) para rodear componentes, dibujar flechas o resaltar áreas de interés. Toca "Enviar" para subir la imagen anotada, o "Omitir" para enviar la foto original sin anotaciones.

Asistente de vídeo en directo

Inicia una transmisión de vídeo semi en tiempo real desde la cámara de tu teléfono. Claude observa la transmisión en directo (un fotograma cada 3 segundos) y proporciona orientación en tiempo real: apunta la cámara hacia donde Claude te pida y recibe instrucciones en la pantalla de tu teléfono.

Requiere HTTPS (para el acceso a la cámara). En Android Chrome, acepta la advertencia de certificado una vez. Actualmente solo Android/Chrome; el soporte para iOS está planificado.

Interacción por voz

Toca el botón de micrófono en tu teléfono para hablar con Claude. El habla se transcribe con la API de reconocimiento de voz integrada en el navegador y se envía como texto. Claude puede responder con audio hablado usando send_to_phone con speak: true: el teléfono lee la respuesta en voz alta mediante texto a voz.

Esto permite flujos de trabajo manos libres: haz una pregunta mientras sostienes el soldador y escucha la respuesta sin mirar una pantalla. El botón de micrófono solo aparece en los navegadores que admiten reconocimiento de voz (Android Chrome).

UI generativa

Claude puede generar una UI enriquecida y contextual en tu teléfono basándose en lo que ve. Apunta la cámara a un producto, componente, receta o lo que sea: Claude lo analiza y envía una interfaz interactiva personalizada a la pantalla de tu teléfono.

12 tipos de componentes: Card, Text, Image, Metric, MetricGrid, Checklist, StepByStep, Alert, Table, Timer, Badge y Divider. Claude los combina en diseños contextuales: una tarjeta de cuidado de plantas con lista de comprobación de riego, una tabla de componentes de circuitos con diagramas de pines o una guía de reparación paso a paso con temporizadores.

Usa send_to_phone con el parámetro ui_spec para generar una UI personalizada.

Instalación

npx (recomendado, sin instalación)

npx ccphoto --setup

Instalación global

npm install -g ccphoto
ccphoto --setup

Desde el código fuente

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

Si prefieres registrar el servidor MCP manualmente en lugar de usar --setup:

claude mcp add ccphoto -- npx ccphoto --mcp

Referencia de herramientas MCP

Modo CLI independiente

CCPhoto también puede ejecutarse de forma independiente, sin Claude Code:

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

Se imprime un código QR en la terminal. Escanéalo, toma fotos y se guardan en el disco. El servidor permanece en ejecución para múltiples capturas.

Opciones de CLI

Configuración

Seguridad

• Token de sesión — Se genera un token hexadecimal criptográficamente aleatorio de 32 caracteres para cada sesión del servidor. Cada solicitud debe incluir el token.

• Comparación segura frente a temporización — La validación del token usa crypto.timingSafeEqual para evitar ataques de temporización.

• Solo red local — El servidor se vincula a la IP de tu red local. Ningún dato sale de tu red.

• Sin servicios externos — Las fotos se transfieren directamente entre tu teléfono y el servidor por HTTP en tu LAN. Nada se sube a la nube.

Solución de problemas

No se pudo detectar la IP de la red local

Asegúrate de que tu ordenador esté conectado a WiFi (no solo a Ethernet en algunas configuraciones). CCPhoto necesita una dirección IP de LAN a la que tu teléfono pueda acceder.

El código QR no se escanea

Intenta aumentar el tamaño de fuente de la terminal o reducir el ancho de la terminal para que el código QR se represente con una resolución escaneable. También puedes copiar la URL impresa debajo del código QR y escribirla manualmente en el navegador de tu teléfono.

La cámara del teléfono no se abre

La función de captura de cámara requiere HTTPS en algunos navegadores, pero la mayoría de los navegadores móviles lo permiten en HTTP simple para direcciones de red local. Si tu navegador bloquea el acceso a la cámara, prueba con Safari (iOS) o Chrome (Android).

La subida falla

Verifica que tu teléfono y tu ordenador estén en la misma red WiFi. Las redes corporativas con aislamiento de cliente pueden bloquear el tráfico entre dispositivos. Prueba con un punto de acceso personal o una red doméstica.

Desarrollo

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)

Los tests usan el ejecutor de pruebas integrado de Node.js y requieren la dependencia de desarrollo tsx para la ejecución de TypeScript.

Estructura del proyecto:

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

Hoja de ruta

• Dominio real + certificados de Let's Encrypt — Usa un dominio registrado con certificados válidos para eliminar las advertencias del navegador en cualquier dispositivo, incluido iOS Safari.

• Soporte de vídeo en directo en iOS — La transmisión de vídeo en directo funciona actualmente en Android/Chrome. El soporte para iOS Safari requiere certificados de confianza.

• Superposiciones de RA en la transmisión de cámara — Dibuja anotaciones directamente en la vista de cámara en directo en tiempo real.

• Soporte multicámara — Conecta varios teléfonos simultáneamente para diferentes ángulos de visión.

• Transmisión WebRTC — Reemplaza la consulta periódica de fotogramas por HTTP con WebRTC cuando mejore la latencia del procesamiento de visión de Claude.

Contribuciones

Las contribuciones son bienvenidas.

1. Haz un fork del repositorio

2. Crea una rama de funcionalidad (git checkout -b my-feature)

3. Haz tus cambios

4. Ejecuta npm test para verificar que nada esté roto

5. Confirma tus cambios (git commit -m "Add my feature")

6. Sube los cambios a tu rama (git push origin my-feature)

7. Abre un pull request

Al informar de un error, incluye tu versión de Node.js, tu sistema operativo y los pasos para reproducir el problema.

Licencia

MIT