UI新革命？GenUI、WanDB-OpenUI、thesysdev-OpenUI、A2UI、AG-UI、MCP-UI

johnny2332026-07-23 8:06

非前端开发，但显而易见的是，在AI/LLM时代，UI也迎来不少变革。

本文试图梳理网络资源，整理成个人的理解，并形成文档。

GenUI

Generative UI的简称，界面不是提前设计好的，而是由AI根据当下的需求，现场生成。不是你去找功能，而是功能来找你。

传统UI：

  • 静态
  • 路径是预设好的
  • 用户必须先学会"这个系统怎么用"

本质是：人去适应系统。

对比传统GUI

维度 传统GUI的本质 AI时代新范式的本质 颠覆性
交互逻辑 指令-操作：用户必须学习软件的逻辑（如菜单、按钮），将自身意图翻译成软件能理解的精确操作序列 意图-结果：用户直接用模糊、自然的方式（语言、手势、眼神）表达要什么，系统理解并执行 交互责任从用户转移到系统。UI不再是固定的操作手册，而是动态的意图理解器
界面形态 静态、一致：所有用户在同一时间看到基本相同的界面，功能被预先定义和布局 动态、生成、消失：界面根据当前上下文和用户意图实时生成，任务完成后可能隐去，甚至没有可见界面 UI从空间占用（App布局）进化为时间响应（瞬间服务）
用户角色 操作者：必须学习、记忆、遵循软件的规则 协作伙伴：用户是提出目标和反馈的伙伴，AI负责规划、执行和调整 人机关系从工具使用走向目标协同

CopilotKit

CopilotKit开源（GitHub，783 Star，69 Fork）GenUI示例，可用于AG-UI、A2UI、Open-JSON-UI、MCP Apps，官方文档。

WanDB-OpenUI

官网打不开，可用于替代v0等工具的开源（GitHub，22.5K Star，2.1K Fork）项目，但具备更强的灵活性和自定义选项；基于AI，用于快速构建并迭代UI原型。

特性

  • 可视化UI生成
    • 根据输入的描述可实时组件渲染，查看渲染效果
    • 支持复杂布局和交互
    • 支持自动生成响应式设计
  • 框架灵活性
    • 将HTML转换为React、Svelte、Vue和Web Components
    • 跨框架保持组件功能
    • 支持导出干净、可用于生产的代码
  • 多模型支持
    • 无缝切换不同LLM提供商：OpenAI、OpenAI兼容等
    • 本地模型支持，保护隐私并可离线使用
    • 通过LiteLLM集成自定义模型
  • 会话持久化
    • 支持保存和共享UI创作
    • 保留版本历史，方便后续迭代跟踪
    • 支持多人协作开发

实战

部署方式：

  • 源码
bash 复制代码 
git clone https://github.com/wandb/openui
cd openui/backend
uv sync --frozen --extra litellm
source .venv/bin/activate
# Set API keys for any LLM's you want to use
export OPENAI_API_KEY=xxx
python -m openui
  • Docker、Docker Compose
bash 复制代码 
git clone https://github.com/wandb/openui
pip install -e .
python -m openui --dev
# Docker
docker run --rm --name openui -p 7878:7878 \
	-e OPENAI_API_KEY=xxx \
	ghcr.io/wandb/openui

浏览器访问http://localhost:7878，

thesysdev-OpenUI

另一个高星同名开源（GitHub，8.2K Star，602 Fork）项目，官网。

组件包

