1.背景

1.1 AI 对话应用崛起

近年来，AI 应用赛道全面“爆发”。在应用开发领域，模型微调、强化学习、智能体（Agent）开发框架等技术快速成熟；与此同时，AI 应用的交互形态也在不断演进，更加多元和复杂。

目前，常见的 AI 应用交互形态主要包括：

对话类：如在线客服机器人、企业 Copilot
生成类：如文案撰写、代码生成、图像设计生成工具
分析与决策类：如 BI 报表分析、数据洞察工具
自动化协作类：如智能体执行跨系统多步业务任务

其中，对话类 AI 应用依旧是最主流的交互方式。它天然契合人机交互习惯、支持多轮交流、可嵌入多种业务场景，因此被普遍称为 Chat 或 Copilot，成为企业落地大模型的首选形态。

1.2 阿里云百炼 UI 设计器

阿里云百炼 UI 设计器 是在阿里云百炼智能体开发的基础上，提供了 UI 搭建、资源集成、账号权限管理、多端发布等能力，助力 AI 应用实现快速落地，解决 AI 应用开发 “最后一公里” 难题。

阿里云百炼 UI 设计器集成了阿里云魔笔（多端低代码开发平台魔笔）产品的核心能力：

AI 驱动开发：支持 AI 自动生成页面图片、撰写 SQL 查询与脚本，结合大模型，让开发过程更高效、更智能。
可视化搭建：低代码拖拽式构建应用界面，实时预览和调试，所见即所得。
内置 BaaS 服务：开箱即用的云端资源（数据库、文件存储等），快速集成第三方服务，并支持与企业现有系统打通。
多端发布：AI Chat 应用一键托管，支持多环境发布，可选择独立访问模式或集成到现有 Web / 移动端应用。

UI 设计器全新上线的 AI Chat Builder 功能，融合了全链路编码开发方案与传统低码/零码开发方案的优势：既延续了平台范式下开箱即用的高效体验，又在低代码框架内赋予开发者高度灵活的定制能力。

特性：

支持一键将 AI 对话转化为可交互界面
降低技术门槛，让开发者与非开发人员都能在极短时间内完成从 构建 → 发布 → 运行 的全流程
同时保有平台范式下的高度可定制能力：可视化拖拽搭建、组件原子化组合、跨平台模型集成
可实现对话文本到 GUI 交互的灵活转换
可支持独立 Web 应用发布、移动端和小程序集成等

以下这些场景均可通过 Chat Builder 在短时间内完成搭建与部署，实现从业务需求到可交互 AI 界面的快速落地。

天气预报助手.gif 办公日程助手.gif

2.UI 设计器 Chat Builder

UI 设计器 Chat Builder 专注于 AI 对话应用的可视化构建，核心包括两大能力：

自定义 Chat：拖拽式构建多模态对话界面，精准控制交互布局与渲染样式
自定义 Widget：将自然语言结果转化为可交互 UI，支持功能调用、富内容展示，并能与用户实现深度协作

2.1 自定义 Chat

自定义 AI Chat，旨在让开发者和业务人员能够快速搭建符合业务需求的对话界面。核心特性包括：开箱即用、灵活搭建、快速集成 AI 服务（平台无关）及多角色可视化搭建。

2.1.1 开箱即用

设计器内置可直接使用的 Chat 组件，将基础对话组件拖入画布后，即可自动加载核心对话功能：

欢迎页：助手 Logo、欢迎语及快捷常用语；
多模态输入：文本输入（含快捷提示集）、语音输入、文件上传；
智能体配置栏：深度思考开关、联网搜索开关
内置角色：预置两个角色 User 和 Assistant，Assitant 角色支持 Markdown 流式渲染、显示工具和 MCP 调用、输入和输出 Token 消耗等；
AI 服务集成：一键创建并绑定阿里云百炼智能体，自动完成参数配置、API-Key 选择与智能体应用选择。

开箱即用的基础对话 AI 服务集成 Chat 对话效果预览

2.1.2 灵活搭建 Chat 框架

不同于其他平台通常只提供主题模板或有限的 Chat 配置项（如修改标题、颜色、文本），Chat Builder 提供 100% 可定制化的 Chat 搭建能力，允许开发者自由定义对话界面的布局、交互逻辑和渲染样式。核心能力基于 ChatPro 核心容器 + 原子组件物料实现：

ChatPro：承载完整对话逻辑与 UI 元素的核心容器
原子化组件：AI 专用与通用组件，可任意组合成适应不同业务的交互框架

面向 AI 对话场景专门设计的原子化组件，包括：

基础对话（ChatPro），核心容器，承载完整的对话交互逻辑与内容。
对话气泡（Bubble），消息显示组件，支持打字机效果与流式自然渲染。
多角色列表（BubbleList），按不同角色展示内容区的对话列表。
发送框（Sender），多模态消息输入组件，可自定义底部交互。
思维链（ThoughtChain），可视化展示 AI 推理过程及工具调用链路。
操作列表（Actions），消息底部的可选操作集，如“重新发送”“复制”等。
文件卡片（FileCard），在对话中直观展示已上传文件的预览与状态。
会话管理（Conversations），管理和切换多会话列表，可与基础对话组件联动使用。
Widget 渲染器（WidgetRender），绑定多个 Widget，消费动态数据并按规则渲染交互组件。

通用组件物料（70+），包括表单类、按钮类、展示类、导航类、容器类、图表类等，这些组件均可原子化嵌入 Chat 容器，让 Chat 应用的交互表现力可以任意拓展。

在 ChatPro 容器中，开发者可以将任意组件原子化组合，完全自主定义 Chat 的 UI 布局与交互逻辑。

对话列表区多角色自定义自定义搭建，可参考 2.1.4。

