Skip to content

使用对话流搭建低代码应用

随着人工智能技术的不断进步,AI 助手开始越来越受欢迎,它们基于大模型的文本生成能力,用户可以通过自然语言与 AI 助手进行交流。对话式 AI 助手也可以集成到各种社交软件、应用程序中,提供给更多平台的用户使用。

本教程详细指导你如何在 AI 编程中基于对话流开发一个移动端 AI 助手,并通过当前平台的发布入口生成可交付版本。

AI 助手介绍

AI 助手利用大语言模型强大的文本生成能力,在对话过程中扮演助手的角色回答用户问题。AI 助手能够理解和回应用户的指令,提供信息查询、知识问答等多种服务。

步骤一:设计 AI 助手功能

在开始开发前,你需要设计 AI 助手的功能及对应的用户界面。

通常情况下,AI 助手的核心功能是通过大语言模型回答用户的问题,且 AI 助手的界面应是类似通讯软件的对话式页面。此场景可以通过一个包含大模型节点的对话流实现。

完成主体功能设计和规划后,就可以开始搭建低代码应用了。

步骤二:创建低代码应用

首先,你需要创建一个低代码应用。

低代码应用支持使用工作流来完成复杂的业务逻辑编排,也支持使用数据库、知识库、插件等资源实现与本地数据或线上数据的交互。此外,低代码应用支持通过拖拉拽的方式搭建用户界面,并且能够实现与业务逻辑的联动。

参考以下操作,创建低代码应用。

  1. 登录 AI 编程并切换到目标工作空间。
  2. 在左侧导航栏中单击新建项目
  3. 低代码模式区域单击低代码应用
  4. 填写应用名称和描述,按需设置图标,然后单击确认

进入低代码应用创建流程

填写低代码应用信息

  • 应用创建成功后,你会直接进入到应用的集成开发环境 (IDE)。

步骤三:编排业务逻辑

创建完低代码应用项目后,你可以开始进行业务逻辑编排了。AI 编程提供了大模型、代码、意图识别、知识库写入与检索等丰富的工作流节点,以满足复杂的业务场景需求。此外,你还可以通过使用变量、插件、知识库等方式与你的本地数据和线上数据进行集成。

本教程中的 AI 助手应用,主要使用大模型实现对话交互,所以只需要创建一个包含大模型节点的对话流即可。

业务逻辑页面,找到工作流,然后单击 + > 新建对话流

输入对话流名称和描述,然后单击确认

  • AI 编程默认创建一个同名的会话,并为对话流绑定这个会话。对话流运行过程中产生的消息都会记录到这个会话中,大模型会参考会话中记录的历史消息,生成适合当前场景的回复。会话中的消息是用户的个人数据,用户之间的会话消息是相互隔离的,每个用户只能看到本人发起的对话数据。会话管理说明,请参考管理低代码应用会话。

在工作流画布,单击开始节点的连接线或画布下方的添加节点按钮,然后选择大模型节点。

将开始节点、大模型节点和结束节点按顺序连接起来。

单击开始节点进行配置。开始节点用于设定启动对话流需要的信息。

  • 本场景中,用户需要提供要咨询的问题。这些内容默认通过开始节点的 USER_INPUT 参数传入,无需增加其他输入参数。为USER_INPUT 参数指定一个默认值,例如“你好”。其他参数维持默认配置即可。

单击大模型节点进行配置。大模型节点用于接收用户问题,并生成对应的回复。

按下表完成关键配置,其他选项可先保持默认值。

配置项配置方法
输入将默认参数 input 绑定到开始节点的 USER_INPUT
对话历史开启后,模型会读取当前会话中近期消息以保持上下文
系统提示词说明助手角色、能力边界、回答风格和禁止事项
用户提示词引用 {{input}},把本轮用户输入传给模型

系统提示词示例:

text
# 角色
你是一个全能的 AI 助手,能够准确回答用户问题并给出必要解释。

## 要求
1. 先理解问题,再给出清晰、简洁的回答。
2. 不确定时明确说明,不编造事实。
3. 需要时提供可执行的步骤或示例。

