在上篇教程中我们提到，OpenAI 近期发布了全新的 ChatGPT API，并且在该教程中，学院君给大家演示了如何基于这个 API 快速实现命令行版 ChatGPT，今天，让我们看看如何利用它结合 Laravel 10 构建 ChatGPT 网页版，我们把这个网页克隆版的 ChatGPT 命名为 GeekChat。

如果您想直接跳转到源代码，可以在我的 GitHub 上找到它。

这个新的 API 模型提示方式和之前有点不同，因为它针对的是“聊天”自动完成，所以我们不仅仅是发送一个简单的字符串作为提示，而是发送一整段聊天对话，然后 AI 模型将自动完成对话功能。

下面是我们今天要完成的 ChatGPT 网页克隆版 GeekChat 的最终样子，比较简陋，但该有的核心功能也都具备了：

整体功能并不复杂，这里我们使用网页应用开发神器 Laravel 框架结合 Tailwind CSS 快速完成应用的开发。

PS：经过数次迭代，这个项目最新面孔已经是这样的了，成为一个支持文字、语音、翻译、画图的多功能聊天机器人，你可以通过这个链接进行体验 —— https://wen.geekr.dev

作为起点，我们使用 Laravel 安装器初始化一个新的 Laravel 10 应用程序：

不了解 Laravel 框架的可以看下官方文档。

然后通过 Composer 安装 OpenAI PHP 扩展包，该扩展包可用于在 PHP 项目中调用 OpenAI API 接口：

接下来，我们需要发布上面这个扩展包的配置文件并设置 OpenAI API 密钥。

要发布配置文件，运行以下命令即可：

发布完成后，可以在 .env 文件中设置 OpenAI API 密钥，如下所示：

此外，这个扩展包还支持代理配置，已解决国内调用不了 OpenAI 接口的问题：

我们想要的是一个聊天样式的 UI，所以需要在默认首页视图文件 welcome.blade.php 中添加一个简单的问题输入字段以及一个“重置会话”按钮，就像我们在 ChatGPT 中重置当前会话一样：

这个输入字段需要放在一个表单中，该表单用于将输入的问题提交到 Laravel 应用程序的 POST 路由 /chat，从而完成与 ChatGPT 的会话：

接下来，我们将完成后端处理会话与重置会话的核心功能。

我们将新建一个控制器 ChatController 处理会话相关的业务逻辑：

然后在控制器中定义会话处理方法，核心逻辑其实和上篇命令行版 ChatGPT 大同小异，只是换了一种语言实现而已：