手把手教你用低代码30分钟实现ChatGPT AI机器人

（更多的可关注公众号 ： 低代码一哥）

最近一段时间，由人工智能实验室OpenAI发布的ChatGPT比较火爆，可以聊天、可以写情书、可以写小说、可以写代码，上知天文下知地理，非常之强大。甚至很多人希望借助ChatGPT来帮助自己写代码、帮助自己完成自媒体创作等等。连马斯克都感叹“我们离强大到危险的 AI 不远了”。据悉，百度宣布3月也将推出类似AI服务。

那么，普通人如何才能实现这样一款小程序或网页版的AI聊天机器人呢？通过低代码工具，任何人都能30分钟就可以实现强大的智能ChatGPT机器人，我们今天将提供手把手教程——使用低代码30分钟实现ChatGPT AI机器人。

如下图，基于ChatGPT的微信小程序AI机器人“低代码一哥机器人”，我们先看看演示效果。我准备了一系列方方面面的问题，如下：

• 低代码是什么？
• 低代码未来发展如何？
• 哪一个低代码平台最好啊？
• 低代码的市场规模多大？
• 你喜欢美女吗？
• 写一段代码，比较两个数的大小
• 男生可以去足浴店吗？

我们来看看用低代码搭建的机器人的聊天回答的演示效果：

图片

我：低代码是什么？

机器人：低代码是一种技术，它使开发人员能够使用可视化界面和拖放功能来快速构建应用程序，而无需编写大量的代码。

看来ChatGPT机器人还是挺了解低代码的嘛，我们继续看看。

我：低代码未来发展如何？

机器人：随着技术的发展，低代码的未来发展前景非常广阔。低代码技术将继续改善，使开发者能够更快地构建和部署应用程序，而无需编写大量的代码。此外，低代码技术还将支持更多的开发语言，以及更多的应用程序类型，如智能合约和区块链应用程序。未来，低代码技术将成为软件开发的主流，并且将支持更多的应用程序，以及更多的开发者。

看来ChatGPT机器人还是挺看好低代码的，觉得低代码的未来发展前景非常广阔！继续看看。

图片

我：哪一个低代码平台最好啊？

机器人：目前市面上最好的低代码平台有：OutSystems、Mendix、Kissflow、Appian、QuickBase、Zoho Creator、WaveMaker、AppSheet、Bubble、Kintone等。

看来ChatGPT机器人还只了解海外的低代码平台，国内的低代码厂商们要加油啦。继续看看。

图片

我：低代码的市场规模多大？

机器人：低代码市场的规模目前估计在50亿美元左右，并且正在迅速增长。

接下来，我们再看一些扯淡闲聊的问题。

图片

我：你喜欢美女吗？

机器人：当然喜欢！

再看看机器人的编写代码能力。

图片

我：写一段代码，比较两个数的大小

机器人：int a = 10; int b = 20; if (a > b) { System.out.println("a is greater than b"); } else { System.out.println("b is greater than a"); } 

再随便问一个。

图片

我：男生可以去足浴店吗？

机器人：是的，男生可以去足浴店。足浴店提供各种足部护理服务，包括足底按摩、足部护理、足部护理等，可以帮助男士放松身心，改善血液循环，改善身体健康。

果然懂得很多啊。还有一些问题就不过多展示了。接下来我们看看如何搭建基于ChatGPT的AI机器人。

▶ChatGPT是什么

如果你看不懂或者不想了解ChatGPT，也没关系，可以直接跳过看下一章节。这就是低代码的强大之处：开发者不必费力掌握和理解有难度技术，也可以开发出高性能高、水准的应用。

ChatGPT 是一个由 OpenAI 开发，采用基于 GPT-3.5 架构的大型语言模型。它能够通过分析提问内容生成流畅的自然语言结果，我们除了可以在 OpenAI 的Chat GPT官网上体验，也可以通过调用官方API来获取 ChatGPT 机器人模型进行训练和体验。那么GPT-3到底是什么？

