聊天机器人和虚拟助手的使用持续增加。这就是为什么许多公司和开发人员试图创建自己的人工智能聊天机器人的原因。 ChatGPT 就是这样一个聊天机器人，由 OpenAI 创建，它可以发起类似人类的对话并回答各种各样的问题。
我们将要构建什么
在本教程中，我们将学习如何使用 React 和 OpenAI API 创建 ChatGPT 克隆。如果您想尝试一个有趣且具有挑战性的项目来度过周末，这可能是 电话号码列表 探索 React 和 OpenAI 的好机会。
您还将学习如何从 GitHub 存储库直接部署到 Kinsta 的应用程序托管平台，该平台提供免费的 .kinsta.app 域，以便您的项目快速启动和运行。此外，通过 Kinsta 的免费试用和爱好计划，您可以免费开始使用。
这是 ChatGPT 克隆应用程序的现场演示。
ChatGPT 克隆应用程序
ChatGPT 克隆应用程序
如果您想仔细了解这个项目
可以访问 GitHub 存储库。
或者，使用这个启动项目模板，您可以选择使 这不仅仅是用户数量巨大！ LINE 营销为何受到关注 用此模板>创建一个新的存储库，这会将启动代码复制到一个新的存储库。这个启动项目附带了样式、Font Awesome CDN 链接、OpenAi 包和基本结构等基本元素，以帮助您入门。
信息
使用 OpenAI API 的免费信用额度限制为 18 美元。如果您正在测试此演示应用程序并且它停止工作，您的信用可能会被耗尽。要继续使用 OpenAI API，您需要升级您的计划。
要求/先决条件
本教程旨在提供一种“跟随式”体验。因此，建议您准备好以下物品以便能够顺利进行编程：
HTML、CSS 和 JavaScript 的基础知识
对 React 有一定的了解
计算机上安装了 Node.js 和 npm（Node 包管理器）或 yarn
什么是 OpenAI API？
OpenAI API 是一个基于云的平台，允许开发人员通过 API 访问 OpenAI 语言模型，例如 GPT-3。它允许开发人员向他们的应用程序添加自然语言处理功能，例如文本完成、情感分析、摘要和翻译，而无需开发和训练自己的模型。
要使用 OpenAI API，开发人员必须在 OpenAI 网站上创建一个帐户并获取 API 密钥。 API 密钥用于验证 API 请求并跟踪其使用情况。
旦开发人员拥有 API
密钥，他们就可以使用 API 将文本发送到 阿拉伯联合酋长国电话号码 语言模型并接收响应。
为什么选择 React？
React 是一个用于构建用户界面的流行 JavaScript 库。根据 2022 年 Stack Overflow 开发者调查，它是第二大最常用的 Web 技术，占有 42.62% 的市场份额。
React 允许开发人员创建代表用户界面不同部分的声明性组件。这些组件使用称为 JSX 的语法定义，它是 JavaScript 和 HTML 的组合。
由于其拥有庞大的库和组件套件生态系统，开发人员可以轻松使用和集成 API（例如 OpenAI API）来构建复杂的聊天界面，使其成为构建 ChatGPT 克隆应用程序的绝佳选择。
如何设置 React 开发环境
安装 React 或创建 React 项目的最佳方法是使用 create-react-app 安装它。先决条件是您的计算机上安装 Node.js。要验证 Node 是否已安装，请在终端中运行以下命令。
节点-v
如果您看到它的一个版本，则表示您已经安装了一个。要使用 npx，您需要确保您的 Node 版本不低于 v14.0.0 并且您的 NPM 版本不低于 v5.6；如果没有，您可能需要通过运行 npm update -g 来更新它。一旦了解了 npm 的工作原理，就可以通过运行以下命令来设置 React 项目：
npx create-react-app chatgpt-clone
注意：“chatgpt-clone”是我们正在创建的应用程序的名称，但您可以将其更改为您选择的名称。
安装过程可能需要几分钟。完成后，您可以导航到目录并安装 Node.js OpenAI 包，该包提供从 Node.js 方便地访问 OpenAI API，使用以下命令：
npm 安装 openai
现在您可以运行 npm start 来在 localhost:3000 上查看您的应用程序。
创建 React 项目时