CCPhoto

Свяжите камеру вашего телефона с Claude Code по локальной сети.

CCPhoto — это MCP-сервер, который позволяет фотографировать на телефоне и отправлять снимки напрямую в Claude Code. Наведите телефон на плату, маркерную доску, этикетку — на что угодно — и 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 вызывает инструмент MCP capture_photo.

2. В терминале появляется QR-код.

3. Отсканируйте его телефоном — в браузере откроется страница камеры.

4. Сделайте фото — Claude получит изображение напрямую.

Устанавливать приложение не нужно. Доступ к встроенной камере телефона осуществляется через HTML-атрибут <input capture>.

Режим постоянной работы

Сервер запускается при первом вызове capture_photo и продолжает работать в течение всей сессии. Ваш телефон остаётся подключённым — повторно сканировать QR-код не нужно. Делайте сколько угодно фотографий и запрашивайте любую из них через Claude.

Уведомления о запросе фото

Если телефон уже подключён, а Claude снова вызывает capture_photo, телефон получает push-уведомление через SSE. Кнопка съёмки начинает пульсировать, сигнализируя, что Claude ждёт новое фото. Просто нажмите и снимайте.

Двунаправленный обмен сообщениями

Claude может отправлять контент на ваш телефон с помощью инструмента send_to_phone. Текст, Markdown и изображения появляются в сворачиваемой панели на телефоне. Это превращает телефон в справочный экран: Claude может показывать инструкции по подключению, схемы распиновки или фрагменты кода, пока вы работаете обеими руками.

Аннотации к фотографиям

После съёмки появляется экран аннотаций, где можно рисовать на изображении перед отправкой. Используйте цветные ручки (красную, синюю, зелёную, белую), чтобы обводить компоненты, рисовать стрелки или выделять важные области. Нажмите «Отправить», чтобы загрузить размеченное изображение, или «Пропустить», чтобы отправить исходное фото без аннотаций.

Видеоассистент в реальном времени

Запустите передачу видео с камеры телефона почти в реальном времени. Claude наблюдает за прямой трансляцией (один кадр каждые 3 секунды) и даёт инструкции в реальном времени — направьте камеру туда, куда просит Claude, и получайте указания на экране телефона.

Требуется HTTPS (для доступа к камере). В Chrome на Android один раз примите предупреждение о сертификате. Сейчас поддерживаются только Android/Chrome; поддержка iOS планируется.

Голосовое взаимодействие

Нажмите кнопку микрофона на телефоне, чтобы говорить с Claude. Речь распознаётся с помощью встроенного в браузер API распознавания речи и отправляется в виде текста. Claude может ответить голосовым сообщением, используя send_to_phone с параметром speak: true, — телефон озвучит ответ через синтез речи.

Это открывает возможность работы без рук: задайте вопрос, держа в руках паяльник, и услышьте ответ, не глядя на экран. Кнопка микрофона появляется только в браузерах с поддержкой распознавания речи (Chrome на Android).

Генеративный UI

Claude может создавать на вашем телефоне насыщенный контекстный UI на основе того, что видит. Наведите камеру на товар, деталь, рецепт или что угодно — Claude проанализирует объект и отправит на экран телефона настраиваемый интерактивный интерфейс.

12 типов ком понентов: Card, Text, Image, Metric, MetricGrid, Checklist, StepByStep, Alert, Table, Timer, Badge и Divider. Clude собирает их в контекстные макеты — карточку по уходу за растением с чек-листом полива, таблицу ком понентов сх емы с диаграммами распиновки или пошаговое руководство по ремонту с таймерами.

Используйте send_to_phone с параметром ui_spec, чтобы создать собственный интерфейс.

Установка

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

Если вы предпочитаете зарегистрировать MCP-сервер вручную вместо использования --setup:

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-символьный шестнадцатеричный токен. Каждый запрос должен содержать этот токен.

• Устойчивое к временным атакам сравнение — Для проверки токена используется crypto.timingSafeEual, что предотвращает атаки по времени.

• Только локальная сеть — Сервер привязывается к IP-адресу вашей локальной сети. Никакие данные не покидаю т вашу сеть.

• Без внешних сервисов — Фотографии передаются напрямую между вашим телефоном и сервером по HTTP в вашей локальной сети. Ничего не загружается в облако.

Устранение неполадок

Не удаётся определить IP-адрес локальной сети

Убедитесь, что ком пьютер подключён к Wi-Fi (в некоторых конфигурациях одного Ethernet недостаточно). CCPhoto нужен IP-адрес локальной сети, доступный с вашего телефона.

QR-код не сканируется

Попробуйте увеличить размер шрифта в терминале или уменьшить его ширину, чтобы QR-код отображался с разрешением, пригодным для сканирования. Вы также можете скопировать URL, напечатанный под QR-кодом, и ввести его вручную в браузере телефона.

Камера телефона не открывается

Для работы камеры в некоторых браузерах требуется 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 требуется dev-зависимость 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 — Ипользование зарегистрированного домена с действительными сертификатами для по лного отсутствия предупреждений браузера на любых устройствах, включая Safari на iOS.

• Поддержка прямого видео на iOS — Сейчас прямой видеопоток работает на Android/Chrome. Для Safari на iOS требуются доверенные сертификаты.

• AR-наложения на видеопоток — Рисование аннотаций прямо на живом видео с камеры в реальном времени.

• Поддержка нескольких камер — Одновременное подключение нескольких телефонов для разных углов обзора.

• WebRTC-трансляция — Замена HTTP-опроса кадров на WebRTC, когда снизится задержка обработки изобраений в Claude.

Участие в разработке

Вклад приветствуется.

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. Откройте pull request

Сообщая об ошибке, пожалуйста, укажите версию Node.js, операционную систему и шаги для воспроизведения пробле мы.

Лицензия

MIT