引用变量后,编辑器中的变量会以特殊样式显示。如果变量列表中没有 USER_INPUT,请返回开始节点检查参数配置。

选择结束节点进行配置。结束节点用于输出对话流的最终结果。

单击结束节点,然后选择返回文本

选择大模型节点的输出结果作为输出参数。

回答内容文本框中输入{{output}},使用大模型的输出内容作为最终的回复。

开启流式输出,实现打字机一样的输出效果。

  • 至此,你已经完成整个对话流的搭建。

设置 AI 角色信息。

单击角色打开角色配置,并完成以下信息:

配置说明示例
角色名称显示在对话界面中的助手名称AI 助手
角色描述向用户说明角色背景和能力提供信息查询和建议
角色头像对话界面展示的头像按业务风格上传
开场白首次进入会话时展示的欢迎语你好!我是你的专属 AI 助手。
预置问题引导用户快速发起对话推荐一本好书;给我一份新疆行程建议

为了保证业务逻辑实现符合预期,需试运行对话流。

单击试运行

填写对话流入参配置。

  • 根据页面提示选择一个会话。会话用于存储对话流产生的消息,包括用户的提问和模型的回复。下次执行时,对话流可以从会话中读取到之前存储的消息记录。在本教程中我们在创建对话流的同时创建了一个同名会话,这个同名会话会作为对话流的默认会话。

  • 单击保存并开始对话调试

在输入框中输入一段内容,并按回车键发送。

  • 我们在对话流的开始节点设置了 USER_INPUT 参数的默认值“你好”,这个默认值会自动填写在输入框,作为你的输入参考。

AI 编程会自动运行对话流,并在试运行面板中展示你的输入和对话流执行的返回结果。

  • 对话流的试运行面板默认为对话式,类似智能体的调试区域,展示每一次试运行此工作流时用户和模型的对话交互过程。

  • 在完成业务逻辑搭建并通过试运行后,你就可以开始用户界面搭建了。

步骤四:搭建用户界面

AI 编程提供了可视化的用户界面搭建能力,你可以通过拖拉拽的方式搭建一个用户界面,无需编写一行代码。

参考以下操作,使用独立页面搭建 AI 助手应用的用户界面:

  1. 在低代码应用 IDE 顶部单击 用户界面
  2. 首次进入时选择 小程序和 H5,然后单击 开始搭建
  3. 单击画布底部的 新建页面,为 AI 对话组件创建一个独立页面。
  4. 选中新页面,在右侧页面属性中关闭不需要的底部导航栏。
  5. 在左侧 组件 面板中展开 AI 组件,找到 AI 对话
  6. 单击或拖动 AI 对话到刚创建的空白页面。该页面不要再加入其他组件。
  7. 切换到 结构 面板,确认页面下只有一个 Chat1 图层。
  8. 选中 Chat1,在右侧 属性面板的 对话流字段中选择步骤三创建的 ai_assistant
  9. 检查文件上传按钮、清除会话按钮和消息输入区域是否按需开启。
  10. 取消组件选中状态,检查独立页面中的实际显示效果。

将 AI 对话组件拖入移动端页面并配置属性

AI 对话组件独立页面实际效果

步骤五:效果测试

完成上述所有配置后,单击预览查看整体功能并进行体验。

页面会展示 AI 助手在移动端的页面预览效果,你可以在页面下方的输入框中输入一段文字,并按回车键发送消息。AI 助手会立即回复你的问题。

测试时至少连续发送两轮消息,确认对话流能够读取当前输入、正常返回内容,并按会话保存上下文。

对话流节点与连线

查看多轮对话实际结果

步骤六:发布应用

完成测试后,可以将应用发布为企业项目或模板;页面列出的其他渠道是否可用取决于应用类型和平台授权。

  1. 在应用编辑器右上角单击发布,再单击去发布
  2. 填写发布版本和发布描述。
  3. 按需上传展示截图。
  4. 选择当前可用的发布渠道并设置分类。
  5. 检查配置后单击右上角发布

配置应用发布信息和渠道

相关文档

  • 编排业务逻辑

  • 用户界面编辑器概述

  • 低代码工作流介绍

  • 了解项目发布

新建对话流入口

会话管理