Поделиться через

интеграция AG-UI с Agent Framework

AG-UI — это протокол, позволяющий создавать веб-приложения агента ИИ с расширенными функциями, такими как потоковая передача в режиме реального времени, управление состоянием и интерактивные компоненты пользовательского интерфейса. Интеграция agent Framework AG-UI обеспечивает простое подключение между агентами и веб-клиентами.

Что такое AG-UI?

AG-UI — это стандартизованный протокол для создания интерфейсов агента ИИ, которые предоставляют:

  • Размещение удаленных агентов: развертывание агентов ИИ в качестве веб-служб, доступных несколькими клиентами
  • Потоковая передача в реальном времени: потоковая передача ответов агента с использованием событий Server-Sent (SSE) для немедленной обратной связи
  • Стандартизованный обмен данными: согласованный формат сообщений для взаимодействия с надежным агентом
  • Управление сеансами: поддержание контекста беседы в нескольких запросах
  • Дополнительные функции: человеческое участие в процессе утверждения, синхронизация состояний и настраиваемая отрисовка пользовательского интерфейса

Когда следует использовать AG-UI

При необходимости рекомендуется использовать AG-UI:

  • Создание веб-приложений или мобильных приложений, взаимодействующих с агентами ИИ
  • Развертывание агентов в качестве служб, доступных несколькими одновременными пользователями
  • Передавайте ответы агента в режиме реального времени для немедленной обратной связи.
  • Реализация рабочих процессов утверждения, в которых пользователи подтверждают действия перед выполнением
  • Синхронизация состояния между клиентом и сервером для интерактивных возможностей
  • Создание кастомных компонентов UI на основе вызовов инструментов агента

Поддерживаемые возможности

Интеграция Agent Framework с AG-UI поддерживает все 7 функций протокола AG-UI:

  1. Агентический чат: простой потоковой чат с автоматическим вызовом средства
  2. Рендеринг серверного инструмента: инструменты, выполняемые на серверной части, результаты потоками передаются в клиент
  3. Человек в цикле: запросы на утверждение функции для подтверждения пользователя
  4. Агентский генеративный пользовательский интерфейс: асинхронные инструменты для длительных операций с обновлениями прогресса
  5. Генеративный пользовательский интерфейс на основе инструментов: пользовательские компоненты интерфейса, отрисованные на основе вызовов инструментов
  6. Общее состояние: двунаправленная синхронизация состояния между клиентом и сервером
  7. Прогнозные обновления состояния: аргументы средства потоковой передачи в качестве оптимистических обновлений состояния

Сборка пользовательских интерфейсов агентов с помощью CopilotKit

CopilotKit предоставляет широкие компоненты пользовательского интерфейса для создания пользовательских интерфейсов агента на основе стандартного протокола AG-UI. CopilotKit поддерживает интерфейсы потокового чата, вызов инструментов фронтенда и бэкенда, взаимодействия с человеком в процессе, генеративный пользовательский интерфейс, разделяемое состояние и многое другое. Примеры различных сценариев пользовательского интерфейса агента, поддерживаемых CopilotKit, см. в примере приложения DojoAG-UI .

CopilotKit помогает сосредоточиться на возможностях агента, предоставляя отшлифованный пользовательский опыт без изобретания велосипеда. Дополнительные сведения о начале работы с Microsoft Agent Framework и CopilotKit см. в документации по интеграции Microsoft Agent Framework для CopilotKit .

AG-UI и использование direct Agent

Хотя агентов можно запускать непосредственно в приложении с помощью методов Run и RunStreamingAsync Agent Framework, AG-UI предоставляет дополнительные возможности:

Функция Использование прямого агента интеграция AG-UI
Развертывание Интегрированное в приложение Удаленная служба через HTTP
Клиентский доступ Одно приложение Несколько клиентов (интернет, мобильные устройства)
Стриминг Асинхронная итерация в процессе события Server-Sent (SSE)
Управление состоянием Управляемое приложением Моментальные снимки состояния на уровне протокола
Контекст сеанса Управляемое приложением Идентификаторы сеансов, управляемых протоколом
Рабочие процессы утверждения Настраиваемая реализация Встроенный шаблон промежуточного ПО

Общие сведения об архитектуре

Интеграция AG-UI использует ASP.NET Core и соответствует чистой архитектуре на основе ПО промежуточного слоя:

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  ASP.NET Core           │
│  MapAGUI("/", agent)    │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AIAgent                │
│  (with Middleware)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  IChatClient            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

Ключевые компоненты

  • ASP.NET базовая конечная точка: MapAGUI метод расширения обрабатывает HTTP-запросы и потоковую передачу SSE
  • AIAgent: агент Agent Framework, созданный из IChatClient или пользовательской реализации
  • Конвейер ПО промежуточного слоя: необязательное ПО промежуточного слоя для утверждений, управления состоянием и пользовательской логики
  • Адаптер протокола: преобразуется между типами agent Framework и событиями протокола AG-UI
  • Клиент чата: клиент чата Microsoft.Extensions.AI (Azure OpenAI, OpenAI, Ollama и т. д.)

