intelligent ui是怎么实现的

你说的 intelligent UI，我先按“能根据用户意图动态变化的 AI 界面”来讲；如果是具体项目，发链接我再对着实现拆。 核心不是让模型每次写一整个网页，而是：模型决定展示什么，前端负责可靠地画出来。 比如用户说“帮我比较这三款耳机”，普通 cb 回一段文字；智能 UI 则展示对比卡片、价格筛选和可点击的购买选项。用户调整预算后，Agent 再查数据、更新卡片。 实现可以拆成四层。 第一层：准备组件 前端先写好表格、图表、商品卡片、筛选器、确认框等组件，规定每个组件接受什么数据。模型只能选这些组件，不能任意操作页面。 第二层：Agent 获取数据、选择展示方式 Agent 理解需求，调用搜索或业务接口，然后输出结构化描述，例如： component：ProductComparison products：三款商品的数据 filters：预算、降噪、续航 actions：修改预算、查看详情 这不是网页代码，而是一份“画什么、带什么数据”的说明书。 第三层：前端校验并渲染 前端检查组件是否存在、字段是否合法，再映射到真实组件。数据还没回来时先显示加载状态，回来后更新对应区域，不必整页重画。 第四层：把交互反馈给 Agent 用户点击“预算降到500”，前端把这个事件和当前选择传给后端；Agent 重新查询，返回新的展示数据。这样形成“理解需求→展示→用户操作→继续执行”的闭环。 常见做法有三种。 受控组件：模型只选择开发者写好的组件，最稳，适合先做 MVP。 声明式界面：模型输出组件树，前端按约定解释，可以动态组合布局，但校验和状态管理更复杂。 直接生成 HTML 或代码：自由度最高，但安全、样式一致性和交互可靠性更难，通常要放在隔离环境里。 真正容易踩坑的不是“能不能生成界面”，而是状态和权限：刷新后选择是否保留？旧查询结果会不会覆盖新结果？点了付款按钮是否真的得到授权？这些要由应用逻辑和后端管住，不能由模型说了算。 建议先做一个“对话＋两三个固定组件＋点击后更新”的小闭环，不要一上来做任意网页生成。CopilotKit 有这几类实现的示例，可以直接对照看： https://github.com/CopilotKit/generative-ui