包名 适用场景 描述
@openuidev/lang-core 框架无关的解析与提示生成 核心解析器、提示生成、运行时评估和类型层，无React、Vue或Svelte依赖
@openuidev/react-lang React渲染运行时 定义组件库、生成提示，并在React中渲染流式OpenUILang
@openuidev/react-headless 自带React聊天UI 无头聊天状态、流式适配器和消息格式转换器
@openuidev/react-ui 最快路径的全功能React聊天体验 预构建聊天布局、独立UI原语和两个内置组件库
@openuidev/react-email 邮件生成与HTML导出 ReactEmail组件定义，以及面向模型生成邮件的提示选项
@openuidev/vue-lang Vue集成 Vue3绑定，用于定义模型可渲染组件和渲染流式OpenUILang
@openuidev/svelte-lang Svelte集成 Svelte5绑定，用于定义模型可渲染组件和渲染流式OpenUILang
@openuidev/browser-bundle CDN、iframe和无构建嵌入 预构建浏览器捆绑包，包含渲染器、UI库、React和样式，作为脚本和样式表资源提供
@openuidev/cli 项目脚手架与提示生成 CLI工具，用于创建新应用和从库定义生成系统提示或JSONSchema
@openuidev/openclaw-os-plugin OpenClaw工作区 OpenClawOS插件，用于提供OpenUI驱动的OpenClaw工作区

提供技能包，CC等客户端拿来即用：

bash 复制代码 
# 通过npx安装
npx skills add thesysdev/skills --skill openui
# 手动复制安装
cp -r skills/openui .claude/skills/openui

实战

基于源码部署安装：

bash 复制代码 
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

A2UI

随着Agent技术的发展，传统通过文本或代码生成界面的方式暴露明显不足：交互效率低、难以保证安全、不同平台一致性难以维护等问题。

A2UI，是Agent-to-User Interface Protocol的简称，官网，由Google及社区推进的开源（GitHub，15.8K Star，1.2K Fork）开放协议，旨在让Agent能够安全、通用地生成可在客户端原生渲染的复杂用户界面，从而为智能应用带来更流畅、可控和跨平台的交互体验。中文文档，。

解决问题：

  1. UI安全性：在以往Agent生成UI的尝试中，输出HTML/JS会带来安全风险（如包括恶意脚本等）。A2UI只允许Agent使用客户端"可信组件目录"内的组件类型，从根本上隔离安全隐患。
  2. 跨平台一致性：不同平台（Web、移动、桌面）使用不同UI技术栈。A2UI抽象出协议层，允许同样的界面定义在不同平台统一渲染，确保一致性并减少重复开发。
  3. 交互丰富性不足：文本交互难以实现复杂的用户输入或反馈（如表单选择、图表展示、地图交互等）。A2UI通过结构化组件描述，使Agent可生成更复杂、更具交互性的UI。

不是一个UI框架，而是声明式UI协议，通过JSON消息描述界面结构和状态，由客户端应用根据其本地组件库渲染成原生UI，而不是执行Agent提供的代码。与传统直接输出HTML/JS或通过iframe嵌入的方式不同，A2UI提供一种安全、可控、框架无关的UI生成路径。

工作原理

  • Agent生成UI描述：Agent在执行任务时生成符合A2UI Schema的JSON对象，描述用户需要看到的内容、输入控件和操作按钮
  • 客户端渲染：前端应用（Web、移动端或桌面端）接收JSON描述，并使用原生组件（如Angular、React、Flutter等）渲染UI，而无需执行Agent代码
  • 用户交互：用户通过原生UI组件进行操作，Agent接收用户输入并继续生成新的UI更新，实现流式、渐进式交互

核心特性

  • 安全优先：传输声明性数据（JSON），而不是可执行代码。客户端根据预先注册的组件目录决定渲染行为，从而防止不受信任代码执行与UI注入风险。
  • 面向LLM生成：协议采用扁平化、可流式更新的JSON结构，方便LLM逐步生成或修正界面定义，有利于渐进式渲染和及时反馈。
  • 框架无关：同一套A2UI响应可以在不同前端框架环境下渲染，如React、Angular、Flutter、SwiftUI等，客户端负责将抽象组件映射到本地原生控件。
  • 渐进渲染：UI可随着Agent的生成过程逐步更新，而不是等待整个界面定义传输完成，提高响应体验。

