背景介绍

随着大模型技术的不断进步，各行各业的应用创新呈现出蓬勃发展的势头。合适的开发工具能够帮助企业更迅速地将模型转化为实际应用，从而加速 AI 的创新进程和价值实现。

开发者在基于百炼搭建智能体应用的过程中，除了智能体本身涉及的工作流及Prompt工程以外，往往还需要解决最终应用上线面向用户的工程化链路，包括面向用户侧的应用前端界面开发，和既有的业务系统或者企业账号系统打通，以独立的Web应用或者是以页面的方式嵌入已有的移动App和小程序中等等。在阿里云上，除了百炼这样的智能体开发平台外，我们也有面向用户端应用的低代码开发平台魔笔，今天我们就一起看看如何通过使用百炼+魔笔的云产品组合的方式快速构建一个端到端的大模型应用，为AI创新提速。

上面这张架构图就是百炼 + 魔笔协作开发大模型应用的示意图，假定基于百炼我们已经完成了智能体应用的开发和调试，接下来基于魔笔，我们能够快速扩展智能体应用的工程完整性，解决智能体升级为端到端应用的最后一公里问题：

• UI开发：魔笔提供丰富的UI组件、应用模板和可视化设计器，可以通过低代码的方式快速生成智能体应用前端界面；
  
• 账号权限：魔笔支持开发者为智能体应用配置自有的账号和用户权限，同时也支持对接钉钉、企微等三方身份源进行应用登录；
  
• 系统集成：魔笔支持完善的集成能力，能够无缝集成各类云产品和企业自有的业务系统，实现智能体与企业IT体系的互联互通；
  
• 多端发布：魔笔支持丰富的应用发布模式，智能体可以独立发布为Web/H5应用，或者以页面方式嵌入已有的Web/H5/移动App/小程序中；
  

接下来，我们就以一个经典的RAG知识问答应用为例，介绍百炼+魔笔协作开发大模型应用的最佳实践。

企业内部 RAG 知识问答应用实践

方案简介

本章节介绍如何通过多端低代码平台魔笔来链接和集成阿里云生态系统中的核心服务——大模型服务平台百炼、云数据库 RDS，快速构建一个生产级别的企业 RAG（检索增强生成）知识问答应用。我们设计的应用具备以下关键功能：

• 智能聊天 UI 界面
  

• 基于 RAG 智能体的用户友好型聊天界面
  
• 会话持久化存储，确保对话连贯性。
  
• 智能文档关联与溯源展示。
  
• 用户反馈机制（赞踩功能），持续优化系统表现。
  

• 数据分析控制台 UI
  

• 深度会话分析，包括对话轮次统计
  
• 用户反馈数据可视化（赞踩统计）
  
• 关键性能指标趋势图表。
  

最后，我们将测试完成的应用将一键发布为独立可访问的 Web PC / H5 应用。

架构简介

本文所涉及的应用及功能架构如下图表所示：

方案实施

智能体开发

RAG 应用的核心是模型服务，首先第一步在百炼构建测试和发布 RAG 智能体应用。我们在百炼平台分别完成创建知识库、文件导入和以及对应的 RAG 应用创建，并进行测试。关于百炼平台 RAG 应用构建的详细步骤，可参考百炼官方的最佳实践文档。其中，在本文的案例中有几个关键的配置步骤需要注意：

• 知识库：在选择知识库的文件数据过程中，可以根据实际的业务场景进行知识库文件的整理和上传，或者可以使用我们在本文中整理的一些测试数据以供完成 RAG 应用的测试和使用。
  

• 溯源信息：在配置 RAG 智能体知识库关联的过程中，需要在「检索配置」中选择展示回答来源，从而在端应用中获取和展示 RAG 智能体返回的溯源信息。
  

在配置完成后我们将测试好的智能体应用发布。至此，我们完成了 RAG 智能体应用的开发，下一步我们将在多端低代码平台魔笔中集成该智能体应用，并围绕其构建生产级别的端到端应用。

