Руководство по Full-Stack режиму

Создавайте веб-приложения с ИИ-редактированием, терминалом и превью.

Что такое режим Full-Stack?

Режим Full-Stack превращает чат в полноценную среду разработки. ИИ пишет, редактирует и выполняет код, а вы видите результаты в интегрированной IDE с проводником, терминалом и превью.

  • ИИ-операции с файлами (создание, редактирование, удаление)
  • Интегрированный терминал с выполнением команд
  • Живое превью с технологией WebContainer
  • Поддержка многофайловых проектов (React, Next.js, Vue, HTML/CSS/JS)
  • Синхронизация кода между ИИ и IDE в реальном времени

Ключевые особенности

Режим Full-Stack предоставляет полноценный опыт разработки:

🔧 ИИ-инструменты

  • write_file - Создание новых файлов или перезапись существующих
  • edit_content - Точное редактирование с поиском и заменой
  • read_file - Чтение содержимого файлов для контекста

🖥️ Интегрированная IDE

  • Редактор Monaco - Редактирование как в VS Code с подсветкой синтаксиса
  • Терминал - Полноценный bash терминал с историей команд
  • Живое превью - Смотрите приложение в реальном времени
  • Проводник файлов - Навигация и управление файлами проекта

💡 Как это работает

Режим Full-Stack использует WebContainers для запуска Node.js прямо в браузере. ИИ пишет код в виртуальную файловую систему, и вы видите изменения мгновенно в превью.

Как использовать режим Full-Stack

1. Включите режим Full-Stack

Нажмите переключатель Full-Stack в области ввода чата для активации режима.

2. Опишите ваш проект

Расскажите ИИ что вы хотите создать. Будьте конкретны о функциях и технологиях.

3. Наблюдайте за работой ИИ

ИИ создаст файлы, установит зависимости и настроит структуру проекта.

4. Итерируйте и улучшайте

Запрашивайте изменения, добавляйте функции или исправляйте баги через обычный диалог.

Поддерживаемые шаблоны

Режим Full-Stack поддерживает различные шаблоны проектов:

⚛️ Next.js

Полная настройка Next.js 15 с App Router, TypeScript и Tailwind CSS

⚡ Vite + React

Быстрая разработка с Vite + React и горячей заменой модулей

🌐 HTML/CSS/JS

Простой HTML/CSS/JavaScript для быстрых прототипов

📦 Node.js

Бэкенд Node.js с Express или другими фреймворками

Советы и лучшие практики

✅ Best Practices

  • Будьте конкретны в требованиях и предпочитаемых технологиях
  • Дайте ИИ завершить одну задачу перед запросом следующей
  • Используйте терминал для запуска команд при необходимости
  • Проверяйте превью для просмотра изменений в реальном времени
  • Запрашивайте постепенные изменения вместо полных переписываний

⚠️ Limitations

  • WebContainers работают в браузере - некоторые API Node.js могут не работать
  • Большие проекты могут дольше синхронизироваться
  • Внешние подключения к БД требуют дополнительной настройки
  • Применяются ограничения на размер файлов для виртуальной ФС

Начало работы

Готовы создать первый проект? Попробуйте один из этих промптов:

"Создай лендинг Next.js с hero-секцией и таблицей цен"
"Создай React todo приложение с сохранением в localStorage"
"Создай дашборд с графиками на Recharts"
"Создай простой REST API на Express"

ИИ автоматически создаст структуру проекта, установит зависимости и запустит dev сервер!