本文将向您展示如何使用低代码工具，在30分钟左右搭建一个基于 ChatGPT 的聊天机器人小程序。让拥有OpenAI账号的朋友能随时随地体验ChatGPT，也希望低代码xAI技术普惠更多人。

ChatGPT最近大火，让原本已经沉寂许久的AI领域再次被唤醒狂欢。但是还是有很多朋友受限于OpenAI对国内用户的限制，无法愉快地体验这项革命性的AIGC技术。

本文将向您展示如何使用低代码工具，在30分钟左右搭建一个基于 ChatGPT 的聊天机器人小程序。一方面能让拥有OpenAI账号的朋友能随时随地体验ChatGPT；另一方面，也希望通过教程学习搭建出AI聊天小程序，去分享给更多人，把前沿的AI技术普惠到更广泛的群体，一起体验AIGC技术所带来的便利。

我们这次就以腾讯云微搭低代码作为搭建平台，来演示一下应该如何快速开发一个基于ChatGPT的聊天机器人应用，即便是新手开发者也可以试试哦

在开始搭建聊天机器人之前，您需要做以下准备：

本教程适用人群和应用类型：

首先，一个常见的聊天对话机器人应用界面效果，如下图所示：

通过应用界面可以看到，它主要由如下几个部分组成：

那现在，我们就参照上面的几个模块，正式开始通过微搭低代码工具，分5个步骤来依次拆解搭建：

我们先拖入一个滚动容器和一个普通容器，一个用来展示聊天的上下文对话，一个用来展示输入框和发送按钮。然后依次拖入图中大纲树所示的组件，组件相应的层级关系可以参考上图中的大纲树结构。

接下来针对上述的组件分别进行样式的配置，我们默认使用样式面板的弹性（Flex）布局，包含接收消息和发送消息两个普通容器，可以分别选择样式面板中的弹性布局中的左对齐，如下图所示：

接着可以分别配置图片和文本两个组件的高度和宽度大小以及内外间距，以达到想要的视觉效果。

完成聊天上下文对话框的样式配置之后，可以进行底部多行输入框和按钮这个普通容器的样式配置，样式配置方式与上面的发送消息容器一样使用弹性布局并选择“平分”的方式布局，如下图所示：

完成布局配置之后，由于底部输入框按钮等是固定位置的，故需要额外配置一下定位属性，选中底部的“普通容器”，在样式面板底部，做如下配置即可：

以上，通过进一步微调一些样式细节如组件背景色以及间距等后，即可达到上文提到的应用界面效果了。

可以看到整个页面的配置过程是完全可视化操作的，不需要写一行代码。当然，如果样式配置不是很熟悉，或者有疑问的朋友，也可以等我们的视频教程，手把手教你用微搭低代码来配置AI聊天应用。

第2步，开始进行数据的绑定和数据源的配置：

a. 新建一个数组对象变量chatList，用于存储聊天记录

首先配置一个变量，如命名为chatLlist聊天记录这么一个变量，一个对象数组，默认值为如下所示，当然大家也可以基于这个结构任意修改。

接着把这个数组变量的初始值跟我们的这个页面的内容分别进行绑定。首先我们选择一个父级的普通容器，在属性配置的循环展示绑定为刚刚新建的数组变量。然后在里面的子节点中，如文本组件，分别绑定这个数组中的成员变量，他们的配置如下图所示：

这一步数据绑定完成之后，接下来就可以去配置请求远程数据的数据源API了。

b. 配置一个数据源APIs（用于请求Chat GPT接口）

API的配置相对比较简单，主要参考OPENAI的官方文档，文档中可以看到文本对话接口对应的请求参数信息如下：

分别把上方的CURL请求头信息对应到HTTP的请求中即可，配置项参考如下：

我们通过数据源中的【方法测试】，得到API的返回结果如下，点击【出参映射】即可完成出参结构的配置：

其中的API_KEY是在完成OPENAI账号注册之后，在其个人中心中获取即可，至于OPENAI的账号注册方式，大家动动手搜索一下，网上教程很多就不啰嗦了。

我们在第1步中已经在页面中放置了输入框、按钮和文本展示等组件。接下来，我们需要给输入框配置相关的事件响应逻辑，来获取用户输入的消息内容，参考的关键配置如下:

然后，给按钮绑定事件来处理输入框中用户发送的消息，选择按钮组件，在右侧事件面板中配置如下逻辑，即 点击按钮 时触发API请求，并将获取到的API返回结果渲染在页面中。

第4步，将返回值用“变量赋值”方法加入到chatList数组中

这里我们需要在数据中增加一条新的消息，采用表达式绑定的方式进行原有的ChatList变量进行解构后再赋值，表达式参考如下：

前端界面和后端数据逻辑都配置开发完成后，可在应用编辑器的右上角点击“发布”按钮，我们可以选择发布到 已绑定的小程序，也可以直接发布移动端的H5应用，如下所示：

至此，一个基础的AI聊天机器人应用搭建就完成了。

基于上述步骤搭建完聊天机器人小程序后，你还可以进一步完善它的功能。

例如，您可以在小程序中添加聊天记录功能，让用户可以查看过往的聊天记录。您也可以使用其他自然语言处理技术；例如语音识别和文本分类，来使聊天机器人更加智能。

如需要存储聊天历史记录的话，可以在数据源中配置一个“聊天历史记录”数据模型，参考模型配置如下：

总之，使用微搭低代码搭建聊天机器人小程序，对于熟悉低代码或者喜欢钻研能力的朋友来说，确实是一件非常简单而有趣的事情。当然如果确实对界面样式配置不是很熟悉，或者其他有疑问的朋友，也可以关注漫话开发者公众号后续视频教程，手把手教你用微搭低代码来配置AI聊天机器人应用。

通过本教程的介绍，你已经基本熟悉了如何使用微搭低代码快速搭建基于 ChatGPT 的聊天机器人了，有任何疑问也欢迎关注漫话开发者公众号留言。