Open Intelligent UI — генеративные интерфейсы для приложений

Open Intelligent UI — открытый шаблон CopilotKit для продуктов, в которых ИИ может отвечать не только текстом. По запросу агента пользователь получает объяснение с пошаговой схемой, график, 3D-сцену, калькулятор, игру или карту и взаимодействует с результатом прямо в приложении.

Как работает Open Intelligent UI

Агент сам выбирает форму ответа

Короткий факт остаётся текстом, сравнение можно показать таблицей или графиком, а объяснение алгоритма — последовательностью наглядных шагов. В примерах проекта есть визуализация бинарного поиска, обхода графа и сортировки, управляемая 3D-модель на Three.js, калькуляторы, игры и симуляции. Интерфейс появляется по мере ответа агента, а готовую генерацию можно скачать отдельным HTML-файлом.

Новые элементы создаются во время диалога

Если для задачи нет готового компонента, агент формирует интерфейс на HTML, CSS и JavaScript. Код показывается в изолированном iframe и может использовать только библиотеки из разрешённого списка CDN. Интерактивные элементы могут передавать действия основному приложению через специальный мост, который настраивает разработчик.

Как встроить интерфейс в свой продукт

Своя дизайн-система и компоненты

Вместо отдельного универсального чата команда может подключить свои цвета, шрифты и библиотеку компонентов. Тогда созданные агентом экраны будут выглядеть частью продукта. Для задач, где важен строгий контроль, агент использует только подготовленные командой компоненты; для более свободных сценариев он может собирать новый интерфейс на лету.

Реальные данные и действия приложения

К шаблону можно подключить данные продукта и разрешённые операции: например, чтобы график строился по рабочим показателям, а форма отправляла выбранные параметры в приложение. Эти данные и действия не открываются агенту сами собой — разработчик определяет, что именно доступно, кому и при каких условиях.

Любой агент и разные каналы

Open Intelligent UI работает с агентами, подключёнными через открытый протокол AG-UI; это позволяет использовать разные модели и менять агентную платформу без переделки интерфейса. В качестве альтернативы демонстрационному LangChain Deep Agents авторы называют Mastra, Google ADK и Microsoft Agent Framework. Если выбранный агент пока не поддерживает AG-UI, сначала потребуется настроить совместимый адаптер.

Подход можно переносить в веб-продукт, мобильное приложение и Slack. При этом опубликованный репозиторий содержит готовый демонстрационный веб-клиент на Next.js; для мобильной версии и Slack подключаются соответствующие клиенты и каналы CopilotKit. Это шаблон для разработчиков, а не три уже собранных приложения.

Что понадобится для запуска

Примерная конфигурация

В репозитории есть Next.js-интерфейс, Python-агент на LangChain Deep Agents с FastAPI и необязательный отдельный MCP-сервер. В демонстрации OpenAI генерирует ответ, а Jev выбирает подходящий формат визуализации. Для запуска этой конфигурации нужны ключи OpenAI и TypeSafe; в другом варианте расходы определяются выбранными моделями и инфраструктурой.

Лицензия и окружение

Код опубликован по лицензии MIT. В инструкции указаны Node.js 22 или новее, pnpm 9 или новее, Python 3.12 и uv. Проект можно запустить локально, изменить под собственные компоненты и источники данных, а затем встроить в продукт. Для примера постоянно работающих цифровых сотрудников с компьютером и браузером также существует OpenDots — это другой сценарий CopilotKit.