A2UI for Blazor

基于 Google A2UI 协议的 .NET Blazor 实现
让 AI Agent 动态生成原生、安全、交互式的用户界面

🤔 什么是 A2UI?

A2UI (Agent to UI) 是一个声明式 UI 协议,用于代理驱动的界面。 AI 代理生成丰富的交互式 UI,可在各个平台(Web、移动、桌面)上原生渲染,而无需执行任意代码。

✨ 核心特性

🔒

安全性

声明式数据,而非代码。代理从客户端的可信目录请求组件。 无代码执行风险,确保应用安全。

原生体验

无 iframe,客户端使用自己的 UI 框架渲染。 继承应用样式、可访问性和性能优势。

🌍

可移植性

一个代理响应可在任何地方工作。相同的 JSON 可在 Web、移动、桌面平台渲染。

🎨

动态界面

AI Agent 根据用户需求实时生成界面, 无需预先定义所有 UI 组件和布局。

🔄

数据绑定

支持双向数据绑定,表单输入自动同步, 列表数据动态渲染,状态管理简单高效。

🧩

组件丰富

支持 15+ 标准组件:按钮、卡片、表单、列表、 选项卡、模态框、多媒体等。

🔧 工作原理

1

用户输入

用户通过自然语言描述需求

2

Agent 处理

AI Agent (LLM) 理解意图

3

生成 A2UI JSON

Agent 返回 UI 声明数据

4

原生渲染

Blazor 组件动态渲染界面

💡 应用场景

💬

智能客服

根据用户问题动态生成表单、卡片、列表等界面

📊

数据可视化

AI Agent 根据数据自动选择最佳展示方式

🛍️

电商推荐

个性化商品展示,动态生成购物界面

📝

表单构建器

AI 根据需求自动生成复杂表单和验证逻辑

🎮

游戏 UI

根据游戏状态动态生成任务、商店等界面

🏢

企业管理

根据权限和角色动态生成管理后台

🧩 支持的组件

📝 Text
🔘 Button
📇 Card
📐 Row/Column
✍️ TextField
☑️ CheckBox
📅 DateTimeInput
🎚️ Slider
🔘 MultipleChoice
📋 List
📑 Tabs
🪟 Modal
🖼️ Image
⭐ Icon
🎬 Video
🎵 Audio
➖ Divider

🚀 快速开始

1. 安装项目引用
<ItemGroup>
  <ProjectReference Include="A2UI.Core\A2UI.Core.csproj" />
  <ProjectReference Include="A2UI.Blazor.Components\*.csproj" />
  <ProjectReference Include="A2UI.AgentSDK\*.csproj" />
</ItemGroup>
2. 注册服务 (Program.cs)
builder.Services.AddScoped<MessageProcessor>();
builder.Services.AddScoped<EventDispatcher>();
builder.Services.AddSingleton<ThemeService>();
3. 使用 A2UI Surface
<A2UISurface SurfaceId="my-surface" />

🛠️ 技术栈

.NET 9.0
Blazor Server
Blazor WebAssembly
SignalR
A2UI 0.8 协议

准备好体验 AI 驱动的动态 UI 了吗?

立即访问演示页面,通过自然语言与 Agent 交互,看它如何实时生成界面!

开始体验 A2UI Demo →
An unhandled error has occurred. Reload 🗙