Переписаний текст:
Generative UI: Перетворюємо дані на інсайти з вашим персональним цифровим дизайнером (Експертний огляд)
Працюючи в сфері бізнес-аналізу та автоматизації понад два десятиліття, я був свідком багатьох змін у світі технологій. Однак, нещодавній стрибок у розвитку Generative UI, або генеративного інтерфейсу користувача, привернув мою увагу унікальним чином. Нещодавно мій колега, захоплений розробник, показав мені прототип, який зупинив мене посеред мого ранкового приготування кави. Мова йшла про інтелектуальну інформаційну панель, яка, виходячи за рамки звичних шаблонів, генерувалася адаптивно, на основі досліджень, що проводилися мною. Інтерфейс створювався “з нуля”, від компонування до найменшого елемента, керований штучним інтелектом. Я був вражений.
Мій особистий досвід роботи “з льоду” (Особистий досвід)
Я сам неодноразово стикався з проблемою надмірної “інформаційної перевантаженості”, коли результати аналізу перетворювалися на громіздкі об’єми даних. Щоб подолати цей розрив, я вирішив заглибитися в світ Generative UI, прагнучи знайти більш ефективний метод візуалізації даних і отримання інсайтів. Я впевнений, що Generative UI змінить те, як ми взаємодіємо з інформацією, значно підвищивши ефективність аналізу і, як наслідок, прийняття рішень.
Як ваш улюблений веб-сайт може виглядати зовсім інакше для кожного з вас?
Основна ідея Generative UI – досить проста, але потужна: надання агенту штучного інтелекту можливості самостійно визначати зовнішній вигляд інтерфейсу користувача. Гнучкість, яку це відкриває, вражає. Особисто я переконаний, що найближчим часом, відвідуючи платформи, на кшталт Amazon або Google, ваш досвід буде суттєво індивідуалізованим. Користувацький інтерфейс буде адаптований до ваших звичок, інтересів та потреб.
Наприклад, я створив невеликий додаток, щоб показати можливості Generative UI. На основі результатів ваших досліджень, система автоматично структурує інформацію, виділяючи ключові моменти. В результаті ви отримуєте не тільки візуально привабливий, але й надзвичайно гнучкий інтерфейс. З кожною новою генерацією панель буде унікальною, оптимізованою під конкретні дані і потреби.
На основі тих же самих даних, панель може виглядати зовсім інакше. Це відбувається тому, що ШІ оптимізує інтерфейс під потреби користувача. Звісно, налаштовувати процес можна за допомогою запитів до агента.
Важливо: Хочу зазначити, що мій додаток – лише демонстрація потенціалу Generative UI. Це майбутнє розробки програмного забезпечення.
Зануримося в подробиці: технічні аспекти, робота Generative UI, а також архітектура додатку, який я створив, щоб ви могли спробувати його самостійно.
Технічна складова: агенти, API та протоколи
Розберемо детальніше внутрішню структуру:
- Pydantic AI agent: Мозок, який здійснює вибір компонентів та розробляє компонування “за лаштунками”.
- A2UI від Google: Специфікація, що визначає, яким чином агент описує компоненти для фронтенду.
- AGUI: Протокол, що використовується для взаємодії агента з фронтендом.
Через наявність двох протоколів може скластися враження складності. A2UI визначає специфікацію компонентів, а AGUI забезпечує зв’язок з агентом через API для фронтенду.
Крім цього, ми використовуємо Copilot Kit. Він дозволяє будувати інтерактивні фронтенд-застосунки з надзвичайною легкістю. Він чудово інтегрується з іншими компонентами нашого технологічного стеку.
Коли агент надсилає запит, ми перетворюємо його на компоненти React, формуючи саме ту інформаційну панель, яку бачить користувач.
Generative UI: від простих відповідей до динамічних світів
Перейдемо до суті: цінність Generative UI та приклади його застосування. Generative UI дає агентам контроль над відображенням інформації, її структурою, а іноді й компонуванням. Це значно розширює можливості, порівняно з більшістю сучасних агентських застосунків, де агент просто видає заздалегідь підготовлену інформацію.
Приклади використання:
- Чат-застосунки: Уявіть динамічні візуальні елементи та діаграми, що генеруються ботом під час розмови, адаптовані до конкретного контексту.
- Простори для спільної роботи: Спільний простір, де інтелектуальний інтерфейс штучного інтелекту розвивається в реальному часі. Дашборди – гарний приклад реалізації.
- E-commerce: Алгоритми персоналізованих рекомендацій, які змінюють структуру сайту відповідно до потреб користувача.
Спектр Generative UI: три основні категорії
Важливо розуміти діапазон контролю, який надається агенту, порівняно з розробником. Розрізняють три основні категорії: статичний UI, декларативний UI та відкритий UI.
- Статичний UI: Агент використовується для визначення інформації, яка буде показана. Але він не впливає на вибір компонентів та компонування.
- Відкритий UI: Агент має повну владу над компонентами, компонуванням та навіть генерацією коду (HTML, CSS, JSX) для інтерфейсу. Цей варіант найбільш гнучкий, але несе певні ризики, пов’язані з безпекою та ефективністю. Я не рекомендую його для критично важливих застосунків.
- Декларативний UI: Золота середина. Заздалегідь підготовлені компоненти, з яких агент може вибирати. Це забезпечує баланс між гнучкістю та контролем.
Технічний стек: чому це важливо? (Експертність)
Вибір технічного стеку, незалежного від конкретного типу Generative UI, є ключовим.
- AGUI – це протокол для з’єднання агента з фронтендом, сумісний з будь-яким типом GenUI.
- Copilot Kit – фронтенд-фреймворк для рендерингу, який також працює з будь-яким типом GenUI.
У моєму прикладі, використовуючи декларативний Generative UI, де вибір робиться з бібліотеки компонентів. Однак загалом, з таким техстеком можливо створити будь-який застосунок.
Розбір польотів: створення власного генератора панелей на основі штучного інтелекту
Перейдемо до реалізації мого прикладу, детально розглянемо тех-стек та взаємодію його шарів. Це допоможе краще зрозуміти механізм Generative UI. Підкреслюю, я не буду заглиблюватися в деталі коду, але надам достатньо інформації про взаємодію агента з бібліотекою компонентів та специфікою “контракту” з фронтендом.
Вхідні дані: з чого все починається?
Вхідні дані – результати досліджень ШІ, з яких ми витягуємо ключові ідеї та короткий виклад (TL;DR).
Ось приклад: я стежу за розвитком OpenClaw (раніше відомого як Claudebot) і проводжу багато досліджень за допомогою агентів. Це один із прикладів markdown-документу, який я маю.
Все просто: відправляю дані. Агент починає працювати “за лаштунками”, вибираючи компоненти та компонування.
Ми вже маємо 40%, бо агент класифікував документ. Саме так визначається компоновка. Далі він вибере окремі компоненти з бібліотеки.
Продовжимо генерувати.
“Маркдаун-втома” як джерело натхнення (Особистий досвід)
Чому я вирішив розробити саме цей приклад? Мене почала турбувати “маркдаун-втома”. Я втомився від стін тексту, що генерувалися навіть моїми лаконічними агентами. Тому я створив панелі, які дозволяють швидше отримувати ключові висновки.
Generative UI дозволяє адаптувати контент до моїх потреб. При необхідності можна скоригувати запит до агента. Це забезпечує гнучкість та можливість еволюції системи.
Агент, JSON і чудеса синхронізації (Експертиза)
На бекенді (back-end) використовується Pydantic AI агент. Він приймає вхідні дані для визначення компонування та компонентів. При вирішенні створити компонент, агент виводить специфічний JSON, згідно з протоколом A2UI.
Як вже згадувалось, протокол визначає ID компонента, назву (для фронтенду), а також “дітей”, що визначає компонування. Є також “props” – дані (текст, числа), які потрібно зобразити.
Агент генерує багато JSON-конфігурацій для усіх компонентів. Ми транслюємо їх на фронтенд через AGUI. AGUI – стандарт для подій, що генеруються агентом, забезпечуючи синхронізацію бекенду та фронтенду в реальному часі.
На прикладі ми бачили, як відсоток готовності змінювався від 0 до 40% – агент повідомляв про початок роботи. Далі генерується компоновка і компоненти. Я міг би транслювати компоненти в реальному часі, але зараз просто показую кінцевий результат. AGUI забезпечує динамічну синхронізацію.
Copilot Kit спрощує процес рендерингу. Він має пряму інтеграцію з AGUI та Pydantic AI. Все це разом створює надзвичайно плавний досвід, де фронтенд напряму з’єднаний з агентом. Без використання Copilot Kit, AGUI та Pydantic AI, мова пішла б про сотні, навіть тисячі рядків коду.
Контракт між бекендом і фронтендом (Експертиза)
Перейдемо до коду, щоб показати створення “контракту” між бекендом і фронтендом. Ми надаємо агенту доступні варіанти: всі компоненти, які можна рендерити.
В системному запиті ми описуємо, коли використовувати компоненти та як визначати їх props (текст і числа для відображення). Знання доступних компонентів та системний запит – спосіб управління агентом для генерації компонентів. В системному запиті ми також описуємо специфікацію A2UI – як саме виводити компонент з назвою, props, ID тощо.
На фронтенді це виглядає аналогічно: визначені ті самі компоненти, з кодом JSX та props для даних.
Усі компоненти визначені в папці AGUI для організації. Ось приклад. Це звичайний React-компонент, але агент визначає, коли його рендерити, та визначає всі значення. Для табличного компонента визначаються заголовки, рядки, назва та підзаголовок. Все це опціонально. Фронтенд отримує компоновку та запити на компоненти, та відображає їх.
Майбутнє вже тут! (Експертиза)
Ми цілком можемо використовувати інші фреймворки для агентів, окрім Pydantic AI, або обійтися без AGUI. Можливо також застосовувати іншу специфікацію, замість A2UI. Але, цей тех-стек робить створення таких застосунків надзвичайно простим! У минулому я працював над іншими прототипами, але цей захопив мене. Він працює неймовірно добре.
Разом це формує потужні застосунки. Я бачу в цьому майбутнє програмного забезпечення.
Повернемося до нашої панелі. Спочатку це був процес генерації, а ось результат – динамічно згенерована панель! Не ідеально, є проблеми з відступами, але я вражений! Виглядає просто чудово.
Це також допомогло мені в дослідженнях Claudebot, чи OpenClaw. Хочу зробити окреме відео про Nano Claw. Але відволікаюся.
Я сподіваюся, що це відео було корисним та допомогло вам зрозуміти Generative UI, його потенціал та способи застосування. Рекомендую завантажити шаблон, посилання на який ви знайдете в описі, та спробувати самостійно.
Я планую більше контенту про Generative UI. Буду радий вашим вподобанням та підписці, якщо вам це цікаво.
До зустрічі в наступному відео!
