Браузерний інтерфейс для Claude Code CLI. Спілкуйтесь з AI, виконуйте завдання на автопілоті та керуйте проектами — все в одній вкладці.
English | Українська | Русский
📖 Від термінала до Dashboard | Революція віддаленого доступу
Працює на Windows, macOS та Linux — без специфічного налаштування під платформу.
Claude Code CLI — потужний інструмент: пише код, запускає тести, редагує файли та впроваджує функції. Але він живе в терміналі, а термінал має обмеження: контекст губиться між сесіями, паралельна робота перетворюється на жонглювання вкладками, і немає можливості поставити завдання в чергу та відійти.
Claude Code Studio вирішує це:
- Поставте завдання в чергу та йдіть — Kanban-дошка + Scheduler. Claude працює, поки ви спите. Повертайтесь до готового результату.
- Керуйте звідусіль — Telegram-бот + Remote Access. Перевіряйте результати з телефону в спортзалі.
- Автономні пайплайни — завдання створюють дочірні завдання під час виконання. Одне завдання "перевір issues" автоматично породжує завдання на виправлення.
- Контекст не губиться — сесії на SQLite з механізмом самовідновлення. Продовжуйте через кілька днів точно з того місця, де зупинились.
- Справжнє паралельне виконання — декілька завдань запускаються одночасно в одному проекті. Ніякого ручного перемикання вкладок.
Вимоги: Node.js 18+ + Claude Code CLI встановлено та авторизовано (підписка Claude Pro або Max)
Node.js 22.5+ — нуль нативної компіляції. Використовує вбудований
node:sqlite, не потрібен C++ тулчейн. Старіші версії Node.js використовуютьbetter-sqlite3(потребує build tools).
npx github:Lexus2016/claude-code-studioВідкрийте http://localhost:3000, задайте пароль, починайте спілкування.
Інші способи встановлення
Оновлення:
npx github:Lexus2016/claude-code-studio@latestВстановити глобально:
npm install -g github:Lexus2016/claude-code-studioКлонувати репозиторій:
git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
npm install && node server.jsDocker:
git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
cp .env.example .env
docker compose up -d --build
# Enterprise: базовий образ з приватного реєстру (Artifactory, Nexus, Harbor)
MIRROR=my-registry.company.com docker compose up -d --buildВирішення проблем: npm install з GitHub падає з помилкою
Деякі версії npm (особливо 10.x) падають при встановленні git-залежностей з помилкою:
npm error --prefer-online cannot be provided when using --prefer-offline
Це відомий баг npm, де при підготовці git-пакета передаються взаємовиключні прапорці.
Обхідний шлях — встановити вручну:
git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
npm install
npm install -g . # опціонально: зареєструвати CLI-команду `claude-code-studio` глобальноАбо оновити npm:
npm install -g npm@latest
Це не чат-бот. "Відрефактори цю функцію та додай тести" → Claude відкриває файли, редагує їх, запускає тести, виправляє помилки, звітує — у реальному часі. Вставляйте скріншоти через Ctrl+V. Коли Claude ставить питання посеред завдання, картка згортається в компактну пігулку після вашої відповіді. Натисніть Compact & New — розмова стискується через Haiku і продовжується в новій сесії зі збереженим контекстом, без витрат токенів.
Швидкий фільтр бічної панелі — у кожній секції (Проекти, Чати, MCP-сервери, Skills, Команди) є кнопка 🔽. Натисніть, введіть кілька літер — список звужується миттєво. Esc для очищення.
Імпорт сесій Claude CLI — імпортуйте наявні сесії Claude Code CLI з ~/.claude/projects/ прямо в Studio. Натисніть кнопку ↓ у шапці, вкажіть шлях до проекту, виберіть сесії, імпортуйте. Вже імпортовані сесії позначаються, щоб уникнути дублів. Працює на Windows (C:\...), macOS та Linux; підтримується розкриття ~.
Extended thinking — коли Claude використовує розширене мислення, кожен блок думок відображається як бейдж «Chain of thought» з оцінкою кількості слів. Натисніть, щоб відкрити повний ланцюжок міркувань у модальному вікні з кнопкою копіювання. Модальні вікна імпорту CLI та ланцюжка думок повністю локалізовані (EN/UA/RU) — всі написи, статусні повідомлення та формат дат адаптуються до обраної мови інтерфейсу.
Блоки думок тепер повністю персистентні: перемикання вкладок під час генерації більше не губить ланцюжок міркувань — він зберігається в SQLite після завершення. Живі бейджи мислення з'являються в реальному часі прямо в чаті — можна спостерігати за процесом міркування. Імпортовані CLI-сесії також зберігають блоки думок. Відновлення сесій коректне: блоки думок виключаються з контексту при відновленні. Закрити модальне вікно можна клавішею ESC.
Натисніть Перекласти у модальному вікні мислення — і ланцюжок міркувань з'явиться мовою вашого інтерфейсу. Переклад виконується через Claude haiku і кешується — повторний виклик миттєвий. Кнопка Копіювати завжди копіює те, що відображається на екрані — оригінал або переклад.
Експорт / імпорт сесій — беріть історію чату будь-куди. Експортуйте будь-яку сесію в портативний JSON одним кліком — повна історія повідомлень, виклики інструментів, мітки часу та вкладення. Імпортуйте назад у будь-який екземпляр Studio, щоб продовжити з того місця, де зупинились. Кнопка імпорту розташована прямо на екрані привітання — сесію можна відновити, не створюючи нову.
Сценарії використання:
- Перенос між комп'ютерами — експортуйте на десктопі, імпортуйте на ноутбуці чи сервері. Та сама розмова, інша машина.
- Завантажити в будь-який AI-агент — киньте експортований JSON у ChatGPT, Gemini або будь-який інший AI та скажіть «розберись, що ми обговорювали, і давай продовжимо». Формат зрозумілий людині та самодостатній.
- Імпорт з будь-якого AI — продуктивна сесія в іншому інструменті? Попросіть його зберегти діалог у форматі
{ "session": { "title": "..." }, "messages": [{ "role": "user"|"assistant", "type": "text", "content": "..." }] }та імпортуйте результат у Studio. Ваші розмови не прив'язані до однієї платформи.
Переривання завдання — надішліть уточнення або нову інструкцію поки Claude активно працює, не зупиняючи поточне завдання. Компактна пілюля ⚡ Уточнити з'являється в рядку введення під час генерації — натисніть, щоб переключитися між Уточнити (інжектувати в живий потік) та Черга (запланувати після поточного завдання). Доставка тепер гарантована через хук PreToolUse: Studio перехоплює кожен виклик інструменту і доставляє повідомлення до наступної дії Claude. Бейдж у реальному часі показує статус доставки. Статус доставки тепер зберігається в SQLite — перезавантажте сторінку, поверніться до сесії через кілька днів, і кожне переривання в історії коректно покаже, чи дійшло воно до Claude або завершилось без доставки. Стан бейджів звіряється з авторитетним лічильником сервера при завершенні завдання — коректно в будь-якому сценарії, включно з кількома вкладками та пропущеними подіями. Текст пілюлі оновлюється миттєво при зміні мови інтерфейсу — оновлення сторінки не потрібне. Пілюля враховує тип сесії: залишається прихованою для віддалених SSH-сесій (де функція не підтримується) і зникає одразу при перемиканні з локального проекту на SSH — жодних застарілих елементів у рядку введення.
Вкладення до переривання — прикріпіть файл, скріншот або SSH-конфіг до будь-якого уточнення просто під час завдання. Claude отримує зображення як візуальний контент (повні мультимодальні MCP-блоки), файли — як читабельні шляхи, SSH-конфіги — з уже заповненими обліковими даними. Не потрібно зупиняти завдання, щоб поділитися контекстом — все доставляється в тій же контрольній точці. Працює з веб-інтерфейсу та Telegram.
Автоочікування rate limit — коли API Claude відповідає rate limit або перевантаженням (429), Studio автоматично чекає скидання і повторює запит — без ручного оновлення, без втрати сесії. Живий зворотний відлік відображається прямо в чаті: «Rate limited — повтор через 4 хв 30 с». До 3 автоматичних повторів, максимум 30 хвилин очікування.
Форк сесії — натисніть ↗ поруч з будь-яким чатом і створіть повну копію з тією ж історією Claude CLI. Розгалужуйте розмову в будь-який момент — досліджуйте альтернативні підходи, не втрачаючи оригінальний трек. Працює і на SSH-хостах.
Створіть картку, опишіть що потрібно, перемістіть у "To Do" — Claude підхопить автоматично.
Поставте 10 завдань у чергу, відійдіть, поверніться до готового результату. Картки виконуються паралельно (незалежні завдання) або послідовно (зв'язані сесії — Claude пам'ятає, що побудувало попереднє завдання). Синхронізація між вкладками миттєво оновлює кожну відкриту вкладку браузера. Справжнє паралельне виконання — без штучних блокувань директорій для незалежних завдань.
Створіть завдання, вкажіть час — Claude виконає його точно тоді, коли потрібно. Без cron, без скриптів, без нагляду.
- Одноразово: "Задеплой на staging о 6 ранку" — виконано рівно о 6:00
- Повторювані: щогодини, щодня, щотижня, щомісяця — з опційною кінцевою датою
- До 5 паралельних воркерів — пропущені запуски після перезапуску пропускаються коректно
Повторювані завдання тепер перезбуджуються на місці — той самий запис завдання скидається до наступного часу після кожного запуску, замість створення нового рядка в базі даних. ID завдань залишаються стабільними між повтореннями, база даних не росте нескінченно, а відновлення після збою коректно перезбуджує перервані повторювані завдання замість того, щоб позначати їх виконаними.
60-секундний сторожовий таймер сканує завдання, що застрягли в in_progress без живого воркера — якщо воркер завершився аварійно без очищення, сторож автоматично відновлює завдання (перезбуджує повторювані, скидає одноразові в todo). Форма створення завдання попередньо заповнює дату/час прямо зараз — не потрібно заповнювати порожній picker перед плануванням.
Кольорове розмаєття: прострочені (червоний), сьогодні (помаранчевий), майбутні (синій), повторювані (фіолетовий). Кнопка Run Now для миттєвого тестування.
Під час виконання завдань Claude має доступ до вбудованого MCP-сервера для автономного керування завданнями — перетворюючи одиночні завдання на самоспрямовані пайплайни.
| Інструмент | Що робить |
|---|---|
create_task |
Породити наступне завдання. Знайшов 5 багів? Автоматично створить 5 завдань на виправлення |
create_chain |
Створити послідовний пайплайн (Build → Test → Deploy) за один виклик |
list_tasks |
Перевірити наявні завдання — уникати дублікатів, моніторити прогрес |
get_current_task |
Прочитати місію та контекст з батьківського завдання |
report_result |
Зберегти структуровані результати для наступних завдань |
get_task_result |
Прочитати вивід з виконаних залежних завдань |
cancel_task |
Скасувати надлишкові завдання (баг вже виправлено, дублювання роботи) |
Приклад: Заплануйте нічне завдання "перевір GitHub issues". Воно читає відкриті issues, створює завдання на виправлення для кожного бага, прив'язує завдання верифікації після кожного виправлення та формує зведений звіт. Без участі людини.
Завдання успадковують директорію проекту. Контекст передається явно — дочірні завдання знають точно, що робити. Глибина ланцюжка обмежена для запобігання безконтрольній рекурсії.
Підключення за 30 секунд (6-значний код з налаштувань). Ваш телефон стає повноцінним пультом керування:
- Черга та моніторинг:
/projects,/chats,/tasks,/chat,/new - Перегляд результатів:
/last,/full— плюс push-сповіщення при завершенні або помилці завдань - Керування:
/files,/cat,/diff,/log,/stop,/tunnel,/url - Черга переривань під час роботи: надішліть повідомлення поки Claude зайнятий — воно потрапить прямо в чергу переривань, а не в тупиковий «зайнято». Claude підхопить його на наступній контрольній точці. Можна додавати файли.
- Переадресація Ask User: питання Claude посеред завдань з'являються як кнопки Telegram — торкніться для відповіді або надішліть файл/зображення як відповідь
- Inline Stop: кнопка 🛑 в кожному повідомленні прогресу — одне торкання для скасування
- Міст сесій: повідомлення синхронізуються одночасно в телефон і браузер
- Мультипристрій: підключіть телефон, планшет, ноутбук — все одночасно
- ✉ Кнопка «Написати»: швидкий доступ у постійній клавіатурі — починайте друкувати без навігації по меню
- Вкладення файлів: надсилайте фото/файли прямо в бот — отримуйте підтвердження з розміром, потім додавайте питання
Forum Mode — Telegram-супергрупа з темами. Кожен проект отримує власний тред із deep-link навігацією між топіками. Багаті inline-кнопки дій на кожному повідомленні — повністю локалізовані (EN/UA/RU) — Continue, Diff, Files, History, New session. Автоматичне створення проектних топіків. Тема Tasks для керування Kanban. Тема Activity з прямими URL-кнопками для переходу в будь-який проект.
Forum Mode тепер реалізовано у виділеному самостійному модулі (telegram-bot-forum.js). Кожен проектний топік працює у повністю ізольованому стані — перемикання між проектами в різних тредах ніколи не змішує контекст і сесії. Надійна робота з десятком активних Forum-топіків одночасно. Кнопка Відкрити чат тепер завжди використовує callback — бот коректно перемикає контекст сесії і показує превʼю чату, а не просто переходить до URL топіку.
| Single | Multi | Dispatch | |
|---|---|---|---|
| Де | Чат | Чат | Kanban-дошка |
| Агентів | 1 | 2–5 паралельно | 2–5 як картки завдань |
| Залежності | — | Базові | Повний DAG |
| Авто-повтор | Ні | Ні | Так (з backoff) |
| Виживає після перезапуску | Ні | Ні | Так (SQLite) |
| Найкраще для | Зосередженої роботи | Складних завдань для спостереження | Фонової пакетної роботи |
Multi — оркестратор декомпозує на 2–5 підзавдань з потоковою передачею в реальному часі. Відправте план до Kanban кнопкою 📋. Dispatch — підзавдання потрапляють до Kanban як постійні картки з графами залежностей, авто-повтором і каскадним скасуванням.
Передавайте завдання зовнішнім AI CLI — OpenAI Codex, Gemini CLI, opencode, Aider — прямо з інтерфейсу чату. Два режими:
| Handoff | Sync | |
|---|---|---|
| Процес | Передав і забув | Паралельна співпраця |
| Комунікація | Одностороння передача контексту | Двостороння через DIALOG.md |
| Моніторинг | Ручна перевірка | Авто-опитування кожні 15с + fs.watch |
| Найкраще для | Незалежних завдань | Завдань, що потребують діалогу |
Як працює: натисніть Делегувати в панелі сесії, оберіть агента та режим, опишіть завдання. Studio генерує CONTEXT.md з історією розмови та відкриває термінал із зовнішнім агентом. У режимі Sync обидва агенти спілкуються через спільний DIALOG.md — відповіді з'являються прямо в основному чаті з сповіщеннями в реальному часі.
Панель агентів — керування зовнішніми агентами вбудоване прямо в бічну панель. Додавайте, редагуйте та видаляйте агентів без редагування config.json. Codex, Gemini CLI і opencode налаштовані за замовчуванням — створюються автоматично при першому запуску. Кнопка Тест поруч із кожним агентом перевіряє підключення до делегування. ID агента генерується з назви автоматично (з транслітерацією кирилиці). Повністю локалізовано EN/UA/RU. Працює на Windows — делегування через cmd.exe з коректним екрануванням. Делегування зберігаються після перезапуску сервера.
Auto — повний доступ до інструментів (за замовчуванням). Plan — аналіз тільки для читання; генерує кнопку Execute Plan для переходу до Auto та виконання. Автоматичне визначення плану перемикає режими автоматично, коли Claude сигналізує про завершення. Task — явний режим виконання.
28 вбудованих спеціалізованих персон (frontend, security, devops, kubernetes, debugging, code-review...). Auto-режим (⚡) класифікує кожне повідомлення та автоматично активує 1–4 релевантних skills:
- "Виправ цей React-баг" →
frontend+debugging-master - "Налаштуй K8s deployment" →
devops+kubernetes+docker
Plugin skills автоматично виявляються зі встановлених плагінів Claude Code. Додавайте власні .md файли до skills/.
Введіть / — виберіть збережений промпт. 8 вбудованих:
/check |
/review |
/fix |
/explain |
|---|---|---|---|
| Синтаксис і баги | Повний code review | Знайти і виправити баг | Пояснити на прикладах |
/refactor |
/test |
/docs |
/optimize |
| Прибрати код | Написати тести | Написати документацію | Знайти вузькі місця |
Додавайте власні, редагуйте, видаляйте. Скільки завгодно.
| Модель | Контекст | Найкраще для |
|---|---|---|
| Haiku | Стандартний | Швидкий — прості питання, швидкі перевірки |
| Sonnet | 1М токенів | Збалансований (за замовчуванням) — більшість повсякденних завдань |
| Opus | 1М токенів | Найпотужніший — складна архітектура, складні баги |
Sonnet та Opus працюють з контекстним вікном у 1 мільйон токенів — величезні кодові бази, довгі історії розмов і масивні набори файлів вміщуються в одну сесію без обмежень.
Бюджет кроків: 1–200 (за замовчуванням 50). Автопродовження до 3x — тобто 50 кроків фактично означає до 200 дій.
SSH — додавайте віддалені сервери, створюйте проекти що вказують на директорії на них. Claude працює там, ніби локально. Введіть # у чаті для швидкого підключення до кількох серверів. Скріншоти та файли автоматично завантажуються через SFTP.
Remote Access — один клік: cloudflared (без реєстрації) або ngrok. Публічна HTTPS-URL за секунди. Працює за NAT, файрволами, корпоративними VPN. URL автоматично надсилається в Telegram.
Теплова карта активності (90 днів), розбивка використання інструментів, розподіл за моделями, Automation Index (0–100), пікові години, топ-сесії з навігацією в один клік. Кожна цифра посилається на реальні дані.
Відкрийте URL на телефоні — інтерфейс з відчуттям нативного додатку. Мобільна шапка з індикатором статусу в реальному часі, налаштування у bottom sheet, Kanban-колонки зі scroll-snap, оптимізовані для дотику цілі 44px, безпечний для iOS. Не "мобільна версія" — справжній інтерфейс, переосмислений для дотику.
Розробники — декілька проектів, черги завдань, безперервність сесій. Плануйте нічні тести. Нехай Claude працює в нічну зміну.
Команди — спільний екземпляр з видимістю проектів, аудитовий слід Kanban, регулярні понеділкові code review.
Системні адміністратори — керування флотом серверів з однієї вкладки. Заплановані перевірки здоров'я, сканування безпеки, операції на кількох серверах зі сповіщеннями в Telegram.
ML/AI-інженери — віддалені GPU-сервери через SSH. Черга навчальних завдань. Заплановані дата-пайплайни. Моніторинг з телефону через Telegram.
- Не SaaS — працює на вашій машині. Без облікового запису, без телеметрії, без прив'язки до постачальника.
- Не IDE — керує сесіями Claude. Продовжуйте використовувати VS Code, Cursor або що завгодно.
- Не форк — обгортає офіційний CLI. Оновлення від Anthropic проходять автоматично.
Ліцензія MIT. Ваша інфраструктура, ваші дані.
Використовуйте Claude Flow для маршрутизації через OpenRouter — GPT-4o, Gemini, Llama, Mistral та інші:
npx github:Lexus2016/claude-flow # одноразове налаштування
npx github:Lexus2016/claude-code-studio # запуск як зазвичай| Категорія | Можливості |
|---|---|
| Чат | Потокова передача в реальному часі, вставка скріншотів, прикріплення файлів (@file), форк розмови, авто-продовження (3x), стиснення сесій, швидкий фільтр бічної панелі, імпорт сесій CLI, відображення extended thinking, експорт/імпорт сесій (JSON), переривання завдання (хук PreToolUse + вкладення), форк сесії, автоочікування rate limit |
| Kanban | Черга завдань, паралельно + послідовно, синхронізація між вкладками, drag-and-drop вкладки, графи залежностей |
| Scheduler | Одноразово + повторювані (щогодини/щодня/щотижня/щомісяця), 5 паралельних воркерів, Run Now, збереження в SQLite |
| Task Manager | Автономні дочірні завдання, ланцюжки, передача контексту, звітування про результати, скасування (MCP) |
| Telegram | Керування ботом, push-сповіщення, переадресація ask_user (+ відповідь файлом), міст сесій, Forum Mode, inline stop, deep-link навігація, rich action buttons (EN/UA/RU), кнопка «Написати», вкладення файлів, черга переривань під час роботи |
| Делегування | Крос-агентний handoff/sync (Codex, Gemini, opencode), протокол CONTEXT.md + DIALOG.md, fs.watch + polling, персистентність після перезапуску, Windows, панель агентів у сайдбарі, auto-seeded defaults, кнопка тест |
| Агенти | Single, Multi (2–5 у чаті), Dispatch (Kanban), авто-повтор, каскадне скасування |
| Режими | Auto, Plan (тільки читання + Execute Plan), Task, автоматичне перемикання режимів |
| Skills | 28 вбудованих, авто-класифікація, виявлення плагінів, власні .md файли |
| Команди | 8 вбудованих slash-команд, власні команди |
| Віддалений доступ | SSH-сервери, SFTP завантаження, швидке підключення #, тунелі cloudflared/ngrok |
| Мобільний | Нативний UI, bottom sheet, Kanban зі scroll-snap, безпечний для iOS, оптимізований для дотику |
| Dashboard | Теплова карта активності, використання інструментів, розподіл моделей, Automation Index, пікові години |
| Надійність | Сесії з самовідновленням, захист від збоїв, атомарні записи, миттєва зупинка, автоочікування rate limit, безпека конкурентного доступу (блокування сесій + busy_timeout), авто-очищення зависаючих блокувань сесій |
| Безпека | bcrypt-авторизація, AES-256-GCM SSH, Helmet.js, захист від path traversal, запобігання XSS/SQLi |
| Платформа | Windows/macOS/Linux, Docker (non-root, registry mirror), LLM proxy/gateway, 3 мови (EN/UA/RU), підтримка OpenRouter |
Архітектура — один Node.js-процес. Без кроку збірки. Без TypeScript. Без фреймворку.
server.js — Express HTTP + WebSocket
auth.js — bcrypt passwords, 32-byte session tokens
claude-cli.js — spawns `claude` subprocess, parses JSON stream
telegram-bot.js — Telegram bot (Direct Mode)
telegram-bot-forum.js — Самостійний модуль Forum Mode (патерн композиції)
mcp-task-manager.js — MCP server for autonomous task management
mcp-notify.js — MCP server for non-blocking notifications
public/index.html — entire frontend (HTML + CSS + JS)
config.json — MCP servers + skills catalog
data/chats.db — SQLite (WAL mode)
skills/ — .md skill files → system prompt
Середовище:
PORT=3000
WORKDIR=./workspace
MAX_TASK_WORKERS=5
CLAUDE_TIMEOUT_MS=1800000
TRUST_PROXY=false
LOG_LEVEL=info
ANTHROPIC_BASE_URL= # LLM proxy/gateway (LiteLLM, Bifrost, OpenRouter)Безпека: bcrypt (12 rounds), 32-байтні токени (TTL 30 днів), AES-256-GCM для SSH-паролів, заголовки Helmet.js, захист від path traversal, фільтрація XSS, параметризовані SQL-запити, обмеження буфера 2MB.
Розробка:
npm run dev # авто-перезавантаження (node --watch)
npm start # продакшнMIT