集成智能体

本节我们通过多端低代码平台魔笔集成在百炼平台上已经构建好的智能体。集成资源功能是魔笔平台对外部数据库、API、和 AI 等业务资源的统一管理能力。我们将上一节中发布的智能体应用引入应用。首先，我们在魔笔的控制台中创建一个类型为「百炼智能体应用」的集成资源：

在 「API-KEY」的表单项中，我们填入百炼平台的 API-KEY ，我们可以在百炼应用的发布渠道界面中获取到该 API-KEY：

保存之后，我们在魔笔控制台创建一个新的应用，来引用我们刚刚创建的集成资源。首先新建「空白」应用：

集成操作是魔笔平台中使用集成资源的操作单元，我们可以通过集成操作来使用先前创建的智能体应用资源。接下来，我们在页面中创建一个集成操作并绑定我们上一步中创建的集成资源。在集成操作的面板中，我们输入百炼应用的 appId 及测试用的提示词即可在魔笔平台中完成 mock 测试，其中百炼应用的 appId 可以在百炼应用列表中获取：

至此，我们完成了百炼 RAG 智能体应用在魔笔应用中的集成引用，下一步我们将基于集成操作和魔笔平台预制的系统组件来设计和搭建一个聊天前端 UI 界面。

ChatUI 定制

魔笔平台提供的可视化搭建设计器，可以轻轻松松快速构建简洁的前端 UI。我们将页面类型切换为移动端模式，并在设计器中直接拖入一个聊天组件：

接下来，我们稍微调整一下聊天组件的大小，以让其充满整个屏幕：我们将组件弹性尺寸宽度和高度均调整至自定义 CSS，并分别赋予 100vw 和 100vh

然后，我们将上一步中创建的集成操作与组件进行关联，分别需要完成以下两个步骤：

• 在集成操作的「提示词」一栏中引用聊天组件的最新输入内容，假设我们页面中的聊天组件的名称为 chat1，如若想当前用户的最新输入，我们可以使用组件内部的属性 currentMessage.content ，我们将 chat1.currentMessage.content填入「提示词」（关于各类组件所开放的属性和API，可以参考魔笔相关文档）。
  

• 在聊天组件的「AI 集成操作」选项中选择对应的集成操作名称并完成绑定。
  

完成关联后，我们此时可以直接在聊天组件的输入框中输入内容来进行效果测试：

接下来，我们可以进行一些视觉效果的优化，我们参考魔笔官方文档中「如何给RAG应用添加文档链接引用」的教程为刚刚的应用添加文档溯源效果。完成搭建后，我们测试一下文档溯源和优化显示的效果，可以看到我们的聊天界面已经可以正确显示引用角标和引用来源了。

至此一个简洁、美观的 RAG 应用聊天界面就搭建完毕了。除了基本的功能以外，魔笔的聊天组件还提供了诸如欢迎语、快捷回复、提问自动补全等功能，可根据实际业务需求来进行搭建。在下一节中我们将通过云数据库 RDS 来实现会话数据的持久化库表建设并借助魔笔集成能力将其挂载到应用之中。

RDS 初始化和集成

企业级 RAG 应用中，聊天会话数据数据的持久化存储和分析是必不可少的一环。因此我们借助阿里云 RDS 完成后台数据建模，并借助魔笔强大的资源集成能力，将数据库“挂载”到我们搭建的应用上。首先我们需要开通阿里云 RDS 服务，并创建一个公网可访问的数据库，具体流程可参考RDS 官方文档。并记录云数据库的 host、端口号以及具有权限的账号密码。

在数据库中，我们建立如下两张表，分别用于存储用户会话的数据和用户赞踩行为记录。其中 conversation 表我们用于记录用户会话的数据，字段描述如下：

behavior 表我们用于记录用户点赞点踩行为的数据，字段描述如下：

参考的 SQL DDL 如下：

