让AI对话秒变可交互界面，并一键发布为Web 应用也可集成至小程序、App中

当技术壁垒不断被打破，各行各业都在试水 AI 应用，如何更快速地将 AI 能力转化为实实在在的业务价值？

阿里云百炼 UI 设计器给出了答案 — 提供从 UI 可视化搭建，到 AI 服务无缝集成与快速发布的全链路能力。无需编写前端代码，即可快速搭建专业级交互界面，并一键发布为 Web 应用，轻松集成至小程序、App 中。

它能让你：

• 界面搭建所见即所得：拖组件、调布局，实时预览，还能让 AI 帮你生成页面或脚本；

• 100% 自由定制 Chat：不只是改颜色，还能自由组合气泡、思维链、Token 统计等原子组件；

• 把 AI 输出变成“可操作卡片”：比如生图结果带“下载”按钮，数据分析带“导出”选项；

• 开箱即用的后端能力：数据库、文件存储、权限系统全内置，还能对接企业现有系统；

• 一键发布，多端可用：开发环境秒级上线，生产环境支持自定义域名，轻松嵌入钉钉、微信或自有 App。

而这一切的核心，正是 UI 设计器中全新上线的 AI Chat Builder。用它，几分钟完成 AI 应用的搭建与发布。

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

本文将深入解析 AI Chat Builder 三大核心能力：自定义 Chat、自定义 Widget 与多端发布，带您快速掌握 AI 应用搭建的全过程。

自定义 Chat 是 AI Chat Builder 的核心能力，它让你摆脱代码束缚，通过 ChatPro 容器 + 原子化组件的可视化搭建方式，不再局限于“换个颜色、改个头像”的浅层定制，而是实现对对话界面布局、交互逻辑与渲染样式的完全自主控制。

▶ 开箱即用

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

• 欢迎页：助手 Logo、欢迎语及快捷常用语；

• 多模态输入：文本输入（含快捷提示集）、语音输入、文件上传；

• 智能体配置栏：深度思考开关、联网搜索开关;

• 内置角色：内置用户（User）和助手（Assistant）两个角色，其中 Assitant 角色支持 Markdown 流式渲染、显示工具和 MCP 调用、输入和输出 Token 消耗等；

• AI 服务集成：一键创建并绑定阿里云百炼智能体，自动完成参数配置、API-Key 选择与智能体应用选择。

▶ 灵活搭建 Chat 框架

如果说“开箱即用”解决了“从无到有”的问题，那么“灵活搭建”则致力于让您的应用“从能用变得好用”。与其他平台仅提供有限的主题模板不同，Chat Builder 提供的是 100% 可定制的搭建能力，让你能像专业设计师一样，自由定义对话界面的每一处细节。

这一切的核心能力基于 “ChatPro 核心容器 + 原子组件” 得以实现：

1. ChatPro：承载完整对话逻辑与 UI 元素的核心容器，你可以将任意原子化组件组合，完全自主定义 Chat 的 UI 布局与交互逻辑。

2. 原子化组件：AI 专用与通用组件，可任意组合成适应不同业务的交互框架；

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

▪ 基础对话（ChatPro）：核心容器，承载完整的对话交互逻辑与内容；

▪ 对话气泡（Bubble）：消息显示组件，支持打字机效果与流式自然渲染；

▪ 多角色列表（BubbleList）：按不同角色展示内容区的对话列表；

▪ 发送框（Sender）：多模态消息输入组件，可自定义底部交互；

▪ 思维链（ThoughtChain）：可视化展示 AI 推理过程及工具调用链路；

▪ 操作列表（Actions）：消息底部的可选操作集，如“重新发送”“复制”等；

▪ 文件卡片（FileCard）：在对话中直观展示已上传文件的预览与状态；

▪ 会话管理（Conversations）：管理和切换多会话列表，可与基础对话组件联动使用；

▪ Widget 渲染器（WidgetRender）：绑定多个 Widget，消费动态数据并按规则渲染交互组件；

• 通用组件物料（70+），包括表单类、按钮类、展示类、导航类、容器类、图表类等，均可嵌入 ChatPro 容器，进一步拓展 Chat 应用的交互表现力。

▶ 快速集成 AI 服务

基础对话（ChatPro）组件可通过配置 AI 集成操作，直接访问阿里云百炼大模型和智能体应用服务。整个集成过程无需编写代码，三步即可完成。

第一步：创建/选择集成资源

集成资源包括：

• 阿里云百炼大模型：如通义千问系列模型，适用于通用对话、内容生成等场景；

• 阿里云百炼智能体：基于百炼平台开发的、具备工具调用和任务执行能力的智能体应用。

系统会自动拉取账号内可用资源，开发者可直接从下拉列表中选择，无需手动填写模型地址或密钥。

第二步：配置集成操作

集成操作是对某个集成资源的调用封装，在应用中可以直接被 ChatPro 或其他组件使用。当选择阿里云百炼应用集成资源时，会显示适配的专属配置项，例如：

• 可选参数：声明 content 参数；

• 操作类型：调用阿里云百炼应用访问阿里云百炼服务；

• 启用 SSE 响应：开启 SSE 流式开关；

• API-Key：阿里云百炼 API-Key 下拉选择；

• 阿里云百炼应用 ID：阿里云百炼智能体应用下拉选择；

• 提示词：设置为 {{content}}，外部传入的 content 值即为传入智能体应用的输入内容；

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

第三步：绑定并实时验证

在 ChatPro 中绑定阿里云百炼集成操作 → 输入对话内容 → 等待智能体返回流式响应 → 验证成功。设计器提供了极致的 “所见即所得” 搭建体验，无需显式地手动发布，设计器中可实时配置实时生效。