GPT是Generative Pre-training Transformer的简称，是由Alec Radford编写的语言模型，2018年由埃隆·马斯克的人工智能研究实验室OpenAI发布。它采用了生成式语言模型（两个神经网络通过竞争相互完善），通过对不同的书面材料集与长篇连载文本的预训练，能够获取世界知识并处理长程依赖关系。

GPT-2于2019年2月宣布，是一个无监督的转化语言模型，它是在800万份文档上训练出来的，共40GB的文本，来自通过Reddit提交分享的文章。埃隆·马斯克并不愿意发布它，因为他担心它可能被用来向社交网络发送假新闻。

2020年5月，OpenAI发布了GPT-3，这个模型包含的参数比GPT-2多了两个数量级（1750亿vs 15亿个参数），它比GPT-2有了极大的改进。

给予任何文本提示，GPT-3将返回一个文本完成，试图匹配用户给它的模式。用户可以给它 "编程"，只需向它展示几个希望它做的例子，它就会提供一篇完整的文章或故事，完全由GPT-3编写。

▶腾讯云微搭低代码介绍

腾讯云微搭低代码是一个高性能的低代码开发平台，用户可通过拖拽式开发，可视化配置构建 PC Web、H5 和小程序应用。微搭低代码平台，连接微信和企微用户，帮助企业快速定制和构建移动协同办公应用，让信息和流程流转更高效。

微搭能做什么？

• 3分钟可视化搭建和发布小程序、H5、Web等多端应用。
• 快速搭建企业专属的业务管理平台，表单流程等办公和管理类应用，提供企业级账号和权限管控等能力。

微搭主要三大优势

1）链接微信生态

• 微信专属私有链路，为企业提供安全可靠的移动协同办公开发套件。
• 打通微信、企业微信企业内外部用户身份，满足客户C2B 轻应用场景需求。
• 提供企业微信账号身份认证中间件，帮助企业多身份统一接入和身份治理，进行企微应用权限管控。
• 微信生态连接器，提供小程序，公众号，日程、会议等场景化连接，提升企业数字化办公与管理效率。

2）链接腾讯SaaS生态

打通腾讯会议、腾讯文档、腾讯云上产品等开放能力，快速实现企业级系统应用的搭建。

3）云原生技术底座

基于云开发技术底座，免服务器运维，弹性扩缩容，保障应用的稳定性、安全性和高并发。

图片

在了解ChatGPT和微搭低代码后，我们来看看如何在30分钟内快速搭建AI机器人。

▶30分钟内搭建自己的AI机器人

第一步 做好准备工作

主要包括开通 微信小程序、腾讯云微搭低代码、OpenAI 三个平台的账号。

• 微信小程序：https://mp.weixin.qq.com/cgi-bin/wx
• 腾讯云微搭：https://weda.cloud.tencent.com/
• OpenAI :https://openai.com/api/

微信小程序和微搭的账号注册等都比较方便。但OpenAI目前有地域限制，可能需要使用VPN、Gmail等邮箱、以及一些短信接受平台方可完成，在网上搜索“如何注册OpenAI”，会有很多手把手教程。

第二步 可视化配置机器人聊天界面

做好准备工作后，打开微搭，创建一个空白应用，然后设置机器人聊天界面：

这里主要包括三大部分：页头标题、中间的聊天内容接受和展示、以及聊天内容输入和发送窗口。我们可以分别用微搭的页头容器、滚动容器，以及普通容器来实现。

• 页头容器：用于页面顶部固定显示所需的标题或导航内容，该组件会强制显示在页面顶部，内部可放入文本、链接等组件，用于构建页面标题或跳转菜单。比如我们这里用来展示标题“低代码一哥机器人”。
• 滚动容器：当组件元素内容长度大于滚动容器时，滚动容器会出滚动条用来对页面内容进行滑动展示。滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容。因为聊天内容可能会很多，可能大于容器本身的高度，所以我们用滚动容器来做聊天内容的接受和展示。
• 普通容器：可放入多个组件，常用于对组件布局进行管理控制；通容器常被作为其他组件的父级节点进行使用，当普通容器的样式属性修改时，其子节点的组件也会随之进行修改。我们这里用普通容器来放聊天内容输入和发送窗口。

