Демонстрация · Nuxt 4 · AI Elements Vue

Интерфейс ИИ-агента, собранный из всех компонентов набора

AI.UI показывает, как выглядит и ведёт себя современный чат с ИИ-агентом: стриминг ответа, рассуждение, инструменты, подтверждения, код, голос и граф процесса. Ответы эмулирует сервер Nuxt — боевой LLM подключается одной настройкой.

Схема интерфейса AI.UI

Сценарии

S1Базовый диалог
S2Исследование: рассуждение и источники
S3Агент: план, задачи, инструменты, подтверждение
S4Генерация кода и артефактов
S5Запуск, тесты и отладка
S6Голос и медиа
S7Ветвление и правки
S8Граф агентного процесса

Что внутри

48 групп компонентов

Все компоненты AI Elements Vue задействованы в восьми сценариях — от базового диалога до графа агентного процесса.

Эмуляция на сервере Nuxt

Мок-модель реализует спецификацию провайдера AI SDK: тот же streamText, инструменты и approval-flow, что и у реального LLM.

Быстрая замена на боевой ИИ

NUXT_AI_PROVIDER=deepseek — и тот же интерфейс работает с DeepSeek V4. Дополнительно описаны варианты: pi, прямой REST, Mastra.

Темы и 43 цветовые схемы

Светлая и тёмная темы без мигания при загрузке и палитры tweakcn — механизм перенесён из проекта VP, только Tailwind CSS.

Гайд по сценариям

Для каждого сценария описано, когда и какой элемент набора применять, плюс матрица покрытия 48/48.

Русский и английский

Интерфейс, гайд и тексты сценариев доступны на двух языках, переключатель — в шапке.

Попробуйте сценарии

Выберите сценарий и посмотрите, как компоненты набора работают вместе на живом стриме.

Перейти в ИИ-UI
  • Стриминг и рассуждение
  • Инструменты и подтверждения
  • Код, тесты, коммиты
  • Голос и медиа
  • Граф процесса

Вопросы и ответы