Claude Code Interface 🤖

Коллекция веб-интерфейсов для взаимодействия с Claude API.

Автор: cherepokivan
Версия: 1.2.1
Дата: 2026-04-29

📦 Доступные версии

1. claude-interface.html - Базовая версия

Простой и чистый интерфейс для начала работы.

• ✨ Минималистичный дизайн
• 💬 Базовый чат
• ⚙️ Настройки API

2. claude-advanced.html - Продвинутая версия

Полнофункциональный интерфейс с дополнительными возможностями.

• 📝 Управление несколькими разговорами
• 💾 Сохранение истории
• 📊 Статистика использования
• 🎨 Боковая панель с разговорами
• 📋 Копирование сообщений
• 💾 Экспорт чатов

3. claude-dark.html - Темная тема

Интерфейс с темной темой для комфортной работы.

• 🌙 Темный дизайн
• 👁️ Удобно для глаз
• 💡 Подсветка кода
• 🎯 Быстрые предложения

4. claude-mobile.html - Мобильная версия

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

• 📱 Адаптивный дизайн
• 👆 Touch-friendly интерфейс
• 🍔 Боковое меню
• ⚡ Быстрая загрузка

5. claude-custom-settings.html - Кастомные настройки

Центр управления всеми параметрами подключения.

• 🔑 Настройка API токена
• 🌐 Кастомные endpoints (OmniRoute, прокси)
• 🤖 Выбор модели
• 🔌 Режим локального процесса
• 💾 Сохранение настроек в браузере

🚀 Быстрый старт

Вариант 1: Через локальный веб-сервер (рекомендуется)

1. Запустите веб-сервер:

   # Двойной клик на start-server.bat
   # Или в консоли:
   python -m http.server 8000

2. Откройте в браузере:

   http://localhost:8000/index.html
   

3. Настройте параметры:

   • Откройте http://localhost:8000/claude-custom-settings.html
   • Настройте API ключ и endpoint
   • Сохраните настройки

4. Выберите интерфейс и начните работу!

Вариант 2: Прямое открытие файлов

⚠️ Внимание: При открытии через file:// могут быть проблемы с CORS при использовании кастомных endpoints (OmniRoute, прокси). Используйте локальный веб-сервер.

1. Откройте index.html в браузере
2. Выберите нужный интерфейс
3. Настройте API ключ через кнопку ⚙️

🔑 Получение API ключа

Стандартный Anthropic API

1. Зарегистрируйтесь на https://console.anthropic.com/
2. Перейдите в раздел API Keys
3. Создайте новый ключ
4. Скопируйте и вставьте его в настройки интерфейса

Кастомные endpoints (OmniRoute, прокси)

1. Откройте claude-custom-settings.html
2. Включите нужные опции:
   • ✓ Использовать кастомный токен
   • ✓ Использовать кастомный endpoint
   • ✓ Использовать кастомное имя модели
3. Заполните поля:

   Token: ваш-токен-omniroute
   URL:   http://localhost:20128/v1/messages
   Model: kr/claude-sonnet-4.5
   

4. Сохраните настройки
5. Все интерфейсы автоматически будут использовать эти параметры

⚙️ Доступные модели

• Claude Sonnet 4.6 - Баланс скорости и качества (рекомендуется)
• Claude Opus 4.7 - Максимальная производительность
• Claude Haiku 4.5 - Быстрые ответы

💡 Возможности

• 💬 Чат с Claude в реальном времени
• 🎨 Современный и красивый дизайн
• 💾 Сохранение истории разговоров
• ⚙️ Настройка API ключа и параметров
• 🌐 Поддержка кастомных endpoints (OmniRoute, прокси)
• 🤖 Выбор модели (включая kr/claude-sonnet-4.5)
• 📱 Адаптивный дизайн для всех устройств
• 🌙 Поддержка форматирования кода
• 📋 Копирование ответов
• 💾 Экспорт чатов в текстовый файл
• 📊 Статистика использования
• 🔌 Режим подключения к локальному процессу
• 🎯 Визуальный индикатор активных настроек (⚙️ Custom Settings / 🔌 Local Process)

🛠️ Технические детали

• Работает полностью в браузере (без сервера)
• Использует Claude API напрямую
• Сохраняет данные в localStorage
• Поддержка markdown и подсветка кода
• Адаптивная верстка для мобильных устройств
• Поддержка кастомных API endpoints
• Автоматическое отключение streaming для совместимости
• Модульная архитектура с claude-custom-helper.js

📁 Структура проекта

Interface/
├── index.html                      # Главная страница с выбором интерфейса
├── claude-interface.html           # Базовый интерфейс
├── claude-advanced.html            # Продвинутый интерфейс
├── claude-dark.html                # Темная тема
├── claude-mobile.html              # Мобильная версия
├── claude-custom-settings.html     # Настройки API и endpoints
├── claude-custom-helper.js         # Библиотека для работы с настройками
├── start-server.bat                # Запуск локального веб-сервера
├── README.md                       # Документация
└── FIX_FAILED_TO_FETCH.md         # Руководство по устранению ошибок

🔒 Безопасность

⚠️ Важно: API ключ хранится в localStorage браузера.

• Не используйте на общедоступных компьютерах
• Регулярно обновляйте API ключи
• Не делитесь ключами с другими
• Очищайте localStorage после использования на чужих устройствах

📝 Примеры использования

// Все интерфейсы работают одинаково:
1. Откройте HTML файл
2. Настройте API ключ
3. Начните общение

🎯 Рекомендации

• Для десктопа: claude-advanced.html или claude-dark.html
• Для мобильных: claude-mobile.html
• Для начинающих: claude-interface.html

📄 Лицензия

Свободное использование для личных и коммерческих проектов.

👨‍💻 Автор

cherepokivan

Проект создан для удобной работы с Claude Code API через веб-интерфейс.

🙏 Благодарности

• Anthropic за Claude API
• Сообществу разработчиков за обратную связь
• Всем, кто использует и улучшает этот проект

📝 История версий

• v1.2.0 (2026-04-29) - Добавлена поддержка кастомных endpoints, режим локального процесса, исправлена ошибка "Failed to fetch"
• v1.1.0 - Добавлены кастомные настройки, интеграция с OmniRoute
• v1.0.0 - Первый релиз с 4 интерфейсами

---

Создано с ❤️ для удобной работы с Claude Code API 🚀

cherepokivan © 2026