Веб-чат
Полное руководство по веб-чату ZvenoAI — выбор модели, настройка параметров, вложения, веб-поиск и Web App режим. Начните без кода прямо в браузере.
Чат — это визуальный интерфейс для работы с любой из 200+ моделей без написания кода. Удобен для тестирования, прототипирования и ежедневного использования.
Интерфейс
Enter — отправить, Shift+Enter — перенос
Интерфейс чата состоит из трёх основных частей:
| Область | Описание |
|---|---|
| Панель истории | Все предыдущие чаты, разбитые по дате. Поиск по названию. Кнопка нового чата. |
| Область чата | Выбор модели, переписка, панель отправки с вложениями и инструментами. |
| Web App панель | Появляется при включении Web App режима. Код + живой превью бок о бок. |
Выбор модели
Кнопка выбора модели расположена вверху панели чата. Начните вводить название модели или вендора — список фильтруется в реальном времени. Выбранная модель сохраняется между сессиями.
Типы моделей по возможностям
Основной тип — общение, написание текстов, программирование, анализ данных. Подходит для большинства повседневных задач разработки и аналитики.
Понимают картинки, скриншоты, схемы, документы с изображениями. Прикрепите файл и задайте вопрос.
Создают изображения по текстовому описанию прямо в чате. Результат появляется как вложение в ответе.
Понимают голосовые сообщения и аудиофайлы, транскрибируют речь в текст.
Перед ответом показывают цепочку рассуждений. Лучше справляются со сложными логическими и математическими задачами.
Не расходуют баланс. Идеальны для экспериментов и черновиков. Могут быть медленнее или иметь ограниченные квоты.
Полный список с фильтрами по возможностям и ценам — Каталог моделей. Для большинства
задач достаточно anthropic/claude-sonnet-4.6 или openai/gpt-5.2.
Панель инструментов
Иконки слева от поля ввода расширяют возможности сообщения.
Прикрепить картинку
PDF, TXT, MD, JSON и др.
Записать аудио
Актуальные данные из сети
Создать приложение
Enter или кнопка
Клавиатурные сокращения
Вложения
| Тип | Форматы | Лимит | Примечание |
|---|---|---|---|
| Изображения | JPG, PNG, WebP, GIF | до 10 файлов | Требует модель с vision |
| Документы | PDF, TXT, MD, JSON | до 5 файлов | Модель читает содержимое |
| Аудио | MP3, WAV, OGG | 20 МБ на файл | Требует модель с аудио |
| Видео | MP4, WebM | 20 МБ на файл | Требует мультимодальную модель |
Перетащите файлы прямо в окно браузера — появится область для drop. Либо вставьте изображение из буфера обмена (Ctrl+V ). Если модель не поддерживает нужный тип файла, чат предложит переключиться на подходящую.
Веб-поиск
Включите иконку глобуса в панели ввода. Модель будет автоматически искать актуальную информацию перед ответом.
Подходит для:
- Актуальные цены, курсы, новости, документация
- Сравнение продуктов и технологий по последним данным
Не требуется для:
- Общих вопросов и написания кода
Web App режим
Специальный режим для создания HTML/CSS/JS приложений прямо в браузере. Включите иконку кода в поле ввода — справа откроется панель с редактором кода и живым превью. Опишите что хотите получить — модель напишет код, а превью обновится сразу.
Что можно создать
- Лендинг / сайт — Hero-секция, блок фич, тарифы, footer. Готово показать заказчику через 5 минут.
- Дашборд / отчёт — Графики, таблицы, карточки метрик — интерактивные, без бэкенда.
- Калькулятор / инструмент — ROI, ипотека, конвертер, подборщик — любые расчёты с красивым UI.
- Форма / опросник — Многошаговые формы, валидация, кастомный стиль. Данные — в буфер или webhook.
- Интерактивный прототип — Кликабельный макет UI перед разработкой. Быстрее Figma для простых сценариев.
- Слайды / презентация — HTML-слайдшоу с анимациями. Управление клавишами, полноэкранный режим.
Как пользоваться
Активируйте режим Нажмите иконку кода в панели ввода. Справа откроется панель с вкладками
«Код» и «Превью».
Опишите что нужно Пишите как дизайнеру: укажите цель, стиль, цвета, целевую аудиторию. Чем
точнее первое описание — тем меньше правок потребуется.
Итерируйте в чате Уточняйте правки сообщениями: «сделай кнопку крупнее», «добавь тёмную
тему», «замени шрифт на Inter». Каждый ответ — новая версия.
Проверьте в превью Переключитесь на вкладку «Превью» — это живой iframe с результатом. Можно
взаимодействовать: кликать, заполнять поля, тестировать анимации.
Скачайте или скопируйте Кнопка со стрелкой вниз скачивает ZIP-архив с файлами. Или
скопируйте код напрямую из редактора.
История версий
Каждый ответ модели создаёт новую версию приложения. Если правки пошли не туда — переключитесь на предыдущую версию в один клик и начните итерацию заново.
Ограничения
- Только HTML/CSS/JavaScript — без серверного кода и баз данных
- Формы не отправляют email напрямую — нужен сторонний сервис (Formspree, Make)
- Тяжёлые библиотеки (Three.js, D3) работают медленнее через CDN
- Для авторизации и хранения данных нужна полноценная разработка
Советы
- Начните с простого описания — детали уточняйте итерациями, не в одном запросе
- Для точного стиля укажите референс: «как на Linear», «минималистично, как Apple»
- Claude Sonnet и GPT-4o лучше всего справляются с UI-кодом
- Готовый результат можно залить на GitHub Pages, Vercel или Netlify за 2 минуты
Работа с сообщениями
Reasoning (цепочка рассуждений)
Модели вроде DeepSeek R1 и o3 показывают блок «Размышление» перед ответом.
Нажмите на него, чтобы развернуть и посмотреть, как модель рассуждала.
Статистика ответа
Под каждым ответом модели отображается количество токенов и время генерации.
Удобно для оценки стоимости и скорости конкретной модели.
Редактирование и переотправка
Наведите на своё сообщение — появятся кнопки копирования, редактирования и удаления.
Для ответа модели — кнопки копирования, регенерации и удаления.
История чатов
Все чаты сохраняются автоматически и видны в левой панели.
Группируются по дате: «Сегодня» и «Ранее». Поиск работает по заголовку чата.
Быстрые советы
- Тестируйте один и тот же запрос на разных моделях — результаты сильно различаются по качеству и стоимости.
- System Prompt — мощный инструмент. Опишите там роль и формат ответа, чтобы не повторять это в каждом сообщении.
- Для research-задач включайте веб-поиск. Для написания кода — отключайте: он только замедляет генерацию.
- Модели с пометкой
:freeне тратят баланс — используйте их для экспериментов и черновиков. - Web App режим подходит для прототипов лендингов, дашбордов, простых инструментов — прямо в браузере.