可以非常方便的把左侧的组件添加到中间编辑区，且可以通过右侧的一些属性、样式进行配置，并且可以立即预览最终效果。

第三步 配置数据变量及数据源APIs

如果把UI界面比作一个人的骨架，则数据是这个人的肉身和血液。有了数据，才能真正运作起来。

我们主要需要为该界面新建三个变量：

图片

• text：变量类型为文字，用于存放 输入的问题内容。
• chatList: 变量类型为数组，用于存放 展示的聊天内容，每个数组是一个对象，包括发送req和接受内容res。
• answer：用于接受 OpenAI接口返回的回答内容。

图片

然后需要简单配置一下OpenAI接口：

图片

如图，新建一个APIs，

• 名称：ChatGPT
• 意图：查询单条
• 类型：HTTP请求
• URL:https://api.openai.com/v1/completions
• Method:POST

入参：

• 字段名称：提问内容
• 字段标识：text
• 数据类型：文本 | 短文本，

另外再配置一下HTTP，

Header:

Content-Type:"application/json"

Authorization: "Bearer 替换成你自己的openAI得key"

以及Body:

{"model": "text-davinci-003", "prompt": "{{params.text}}", "temperature": 0, "max_tokens": 1000}

图片

配置完成后，点方法测试，可以看到测试成功，然后点 出参映射，则可以以自动将返回的各字段填入出参表里，如下图：

图片

第四步 将数据变量和功能绑定至界面

这里包括两部分，一部分是将数据变量绑定至界面上，可以在界面上看到发送和接受到的聊天内容；还有一部分是绑定功能至界面，比如可以发送聊天至OpenAI。

我们先来将数据变量绑定至界面。

图片

选中用于展示聊天内容的滚动容器，然后点击右侧属性里的循环展示，选择用于存放聊天内容的变量chartList。这样操作之后，整个滚动容器里就会循环这个聊天内容数组。

图片

然后，我们再在具体的聊天发送和接受文本组件上绑定chatList数组里的对象里的req或res。

至此，主要的数据绑定完成。

接着，我们来绑定聊天发送功能，实际就是将聊天内容当做参数，发送给刚才配置的API接口。我们需要：1，获取输入框的内容。2，点按钮时发送给API。

图片

所以在输入框添加事件：当值改变时，变量赋值给text (一会要发送给API的参数名)。

图片

在按钮上添加事件：调用数据源方法，以及变量赋值。调用数据源方法，将提问内容传给前面设置的APIs ChatGPT，并将返回的出参保存为answer。然后通过变量赋值，将接口返回的answer赋值给聊天内容chatList。

因为chatList已经绑定在了聊天内容展示的滚动容器上，所以chatList更新后，就会立即展示在聊天界面上。

第五步 发布应用

点右上角进行发布。微搭支持“一码多端”，可以同时发布至 Web端（h5/PC）和小程序。

相信以后再结合微信最新推出的小程序开发平台Donut的能力，也可以做到将该机器人直接发布生成独立的APP 或 集成至任何APP。

备注：微信小程序开发平台Donut，支持使用小程序原生语法开发移动应用，开发者可以一次编码，分别编译为小程序和 Android 以及 iOS 应用，既可以是独立的APP，也可以集成至已有APP。

至此，通过低代码快速实现了基于ChatGPT的聊天机器人小程序。

后续会将该机器人小程序Demo放出来给大家体验。欢迎关注公众号：低代码一哥

扫码关注

感谢以下参考：

https://baijiahao.baidu.com/s?id=1672711452430921198

《什么是GPT-3，它将如何影响人们目前的工作？》——太平洋电脑网

https://cloud.tencent.com/developer/article/2207268

《直播预约：低代码xChatGPT，五步搭建AI聊天机器人》——腾讯云开发TCB

https://cloud.tencent.com/developer/article/2199155

《微搭低代码xChatGPT，五步搭建AI聊天机器人小程序》——漫话开发者