RepoRadar OpenUI: фреймворк для создания генеративных пользовательских интерфейсов
OpenUI — это фреймворк для создания Генеративных пользовательских интерфейсов, который не привязан к конкретным технологиям. Он предлагает компактный, стриминг-ориентированный язык, позволяющий создавать интерфейсы для популярных фреймворков, таких как React, Vue, Svelte и Angular.
Основное преимущество OpenUI в том, что он использует на 67% меньше токенов по сравнению с JSON, что может быть полезно для оптимизации загрузки и обработки данных. Проект ориентирован на разработчиков, которым нужна гибкость в выборе технологий, и которые хотят использовать современные подходы к созданию интерфейсов. У OpenUI есть готовые компоненты для React и интерфейсы для чатов, что ускоряет разработку.
Запустить проект можно через документацию на сайте openui.com. Текущая версия проекта выглядит как бета, поэтому учти, что могут присутствовать баги и проблемы с совместимостью. Работает на любых платформах, поддерживающих указанные технологии.
OpenUI — это фреймворк для генеративного пользовательского интерфейса, который не привязан к конкретным библиотекам и строится на компактном языке для потоковой передачи данных. Он поддерживает популярные фреймворки, такие как React, Vue, Svelte и Angular, и предлагает встроенные библиотеки компонентов и готовые интерфейсы для чата. OpenUI Lang использует на 67% меньше токенов по сравнению с JSON.
Что такое OpenUI
В основе OpenUI лежит OpenUI Lang — компактный язык для создания структурированных пользовательских интерфейсов. Он позволяет не просто обрабатывать текстовые данные, а определять компоненты и генерировать промпты для этих компонентов, что позволяет создавать UI на основе потокового вывода модели.
Основные возможности проекта:
- OpenUI Lang — компактный язык для генерации UI, ориентированный на потоковый вывод.
- Встроенные библиотеки компонентов — готовые к использованию или расширению компоненты, такие как графики, формы и таблицы.
- Генерация промптов — автоматическое создание инструкций для модели на основе заданного набора компонентов.
- Потоковый рендерер — возможность отображать UI на лету, когда токены поступают от модели.
- Чат и интерфейсы приложений — одинаковая основа для создания ассистентов или других интерактивных интерфейсов.
Как начать
Самый быстрый способ начать работу с OpenUI:
npx @openuidev/cli@latest create --name genui-chat-app
cd genui-chat-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
npm run dev
Этот процесс создаёт приложение с поддержкой OpenUI Lang и встроенным UI, которое можно сразу запускать.
Как это работает
Основная идея заключается в том, чтобы компоненты определяли, что может генерировать модель. Процесс включает в себя:
- Определение или повторное использование библиотеки компонентов.
- Генерация системного промпта на основе этой библиотеки.
- Отправка этого промпта в модель.
- Получение выводов на основе OpenUI Lang в клиент.
- Постепенный рендеринг выходных данных с помощью рендерера.
Ты можешь попробовать это в Плейграунде, где можно сгенерировать UI в реальном времени, используя стандартную библиотеку компонентов.
Пакеты
OpenUI включает в себя множество пакетов для различных нужд:
@openuidev/lang-core— для парсинга и генерации промптов без зависимости от фреймворка.@openuidev/react-lang— для рендеринга в React.@openuidev/vue-lang,@openuidev/svelte-lang,@openuidev/angular-lang— для интеграции с соответствующими фреймворками.@openuidev/browser-bundle— предварительно собранный бандл для использования на клиенте.@openuidev/cli— для создания новых приложений и генерации промптов.
Документация и сообщество
Подробная документация доступна на официальном сайте. Если у тебя есть вопросы или идеи, можешь присоединиться к сообществу в Discord или открыть issue на GitHub для отчётов об ошибках или предложений по улучшению.
Открыть на GitHub: thesysdev/openui →