Как структура агентной системы интегрируется в AG-UI

Общие сведения о сопоставлении концепций Agent Framework с AG-UI помогают создавать эффективные интеграции:

Концепция агентного фреймворка эквивалент AG-UI Description
AIAgent Конечная точка агента Каждый агент становится конечной точкой HTTP
agent.Run() HTTP-запрос POST Клиент отправляет сообщения через HTTP
agent.RunStreamingAsync() События, посылаемые сервером Потоковая передача ответов через SSE
AgentResponseUpdate события AG-UI Автоматически преобразованы в события протокола
AIFunctionFactory.Create() Серверные инструменты Выполнение на сервере, результаты транслируются
ApprovalRequiredAIFunction Человек в контуре Посредническое ПО преобразуется в протокол утверждения
AgentSession Управление сеансами ConversationId поддерживает контекст
ChatResponseFormat.ForJsonSchema<T>() Снимки состояния Структурированные данные преобразуются в события состояния.

Installation

Интеграция AG-UI включена в пакет размещения ASP.NET Core:

dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore

Этот пакет включает все зависимости, необходимые для интеграции AG-UI, включая Microsoft.Extensions.AI.

Дальнейшие шаги

Чтобы приступить к работе с интеграцией AG-UI, выполните приведенные действия.

  1. Начало работы. Создание первого сервера и клиента AG-UI
  2. Отрисовка серверного инструмента: добавьте функциональные инструменты вашим агентам

Дополнительные ресурсы

AG-UI и использование direct Agent

Хотя агентов можно запускать непосредственно в приложении с помощью методов run и run(..., stream=True) Agent Framework, AG-UI предоставляет дополнительные возможности:

Функция Использование прямого агента интеграция AG-UI
Развертывание Интегрированное в приложение Удаленная служба через HTTP
Клиентский доступ Одно приложение Несколько клиентов (интернет, мобильные устройства)
Стриминг Асинхронная итерация в процессе события Server-Sent (SSE)
Управление состоянием Управляемое приложением Двунаправленная синхронизация на уровне протокола
Контекст потока Управляемое приложением Идентификаторы управляемых протоколом потоков
Рабочие процессы утверждения Настраиваемая реализация Встроенная поддержка протокола

Общие сведения об архитектуре

Интеграция AG-UI использует чистую модульную архитектуру:

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  FastAPI Endpoint       │
│  (add_agent_framework_  │
│   fastapi_endpoint)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AgentFrameworkAgent    │
│  (Protocol Wrapper)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Orchestrators          │
│  (Execution Flow Logic) │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Agent              │
│  (Agent Framework)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Chat Client            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

Ключевые компоненты

  • Конечная точка FastAPI: конечная точка HTTP, которая обрабатывает потоковую передачу SSE и маршрутизацию запросов
  • AgentFrameworkAgent: легковесная оболочка, которая адаптирует агенты фреймворка Agent Framework к протоколу AG-UI
  • Оркестраторы: Обработка различных потоков выполнения (по умолчанию, человеческое взаимодействие, управление состояниями)
  • Мост событий: преобразование событий Agent Framework в события протокола AG-UI
  • Адаптеры сообщений: двунаправленное преобразование между AG-UI и форматами сообщений Agent Framework
  • Стратегии подтверждения: расширяемые стратегии для сообщений подтверждения для конкретного домена

Как структура агентной системы интегрируется в AG-UI

Общие сведения о сопоставлении концепций Agent Framework с AG-UI помогают создавать эффективные интеграции:

Концепция агентного фреймворка эквивалент AG-UI Description
Agent Конечная точка агента Каждый агент становится конечной точкой HTTP
agent.run() HTTP-запрос POST Клиент отправляет сообщения через HTTP
agent.run(..., stream=True) События, посылаемые сервером Потоковая передача ответов через SSE
Обновления ответов агента события AG-UI TEXT_MESSAGE_CONTENT, TOOL_CALL_STARTи т. д.
Средства функций (@tool) Серверные инструменты Выполнено на сервере, результаты передаются клиенту
Режим утверждения инструмента Человек в контуре Запросы на утверждение и ответы через протокол
История разговоров Управление потоками threadId поддерживает контекст между запросами

Installation

Установите пакет интеграции AG-UI:

pip install agent-framework-ag-ui --pre

При этом устанавливается как базовая платформа агента, так и компоненты интеграции AG-UI.

Дальнейшие шаги

Чтобы приступить к работе с интеграцией AG-UI, выполните приведенные действия.

  1. Начало работы. Создание первого сервера и клиента AG-UI
  2. Отрисовка серверного инструмента: добавьте функциональные инструменты вашим агентам

Дополнительные ресурсы

  • Last updated on