Google + CopilotKit

Позвольте AI-агентам
безопасно создавать UI

A2UI — открытый декларативный UI-протокол, позволяющий AI-агентам безопасно отображать богатые интерактивные интерфейсы на разных платформах без выполнения произвольного кода.

v0.8
Текущая версия
Apache 2.0
Открытый код
4+
Фреймворки
a2ui-response.json
1
Безопасный декларативный
Потоковый рендеринг
Основные возможности

Четыре ключевые возможности

Создан для UI-взаимодействий в эпоху AI, решает задачу безопасного рендеринга через границы доверия

Безопасность прежде всего

Безопасность по дизайну

Использует декларативный формат данных, а не исполняемый код. Агенты могут использовать только предварительно одобренные компоненты, исключая риски UI-инъекций на архитектурном уровне.

Узнать больше

Дружественный к LLM

Формат для LLM

Плоская JSON-структура оптимизирована для токен-за-токеном генерации LLM. Модель списка смежности поддерживает эффективный парсинг и инкрементальные обновления.

Узнать больше

Независим от фреймворка

Фреймворк-агностик

Один и тот же A2UI-ответ может быть отрендерен на React, Angular, Flutter или нативных мобильных платформах с использованием нативных компонентов каждой платформы.

Узнать больше

Прогрессивный рендеринг

Прогрессивный рендеринг

Поддерживает потоковые обновления UI, пользователи видят построение интерфейса в реальном времени. Мгновенный отклик, естественный опыт.

Узнать больше
Как это работает

Как это работает

A2UI обеспечивает безопасную связь между AI-агентами и клиентами через декларативный протокол

STEP 01

Пользователь отправляет сообщение

Пользователь отправляет запрос AI-агенту, например, «Найти рестораны поблизости»

STEP 02

Агент генерирует A2UI

AI-агент генерирует A2UI-сообщение, описывающее UI (дерево компонентов в формате JSON)

STEP 03

Стриминг

Сообщение транслируется клиенту, поддерживая рендеринг во время генерации

STEP 04

Локальный рендеринг

Клиент рендерит UI с использованием нативных компонентов (React/Flutter/Angular)

STEP 05

Взаимодействие пользователя

Пользователь взаимодействует с UI, события отправляются обратно агенту

STEP 06

Обновление ответа

Агент отвечает новым A2UI-сообщением, UI обновляется динамически

Обзор архитектуры

Пользователь
Запрос
AI-агент(Gemini, GPT...)
A2UI JSON
Клиент(React, Flutter...)
Рендер
Нативный UI
Живое демо · Без установки

Попробуйте A2UI Composer

Создавайте и тестируйте интерфейсы A2UI прямо в браузере с визуальными инструментами,перетаскивайте компоненты, смотрите превью, экспортируйте JSON одним кликом

Открыть демо

На базе CopilotKit

Визуальный конструктор

Перетаскивайте компоненты для быстрого создания UI, WYSIWYG

Живой предпросмотр

Мгновенный рендеринг, отклик в миллисекундах

Экспорт JSON

Экспорт в стандартный формат A2UI одним кликом

Пример кода

Примеры кода

Один A2UI-ответ, нативный рендеринг на нескольких платформах

1{
2 "type": "surface",
3 "surface_id": "main_content",
4 "components": [
5 {
6 "id": "card_1",
7 "type": "card",
8 "props": {
9 "title": "Italian Restaurant",
10 "subtitle": "0.5 km away",
11 "image": "https://..."
12 },
13 "children": ["rating_1", "btn_1"]
14 },
15 {
16 "id": "rating_1",
17 "type": "rating",
18 "props": { "value": 4.5, "count": 128 }
19 },
20 {
21 "id": "btn_1",
22 "type": "button",
23 "props": {
24 "label": "View Details",
25 "action": "view_restaurant"
26 }
27 }
28 ]
29}

Поддерживаемые фреймворки и платформы

React
Angular
Flutter
Vue
iOS
Android
Для всех

Для каждой роли

Какой бы ни была ваша роль, A2UI поможет создавать лучшие AI-продукты

Разработчик

  • Понятный SDK и спецификации протокола
  • Не привязан к конкретному фреймворку
  • Поддержка кастомных компонентов
  • Нативная поддержка потокового вывода
  • Типобезопасность TypeScript
Смотреть документацию
Рекомендуется

Продакт-менеджер

  • Декларативная архитектура, безопасная и соответствующая требованиям
  • Определите один раз, рендерите везде
  • Потоковый рендеринг, мгновенный отклик
  • Поддержка Google, надёжность
  • Open source сообщество, постоянное развитие
  • Снижение барьеров разработки AI-продуктов
Изучить кейсы

Дизайнер

  • Используйте нативные компоненты, сохраняйте консистентность дизайна
  • Кроссплатформенный нативный опыт
  • AI генерирует контекстно-зависимый UI
  • Визуальный инструмент Composer
  • Поддержка кастомных стилей
Изучить гайд по дизайну