🎯 О чём этот конспект: Пошаговое руководство по развертыванию единого веб-интерфейса для всех популярных AI-агентов (Cursor CLI, Claude Code, Codex) с возможностью удаленного доступа через смартфон. Разбирается связка инструментов для проброса локального сервера в защищенную сеть.

👤 Кому будет полезно: Вайбкодерам и разработчикам, которые хотят сохранять мобильность и управлять процессом генерации кода или мониторить работу агентов, находясь вдали от рабочего места.

✨ Что получите: Настроенную панель управления AI-агентами, доступную по защищенному URL с любого устройства (iPhone/Android/Laptop), без необходимости сидеть за монитором.

1. Подготовка сетевой инфраструктуры через Tailscale

Контекст: Для того чтобы ваш телефон «увидел» локальный сервер на ноутбуке, находясь в другой сети (например, через 4G), необходимо создать виртуальную частную сеть (Mesh VPN). Tailscale позволяет соединить устройства напрямую без сложной настройки проброса портов и риска выставить сервер в открытый интернет. Это критически важно для безопасности, так как AI-агенты имеют доступ к вашей файловой системе.

Выгода: Безопасный доступ к локальным инструментам из любой точки мира без конфликтов с обычными VPN-сервисами.

Как применить:

• Шаг 1: Установка на десктоп — Скачайте инсталлер с официального сайта Tailscale. Для macOS рекомендуется использовать Package Installer.
• Шаг 2: Авторизация — Войдите через Google/GitHub аккаунт.
• Шаг 3: Проверка статуса — Откройте терминал и убедитесь, что устройство в сети:

tailscale status

• Шаг 4: Установка на мобильное устройство — Скачайте Tailscale из App Store или Google Play, войдите под тем же аккаунтом и разрешите добавление VPN-конфигурации.

Результат: Ваши устройства находятся в одной защищенной виртуальной сети.

2. Развертывание единого интерфейса Claude Code UI

Контекст: Работа в терминале с несколькими агентами неудобна на мобильных устройствах. Проект cloud-code-ui (или аналогичные веб-оболочки для CLI) предоставляет графический интерфейс для управления сессиями, выбора моделей (Claude, Gemini, Cursor) и визуализации контекста. Мы запускаем его в режиме прослушивания локального хоста для последующего проксирования.

Выгода: Единое окно для всех чатов, поддержка MCP-серверов, визуальный контроль загрузки контекста и удобный файловый менеджер.

Как применить:

• Шаг 1: Запуск сервера — Выполните команду в терминале (требуются права администратора для корректной работы с CLI-агентами):

sudo npx @claudecode/ui --host 127.0.0.1 --port 3001

• Шаг 2: Первичная настройка — Перейдите в браузере по адресу http://localhost:3001. Создайте локального пользователя (Username/Password). Эти данные понадобятся для входа с телефона.
• Шаг 3: Подключение агентов — В разделе Settings активируйте нужные инструменты (Codex, Cursor, Claude). Если они установлены в системе, UI подтянет их автоматически.

Результат: Работающий локальный веб-интерфейс, объединяющий ваших AI-агентов.

3. Проброс интерфейса на мобильное устройство

Контекст: Теперь нужно сделать так, чтобы локальный порт 3001 стал доступен по URL внутри сети Tailscale. Функция serve позволяет мгновенно создать прокси-адрес для внутреннего использования.

Выгода: Возможность полноценно кодить, отправлять промпты и просматривать файлы проекта прямо с экрана смартфона.

Как применить:

• Шаг 1: Активация прокси — В новом окне терминала на компьютере запустите команду:

tailscale serve --bg 3001

• Шаг 2: Получение ссылки — Если команда запущена впервые, терминал может выдать ошибку и попросить подтвердить действие (Accept). После подтверждения вы получите уникальный URL формата https://your-device-name.tailscale.net.
• Шаг 3: Вход с телефона — Убедитесь, что Tailscale на телефоне включен. Откройте полученную ссылку в мобильном браузере. Введите логин/пароль, созданные на этапе настройки UI.

Результат: Полноценный мобильный пульт управления вайбкодингом.

FAQ

В: Будет ли это работать, если на компьютере включен другой VPN для доступа к Claude/OpenAI?

О: Да, Tailscale работает на другом уровне сетевого протокола и обычно не конфликтует с прокси-сервисами или стандартными VPN. Автор видео подтверждает стабильную работу связки Tailscale + VPN-провайдер.

В: Можно ли через этот интерфейс добавлять MCP-сервера?

О: Да, в настройках Web UI есть раздел MCP. Если у вас уже настроены конфигурации в Cursor или Claude Desktop, интерфейс автоматически подтянет доступные инструменты.

В: Насколько это безопасно? Могут ли посторонние зайти в мой UI?

О: Доступ осуществляется через Tailscale, который требует авторизации. Кроме того, сам Web UI защищен вашим локальным логином и паролем. Ссылка не видна в обычном интернете.

В: Какие модели доступны в мобильном интерфейсе?

О: Доступны все модели, которые поддерживают подключенные агенты: Claude 3.5 Sonnet, модели Gemini, а также специфические настройки Cursor (например, режим Reasoning).

В: Как остановить трансляцию интерфейса, когда я закончил?

О: Чтобы прекратить проксирование порта, выполните команду tailscale serve off. Чтобы полностью остановить сервер интерфейса, нажмите Ctrl+C в терминале, где запущен npx.

Конспект создан на основе видео «Как подключить Claude Code / Cursor к ТЕЛЕФОНУ? Вайб-кодинг ВЕЗДЕ!» канала VibeCoder. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/Apqu5g4d_0U