优势

  • 安全性：声明式数据而非可执行代码，避免UI注入攻击和代码执行风险
  • 原生体验：无需iframe或嵌入HTML/JS，UI继承应用样式、可访问性和性能
  • 跨平台可移植性：同一JSON描述可在Web、移动端和桌面端渲染，框架无关
  • 高效交互：减少传统文本对话的低效来回，如预订餐厅时，Agent可直接生成日期选择器、时间选择器和提交按钮的表单，而非多轮文本问答
  • 渐进式渲染：支持流式UI更新，用户可实时看到界面构建过程

流程

  1. 用户向Agent发起请求
  2. Agent返回一系列A2UI协议消息（JSON）描述界面结构与数据模型
  3. 客户端根据这些消息以本地原生组件构建界面
  4. 用户与界面交互事件发送回Agent
  5. Agent根据用户操作，再次发送UI更新消息

打破传统以文本为主的交互方式，使Agent具备生成动态、互动UI的能力，而不仅限于静态文本或代码输出。

作为Agent-driven UI的交互协议，其设计原则包括：

  • 将界面描述与渲染实现完全分离：Agent只负责描述UI，客户端负责渲染、样式、性能和无障碍支持等实现细节。
  • 支持流式和增量更新：与传统一次性生成相比，允许Agent边生成边更新界面，有利于快速交互反馈。
  • 简化模型生成难度：协议结构对大型语言模型友好，避免输出复杂或不规范的JSON。

务虚，对未来产品设计的影响

  1. 从静态界面设计向动态生成设计转变：产品不再由开发者手工写死界面布局，而是由Agent根据用户意图动态生成，大幅提升交互智能性与个性化体验。
  2. 设计策略更关注交互语义而非布局细节：因为界面由Agent以协议形式描述，设计师需关注组件语义、用户目标流程和使用场景，而非具体元素位置。
  3. 构建可组合的组件目录成为核心资产：客户端的"可信组件目录"决定Agent能生成哪些界面和交互。设计体系、组件库和规范需优先定义可组合单元。
  4. 跨平台一致性变得更容易维护：A2UI协议允许不同平台使用统一定义渲染UI，对跨平台产品开发具有重要意义，可大幅降低重复开发和维护成本。
  5. 安全与体验不再对立：数据而非代码的方式保障安全边界，允许Agent生成复杂交互界面，不牺牲用户体验。

A2UI特别适用于多Agent系统和分布式架构，Agent通常远程运行，无法直接操作UI，通过A2UI消息安全地传递UI描述，实现跨信任边界的交互。典型场景包括智能助理、任务管理、预订系统和企业内部Agent平台。

核心理念

A2UI围绕三个核心理念构建：

  • 流式消息：UI更新作为一系列JSON消息从代理流向客户端
  • 声明式组件：UI被描述为数据，而非编写为代码
  • 数据绑定：UI结构与应用程序状态分离，实现响应式更新

使用四种消息类型：

  • surfaceUpdate：定义或更新UI组件
  • dataModelUpdate：更新应用程序状态
  • beginRendering：信号客户端进行渲染
  • deleteSurface：移除UI表面

使用邻接表模型来表示组件层次结构。组件不是嵌套JSON树，而是带有ID引用的扁平列表。传统嵌套方法：

  • LLM必须一次性生成完美的嵌套结构
  • 难以更新深层嵌套的组件
  • 难以增量流式传输

A2UI邻接表：

  • 扁平结构，易于LLM生成
  • 增量发送组件
  • 通过ID更新任何组件
  • 清晰分离结构和数据

定义按用途组织的标准组件目录：

  • 布局：Row、Column、List，用于排列其他组件
  • 展示：Text、Image、Icon、Video、Divider，用于显示信息
  • 交互：Button、TextField、CheckBox、DateTimeInput、Slider，用于用户输入
  • 容器：Card、Tabs、Modal，用于分组和组织内容

