Красивый веб-чат поверх настоящего Claude Code: общие и личные чаты, живой стриминг, и хитрость — два аккаунта вместо одного лимита. Прочитай сам, или просто отдай этот гайд своему Claude — он повторит все шаги.
# вся магия — одна команда, которую крутит твой бэкенд: claude -p "собери контент-план на неделю" --output-format stream-json --verbose
Внутри — настоящий Claude Code: он редактирует код и файлы в папках-проектах на сервере. А вокруг — удобный чат для работы вдвоём или командой.
Правит файлы и проекты, а не просто отвечает текстом.
Видно всем или только тебе. Строгая изоляция личных.
Два аккаунта Claude, авто-переключение при исчерпании.
Диктовка через Whisper, загрузка и превью медиа.
Помнит разговор — контекст подкладывается сам.
Свой проект в каждом чате + обзор и скачивание файлов.
Арендуешь VPS — работает 24/7.
Ставишь и логинишь подписку.
Запускает claude -p, стримит ответ.
Красивая страница чата.
Пароль + HTTPS. Готово.
Честно: это гоняет твою личную подписку на сервере, а два аккаунта — это две реальные оплаты, не «взлом лимитов». Проверь актуальные условия Claude и держи это для себя/команды, а не как публичный сервис.
Подойдёт любой VPS в Европе или США с 2+ ГБ RAM. Один из проверенных вариантов — по кнопке ниже; там сейчас дают +15% к пополнению в первые 24 часа.
Взять сервер# под root, на свежем сервере apt update && apt install -y nginx python3 ffmpeg git ufw fail2ban claude # вход в браузере — это ПОДПИСКА, не API-ключ
Подписку можно оформить зарубежной картой через бота — без своей иностранной карты, быстро.
Оплатить подпискуИзоляция = безопасность. Не гоняй Claude под root. Заведи отдельного пользователя (chatworker) с урезанными правами и запускай всё под ним.
Маленький Python-сервер (без тяжёлых фреймворков) отдаёт HTML, принимает сообщение, запускает claude -p и стримит ответ через SSE. Фронт — один файл HTML+CSS+JS, без React. Оформи сервис как systemd (авто-старт), а впереди — nginx с паролем и HTTPS:
# nginx — ключевое auth_basic "Private"; # пароль на весь сайт client_max_body_size 30M; # иначе загрузки упадут (грабля №6) location /api/stream { proxy_pass http://127.0.0.1:8200; proxy_buffering off; } # SSE
HTTPS бесплатно: certbot --nginx -d chat.твойдомен.ру. На этом уже есть рабочий приватный чат на своём домене.
Второй аккаунт в отдельной папке через CLAUDE_CONFIG_DIR. Кончился лимит — бэкенд сам берёт второй.
Каждый чат — файл с историей + проверка доступа. Изоляцию проверяй строго.
Микрофон → Whisper (Groq) → текст в поле. Нюансы аудио — в граблях.
Последние N сообщений подкладываются в промпт как контекст.
ChatPlace — платформа для роста в соцсетях: ИИ-менеджер, что отвечает подписчикам в твоём стиле, автоворонки, геймификация и рефералки для Instagram / Telegram / TikTok. Подключается к Claude как MCP-инструмент (.mcp.json + --allowedTools mcp__chatplace) — и Claude прямо в чате помогает всё настроить. По ссылке — 10 дней бесплатно + 500 кредитов (≈ $5 на любые генерации). Чтобы активировать: зайди в профиль → раздел «Тарифы», выбери тариф и включи пробный период — кредиты начислятся на любые генерации.
600. Claude их в код не пишет — только ты..env, .json, .py, .log.Целься в тёмную кинематографику в духе Higgsfield: глубокий чёрный, «жидкое стекло», неоновое свечение, плавные анимации. Поставь Claude дизайн-скиллы — он подхватит их из ~/.claude/skills:
База из 84 стилей, 192 палитр, пар шрифтов и правил UX — Claude выдаёт продуманную дизайн-систему, а не «на глаз».
npm i -g ui-ux-pro-max-cli && uipro init --ai claudeimpeccable — эталонный дизайн-язык и полировка. design-taste-frontend — анти-шаблонность. animate — правила анимаций (<300 мс, верные кривые).
Просто скажи своему Claude: «установи дизайн-скиллы ui-ux-pro-max, impeccable, design-taste-frontend, animate в ~/.claude/skills и используй их в духе Higgsfield» — он скачает и подключит сам. Потом перезапусти его.
Самое ценное в гайде. Отдай этот список своему Claude — сэкономишь дни. ● критично · ● важно.
Бэкап ПЕРЕД каждым деплоем. Никогда не трогай файлы истории руками.
Ставь 2700 сек (45 мин). Короткий обрывает задачи и выглядит как «лимит кончился».
Сам сбрасывайся по времени или через ~20 мин — иначе аккаунты залипнут.
Claude примет за инъекцию. Мягко: «(Отвечай, пожалуйста, на русском.)».
ffmpeg → 16 кГц wav + куски ~110 сек, потом склейка. Иначе обрежет длинное.
client_max_body_size 30M; — иначе файлы и голос падают.
webm/mp4 определяй автоматически (ffmpeg), не хардкодь.
nginx буферизует — proxy_buffering off; на стрим-локейшене.
Перезапуск во время работы Claude обрывает ответ.
Убери ANTHROPIC_API_KEY из env — иначе биллинг по API, а не по подписке.
Реальный kill процесса, не просто скрытие крутилки — иначе лимит горит.
На тишине выдумывает «Продолжение следует…» — фильтруй фантомные фразы.
Каждый вызов — чистый лист. Контекст подкладываешь сам.
Разрешение команд по умолчанию ВЫКЛ или белый список.
Очередь — иначе несколько claude уронят сервер в OOM.
Чисти старые загрузки/логи, ротируй бэкапы. Поглядывай df -h.
Одним лёгким запросом проси Claude придумать короткий заголовок.
Два способа: скопируй бриф и вставь своему Claude Code — или скачай файл и отправь его в чат первым сообщением. Claude должен быть запущен на арендованном сервере под отдельным пользователем.
Ты — мой инженер. Помоги пошагово поднять на ЭТОМ сервере (Ubuntu 22.04+) приватный
веб-чат поверх Claude Code — как в видео. Работай итеративно, веди меня по шагам,
объясняй простыми словами, жди моего «ок» на всё необратимое, тестируй только в
отдельных тестовых чатах, реальные данные не трогай. Пиши по-русски.
════════ КАК ТЫ МЕНЯ ВЕДЁШЬ ════════
• Веди поэтапно: план -> команды -> моё подтверждение -> следующий шаг.
• Когда понадобится — ЗАПРАШИВАЙ у меня данные, а не выдумывай: доступ к серверу
(IP/SSH), домен, логины и пароли для сайта, ключ Whisper (Groq), ключ доступа
ChatPlace. Я дам их, когда попросишь.
• Секреты/ключи/пароли в код НЕ пиши — их вставляю Я вручную (файл с правами 600).
• Дизайн: если ниже указан стиль — предложи установить (или установи сам) дизайн-
скиллы в ~/.claude/skills и опирайся на них (см. раздел СТИЛЬ).
════════ ЧТО СТРОИМ (полный список) ════════
Сайт-чат на моём домене, вход по логину и паролю (nginx basic-auth). Внутри —
настоящий Claude Code (headless), который правит файлы в папках-проектах.
• Общие чаты (видят все) и личные (только владелец) — строгая изоляция доступа.
• Личность из логина; можно менять своё отображаемое имя.
• Живой стриминг ответа (SSE): печать по мере генерации, индикатор «печатает»,
живой прогресс («Читает файл…», «Пишет код…», «💭 Размышляет…») и реальный
текст промежуточных размышлений.
• Кнопка «Стоп» — реально убивает текущий процесс claude.
• Выбор модели (Sonnet / Opus / Haiku) и глубины ответа (Быстро / Подумать / Глубоко).
• Кнопка «Команды» — разрешить Claude выполнять системные команды (по умолч. ВЫКЛ).
• Управление чатами: создание (общий/личный), закрепление (pin), переименование,
удаление — править/удалять может только владелец; системный «Общий» не удаляется.
• Авто-названия: первый чат называется по первому сообщению.
• Поиск по всем доступным чатам (по тексту сообщений).
• Загрузка файлов и картинок (drag-and-drop и по кнопке), превью картинок, лайтбокс.
• Голосовой ввод (Whisper): микрофон -> расшифровка -> текст в поле.
• Память: перед каждым запросом подкладывается контекст последних сообщений чата.
• Папки-проекты: у каждого чата своя рабочая директория; обзор файлов, просмотр,
скачивание одного файла и всего проекта архивом (tar.gz).
• Экспорт контекста чата в Markdown (для переноса в другой Claude Code).
• Двойной лимит: два аккаунта Claude, авто-переключение при исчерпании.
• Шкалы лимитов: отслеживание расхода токенов (5-часовое окно и недельное), проценты.
• Копирование любого сообщения и любого блока кода одной кнопкой.
════════ АРХИТЕКТУРА И ДАННЫЕ ════════
• Бэкенд: Python (стандартная библиотека http.server + ThreadingHTTPServer, без
Flask/Django), слушает ТОЛЬКО 127.0.0.1:8200 (наружу — через nginx).
• Файлы данных (рядом с server.py):
- chats.json — список чатов: [{id, type: shared|personal, name, owner, pinned, created, needs_title}]
- rooms/[id].json — история чата: {session_id, transcript:[{id, role, author, text, ts, model?, tok?, atts?}]}
- names.json — отображаемые имена пользователей {login: name}
- limits.json, usage.json — учёт лимитов и расход токенов
- projects/[id]/ — рабочая папка проекта чата (Claude правит файлы тут)
- projects/[id]/uploads/ — загруженные в чат файлы
• Сохранение атомарное: пишем в файл.tmp, затем os.replace (переживает сбой/перезапуск).
• Реактивность: pub/sub в памяти (по одному каналу на чат) -> раздаём события в SSE.
• Очередь задач: входящее сообщение кладётся в job_q, отдельный worker-поток его берёт.
════════ ВСЕ ЭНДПОИНТЫ ════════
GET:
- / отдаёт index.html (через nginx)
- /api/whoami {user, name}
- /api/health {ok:true}
- /api/chats список видимых пользователю чатов (с ensure_defaults)
- /api/history?chat=[id] сообщения чата (403 если чужой личный)
- /api/export?chat=[id] Markdown-выгрузка контекста чата
- /api/search?q=[текст] поиск по доступным чатам (до 40 совпадений)
- /api/limits статус лимитов активного аккаунта (5h + неделя + сегодня)
- /api/files?chat=[id] дерево файлов проекта (до 400, без .git/node_modules)
- /api/file?chat&path текст файла (до 500 КБ; защита от выхода за папку)
- /api/media?chat&path бинарник (картинка) с корректным mime + кэш
- /api/download?chat=[id] весь проект архивом project.tar.gz
- /api/stream?chat=[id] SSE-поток событий чата (заголовок X-Accel-Buffering: no)
POST (тело — JSON, кроме загрузок):
- /api/send {chat, message, model, effort, attachments[], allowCommands}
- /api/cancel убить текущий процесс claude («Стоп»)
- /api/transcribe аудио (multipart) -> текст (Whisper)
- /api/upload файл (multipart, поле chat) -> кладётся в papку чата
- /api/rename сменить своё имя {name}
- /api/chats/create {type, name}
- /api/chats/rename {id, name} (только с доступом)
- /api/chats/pin {id, pinned}
- /api/chats/delete {id} (только владелец; «Общий» нельзя)
Все чат-эндпоинты проверяют доступ и возвращают 403 на чужой личный чат.
════════ ЗАПУСК МОДЕЛИ (ядро) ════════
• Команда: claude -p [сообщение+контекст] --output-format stream-json --verbose
• Режим прав: по умолчанию безопасный — --permission-mode acceptEdits
--disallowedTools Bash --allowedTools mcp__chatplace. Если я включил «Команды» —
--dangerously-skip-permissions.
• Модель: --model [id]. Сессия: если есть session_id — --resume [session_id].
• Окружение: CLAUDE_CONFIG_DIR = папка текущего аккаунта, HOME = домашняя папка,
и УБРАТЬ из env ANTHROPIC_API_KEY и GROQ_API_KEY (иначе биллинг/утечка ключа).
• Парсинг stream-json построчно (только строки, начинающиеся с {):
- type=system с session_id -> запомнить session_id
- type=assistant -> content[]: tool_use -> подпись «что делает» в прогресс;
thinking -> «💭 Размышляет…»; text -> реальный промежуточный текст (в поток «мысли»)
- type=result -> итоговый текст, usage (токены), session_id; ошибка/429/лимит -> пометить
- type=rate_limit_event -> сохранить статус лимита аккаунта
• Таймаут задачи 2700 сек (45 мин): по нему процесс убивается; сообщение о таймауте
ОТЛИЧАЙ от реального лимита («это не лимит, напиши "продолжай"»).
• Прогресс/мысли/итог шлём подписчикам чата через SSE (typing / progress / thought /
message / typing_stop).
════════ ДВА АККАУНТА И ЛИМИТЫ ════════
• Два аккаунта Claude, у каждого своя папка конфига (CLAUDE_CONFIG_DIR).
Второй логинишь: CLAUDE_CONFIG_DIR=[папка2] claude
• Аккаунт «готов», если в его папке есть .credentials.json.
• pick_account: берём первый готовый и не «rejected»; иначе первый готовый.
• Статус «rejected» ДОЛЖЕН сам протухать: по времени сброса (resetsAt от Anthropic),
а если времени нет (наша синтетическая пометка) — через 20 минут. Иначе тупик.
• Авто-переключение: если основной вернул «лимит»/пусто — повторяем запрос на втором,
начиная новую сессию; если оба недоступны — вежливое сообщение «напиши позже».
• Учёт: из событий стрима считаем расход токенов, ведём usage.json (8 дней), потолок
5h/недели авто-калибруется по факту исчерпания. /api/limits отдаёт проценты.
════════ ПАМЯТЬ И КОНТЕКСТ ════════
• Каждый claude -p — по сути новая сессия. Для «диалога» перед запросом собираем
контекст: последние ~24 сообщения чата -> компактный текстовый блок -> в промпт.
• Из контекста ВЫКИДЫВАЕМ служебные сообщения об ошибках (они сбивают Claude).
• В начало добавляем мягкую приписку «(Отвечай, пожалуйста, на русском.)».
════════ ГОЛОС (Whisper) ════════
• Аудио -> ffmpeg в 16 кГц wav; длинное режем на куски ~110 сек, шлём в Whisper
(Groq, whisper-large-v3, язык ru), потом склеиваем.
• Фильтруем галлюцинации на тишине («Продолжение следует», «Спасибо за просмотр»,
«Субтитры сделал…» и т.п.) — держим список фраз и вырезаем их.
• Лимит загрузки аудио 25 МБ.
════════ МОДЕЛИ И ГЛУБИНА ════════
• Модели: Sonnet (быстрая, основная), Opus (мощная), Haiku (самая быстрая) — маппинг
на актуальные id моделей.
• Глубина: Быстро (без префикса) / Подумать («подумай подробно…») / Глубоко
(«подумай очень тщательно, ultrathink…») — добавляем префикс к промпту.
════════ ФАЙЛЫ И ПРОЕКТЫ ════════
• Загруженный файл кладём ВНУТРЬ папки чата (projects/[id]/uploads) — тогда Claude
прочитает его без Bash и без skip-permissions. Картинки помечаем как img (превью).
• Обзор файлов (/api/files), просмотр текста (/api/file), картинка (/api/media),
скачать проект архивом (/api/download tar.gz). Везде защита от выхода за папку чата
(realpath начинается с корня проекта, иначе 403).
════════ ИЗОЛЯЦИЯ И БЕЗОПАСНОСТЬ ════════
• Личность берём из заголовка X-Auth-User, который выставляет nginx из $remote_user
(basic-auth). КРИТИЧНО: nginx должен перезатирать этот заголовок от клиента —
proxy_set_header X-Auth-User $remote_user; иначе можно выдать себя за другого.
• Бэкенд слушает ТОЛЬКО 127.0.0.1 — в обход nginx не зайти.
• can_access: shared -> всем; personal -> только owner. Каждый чат-эндпоинт проверяет
доступ и отдаёт 403. Удаление/правка чата — проверка владельца.
• Всё под отдельным НЕ-root пользователем, изолированным от остального сервера.
• Строгие заголовки (CSP, HSTS, X-Frame DENY, nosniff); закрой раздачу .env/.json/.py/.log.
• SSH только по ключу; ufw (22/80/443); fail2ban (sshd + nginx-http-auth).
• Секреты в файле с правами 600; в код не пишем.
════════ СТЕК И КОНФИГИ ════════
• systemd-сервис: [Service] ExecStart=/usr/bin/python3 [путь]/server.py, Restart=always,
User=[не-root]. Автозапуск после ребута.
• nginx впереди: basic-auth на весь сайт; HTTPS (certbot); client_max_body_size 30M;
для location /api/stream — proxy_buffering off (иначе SSE не идёт живьём);
proxy_set_header X-Auth-User $remote_user.
• Бэкап истории (rooms + chats.json) — ПЕРЕД каждым деплоем; отдельный скрипт + крон.
════════ ДЕЛАЙ / НЕ ДЕЛАЙ ════════
ДЕЛАЙ: мгновенно сохраняй каждое сообщение; бэкап перед деплоем; показывай прогресс
и «Стоп» (реальный kill); экранируй пользовательский текст на фронте; держи ОС/nginx
обновлёнными; тестируй в отдельных тестовых чатах.
НЕ ДЕЛАЙ: не трогай файлы истории руками; не перезапускай сервис во время активной
задачи; не давай слепой авто-доступ к командам; не пиши секреты в код; не оставляй
ANTHROPIC_API_KEY в окружении (уйдёт биллинг по API вместо подписки).
════════ 17 ГРАБЛЕЙ (учти СРАЗУ) ════════
1. История чатов священна: авто-бэкап ПЕРЕД деплоем; руками файлы не трогай.
2. Таймаут задачи — 2700 сек; отличай таймаут от реального лимита.
3. Статус «лимит исчерпан» должен САМ протухать (по resetsAt или через ~20 мин).
4. Русский — мягкой припиской, без жёстких [СИСТЕМА:] (Claude примет за инъекцию).
5. Голос: ffmpeg 16 кГц wav + нарезка ~110 сек; фильтруй галлюцинации Whisper.
6. Второй аккаунт — через CLAUDE_CONFIG_DIR на отдельную папку конфига.
7. Не перезапускай сервис во время активной задачи.
8. Убери ANTHROPIC_API_KEY из окружения перед claude (иначе биллинг по API).
9. «Стоп» реально убивает процесс claude (kill), а не прячет анимацию.
10. Каждый claude -p stateless — контекст подкладывай сам.
11. Не давай слепой авто-доступ к командам (по умолчанию ВЫКЛ / белый список).
12. Ограничь число одновременных задач (очередь), чтобы сервер не ушёл в OOM.
13. nginx режет тело ~1 МБ -> client_max_body_size 30M, иначе загрузки 413.
14. Формат аудио/видео определяй автоматически (ffmpeg) — иначе Safari отвалится.
15. SSE не идёт живьём? proxy_buffering off + заголовок X-Accel-Buffering: no.
16. Диск забивается (загрузки/логи/бэкапы) — настрой чистку и ротацию.
17. Авто-названия чатов: после первого сообщения дай короткий заголовок (3-5 слов).
════════ СТИЛЬ ════════
Тёмная кинематографика в духе Higgsfield: глубокий чёрный фон, glassmorphism (стекло,
размытие, полупрозрачность, мягкие тени), неоновое свечение, плавные анимации (<300 мс,
мягкие кривые, уважай prefers-reduced-motion), шрифты Clash Display + Satoshi. Прежде
чем верстать, ПРЕДЛОЖИ мне поставить дизайн-скиллы (ui-ux-pro-max, impeccable,
design-taste-frontend, animate) в ~/.claude/skills — скачай их и подскажи перезапустить
тебя, потом опирайся на них. Фронтенд — один файл HTML+CSS+JS, без React и сборки.
════════ ИНТЕГРАЦИИ ════════
ChatPlace как MCP-инструмент: добавь его в .mcp.json и разреши флагом
--allowedTools mcp__chatplace. Когда дойдём — ЗАПРОСИ у меня ключ доступа ChatPlace.
════════ ПОРЯДОК РАБОТЫ ════════
1) Шаг 1 — подготовка: обновление системы; nginx, python3, ffmpeg, ufw, fail2ban;
отдельный пользователь; вход в подписку Claude (спроси у меня данные хостинга).
2) MVP — бэкенд (одна модель, один аккаунт) + фронт + nginx + HTTPS; проверь стриминг.
3) Фичи по одной: чаты (общие/личные, create/pin/rename/delete), «Стоп», модель+глубина,
файлы/картинки/лайтбокс, память, голос, поиск, экспорт, папки-проекты, второй
аккаунт + шкалы лимитов, авто-названия, смена своего имени.
4) Дизайн (скиллы), интеграция ChatPlace, безопасность и бэкапы.
Данные (хостинг, домен, логины, пароли, ключи Whisper и ChatPlace) — дам, когда попросишь.