CREATE TABLE conversation (
    id VARCHAR(255) PRIMARY KEY,
    parentId VARCHAR(255),
    createAt BIGINT,
    updateAt BIGINT,
    userId VARCHAR(255),
    role VARCHAR(50),
    content TEXT
);
CREATE TABLE behavior (
    id INT AUTO_INCREMENT PRIMARY KEY,
    conversation_id VARCHAR(255),
    user_id VARCHAR(255),
    behavior INT,
    FOREIGN KEY (conversation_id) REFERENCES conversation(id)
);

接着，我们在魔笔的控制台中创建一个类型为「MySQL」的集成资源，并在配置表单中填写我们先前创建的 RDS 数据库的连接信息，注意这里的 Host 字段我们需要填写 RDS 中数据库实例的外网连接端口。关于 RDS 中如何查看端口、Host 及账号访问信息，可分别参考 RDS 官方文档中对应的数据库连接教程与账号创建教程。此处也可以选择「从当前云账号录入」的选项，来绑定当前云账号下的 RDS 资源。

‼️如果您使用的是 RDS 数据库实例，请务必在 Host 中填写外网地址，如何获取外网地址请参考申请或释放外网地址。

接下来，我们在页面中创建一个集成操作并绑定我们上一步中创建的集成资源。在集成操作的面板中，我们输入用于测试用的 SQL 语句即可在魔笔平台中测试数据库访问结果。

至此，我们完成了云数据库 RDS 在魔笔应用中的集成引用，下一步我们将基于该数据库类型的集成操作对先前搭建的聊天界面进行更新，引入持久化会话存储和赞踩反馈功能。

会话数据 & 行为持久化

本节我们继续优化聊天界面，为其增加会话存储逻辑和赞踩功能反馈。首先，我们针对上一节创建的数据库表，创建两个针对会话的集成操作，分别代表「拉取历史会话列表」和「插入会话」（即存储会话）功能，参考的 SQL 语句如下：

在这里，我们在拉取会话列表时可以根据业务限定拉取历史会话窗口大小，本文以拉取最近 10 条数据为例：

SELECT * FROM conversation ORDER BY createAt LIMIT 10;

同时，我们将「拉取历史会话列表」集成操作的触发行为更改为「自动运行」。设置为自动运行的数据库集成操作，初次加载和集成操作内部的依赖引用项变更时会自动触发数据库访问的调用。

在「插入会话」的集成操作中，我们在集成操作的 SQL 面板中引用页面组件数据来完成最新会话数据的插入逻辑，并在 SQL 语句中以{{ param1 }}模板表达式形式使用它们，其中用户 ID 我们可以通过魔笔 API 中的mobi.currentUser.id获取，而聊天组件中最新的发送或回答内容，我们使用 chat1.context[chat1.context.length - 1] 来获取，context 代表一个聊天组件中的所有会话内容，每项数据都包含 id、parentId、createAt、updateAt、role 和 centent 数据:

INSERT INTO conversation 
  (id, parentId, createAt, updateAt, userId, role, content)
VALUES (
   {{chat1.context[chat1.context.length - 1].id}}, 
   {{chat1.context[chat1.context.length - 1].parentId || ''}}, 
   {{chat1.context[chat1.context.length - 1].createAt}}, 
   {{chat1.context[chat1.context.length - 1].updateAt}}, 
   {{mobi.currentUser.id}}, 
   {{chat1.context[chat1.context.length - 1].role}}, 
   {{chat1.context[chat1.context.length - 1].content}}
  )

同样的，我们基于 behavior 创建一个用于插入赞踩行为记录的集成操作。对于赞踩记录的功能来说，我们需要为集成操作传入「赞踩类型」和「赞踩的目标」来实现业务功能。在魔笔集成操作的设计上，可选参数是集成操作的一个关键能力，类似代码函数中的形式参数，我们可以在集成操作中声明可选参数并在集成操作的其他表单区域（如 SQL）中使用它们，在页面调用其他位置调用该集成操作时，我们可以通过传递实际参数的形式（通过为集成操作 API中 action.trigger(params) 方法或使用事件处理器）来填充这些可选参数。

