阿里云百炼UI设计器提供可视化的应用开发环境,支持通过拖放组件构建应用界面,并发布为网页UI应用。
产品优势
阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的能力,具备以下核心优势:
低代码:UI 设计器提供可视化编辑器,支持通过拖放组件、配置路由和布局,快速构建页面。
服务集成:支持集成百炼智能体、大模型、数据库和 HTTP 服务等多种资源,灵活扩展应用能力。
权限管理:内置测试账号体系,支持钉钉、企业微信等一键登录。兼容 OIDC、OAuth 2.0 等标准协议,并可通过权限组管理访问权限。
一键发布:默认支持免费发布至开发环境,通过内置域名即可访问。生产环境发布支持绑定自定义域名。
UI设计流程
准备工作
集成AI对话能力,需要创建并发布百炼智能体应用或工作流应用,并获取用于调用阿里云百炼服务的API Key。
百炼应用、API Key和UI设计需要归属于同一业务空间。
步骤一:创建UI
创建UI旨在生成初始页面结构,作为后续添加组件和布局设计的基础。
选择UI模板
前往UI设计器页面,单击创建UI,在左侧选择UI模板。
阿里云百炼平台提供四种预置模板(智能出行助手、智能体门户、AI基础对话、企业AI知识库Lite)及空白模板。预置模板包含预设组件和界面,支持直接修改或二次开发,空白模板则需要从零开始设计。
以下以企业AI知识库Lite模板为例进行说明。
填写基础信息
应用名称及应用描述:自定义填写,建议填写有意义的名称与描述,以便识别用途。
选择API-KEY:选择百炼API Key。
选择应用-智能对话:选择已发布的百炼应用。
上传图标(可选):上传自有图标。
如果无法选择API Key及百炼应用,请确认您创建UI的业务空间是否与所需的API Key及应用位于同一业务空间。
配置数据库表映射
部分UI模板自带用于存储运行时数据的数据库表(如
kb_chat_list
会话记录),其结构固定且无法修改,可单击模板中数据库表名称列的图标查看。
配置映射时,指定库表名称即可。若该表在数据库中不存在,系统将按模板结构自动创建;若存在同名表,则直接使用并保留已有数据。
注意:使用已有表时,务必确保其结构与模板内置表完全一致,否则可能导致运行时错误。
UI创建完成后,可在数据库中查看表详情。若表中无数据,通常是因为没有进行相关操作。例如,
kb_chat_list
表在用户发起问答后才会生成记录。
步骤二:编辑UI
通过拖放组件来搭建页面。左侧的组件面板中提供各类UI元素,包括按钮、输入框、展示、导航栏等。将所需页面组件添加到页面中,根据业务需求调整其位置和样式,完成页面搭建。
如果需要使用自定义的图片或文件,可在搭建过程中随时上传,或可提前在文件页面上传。上传的文件将保存在文件页面,详情请参见UI应用数据。
步骤三:发布与分享
配置访问权限(可选)
UI应用发布后,默认持有链接的阿里云用户可访问。也可通过设定访问权限,允许匿名用户访问,在会话页进行知识问答,同时限制其访问管理后台。
在UI设计器的左下角单击
图标,在登录配置中打开允许匿名访问开关,并单击匿名用户权限组配置。
选择环境,在应用访问权限页签中,勾选已经搭建的UI,单击权限设置。
选择对用户开放的页面,单击确定。
退出管理员账号,打开UI地址,验证权限配置是否生效。
计费说明
UI设计器功能本身不计费,但使用过程中可能涉及以下费用:
实践教程
更多UI设计的使用场景,包括创建AI知识库、智能客服、在应用中增加 AI 助手等,请参见实践教程。
常见问题
在UI设计器页面编辑或设置UI时,提示“当前应用正在编辑中”应该怎么处理?
这可能是因为当前UI已在其他窗口中打开,关闭后即可重新编辑,也可点击获取编辑权限强制关闭其他已打开窗口。