数据绑定使用JSON Pointer路径(RFC 6901)将UI组件连接到应用程序状态。这使得A2UI能够高效地定义大型数据数组的布局，或在不从头重新生成的情况下显示更新的内容。

AG-UI

Agent-User Interaction Protocol简称，官网，CopilotKit主导开源（GitHub，14.9K Star，1.4K Fork）轻量级的、事件驱动的Agent-用户交互协议，专门为把Agent接入前端应用而设计。核心功能是标准化Agent后端和前端应用的连接方式，Agent执行时发送~16种标准事件类型，前端自动渲染成实时聊天、进度提示、生成式UI，支持双向状态同步、人机协作、前端工具集成，内置中间件层兼容SSE、WebSocket、Webhook等各种传输方式，LangGraph和CrewAI官方合作集成，支持Microsoft Agent Framework、Google ADK、Pydantic AI等十几个主流框架，npx一条命令创建项目模板秒上手。官方文档。

智能体协议栈

参考MCP、ACP、A2A、AG-UI、ANP概述。

核心优势：

  • 前端自由度最大化：同一个Agent可对接Web、Mobile、CLI等不同客户端
  • 实时性极强：基于流式事件，用户能看到Agent思考的每一步
  • 与现有应用深度集成：Agent可驱动现有UI的状态变化

核心功能

  • 极简：一条命令创建项目生成模板，不用从头配置Agent和前端的连接，抄示例就能跑
  • 标准事件类型：Agent执行时发送AgentStateMessage、ToolCall、ActionRequest等事件，前端自动渲染成对应UI组件，流式聊天、进度条、确认弹窗全自动
  • 双向状态同步：Agent能读取前端实时上下文(用户正在看什么页面、输入框内容)，前端也能实时拿到Agent状态，不用手动写状态管理
  • 生成式UI支持：Agent可动态生成React组件发给前端，聊天框里嵌入表格、图表、表单，比纯文本交互体验好10倍
  • 人机协作模式：Agent遇到关键决策可请求人类确认，前端自动弹窗等待用户选择，确认后Agent继续执行
  • 前端工具集成：Agent能调用前端定义的工具函数，直接操作浏览器、读取本地存储、触发页面跳转，能力无缝扩展
  • 框架无关中间件；兼容SSE、WebSocket、Webhook等传输方式，松散的事件格式匹配，不同Agent框架都能接入
  • 多语言SDK：提供Kotlin、Golang、Dart、Java、Rust等社区SDK，不只是前端协议，后端也能用

技术特色

  • 事件驱动架构：Agent不直接调用前端API，而是发送标准事件，前端订阅事件自动更新UI，解耦度高可维护性强
  • 协议层松散匹配：不要求事件格式严格一致，允许字段缺失或额外字段，不同Agent框架都能接入
  • 中间件层灵活扩展：传输层、序列化、认证、日志都可插拔式替换，适配各种部署环境
  • 前端上下文实时共享：Agent能拿到用户当前页面、输入内容、选中文本等实时信息，理解用户意图更准确
  • A2A协议集成：AG-UI支持A2A通信协议，多Agent系统前端交互无缝对接

实际应用场景

  • 开发文档助手Agent，用户在网页编辑文档时Agent实时提供建议，AG-UI把Agent的建议流式渲染到侧边栏，用户点击确认就插入内容
  • 做数据分析应用，Agent跑复杂查询时用户看不到进度很焦虑，现在Agent发送ProgressMessage事件前端自动显示进度条，"正在处理第3/5步"一目了然
  • 构建电商推荐Agent，Agent生成商品推荐时不只返回文本，发送生成式UI事件前端直接渲染商品卡片，点击就能加购物车
  • 团队协作工具里接入Agent，Agent要删除重要数据时请求人类确认，前端自动弹窗显示操作详情等待用户决策，避免误操作
  • 多Agent编排系统，LangGraph定义的工作流接入AG-UI，每个子Agent的执行状态都实时同步到前端看板，调试效率翻倍

事件类型系统

