今天用阿里云百炼平台搭建智能体,发现原来官方又更新了。
相较于字节,阿里太低调了,每次都是默默更新。 这次更新的功能是 UI设计器。 一个可以让人们通过拖拉拽的方式来设计自己的系统界面的工具,如果你对扣子比较了解,就相当于搭建扣子应用,但是组件更为丰富。

✨ 产品优势
阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的核心能力:
-
• 无需编码: UI 设计器提供可视化编辑器。您可以通过拖拽组件、配置路由和布局,快速构建页面,无需编码。 -
• 服务集成: 支持集成多种外部资源,如百炼智能体、大模型、数据库和 HTTP 服务,灵活扩展应用能力。 -
• 权限管理: 内置测试账号体系,支持钉钉、企业微信等一键登录。兼容 OIDC、OAuth2.0 等标准协议,并可通过权限组管理访问权限。 -
• 一键发布: 默认支持一键发布至开发环境,通过内置域名即可访问。生产环境发布支持绑定自定义域名。
🚀 支持范围
-
• UI设计器支持百炼智能体应用、工作流应用和智能体编排应用。 -
• UI设计器支持Web PC和H5端的应用界面开发。 -
• UI设计器需要与百炼应用在同一业务空间。
如何使用UI设计器?
笨笨与用户的对话
你好!这个UI设计器看起来很不错,能介绍一下主要功能吗?
您好!请跟着我一起往下看吧。
如下图,想给自己的智能体制作一套漂亮的衣服,整体流程如下:

创建智能体
这里默认大家登陆过阿里云百炼平台,如果没有可以查看这篇文章: 阿里云让MCP不再有门槛 10分钟 手把手教你搭建MCP智能体
本篇文章主要说明如何使用UI设计器功能,所以就开发一个简单AI智能体做为演示。
首先进入阿里云百炼的应用创建界面,如下图进行智能体的创建。

智能体应用搭建界面如下,整体功能和其他平台类似,如果你用其他平台开发过智能体,那么一定不会觉得陌生。

接下来输入提示词,之后还有插件、MCP等等其他功能,这里我创建了一个儿童英语陪练的智能体,只使用了提示词。
# 角色
你是一位富有耐心和热情的小学英语教师,擅长通过有趣的方式激发孩子们对英语学习的兴趣。你的目标是帮助孩子们在轻松愉快的氛围中提高英语听说能力,并鼓励他们大胆地用英语表达自己。
## 技能
### 技能 1: 激发英语学习兴趣
- 采用生动有趣的方法吸引孩子们的注意力,使他们对英语学习产生浓厚的兴趣。
- 通过游戏、歌曲、故事等互动活动,让孩子们在玩中学,学中玩。
### 抃能 2: 引导孩子大胆表达
- 鼓励孩子们用英语进行日常对话,培养他们的口语表达能力。
- 通过角色扮演、小组讨论等形式,增强孩子们的语言运用能力和自信心。
### 技能 3: 中英文结合教学
- 使用中文解释单词和句子的意思,确保孩子们能够理解所学内容。
- 用标准的英语发音教孩子们读单词和句子,帮助他们掌握正确的语音语调。
## 限制条件
- 只讨论与小学英语教学相关的内容。
- 教学过程中始终以激发孩子的学习兴趣为首要目标。
- 在讲解新词汇或句子时,先用中文解释含义,再用英文教授发音。
- 保持积极乐观的态度,鼓励孩子们大胆开口说英语。
- 确保所有教学内容适合小学生的认知水平和语言能力。
智能体测试通过后,点击右上角的发布。
获取API_KEY

创建UI
在阿里云百炼平台的应用tab中,左侧有一个UI设计器,点击创建UI按钮。

首先会要求你给这个UI起一个名字,上次个图标(非必填)

之后会进入创建界面,这里官方给出了两个模板,一个是对话类型的,一个是知识库类型,如果觉得和自己的设计不符合,也可以选择从空白模板搭建。

因为刚开始接触,先从最简单的开始大家,这里我选择AI基础对话模板,下一步就是要求填写刚才获取的api_key等信息。
技巧
技巧: 这里说明下,不用你去记住创建的key,只要你创建过,在这步就会有下拉框让你选择。
完成API_KEY和APP_ID的配置后,点击确定就进入了UI设计器的编辑界面。 因为刚才选择了对话模板,所以进入编辑页面后,已经预制了一个AI聊天的组件,此时你与它沟通已经在使用你创建的智能体应用了。你需要做的就是修改欢迎语,右侧有很多调整界面样式的参数可供配置。
发布
如果调整好以后,就可以点击右上角的发布按钮了,这里可以选择是发布为开发环境,还是生成环境(生成环境需要单独收费)

上面的例子很简单,只是带大家先跑通一下流程
接下来,给大家分享下自定义UI界面时该如何操作。
这里要和大家说明一下,UI设计器不一定要绑定智能体使用,它本身也是一个单独的产品。可以直接绑定大模型。
在模板市场里有很多可供学习的模板

由于功能太多了,这里演示不全,大家可以查看官方文档,里面有样例和每个组件的使用教程文档地址

这里给大家介绍一个讨巧的办法,用AI生成页面设计。进入UI设计器,选择页面&布局功能,点击AI设计生成页面。




今天就分享到这里,如果你也觉得这个工具好用,别忘了点个赞、转个发,让你的朋友圈也卷起来~