Рецепт - мини-приложение с пользовательским интерфейсом AI-чата
Краткий рецепт по добавлению пользовательского интерфейса AI-чата в редактор скриптов или мини-приложение.
Мини-приложение с собственным AI-чатом
| Поле | Значение |
|---|---|
| Сложность | Средняя или высокая |
| Пример | Редактор скриптов или mini-app в стиле EyePad со встроенным AI-чатом. |
| Итоговая цель | Добавить чат-панель, которая отвечает на вопросы, понимает контекст редактора и может вызывать разрешённые инструменты. |
| Основные технологии | AI runtime, AI chat UI, AI tools/plugins, Blazor |
Когда использовать
- Вы делаете mini-app или редактор и хотите встроить в него AI-чат.
- Чат должен понимать, какой скрипт, вкладку, ошибку или выделение сейчас видит пользователь.
- Чат может вызывать инструменты, например поиск по документации, диагностику или безопасные действия в редакторе.
Подключить чат к одной вкладке редактора
Это схема интеграции внутри уже работающего Blazor-хоста EyeAuras, а не самостоятельный запуск AI runtime. На вход нужны настроенный AiEngine, профиль модели с разрешением ключа, IAiSpeechToTextService для AiChatViewModel, static assets AI UI и владелец вкладки. Контекст редактора передаётся отдельно: текущий документ, выделение и диагностики не становятся видимыми модели автоматически.
Владелец создаёт сессию через AiEngine.CreateSession(context, options), затем new AiChatViewModel(session, speechToTextService) и передаёт модель как DataContext в AiChatComponent. В EyeAuras 20fd3d4 CreateSession выбирает первый настроенный профиль, если он существует; отсутствие профиля нужно показать до отправки запроса. Компонент использует CSS/JS из _content/EyeAuras.AI, поэтому одного экземпляра view model без настроенного UI-хоста недостаточно.
Перед отправкой обновите разрешённый контекст редактора. Инструменты добавляйте в plugin host сессии: чтение текста и диагностик, затем отдельные операции предложения и применения правок. Разрешения на изменение задаёт политика вызова и сам инструмент, а не свободный текст ответа модели. Поиск по документации подключается по необходимости; он не требуется для показа панели.
Ожидаемый результат — разговор и разрешённые инструменты относятся к выбранной вкладке. При её закрытии отменяют текущую работу, освобождают UI/view model и вызывают AiEngine.RemoveSession(session.SessionId), который удаляет и освобождает зарегистрированную сессию. Dispose компонента не следует считать удалением сессии из engine. Сетевые запросы, ключи и совместимость конкретного провайдера здесь не проверялись.
Как это обычно выглядит
- Разместите чат-панель рядом с редактором или в отдельном tool window.
- Собирайте AI-сессию из того контекста редактора, который пользователь реально видит.
- Подключайте инструменты постепенно: чтение выделенного текста, чтение диагностик, поиск по документации, а затем при необходимости предложение или применение правок.
- Перед любыми изменениями файлов, скриптов или состояния приложения запрашивайте подтверждение.
Что нужно решить заранее
- Этот чат привязан к одной вкладке редактора, одному workspace или ко всему mini-app?
- Какой контекст включается автоматически?
- Какие инструменты работают только на чтение?
- Для каких инструментов нужно явное подтверждение?
- Нужен ли ассистенту поиск по документации, или достаточно только локального контекста редактора?
Какие API посмотреть
AiEngineIAiChatSessionIAiChatSessionHandleAiSessionOptionsAiChatViewModelAiChatComponentAiKernelPluginIAiPluginHostAiFunctionInvocationPolicyAiDocsKnowledgeBasePluginIBm25KnowledgeBase
Чего избегать
- Не делайте поиск по документации обязательным для каждого AI-чата.
- Не создавайте инструменты, которые меняют файлы или данные приложения без понятных названий и явного механизма подтверждения.
- Не позволяйте ассистенту гадать о скрытых данных редактора.
- Не рассчитывайте, что в обычных helper/plugin-классах будут доступны globals, существующие только в script runtime.
- Не сохраняйте активные session id и временные данные запросов.
Смежные материалы
ml/ai-runtime.mdml/ai-kernel-plugins.mdscripting/runtime.mdwindows-subsystems/blazor-windows.md