参考源码ag-ui/sdks/typescript/packages/core/src/events.ts，增加注释：

ts 复制代码 
export enum EventType {
	// 文本消息（流式）
  TEXT_MESSAGE_START = "TEXT_MESSAGE_START",
  TEXT_MESSAGE_CONTENT = "TEXT_MESSAGE_CONTENT",
  TEXT_MESSAGE_END = "TEXT_MESSAGE_END",
  TEXT_MESSAGE_CHUNK = "TEXT_MESSAGE_CHUNK",
  // 工具调用
  TOOL_CALL_START = "TOOL_CALL_START",
  TOOL_CALL_ARGS = "TOOL_CALL_ARGS",
  TOOL_CALL_END = "TOOL_CALL_END",
  TOOL_CALL_CHUNK = "TOOL_CALL_CHUNK",
  TOOL_CALL_RESULT = "TOOL_CALL_RESULT",
  // 思考过程（可选暴露）。已废弃，使用REASONING_START，1.0.0版本移除
  THINKING_START = "THINKING_START",
  // 已废弃，使用REASONING_END，同上
  THINKING_END = "THINKING_END",
  // 已废弃，使用REASONING_MESSAGE_START，同上
  THINKING_TEXT_MESSAGE_START = "THINKING_TEXT_MESSAGE_START",
  // 已废弃，使用REASONING_MESSAGE_CONTENT，同上
  THINKING_TEXT_MESSAGE_CONTENT = "THINKING_TEXT_MESSAGE_CONTENT",
  // 已废弃，使用REASONING_MESSAGE_END，同上
  THINKING_TEXT_MESSAGE_END = "THINKING_TEXT_MESSAGE_END",
  // 状态管理
  STATE_SNAPSHOT = "STATE_SNAPSHOT",
  STATE_DELTA = "STATE_DELTA",
  MESSAGES_SNAPSHOT = "MESSAGES_SNAPSHOT",
  // 活动状态，用于UI展示
  ACTIVITY_SNAPSHOT = "ACTIVITY_SNAPSHOT",
  ACTIVITY_DELTA = "ACTIVITY_DELTA",
  RAW = "RAW",
  CUSTOM = "CUSTOM",
  // 生命周期：5个
  RUN_STARTED = "RUN_STARTED",
  RUN_FINISHED = "RUN_FINISHED",
  RUN_ERROR = "RUN_ERROR",
  STEP_STARTED = "STEP_STARTED",
  STEP_FINISHED = "STEP_FINISHED",
  
  REASONING_START = "REASONING_START",
  REASONING_MESSAGE_START = "REASONING_MESSAGE_START",
  REASONING_MESSAGE_CONTENT = "REASONING_MESSAGE_CONTENT",
  REASONING_MESSAGE_END = "REASONING_MESSAGE_END",
  REASONING_MESSAGE_CHUNK = "REASONING_MESSAGE_CHUNK",
  REASONING_END = "REASONING_END",
  REASONING_ENCRYPTED_VALUE = "REASONING_ENCRYPTED_VALUE",
}

实战

安装

bash 复制代码 
# 安装AG-UI核心库
npm install @ag-ui/core
# 一条命令创建AG-UI应用
npx create-ag-ui-app my-agent-app
cd my-agent-app
npm install
npm rundev

操作过程示例：

选择智能体框架

需配置LLM API Key：

执行npm run dev命令，打开浏览器访问http://localhost:3000：

同时，本地将生成如下文件（夹）：

使用CopilotKit客户端，React接入示例

js 复制代码

Python集成

基于pip安装：pip install ag-ui-python

LangGraph集成示例

py 复制代码 
from langgraph.prebuilt import create_react_agent
from langchain_openai import ChatOpenAI
from ag_ui import AGUIMiddleware
# 创建LangGraph Agent
llm = ChatOpenAI(model="gpt-4")
agent = create_react_agent(llm, tools=[...])
# 包装AG-UI中间件
ag_ui = AGUIMiddleware(agent)
# 启动HTTP服务器
ag_ui.serve(port=8000)
# 前端自动连接到 http://localhost:8000
# 支持流式输出、进度提示、人机协作

