本教程将向您展示如何使用微搭低代码，快速搭建一个基于 GPT 的聊天 Web 应用或小程序，跟朋友分享搭建的 AI 应用一起体验 GPT 技术带来的便捷。
1. 准备工作
在开始搭建聊天机器人之前，您需要做以下准备：
一个 GPT 服务的 API 接口：可以使用腾讯 AI、文心一言、科大讯飞等 AI 服务提供商均可。本教程为方便演示，使用了一个模拟的 API 接口，可按需替换为上述正式的 GPT 接口。
开通微信小程序（可选）：如果没有微信小程序账号，可在微搭控制台直接 申请注册，或者也可以直接发布为 H5 网页应用。
2. 搭建 ChatBot 聊天应用
首先，一个常见的聊天对话机器人应用预览界面，如下图所示：
通过应用界面可以看到，它主要由如下几个部分组成：
一个对话聊天界面
一个 API 数据查询接口
界面 UI 与后端数据的联动渲染
现在，就参照上面的几个模块，分5个步骤来依次拆解和搭建：
步骤1：对应用界面进行组件和样式配置
1. 我们先拖入一个滚动容器和一个普通容器，一个用来展示聊天的上下文对话，一个用来展示输入框和发送按钮。然后依次拖入图中大纲树所示的组件，组件相应的层级关系可以参考下图中的大纲树结构。
2. 接下来针对上述组件分别进行样式的配置，我们默认使用样式面板的弹性（Flex）布局，包含接收消息和发送消息两个普通容器，可以分别选择样式面板中的弹性布局中的左对齐（接收消息）和右对齐（发送消息），如上图所示。
3. 接着可以分别配置图片和文本两个组件的高度和宽度大小以及内外间距，以达到想要的视觉效果，文本组件的参考样式配置如下。
4. 完成聊天上下文对话框的样式配置之后，可以进行底部的输入框和按钮容器的样式配置，样式配置方式与发送消息容器类似，可使用弹性布局并选择左对齐的方式布局，由于底部容器是固定位置的，故需要额外配置一下定位属性，参考如下：
5. 对容器内的多行输入组件和按钮组件分别进行配置，两个组件的宽度可分别设置为70%和30%，参考如下：
6. 最后，如果针对小程序希望设置其顶部导航栏的背景和标题颜色等，可在大纲树中选中页面根节点，在右侧属性区进行配置，参考如下：
以上，通过进一步按需微调一些样式细节如组件背景色以及间距等后，即可达到上文提到的应用界面效果。整体页面配置过程完全可视化操作，不需要了解代码。如果对样式配置不是很熟悉的朋友，请参见微搭的基础 视频教程 来学习。
步骤2：配置数据变量和数据源 API
下面开始进行数据的绑定和数据源的配置：
数据绑定
1. 新建一个数组对象的自定义变量 chatList，用于存储聊天记录。
2. 配置一个变量，如命名为 chatList 聊天记录这么一个变量，一个对象数组，默认值为如下所示，当然您也可以基于这个结构任意修改。
[{"res": "你好，欢迎体验ChatGPT聊天机器人，你可以直接输入你感兴趣的任何问题向我提问","req": "红孩儿是牛魔王的亲儿子吗？","index": 1},{"res": "不是，红孩儿是牛魔王的养子。据西游记中的记载，牛魔王是一个孤独的怪物，他在深山里住了很久，没有子女，却有一个养子——红孩儿，红孩儿的父母去世时，牛魔王便收养了他。","req": "那谁教他的三味真火","index": 2}]
3. 接着把这个数组变量的初始值跟我们的这个页面的内容分别进行绑定。首先我们选择大纲树中的循环展示组件，在循环展示组件的数据属性配置为刚新建的数组变量 
$w.page.dataset.state.chatList。
$w.item_repeater1.req，对应接收消息下的文本组件则绑定属性 $w.item_repeater1.res，如下图所示：
配置一个数据源 APIs（用于请求 GPT 接口）
API 的配置相对比较简单，主要参考 AI 服务商的 API 文档。此处为方便演示，我们使用 Postman 提供的 echo 测试接口，该 API 接口对应的参数配置参考如下：
{"args": {},"data": {"text":"AI回复: 这里是示例 ",},"form": {},"files": {},"url":"https://xxxx-echo.com/post",}
步骤3：给发送按钮绑定请求事件
我们在步骤1中已经在页面中放置了多行输入框、按钮和文本展示等组件。接下来，我们需要给输入框配置相关的事件响应逻辑，来获取用户输入的消息内容，首先新建一个自定义变量 
$page.dataset.state.text。
$page.dataset.state.text，参考的配置如下：
$page.dataset.state.chatList 中，如下所示：
[...$page.dataset.state.chatList, {req: $page.dataset.state.text}]
然后，给按钮组件绑定事件来处理输入框中用户发送的消息，选择按钮组件，在右侧事件面板中配置如下逻辑，即点击按钮时触发 API 请求，并将获取到的 API 返回结果渲染在页面中，参考配置如下：
步骤4：将API返回数据与在页面中进行渲染展示
将调用 API 成功返回值用变量赋值方法加入到 chatList 数组中。
ChatList 变量进行解构后再赋值，图中表达式参考如下：[...$page.dataset.state.chatList, {res: event.detail.data.text }]
通过新建一个 
$w.page.dataset.state.loading 变量来控制 API 的加载状态。
通过新建一个 
$w.page.dataset.state.scrollTop 变量，每次消息接收/发送成功时赋值一个较大随机数如下图所示，来控制滚动容器确保在每次有新消息时，滚动容器能自动滑动到页面底部。
别忘了将变量 
$w.page.dataset.state.scrollTop 绑定到滚动容器组件的竖向滚动条位置的属性值上，如下图所示。
步骤5：完成开发，进行应用发布
前端界面和后端数据逻辑都配置开发完成后，可在应用编辑器的右上角单击发布，可以选择发布到已绑定的小程序，或者直接发布移动端的 H5 应用，如下所示：
3. 进一步完善：记录历史聊天记录
基于上述步骤搭建完聊天机器人应用后，您还可以进一步完善它的功能。例如，可以在应用中添加聊天记录功能，让用户可以查看历史的聊天记录。这个过程相对比较简单，步骤如下：
1. 在数据源中配置一个 GPT 聊天记录数据模型，参考模型配置如下：
2. 接着将数据存储到数据表中，可在请求 GPT 接口返回成功时回调事件中，选择调用数据源方法，然后选择上一步新建的数据表模型的创建单条方法，在入参中填入对应的数据即可，如下所示：
3. 然后，将之前声明的聊天记录变量 
$w.page.dataset.state.chatList 的静态示例数据，换成从数据表模型中动态获取聊天历史数据。如下所示，可以先新建一个数据表的 Query 数据查询 变量 $w.query_chats，用来存储动态获取的历史数据，对应的配置如下：
$w.query_chats 对应的配置如下：
4. 最后，由于上一步的 Query 选择的手动触发，所以在页面加载时触发一次 Query，如下图所示。
$w.query_chats.data.records 赋值给 $w.page.dataset.state.chatList 即可。
至此，一个带历史记录存储功能的聊天 ChatBot 应用搭建完成了。