因此在这里，我们分别将 behavior 库表所依赖的行为字段和会话 ID 定义为可选参数，并在 SQL 语句中以{{ param1 }}模板的形式使用它们：

INSERT INTO behavior (user_id,conversation_id, behavior)
VALUES ({{mobi.currentUser.id}}, {{conversation_id}}, {{behavior}})

然后，我们将上一步中创建的集成操作与组件进行关联，来完成持久化数据的写入：

首先需要分别在聊天会话发送完成和回答完成阶段，触发「插入会话」的集成操作，将一轮对话会话数据落库。主要搭建思路如下，我们需要分别在「发送内容」和「回答完成」两个事件阶段来完成集成操作的触发，因此我们可以采取组件提供的事件响应机制来完成这两个事件处理器的绑定

接下来，我们为应用添加历史数据加载的能力，在聊天组件的数据源部分绑定「拉取历史会话」的集成操作数据，主要搭建思路如下，我们需要给聊天组件绑定初始化数据，在这里我们直接在组件的「信息」属性中使用集成操作的 APIaction2.data来获取集成操作的结果数据（「信息」属性即代表聊天组件的初始化聊天信息）：

最后，我们自定义聊天组件的操作栏，分别触发点赞和点踩的集成操作，操作拦是聊天组件中每一个会话用于相应用户操作行为的区域，可以在这里添加诸如「复制文本」、「重复提问」或「自定义逻辑」等响应行为。我们在聊天组件的「操作栏」中分别添加用于点赞和点踩的操作项，在配置适合的图标和文案后，我们将操作类型选为自定义并添加事件处理器。在事件处理器中，我们执行先前创建的赞踩逻辑的集成操作，具体配置可参考下图搭建逻辑：

{
  conversation_id: currentItem.id,
  behavior: 1, // 1 代表点赞
}

{
  conversation_id: currentItem.id,
  behavior: 0 // 0 代表点踩
}

至此，我们完成了会话数据的持久化逻辑，再次重新进入页面时将可以看到历史的聊天数据。

数据分析后台搭建

除了面向 C 端的聊天界面，魔笔基于 Antd 内置了丰富的企业中后台场景精美组件，我们根据上一步中构建的集成操作，为其构建一个简洁美观的后台分析页面。针对面向 PC 端中后台的页面，可参考如下的导航布局 + 内容的形式：

首先我们完成整体页面 UI 布局的搭建，在魔笔平台中，我们可以轻松地借助布局搭建能力来完成简介的上下或左右布局页面的初始设计。本例中，我们使用的是上下布局的设计。因此，我们新建一个页面，并添加一个布局。

接着我们可以删除本例中不需要的左侧布局，然后我们退出布局编辑态后在页面中引用这个布局，在目标页面周边的空白区域点击后，我们可以在右侧的属性设置器中找到「页面布局」下拉选项：

接下来，我们进行内容区域的搭建，可参考如下较为简单、紧凑中后台页面设计范式：

然后，我们在页面的内容区域的相应位置直接拖入用于概览统计的「统计」组件、用于可视化报表的「折线图』组件，以及承载数据明细的「表格」组件，并适当拖拽调节宽高、位置、显示文案等样式：

接下来，我们来获取后台页面的数据内容，和上一节类似，我们针对数据库创建四个集成操作，分别代表「统计对话轮次」、「统计用户数」、「按日聚类对话信息」以及「落库对话数据 & 其赞踩状态」。本文将可供参考的 SQL 在下表中列举，具体搭建行为不再赘述：

SELECT COUNT(DISTINCT parentId) AS conversation_rounds
FROM conversation
WHERE parentId IS NOT NULL AND parentId != '';

SELECT COUNT(DISTINCT userId) AS unique_users
FROM conversation
WHERE userId IS NOT NULL AND userId != '';