CrewAI集成示例：

py 复制代码 
from crewai import Crew, Agent, Task
from ag_ui import CrewAIAdapter
# 定义CrewAI团队
researcher = Agent(role="研究员", goal="收集数据")
writer = Agent(role="写手", goal="撰写报告")
crew = Crew(agents=[researcher, writer], tasks=[...])
# 集成AG-UI
adapter = CrewAIAdapter(crew)
adapter.run_with_ui(inputs={"topic": "AI趋势"})
# 前端实时显示每个Agent的执行状态
# 自动渲染生成式UI(数据表格、图表)
py 复制代码
py 复制代码

A2UI Composer

官网，一个由CopilotKit团队（AG-UI的主导者）构建的A2UI可视化构建工具，使用AG-UI协议与后端通信，来生成和测试符合Google A2UI规范的JSON。

聊天式生成UI界面入口

侧边栏功能菜单如下（早期版本）：

当前版本：

功能

  • 可视化地试验A2UI组件
  • 通过描述您想要的内容生成A2UI JSON
  • 查看实时预览
  • 复制JSON以在代理中使用

AG-UI对比A2UI

一句话总结：

  • A2UI：显示什么UI，声明式UI规范 / Payload
  • AG-UI：怎么传输和交互，运行时通信协议 / Transport

核心定位与设计哲学

  • A2UI：后端主导（Agent驱动）。Agent用结构化JSON描述UI组件，客户端用原生/白名单组件渲染。强调安全第一、跨平台、LLM友好。解决Agent只能输出文本的痛点，让Agent能说UI语言。
  • AG-UI：前端-后端双向主导。专注于实时状态同步、事件流、工具调用生命周期。不规定UI长什么样，而是提供一个高带宽的管道，支持传输A2UI、Open-JSON-UI、MCP-UI等任意生成式UI规范。
维度 AG-UI A2UI
协议类型 事件驱动运行时交互协议 声明式生成式UI规范
核心定位 交互传输协议：连接AI代理（后端）与用户界面（前端）的实时通信协议。参考：Microsoft代理框架、Gen UI规范、Agentic协议 界面声明规范：一种让AI代理用JSON数据来描述UI组件和布局的格式标准。。
主要作用 解决"怎么传"和"怎么连"的问题。负责在后端Agent和前端应用之间建立一个双向、实时的数据通道，用来传输消息、工具调用、状态更新等各种事件。oracle blog 解决"传什么"和"画什么"的问题。定义了一种LLM友好、声明式的JSON格式，让Agent能"告诉"前端要渲染哪些按钮、输入框、卡片等UI元素
类比理解 相当于快递物流网络，负责建立连接、规划路线、实时运输包裹 相当于包裹里的组装说明书（JSON格式），描述收到包裹后应该拼装出什么家具（UI）。
主导方 CopilotKit团队主导的开源协议。1 Google发起并主导的规范，开源且社区驱动

另一个对比矩阵

维度 A2UI AG-UI 谁更优？
UI生成方式 声明式JSON（流式JSONL），白名单组件catalog 不规定UI格式，可传输任意spec（原生支持A2UI） A2UI
渲染方式 客户端原生组件渲染（React、Flutter、Angular、Lit等） 开发者自定义渲染器（框架无关） A2UI（跨平台）
实时性 流式增量更新（Progressive Rendering） 最强：16种标准事件+实时状态同步+重连机制 AG-UI
安全性 最高：纯声明式数据、无代码执行、无iframe沙箱 依赖前端实现+运行时验证 A2UI
跨平台能力 最强：同一JSON可在Web/移动/桌面/原生渲染 框架无关，但需各端单独实现渲染 A2UI
多Agent支持 原生支持跨信任边界（多Agent协作） 主要单Agent，结合A2A协议可扩展 A2UI
LLM生成友好度 极高（扁平JSON，易prompting） 中等（事件序列） A2UI
状态管理 仅UI状态 全栈：共享状态、工具调用、HIL（Human-in-the-Loop） AG-UI
传输协议 可通过A2A、REST、AG-UI等任意传输 自身就是传输协议（SSE/WebSocket+事件流） AG-UI
风格控制 继承宿主App样式 开发者完全掌控 平手