在传统 AI 对话中，模型的输出通常局限于文字或 Markdown 格式。但真实业务场景往往需要用户“点一下”“选一项”“导出文件”——这些操作无法通过纯文本完成。

自定义 Widget 功能，能将 AI 返回的结构化数据（如 JSON），自动渲染为带按钮、表单、图表等元素的可交互卡片，突破纯文本对话的限制。

▶ 什么是 Widget？

Widget 是一个可嵌入对话列表中的独立交互模块，它可以将对话中的结构化数据，映射为可交互的 GUI 组件。在传统业务中，它可能会被称作“对话卡片”或“业务卡片”，但Widget 远不止如此。

Widget的核心特点：

• 独立管理，可复用：每个 Widget 独立定义并管理，可在不同应用场景重复使用；

• 可视化灵活搭建：不仅能展示结果/数据，还可包含交互逻辑、数据请求、数据绑定、业务流程执行，相当于在对话中嵌入一个“小型页面”；

• 通用数据绑定，与平台无关：与任何大模型服务或平台无关，只需输入符合指定格式的数据，即可渲染；

• 绑定到 Widget 渲染器，Widget 不能像普通页面那样单独访问，必须绑定到 Widget 渲染器，根据输入数据和匹配规则进行渲染；

• 对话列表区应用：既可嵌入对话列表，将 AI 返回的文本替换为可操作的 GUI 区块，也可脱离对话流，在 Web 应用的任意位置独立部署。

• 标准化通信机制：与 Widget 渲染器外的 Chat 容器双向通信，可与整个 Web 应用环境进行交互，实现复杂业务流程集成；

▶ 自定义 Widget 搭建流程

自定义 Widget 遵循平台统一的低代码开发范式，开发者可像构建普通 Web 页面一样设计 Widget。搭建特点：

• 独立管理：提供单独的 Widget 编辑模式，支持增删改查全生命周期管理，可在不影响其他应用的情况下专注于单个 Widget 的设计；

• 低代码可视化搭建：与 Web 页面开发体验一致，可视化 UI 设计 → 数据集成 → 数据绑定，支持拖拽式组合组件，实时调整样式与布局；

• 入参设置与调试：Widget 动态消费外部数据进行渲染，可自由定义输入参数，搭建时可配置模拟入参，在没有真实数据传入时也能实现实时预览与调试；

• 事件与通信机制：Widget 可声明可发送的事件类型，方便 Widget 渲染器按定义配置事件处理器，Widget 内可通过触发事件与外部环境交互，例如：通知 Chat 容器更新状态、向 Web 应用发送操作指令。

▶ Widget 渲染机制

Widget 渲染器（WidgetRender）是用于渲染 Widget 的页面组件，相当于 Widget 的运行容器，它能绑定多个 Widget，并根据动态数据源输入与匹配规则，渲染指定的 Widget，同时完成数据传递。

Widget 渲染器的核心能力包括：

• 数据源设置：接受并监听来自外部的数据源（结构化数据）输入；

• Widget 绑定

▪ 可绑定多个 Widget；

▪ 从当前 Web 应用中下拉选择目标 Widget；

▪ 配置显示条件（Widget 匹配规则）；

▪ 配置入参映射（将数据绑定到 Widget 定义的输入参数）；

• 事件处理器（Event Handler）配置

▪ 查看所有已绑定 Widget 声明的事件；

▪ 为这些事件配置对应的处理器，实现 Widget 与应用的通信、交互与联动。

在利用自定义 Chat 和自定义 Widget 完成富交互 AI 应用的搭建后，阿里云百炼 UI 设计器提供便捷的托管与多端发布能力，全面覆盖从开发调试到生产上线的完整流程。

▶ 多环境发布

为满足不同阶段的需求，UI 设计器提供两个发布环境：

• 开发环境

▪ 系统分配默认域名，快速发布用于测试和验证

▪ 发布有效期 24小时，到期自动回收

• 生产环境

▪ 支持用户自定义域名和访问路径

▪ 自定义域名需先备案，再添加到平台绑定

示例应用（生产环境）：

• https://app.mobiapp.cloud/image-creator-assistant（生图助手，PC / H5）

• https://app.mobiapp.cloud/weather-forecast-ssistant（天气预报助手，PC / H5）

▶ 多端适配

基于 UI 设计器开发的 AI 应用本质上是标准的 Web/H5 应用，具备出色的跨端适配能力，可在不同终端灵活集成与访问：

• Web / H5 应用

支持开发、生产双环境发布

可配置身份源，实现业务系统的无缝对接

• 小程序 / 公众号

支持接入钉钉、微信等身份源

可将 Web / H5 页面直接嵌入

• 移动端 App

以 H5 页面嵌入形式集成

平台支持基于 JWT 的身份认证

▶ 即刻开启你的 AI 应用创作之旅

只需简单三步，即可体验阿里云百炼 UI 设计器的强大能力。下面我们以 AI 生图应用为例，带你从零搭建一个具备完整交互能力的智能应用。

1. 进入阿里云百炼 UI 设计器：点击”创建UI”，填写应用名称与描述，并关联你的阿里云百炼 API-Key 与智能体应用。

2. 拖拽设计，实时调试：进入阿里云百炼 UI 设计器画布，从左侧组件库中拖拽“基础对话”“图片展示”“按钮”等组件，自由布局界面。右侧预览区支持实时调试，输入文字即可测试 AI 生图效果。

3. 发布验证：点击“发布到开发环境”，系统自动生成可访问链接。你可将应用分享给同事测试，也可后续部署到生产环境，绑定自定义域名正式上线。

👉 现在就去试试吧！

无论是生图、问答、数据分析，还是智能客服，你都可以在无需编写代码的前提下，快速构建出界面专业、体验流畅的 AI 应用。