2.1.3 快速集成 AI 服务

基础对话（ChatPro）组件可通过配置 AI 集成操作，直接访问阿里云百炼大模型和智能体应用服务。

创建 / 选择集成资源

集成资源包括：

阿里云百炼大模型：阿里云百炼提供的千问系列模型服务
阿里云百炼智能体：基于阿里云百炼开发的智能体应用

访问当前云账号内的服务，可通过内置的系统集成资源直接访问，无需用户手动创建。

创建并配置集成操作

集成操作是对某个集成资源的调用封装，在应用中可以直接被 ChatPro 或其他组件使用。

当选择阿里云百炼应用集成资源时，会显示适配的专属配置项，例如：

可选参数，声明 content参数
操作类型，调用阿里云百炼应用访问阿里云百炼服务
启用 SSE 响应，开启 SSE 流式开关
API-Key，阿里云百炼 API-Key 下拉选择
阿里云百炼应用 ID，阿里云百炼智能体应用下拉选择
提示词，设置为 {{content}}，外部传入的 content 值即为传入智能体应用的输入内容

{{}} 表达式语法，支持通过 JavaScript 语法灵活访问和操作应用内数据。

阿里云百炼应用集成操作配置

绑定集成操作并验证

在 ChatPro 中绑定阿里云百炼集成操作 → 输入对话内容 → 等待智能体返回流式响应 → 验证成功。

设计器提供了极致的 "所见即所得" 搭建体验，无需显式地手动发布，设计器中可实时配置实时生效。

百炼集成效果验证.png

集成操作绑定验证

2.1.4 对话列表角色搭建

在对话列表区中，Chat Builder 支持灵活的多角色搭建，可使用多角色列表（BubbleList）组件，对不同角色的消息内容区进行可视化设计与布局。

角色映射机制：

将对话列表区的所有消息内容归类到某个角色的内容区进行渲染
BubbleList 接收一个对话列表（数组）数据源
通过角色路径读取每条消息的角色字段，并映射到对应的角色配置
在最基础的 AI 对话场景中，典型角色包括：

user（用户角色）：表示终端使用者的消息
assistant（助手角色）：表示 AI 智能体响应的消息

简单场景中 user 和 assistant 两个角色已经足够，也可以添加多个角色，实现类群聊或更复杂的交互。

对话列表按角色搭建

可视化搭建流程：

选中某个角色后，设计器会切换到该角色的专属可视化搭建画布，开发者可在画布中自由组合组件。

用户（user）角色示例，该示例的布局相对简单，包括：头像（Avatar）、用户名（Text）和消息主体（Bubble）。

"用户" 角色搭建

助手（assistant）角色示例，整体 UI 布局使用容器组件（Container）进行位置与结构调整，每个功能子块由不同组件搭建，并绑定数据与样式：

头像：助手头像（Avatar）
标题：配置为“智能助手”（Text）
思维链：显示智能体的工具调用与 MCP 执行过程（ThoughtChain）
消息主体：通过文本 / Markdown 渲染助手的核心消息内容（Bubble）
消息操作栏：支持复制消息、复制请求 ID（Actions）
Token 消耗统计：输入和输出 Token 数量显示（Text）

"助手" 角色搭建

2.2 自定义 Widget

Chat Builder 的自定义 Chat 能力已经支持接入任意自定义大模型服务，足以搭建一个高定制度的完整 AI 对话应用。

如果要进一步让对话交互突破纯文本 / Markdown的限制，呈现更丰富的 GUI 交互与可操作功能，可以结合自定义 Widget 能力进行扩展。

2.2.1 什么是 Widget

Widget 是可嵌入到对话列表中、进行局部渲染的交互式内容区域，它可以将对话中的结构化数据，映射为可交互的 GUI 组件。

在传统业务里，可能会被称作“对话卡片”或“业务卡片”，但Widget 远不止如此。

Widget 的特点：

独立管理，可复用，每个 Widget 独立定义并管理，可在不同应用场景重复使用
可视化灵活搭建，不仅能展示结果/数据，还可包含交互逻辑、数据请求、数据绑定、业务流程执行，相当于在对话中嵌入一个“小型页面”
通用数据绑定，与平台无关，与任何大模型服务或平台无关，只需输入符合指定格式的数据，即可渲染
绑定到 Widget 渲染器，Widget 不能像普通页面那样单独访问，必须绑定到 Widget 渲染器，根据输入数据和匹配规则进行渲染
对话列表区应用，最典型场景：放入对话列表区，将角色文本替换为可操作的 GUI 区块，也可将 Widget 渲染器脱离对话列表，放置在 Web 应用任意位置
标准化通信机制，与 Widget 渲染器外的 Chat 容器双向通信，可与整个 Web 应用环境进行交互，实现复杂业务流程集成

2.2.2 Widget 搭建

自定义 Widget 搭建，遵循平台统一的低代码开发范式，让开发者像构建 Web 应用页面一样去设计一个可交互、可复用的 Widget。

Widget 搭建特点：

独立管理，每个 Widget 都有独立的增/删/改/查生命周期管理，提供单独的 Widget 编辑模式，可在不影响其他应用的情况下专注于单个 Widget 的设计
低代码可视化搭建，与 Web 页面开发体验一致：可视化 UI 设计 → 数据集成 → 数据绑定，支持拖拽式组合组件，实时调整样式与布局
入参设置与调试，Widget 动态消费外部数据进行渲染，可自由定义输入参数，搭建时可配置模拟入参，在没有真实数据传入时也能实现实时预览与调试
事件与通信机制，Widget 可声明可发送的事件类型，方便 Widget 渲染器按定义配置事件处理器，Widget 内可通过触发事件与外部环境交互，例如：通知 Chat 容器更新状态、向 Web 应用发送操作指令