安全性深度对比

  • A2UI：安全模型最严格。只允许Agent发送预批准组件+数据，客户端渲染器映射到原生控件，彻底杜绝代码注入。适合高安全场景（如企业内部工具、金融、医疗）
  • AG-UI：更灵活，但安全性依赖实现。支持敏感数据在后端处理、前端只显示脱敏视图

A2UI更适合：

  • 需要跨平台一致UI的多端应用，如Web、App、Desktop
  • 多Agent协作场景（Agent之间传递UI蓝图）
  • 对安全要求极高的企业级 Agent 产品
  • 希望 Agent "一键生成表单、卡片、向导、表格"等复杂交互

AG-UI更适合：

  • 需要极致实时交互（聊天 + 工具 + 共享状态 + 长时间运行Agent）
  • 已有成熟前端框架，想快速接入Agent后端
  • 需要完整事件生命周期、断线重连、命令/响应追踪的场景

最佳实践：A2UI、AG-UI两者组合，AG-UI负责管道和状态同步，A2UI负责UI内容描述，既安全又实时，几乎是2026年Agent应用的事实标准。

生态与兼容性

  • A2UI已集成进：CopilotKit、Flutter GenUI SDK、Angular/Lit渲染器等
  • AG-UI已支持：A2UI、Open-JSON-UI、MCP-UI、自定义Schema；并与A2A、MCP协议无缝握手

CopilotKit同时是两个协议的重要贡献者和实现者，提供一站式框架。

MCP-UI

官网，开源（GitHub，5K Star，389 Fork）。

与AG-UI、A2UI不同，MCP-UI不试图定义新的协议，而是复用现有MCP协议，在工具返回值中添加UIResource字段。

Open-JSON-UI

blog。

推荐阅读

相关推荐
天天进步201511 小时前
UI-TARS 源码解析 #10：parse_action 源码解析：如何用 AST 安全解析模型生成的函数调用？
安全·ui
FuckPatience19 小时前
Telerik UI for WPF 值不能为null。参数名:key
ui·wpf
breeze jiang20 小时前
从原生事件到 React 组件化：用状态驱动模型加载进度 UI
前端·react.js·ui
JaneConan2 天前
鸿蒙 ArkUI 深水区：@Watch 和 @Observed，状态变了「自动跑」+ 嵌套对象「深层重绘」
开发语言·后端·ui·harmonyos
施棠海2 天前
Pixel2XML实战：10分钟从设计稿做出一个能拨号的Android拨号盘页面（附完整业务代码）
android·java·ui
施棠海2 天前
设计稿一键变成可运行的Android页面：Pixel2XML全流程UI开发框架实战（附完整源码）
android·ui·架构
Helen_cai2 天前
OpenHarmony 通用状态加载、空页面、错误兜底组件封装（全局业务通用 UI 组件 API23）
开发语言·ui·华为·php·harmonyos
YM52e2 天前
鸿蒙 Flutter BoxDecoration装饰：打造精美UI效果
学习·flutter·ui·华为·harmonyos·鸿蒙
qq_463408422 天前
# 基于 HarmonyOS ArkTS 声明式 UI 构建智能音乐播放器：深色主题圆盘轮播、五 Tab 导航隔离、瀑布流收藏与悬浮迷你播放条实现深度解析
ui·华为·harmonyos
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04AI科技热点日报 | 2026年07月01日05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？092026 年 AI 大模型 & AI 编程工具实战全总结10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新