Красивый веб-чат поверх настоящего 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 дней доступа ко всем инструментам.
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. Работай итеративно: показывай план и команды ПЕРЕД
запуском, жди моего «ок» на всё необратимое, тестируй в отдельных тестовых чатах,
реальные данные не трогай. Пиши по-русски.
════════ ЧТО СТРОИМ ════════
Сайт-чат на моём домене, вход по логину и паролю (nginx basic-auth). Внутри —
настоящий Claude Code (headless), который правит файлы в папках-проектах.
• Общие чаты (видят все) и личные (только владелец) — строгая изоляция доступа.
• Живой стриминг ответа (SSE), индикатор «размышления», кнопка «Стоп».
• Загрузка файлов и картинок с превью; голосовой ввод (Whisper).
• Память: перед каждым запросом подкладывай последние N сообщений чата в контекст.
• Папки-проекты: у каждого чата своя рабочая директория; обзор и скачивание файлов.
• Двойной лимит: два аккаунта Claude, авто-переключение при исчерпании.
• Авто-названия чатов; экспорт истории.
════════ АРХИТЕКТУРА ════════
• Бэкенд (Python, стандартная библиотека, без Flask/Django) слушает 127.0.0.1:8200.
• Эндпоинты примерно так:
- GET / — отдаёт index.html
- POST /api/send — {chat_id, text, model, attachments}
- GET /api/stream — SSE-поток событий (text / thought / done / error)
- POST /api/cancel — убивает текущий процесс claude (кнопка «Стоп»)
- POST /api/voice — аудио -> Whisper -> текст
- GET /api/media — вложение из папки чата (строго в пределах webroot чата)
- GET /api/files, /api/download — обзор и скачивание файлов проекта
• Данные: каждый чат — файл rooms/[id].json со списком сообщений; список чатов —
chats.json; проект чата — папка projects/[id]/.
• Запуск модели: claude -p «текст + контекст» --output-format stream-json --verbose
Читаешь stream-json построчно, парсишь события и шлёшь их в SSE по мере прихода.
• Сессии: если у чата есть session_id — добавляй --resume [session_id]; всё равно
подкладывай последние N сообщений как контекст (см. память).
════════ СТЕК И КОНФИГИ ════════
• systemd-сервис: [Service] ExecStart=/usr/bin/python3 /home/[user]/chat/server.py,
Restart=always, User=[не-root]. Автозапуск после ребута.
• nginx впереди: basic-auth на весь сайт; HTTPS (certbot); client_max_body_size 30M;
для location /api/stream — proxy_buffering off (иначе SSE не идёт живьём).
• Firewall (ufw): только 22 / 80 / 443. fail2ban (jail sshd + nginx-http-auth).
• Секреты (ключ Whisper и т.п.) — в файле с правами 600, читает только сервис.
════════ ДВА АККАУНТА (двойной лимит) ════════
• Каждый аккаунт — своя папка конфига. Второй логинишь так:
CLAUDE_CONFIG_DIR=/home/[user]/.claude-2 claude
• В бэкенде держи список аккаунтов. Перед запуском ставь env CLAUDE_CONFIG_DIR на
папку текущего. Поймал «лимит исчерпан» — помечай аккаунт занятым и повтори на
следующем. Статус занятости САМ протухает (см. грабли п.3).
════════ ПАМЯТЬ ════════
Каждый вызов claude -p, по сути, начинается с чистого листа. Чтобы был «диалог»,
собирай контекст: последние N (напр. 24) сообщений чата в компактный вид и добавляй
к промпту. Плюс можно вести отдельный файл-память проекта.
════════ ГОЛОС (Whisper) ════════
Аудио из браузера -> ffmpeg в 16 кГц моно wav -> нарезка на куски ~110 сек ->
каждый в Whisper -> склейка. Фильтруй галлюцинации на тишине («Продолжение
следует…», «Спасибо за просмотр» и т.п.).
════════ ДЕЛАЙ / НЕ ДЕЛАЙ ════════
ДЕЛАЙ:
+ Мгновенно сохраняй каждое сообщение на диск (переживёт перезапуск).
+ Бэкап истории ПЕРЕД каждым деплоем; тестируй только в отдельных тестовых чатах.
+ Показывай прогресс «размышления»; «Стоп» = реальный kill процесса.
+ Экранируй пользовательский текст на фронте (никакого сырого innerHTML).
+ Держи ОС и nginx обновлёнными.
НЕ ДЕЛАЙ:
- Не трогай файлы истории руками (ни rm, ни sed, ни перезапись).
- Не перезапускай сервис во время активной задачи пользователя.
- Не давай Claude слепой авто-доступ к командам (по умолчанию ВЫКЛ / белый список).
- Не пиши секреты и пароли в код — это делаю Я.
- Не оставляй ANTHROPIC_API_KEY в окружении (уйдёт биллинг по API, а не по подписке).
════════ 17 ГРАБЛЕЙ (учти СРАЗУ) ════════
1. История чатов священна: авто-бэкап ПЕРЕД деплоем; руками файлы не трогай.
2. Таймаут задачи — 2700 сек (45 мин); отличай таймаут от реального лимита.
3. Статус «лимит исчерпан» должен САМ протухать (по времени сброса или ~20 мин).
4. Русский — мягкой припиской «(Отвечай, пожалуйста, на русском.)», без [СИСТЕМА:].
5. Голос: ffmpeg 16 кГц wav + нарезка ~110 сек; фильтруй галлюцинации на тишине.
6. Второй аккаунт — через CLAUDE_CONFIG_DIR на отдельную папку конфига.
7. Не перезапускай сервис во время активной задачи.
8. Вычисти окружение перед claude: убери ANTHROPIC_API_KEY и посторонние ключи.
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 на стрим-локейшене.
16. Диск забивается (загрузки/логи/бэкапы) — настрой чистку и ротацию.
17. Авто-названия чатов: после первого сообщения проси короткий заголовок (3-5 слов).
════════ БЕЗОПАСНОСТЬ (чек-лист) ════════
• Basic-auth на весь сайт; отдельный НЕ-root пользователь, изолированный от прода.
• Строгие заголовки: CSP, HSTS, X-Frame DENY, nosniff; закрой раздачу .env/.json/.py/.log.
• Только нужные методы; без листинга каталогов; dotfiles закрыты.
• SSH только по ключу; ufw; fail2ban; регулярные бэкапы и чистка диска.
════════ СТИЛЬ ════════
Тёмная кинематографика в духе Higgsfield: глубокий чёрный, glassmorphism (стекло,
размытие, полупрозрачность, мягкие тени), неоновое свечение, плавные анимации
(<300 мс, мягкие кривые, уважай prefers-reduced-motion). Прежде чем верстать,
ПРЕДЛОЖИ поставить дизайн-скиллы (ui-ux-pro-max, impeccable, design-taste-frontend,
animate) в ~/.claude/skills и опирайся на них.
════════ ИНТЕГРАЦИИ ════════
Подключи ChatPlace как MCP-инструмент: добавь в .mcp.json и разреши
--allowedTools mcp__chatplace.
════════ ПОРЯДОК РАБОТЫ ════════
1) Шаг 1 — подготовка: обновление системы; nginx, python3, ffmpeg, ufw, fail2ban;
отдельный пользователь; вход в подписку Claude.
2) MVP — бэкенд (одна модель, один аккаунт) + фронт + nginx + HTTPS; проверь стриминг.
3) Фишки по одной: чаты (общие/личные), «Стоп», файлы/картинки, память, голос,
папки-проекты, второй аккаунт, авто-названия.
4) Безопасность и бэкапы. Домен, логины, пароли, ключи и данные партнёрок дам,
когда попросишь.