SELECT 
    DATE_FORMAT(FROM_UNIXTIME(createAt / 1000), '%Y-%m-%d') AS date,
    COUNT(DISTINCT CASE WHEN parentId IS NOT NULL AND parentId != '' THEN parentId END) AS count
FROM 
    conversation
GROUP BY 
    DATE_FORMAT(FROM_UNIXTIME(createAt / 1000), '%Y-%m-%d')
ORDER BY 
    date;

SELECT 
    c.id,
    c.parentId,
    c.createAt,
    c.updateAt,
    c.userId,
    c.role,
    c.content,
    b.behavior,
    CASE 
        WHEN b.behavior = 1 THEN '赞'
        WHEN b.behavior = 0 THEN '踩'
        ELSE '无评价'
    END AS behavior_type
FROM 
    conversation c
LEFT JOIN 
    behavior b ON c.id = b.conversation_id AND c.userId = b.user_id
ORDER BY 
    c.createAt DESC, c.id;

然后，我们分别为页面的四个组件绑定这些集成操作的数据、修改显示文案，在 Table 组件中我们可以触发「数据列」旁的刷新按钮自动根据数据生成表格视图：

其中，四个集成操作及其消费组件的关键的配置截图如下：

最后，我们稍微调整样式后（如调整表格的列配置、增加容器优化布局效果、增加标题显示等），即可得到一个简洁干练的中后台报表页面：

发布应用和试用链接

魔笔提供多种发布环境以支持应用完整性地通过测试、灰度和上线的流程。在正式发布到生产环境之前，您可以通过发布应用到开发环境来快速测试应用。在魔笔设计器中选择右上角的「发布」按钮并填写信息进行应用的发布，发布成功后可以获取到应用的访问地址，您可以点击链接来体验试用 H5 聊天页面以及其管理后台。

未来扩展

• 全渠道发布
  

除了发布为独立的 Web 应用，魔笔也支持被集成模式，发布页面嵌入到已有的 Web、移动App、小程序中。具体集成方案可以参考魔笔文档中全渠道集成的最佳实践文章。

• 权限管控
  

在魔笔平台中，权限组是和角色类似的概念，开发者可以通过权限组来管理用户对当前空间内应用、集成和集成流的具体访问权限。一般地，一个权限组会包含多个用户，一个用户也可能归属于多个权限组，用户和权限组是多对多的关系。应用搭建完成和基本测试后，向上汇报、分享体验等场景需要发布临时测试账号。为防止重要数据泄露等方面，不同页面或资源针对不同测试用户，我们可以使用魔笔权限管控能力来轻松做到资源细粒度的权限控制。

• 终端用户接入与身份源
  

在业务规模增长后，根据发布渠道的不同会出现多种可能的身份源。魔笔用户中心提供了应用身份源统一管理的能力，除本文例子中的匿名登录以外，通关身份源管理和登录配置，我们可以轻松做到阿里云账号登录、测试账号分享、钉钉企业应用免登、企业微信集成以及企业自定义 iDaaS 身份源登录等高频终端用户访问接入场景。

延伸阅读

除了 RAG 知识问答应用以外，在魔笔平台我们也提供了其他大模型应用模板，方便开发者开箱即用，定制扩展，相关模板链接如下：

智能客服：https://mobinext.console.aliyun.com/{您的空间 id}/templates/978b5c86-3e3a-47e2-a20b-4c4d4c46acd2

个人云助手：https://mobinext.console.aliyun.com/{您的空间 id}/templates/2fc4c9cb-cee2-45fd-a858-f6592c5a151e

企业知识问答：https://mobinext.console.aliyun.com/{您的空间 id}/templates/74c01018-92a2-46af-818c-ed0709440302

AI内容创作：https://mobinext.console.aliyun.com/{您的空间 id}/templates/0c32b297-eec7-411b-b083-33a689561909

App Copilot：https://mobinext.console.aliyun.com/{您的空间 id}/templates/4c892729-9950-4353-8146-33542b869e01