How to Build an AI-Powered ChatBot with OpenAI, ChatGPT, Node.js, and React(javascript use openai ch

ChatGPT账号购买平台发布时间：2024-02-22 浏览量：1

I. 导入依赖

首先，我们需要在我们的Node.js项目中导入一些依赖包，以便能够使用OpenAI的ChatGPT API。以下是我们需要导入的依赖：

express：用于创建和管理我们的Node.js利用程序的框架。
dotenv：用于读取和加载我们的环境变量文件中的配置。
cors：用于解决跨域问题。
openai：OpenAI官方提供的JavaScript库，用于与ChatGPT API进行交互。

您可使用npm命令安装这些依赖：

npm install express dotenv cors openai

安装完成后，让我们在代码中使用它们。首先，导入所需的包：

const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const openai = require('openai');

II. 获得OpenAI Secret API Key

在使用OpenAI的ChatGPT API之前，我们需要在OpenAI官网上注册账号并获得API密钥。

1. 首先，访问OpenAI官方网站并注册一个账号。

2. 登录后，导航到API密钥页面。

3. 创建一个新的API密钥，并记下该密钥。

重要提示：请妥善保管您的API密钥，不要将其泄漏给他人。

III. 创建Node.js利用程序

为了能够使用ChatGPT API，我们需要创建一个Node.js利用程序。

1. 创建一个新的文件夹来容纳我们的项目，并使用以下命令初始化npm项目：

npm init -y

2. 在项目根目录下创建一个新的JavaScript文件，例如app.js。

3. 打开app.js文件，并将以下代码复制到文件中：

const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const openai = require('openai');

const app = express();

app.use(cors());
app.use(express.json());
dotenv.config();

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

4. 确保您的项目文件夹中还有一个名为.env的文件，用于存储您的API密钥和其他配置信息。

IV. 实现Node.js利用程序

我们已创建了一个Node.js利用程序的基本结构，现在让我们开始实现与ChatGPT API的交互。

1. 首先，将以下代码添加到app.js文件中，用于处理用户要求的路由：

app.post('/chat', async (req, res) => {
  const { message } = req.body;

  const response = await openai.complete({
    engine: 'text-davinci-003',
    prompt: message,
    maxTokens: 50,
    n: 1,
    stop: ['
']
  });

  res.json({ response: response.choices[0].text.trim() });
});

这个路由将接收一个POST要求，要求体中包括用户的消息。然后，我们使用OpenAI的complete方法来生成用户输入的响应。我们指定了使用的语言模型引擎（text-davinci-003）、输入消息和生成的响应的最大令牌数。最后，我们将响应发送回给用户。

2. 现在，让我们将以下代码添加到利用程序的启动代码中，以确保我们已成功连接到ChatGPT API：

openai.setApiKey(process.env.OPENAI_API_KEY);

这个代码行设置了我们之前获得的API密钥，以便与ChatGPT API建立连接。

V. 使用ChatGPT API进行交互式聊天

现在我们可以创建一个交互式聊天页面，允许用户输入并获得ChatGPT API生成的响应。

1. 在项目文件夹中创建一个名为index.html的新文件，并将以下代码复制到文件中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT Chatroom</title>
</head>
<body>
  <h1>ChatGPT Chatroom</h1>
  <input type="text" id="userInput" placeholder="Enter your message...">
  <button onclick="sendMessage()">Send</button>
  <div id="chatLog"></div>

  <script>
    const chatLog = document.getElementById('chatLog');
    const userInput = document.getElementById('userInput');

    function sendMessage() {
      const message = userInput.value;
      addMessage('user', message);
      userInput.value = '';

      fetch('/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message })
      })
      .then(response => response.json())
      .then(data => addMessage('chatbot', data.response));
    }

    function addMessage(sender, message) {
      const messageElement = document.createElement('div');
      messageElement.className = sender === 'user' ? 'user-message' : 'chatbot-message';
      messageElement.innerText = message;
      chatLog.appendChild(messageElement);
    }
  </script>

  <style>
    .user-message {
      background-color: lightblue;
    }

    .chatbot-message {
      background-color: lightgreen;
    }
  </style>
</body>
</html>

这个HTML文件包括一个输入框和一个发送按钮，当用户点击发送按钮时，将触发sendMesaage函数。这个函数将获得用户输入的消息，将其发送到服务器的/chat路由，并在响应到达后将其添加到聊天记录中。

2. 在app.js文件中加入以下代码，以便我们的利用程序可以提供index.html文件：

app.use(express.static('public'));

这个代码即将public文件夹指定为静态文件目录，使其成为我们的利用程序可以提供的可访问文件。

VI. 整合ChatGPT API与JavaScript框架

ChatGPT API与JavaScript框架（如React）可以很好地集成在一起。您可使用JavaScript框架构建一个完全的前端利用程序，并使用ChatGPT API作为聊天机器人的后端服务。

在React中使用ChatGPT API的示例：

import React, { useState } from 'react';
import openai from 'openai';

openai.setApiKey(process.env.OPENAI_API_KEY);

function Chat() {
  const [messages, setMessages] = useState([]);
  const [userInput, setUserInput] = useState('');

  function sendMessage() {
    setMessages(prevMessages => [...prevMessages, { sender: 'user', message: userInput }]);
    setUserInput('');

    openai.complete({
      engine: 'text-davinci-003',
      prompt: userInput,
      maxTokens: 50,
      n: 1,
      stop: ['
']
    }).then(response => {
      const chatbotResponse = response.choices[0].text.trim();
      setMessages(prevMessages => [...prevMessages, { sender: 'chatbot', message: chatbotResponse }]);
    });
  }

  return (
    <>
      {messages.map((message, index) => (
        
          {message.message}
        
      ))}
       setUserInput(event.target.value)}
        placeholder="Enter your message..."
      />
      
    
  );
}

在上面的示例中，我们定义了一个React函数组件Chat，使用useState钩子来管理聊天消息和用户输入。当用户点击发送按钮时，我们使用ChatGPT API生成聊天机器人的响应，并将其添加到消息列表中。

VII. 处理毛病与异常

在编写Node.js代码时，处理毛病和异常是很重要的。请确保您的代码中包括适当的毛病处理机制，以便在出现毛病时能够给出公道的反馈。

以下是一些示例代码，展现了怎样在Node.js中处理毛病和异常：

app.post('/chat', async (req, res) => {
  try {
    const { message } = req.body;

    const response = await openai.complete({
      engine: 'text-davinci-003',
      prompt: message,
      maxTokens: 50,
      n: 1,
      stop: ['
']
    });

    res.json({ response: response.choices[0].text.trim() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

在上面的代码中，我们使用try-catch语句来捕获可能产生的毛病。如果在使用ChatGPT API生成响应时出现毛病，我们将在控制台打印毛病信息，并向客户端发送一个状态码为500的毛病响应。

VIII. 优化性能和用户体验

构建一个性能良好、用户体验好的聊天机器人利用程序是很重要的。以下是一些建议来提高性能和用户体验：

使用适当的语言模型引擎：根据您的需求选择适合的语言模型引擎。较大的引擎可能具有更好的生成质量，但会消耗更多的资源。
减少API调用次数：尽可能将多个用户输入作为一个批次发送到API，以减少API调用次数。
实时响应：尽可能减少响应时间，使聊天机器人的回答流畅而迅速。
缓存响应：对一些常见的用户输入，可以缓存生成的响应，以提高响应速度并减少对API的依赖。
用户界面设计：设计一个直观而友好的用户界面，使用户能够轻松与聊天机器人进行交互。

总结

本文介绍了怎样在Node.js中使用JavaScript来集成OpenAI的ChatGPT API。我们从导入依赖、获得API密钥，到创建Node.js利用程序并实现与ChatGPT API的交互，最后讨论了如何整合ChatGPT API与JavaScript框架、处理毛病与异常，和优化性能和用户体验。通过遵守这些步骤，您可以构建出一个功能强大的聊天机器人利用程序，与用户进行交互并生成成心义的响应。

javascript use openai chatgpt api的进一步展开说明

人工智能（AI）最近引发了轰动，ChatGPT通过聊天完成功能在互联网上引发了革命。

您可以利用它做很多事情：起草电子邮件或其他写作、回答有关一组文档的问题、创建对话代理、让软件具有自然语言界面、各种科目的辅导、语言翻译等等。

本文将教您使用聊天完成功能构建聊天利用程序的基础知识，以帮助每一个程序员轻松上手。这其实不像看上去那末困难，随着您浏览本教程，您会发现这一点。

您将学到以下内容：

如何只使用Node.js创建CLI聊天利用程序。
如何只使用React构建聊天利用程序。
如何结合React和Node.js创建更好的聊天AI软件。

本教程将基于gpt⑶.5-turbo模型。

先决条件

本教程需要基本的JavaScript、CSS、React和Node.js知识。

您还需要在托管ChatGPT的OpenAI平台上创建一个帐户。它是不要钱的，您可以在这里创建一个帐户。

怎样使用Node.js创建CLI聊天AI利用程序

本部份将重点介绍创建一个仅在终端上运行的基于Node.js的聊天利用程序。

首先，创建一个项目目录：

mkdir nodejs-chatgpt-tutorial

进入该文件夹：

cd nodejs-chatgpt-tutorial

初始化项目：

npm init -y
这将创建一个package.json文件来跟踪项目的详细信息。

将以下代码添加到文件中：

“type”: “module”
这将使您能够使用ES6模块的导入语句。

使用以下命令安装OpenAI：

npm i openai

创建一个文件，所有的代码都将写在这里。将其命名为index.js：

touch index.js

从OpenAI模块导入Configuration和OpenAIApi的配置和readline的输入流：

import { Configuration, OpenAIApi } from “openai”;
import readline from “readline”;
构建OpenAI配置以下所示：

const configuration = new Configuration({
organization: “org-0nmrFWw6wSm6xIJXSbx4FpTw”,
apiKey: “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”,
});
这段代码创建了Configuration对象的新实例。在其中，您需要输入组织和apiKey的值。您可以在设置中找到组织的详细信息，并且可以在API键中找到apiKey的详细信息。如果您没有现有的API密钥，可以创建一个。

在配置以后输入以下代码以创建OpenAI API的新实例：

const openai = new OpenAIApi(configuration);
您将在全部项目中使用它。

键入以下代码以测试createChatCompletion函数：

openai
.createChatCompletion({
model: “gpt⑶.5-turbo”,
messages: [{ role: “user”, content: “Hello” }],
})
.then((res) => {
console.log(res.data.choices[0].message.content);
})
.catch((e) => {
console.log(e);
});
此代码调用createChatCompletion函数，触发一个端点（https://api.openai.com/v1/chat/completions）。该函数接受一个参数对象（chatGPT所使用的模型和用户与AI之间的消息数组）。我们将在下一节讨论怎样使用消息数组来保存聊天历史并改进利用程序。

每一个消息都是一个包括角色（即发送消息的人。如果是AI发送的消息，则值可以为assistant；如果是人类发送的消息，则值为user）和内容（发送的信息）的对象。

最后，该代码打印出AI的响应（res.data.choices[0].message.content）。使用以下命令在终端中运行该文件：

node index

这将在几秒钟后从AI返回一个响应。

以上就是创建聊天机器人的全部所需代码！

但是，为了使利用程序更具互动性，从用户那里要求输入而不是将消息内容硬编码到代码中将很有帮助。readline模块将在这方面帮助我们。

为了使其具有互动性，删除您输入的最后一行代码，并添加以下内容：

const userInterface = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
此代码在终端中创建了一个用户界面，允许用户输入问题。

接下来，使用以下代码提示用户输入消息：

userInterface.prompt();
最后，输入以下代码：

userInterface.on(“line”, async (input) => {
await openai
.createChatCompletion({
model: “gpt⑶.5-turbo”,
messages: [{ role: “user”, content: input }],
})
.then((res) => {
console.log(res.data.choices[0].message.content);
userInterface.prompt();
})
.catch((e) => {
console.log(e);
});
});
在上面的代码中，

当用户输入并按下Enter键时，上述代码会触发回调函数。
它将输入的内容作为字符串传递给input。
现在，将其用作内容。
在显示了来自AI的响应后，在then代码块中提示用户发送另外一条消息。

代码段请在GitHub上查看。

运行该文件并与AI进行对话。效果以下图所示：

CLI聊天利用程序与AI对话

太棒了！这是一个互动的CLI聊天。

这对一些人很有用（比如工程师），由于它具有良好的安全性，由于它是在服务器端运行的。

但是对那些可能不知道怎样使用CLI利用程序的其他人来讲，他们将需要一个更容易于使用、具有更好用户界面（UI）和用户体验（UX）的工具。下一节将重点介绍使用React构建这类类型的利用程序。

怎样使用React创建聊天利用程序

该部份旨在帮助前端开发人员快速掌握使用ChatGPT API创建聊天利用程序和构建更好用户界面（UI）的技能。您可以将所学的知识利用于其他前端框架或库。

首先要做的是设置基本的React脚手架。我将使用Vite来完成这个目的。您可使用Vite来构建任何现代JavaScript前端项目。使用以下命令：

npm create vite@latest

此命令将提示您为项目创建名称和文件夹，并选择一个框架或库（本教程使用React）。以后，您将进入该文件夹并运行以下命令：

npm install npm run dev

这些命令将安装必要的依赖项并启动本地服务器，端口号为5173。

接下来，使用以下命令安装OpenAI：

npm i openai

此模块可提供我们创建聊天利用所需的所有功能。

现在，我们准备开始编写代码了！

进入src/App.jsx文件，并删除其所有内容。然后添加以下导入语句：

import { useState } from “react”;
import { Configuration, OpenAIApi } from “openai”;
以上代码导入了Configuration来设置配置值和OpenAIApi，以便让我们访问聊天完成功能。

以后，按以下所示对Configuration进行配置：

const configuration = new Configuration({
organization: “org-0nmrFWw6wSm6xIJXSbx4FpTw”,
apiKey: “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”,
});
此代码创建Configuration对象的新实例。在其中，为组织和apiKey的值输入相关信息。您可以在设置中找到组织的详细信息，并且可以在API键中找到apiKey的详细信息。如果您没有现有的API密钥，可以创建一个。

接下来，在配置以后输入以下代码，以创建OpenAI API的新实例：

const openai = new OpenAIApi(configuration);

我们将在全部项目中使用它。

创建并导出一个默许函数：

function App() {
return (

Chat AI Tutorial

);
}
export default App;

该函数将包括其他代码。

在return语句之前设置以下状态：

const [message, setMessage] = useState(“”);
const [chats, setChats] = useState([]);
const [isTyping, setIsTyping] = useState(false);

message将保存从利用程序发送到AI的信息。
chats数组将跟踪用户和AI发送的所有消息。
isTyping变量将通知用户机器人会不会正在打字。

在h1标签下键入以下行

{isTyping ? “Typing” : “”}

上述代码将在用户等待AI响应时显示”Typing”。

通过添加以下代码创建一个用户可以输入消息的表单：

此代码创建一个带有一个输入框的表单。当通过按Enter键提交表单时，它会触发chat函数。

chat函数将采取两个参数（e和message），代码以下：

const chat = async (e, message) => { }

在函数中输入以下行：

e.preventDefault();
if (!message) return;
setIsTyping(true);

以上代码禁止表单重新加载网页，检查提交前会不会输入了消息，如果是，则将isTyping设置为true以唆使利用程序正在处理提供的输入。

ChatGPT有一个消息的格式。它采取以下模式：

{role: user | assistant, content: message to be sent

每一个消息（content）都一定要显示发送它的角色，当聊天来自AI时，角色为assistant；当聊天来自人类时，角色为user。因此，在发送消息之前，请确保正确格式化消息并将其添加到数组（chats）中，以下所示：

let msgs = chats;
msgs.push({ role: “user”, content: message });
setChats(msgs);
setMessage(“”);

以上代码中的最后一行清除输入，以便用户可以输入另外一条信息。

现在，我们将使用createChatCompletion函数调用createChatCompletion端点，请使用以下代码：

await openai
.createChatCompletion({
model: “gpt⑶.5-turbo”,
messages: [
{ role: “system”, content: “You are a EbereGPT. You can help with graphic design tasks” },
…chats,
],
});

createChatCompletion函数最少需要两个参数（model和messages）：

model指定使用的chatGPT版本。
messages是用户和AI之间到目前为止所有消息的列表，和一个系统消息，用于让AI了解其可能提供的帮助类型。

{ role: “system”, content: “You are a EbereGPT. You can help with graphic design tasks” }

您可以根据需要更改内容。

消息没必要包括数组中的多个对象，只需一个消息便可。但是当它是一个数组时，它提供了一个消息历史记录，AI可以依托它来在未来提供更好的回复，而且用户可以少输入，由于每次都没有必要过于描写一切。

createChatCompletion函数返回一个promise。因此，请使用then…catch…块获得响应。

.then((res) => {
msgs.push(res.data.choices[0].message);
setChats(msgs);
setIsTyping(false);
})
.catch((error) => {
console.log(error);
});

以上代码将从AI返回的消息添加到chats数组中，并将isTyping设置为false，表示AI已结束回复。

您现在应当每次发送消息时都会收到反馈（Typing）：

聊天利用程序在AI行将响应时提供反馈

是时候显示聊天历史记录，以供用户查看了。

在h1标签下方键入以下代码：

{chats && chats.length ?
chats.map((chat, index) => (

{chat.role.toUpperCase()}

:
{chat.content}

))
: “”}

上述代码遍历chats并将其逐一显示给用户。它会将角色以大写情势和消息内容并排输出。

下面是输出的模样：

聊天机器人正常工作但不包括CSS

看起来很酷！

但是，添加一些样式将使它看起来更具吸引力，就像WhatsApp或Messenger一样。

使用以下CSS替换frontend/src/index.css文件的内容：

:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
text-align: center;
position: sticky;
top: 0;
background-color: #242424;
}

main{
max-width: 500px;
margin: auto;
}

p{
background-color: darkslategray;
max-width: 70%;
padding: 15px;
border-radius: 50px;
}

p span{
margin: 5px;
}

p span:first-child{
margin-right: 0;
}

.user_msg{
text-align: right;
margin-left: 30%;
display: flex;
flex-direction: row-reverse;
}

.hide {
visibility: hidden;
display: none;
}

form{
text-align: center;
position: sticky;
bottom: 0;
}

input{
width: 100%;
height: 40px;
border: none;
padding: 10px;
font-size: 1.2rem;
}

input:focus{
outline: none;
}

请删除frontend/src/App.css文件中的所有样式。

完全的代码在GitHub上可以找到。

现在，利用程序应当具有新的外观：

聊天机器人正常工作且具有CSS

至此，使用React和ChatGPT创建聊天机器人的进程结束了。其实没有想象中的困难。

但是像这样的前端利用程序更合适演示，而不合适生产。以这类方式创建利用程序的问题是前端会将API密钥暴露给网络攻击。

要解决这个问题，最好的办法是将API密钥和组织ID安全地保存在云中，并援用它们，或为利用程序构建一个具有更好安全性的后端。

接下来的部份将解决这个问题。

如何结合React和Node.js创建一个全栈聊天AI软件

本部份将使用上述各节的内容，将前后端结合起来，构建一个更安全的利用程序，同时展现更好的用户界面（UI）和用户体验（UX）。

我们将通过在前端与后端之间建立连接来改进Node部份，使用服务器公然一个端点供前端使用，而不是直接与OpenAI联系。

怎样设置项目

该部份将创建项目所需的文件夹和文件。

创建项目目录：

mkdir react-node-chatgpt-tutorial

进入该文件夹：

cd react-node-chatgpt-tutorial

使用以下命令使用Vite安装React，并将文件夹命名为frontend：

npm create vite@latest

然后，进入该文件夹并运行以下命令：

npm install
npm run dev

这些命令将安装必要的依赖项，并在5173端口上启动本地服务器。

创建名为backend的文件夹：

mkdir backend

现在进入backend文件夹，并使用以下命令初始化项目：

npm init -y

这将创建一个package.json文件来跟踪项目的详细信息。

在文件中添加以下代码行：

“type”: “module”

这将启用使用ES6模块的导入语句。

使用以下命令安装OpenAI和其他依赖项：

npm i openai body-parser cors express

创建一个文件用于寄存所有代码。将其命名为index.js：

touch index.js

到此为止，项目设置完成了。现在有两个文件夹（frontend和backend）。

如何构建服务器

本部份将重点介绍创建一个侦听端口8000的本地服务器。

首先，像这样导入所需的模块：

import { Configuration, OpenAIApi } from “openai”;
import express from “express”;
import bodyParser from “body-parser”;
import cors from “cors”;

接下来，设置express、侦听端口、用于接收输入的body-parser和用于允许前端与后端自由通讯的cors。使用以下代码：

const app = express();
const port = 8000;
app.use(bodyParser.json());
app.use(cors());

最后，输入以下代码：

app.listen(port, () => {
console.log(`listening on port ${port}`);
});

服务器设置已完成。

在运行index.js文件时，应当会得到以下输出：

listening on port 8000

怎样创建一个端点

本部份将构建一个端点，该端点将通过要求正文接收从前端发送的消息，并通过同一通道返回响应。

首先建立上述部份中的配置参数：

const configuration = new Configuration({
organization: “org-0nmrFWw6wSm6xIJXSbx4FpTw”,
apiKey: “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”,
});
const openai = new OpenAIApi(configuration);

接下来，使用以下代码创建一个异步POST路由：

app.post(“/”, async (request, response) => { });

该端点将使用http://localhost:8000/调用。

在回调函数中，请输入以下代码以从要求正文（request.body）中接收聊天输入：

const { chats } = request.body;

现在，像React部份一样调用createChatCompletion端点：

const result = await openai.createChatCompletion({
model: “gpt⑶.5-turbo”,
messages: [
{ role: “system”, content: “You are a EbereGPT. You can help with graphic design tasks” },
…chats,
],
});

这里的区别的地方在于，我们将其赋值给变量（result），并使用response.json()返回响应，如以下所示：

response.json({ output: result.data.choices[0].message });

此部份的代码可以在此处找到。

在Postman上进行测试的输出以下：

Postman上的输出

后端部份的代码到此结束。下一部份将使前端与后端通过刚刚创建的端点连接起来。

怎么从前端连接到后端

这部份将带我们进入前端，我们将在其中创建一个表单。该表单将通过API端点将消息发送到后端，并通过相同的方式接收响应。

转到frontend/src/App.jsx文件，并键入以下代码：

import { useState } from “react”;

function App() {
const [message, setMessage] = useState(“”);
const [chats, setChats] = useState([]);
const [isTyping, setIsTyping] = useState(false);

const chat = async (e, message) => {
e.preventDefault();
if (!message) return;
setIsTyping(true);

let msgs = chats;
msgs.push({ role: “user”, content: message });
setChats(msgs);

setMessage(“”);

fetch(“http://localhost:8000/”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({ chats }),
})
.then((response) => response.json())
.then((data) => {
msgs.push(data.output);
setChats(msgs);
setIsTyping(false);
})
.catch((error) => {
console.log(error);
});
};

return (

FullStack Chat AI Tutorial

{chats && chats.length ?
chats.map((chat, index) => (

{chat.role.toUpperCase()}

:
{chat.content}

))
: “”}

{isTyping ? “Typing” : “”}

);
}

export default App;

此代码与前一部份的代码类似。不过，我们去掉了OpenAI的配置，由于在本部份不再需要。

此时，每当提交表单时，会弹出一个提示窗口。马上就会改变。

在chat函数中，去掉提示信息，然后键入以下代码：

上述代码调用了我们创建的端点，并传递聊天数组供其处理。然后返回一个响应，该响应将添加到chats并在UI中显示。

下面是此时UI的外观：

FullStack Chat UI在样式之前

如果在frontend/src/index.css文件中添加以下样式，则UI会更好看：

html, body{
scroll-behavior: smooth;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
text-align: center;
position: sticky;
top: 0;
background-color: #242424;
}

main{
max-width: 800px;
margin: auto;
}

p{
background-color: darkslategray;
max-width: 70%;
padding: 15px;
border-radius: 50px;
}

p span{
margin: 5px;
}

p span:first-child{
margin-right: 0;
}

.user_msg{
text-align: right;
margin-left: 30%;
display: flex;
flex-direction: row-reverse;
}

.hide {
visibility: hidden;
display: none;
}

form{
text-align: center;
position: sticky;
bottom: 0;
}

input{
width: 100%;
height: 40px;
border: none;
padding: 10px;
font-size: 1.2rem;
background-color: rgb(28, 23, 23);
}

input:focus{
outline: none;
}

请从frontend/src/App.css文件中删除所有样式。

该部份的代码在GitHub上。

现在，终究效果以下：

FullStack ChatBot正常工作及具有样式

庆祝您完成了这个项目！

全栈聊天机器人比较费力，但它帮助我们将关注点分离，构建了一个更安全、更好看的利用程序，并为用户提供了更好的体验。所以这些努力都是值得的。

您可以在GitHub上找到此部份的代码。

结论

希望通过本教程向您展现，具有基本的编程知识的任何人都可以构建基于AI的软件。您了解了怎样使用React和Node.js构建聊天机器人，并讨论了每种技术的利弊。最后，我们构建了一个功能丰富、安全且视觉吸引人的解决方案。

浏览完本教程后，您现在可以探索AI的其他功能，如图象处理和音频交互。请花些时间浏览文档，了解如何扩大我们在这里介绍的内容。

javascript use openai chatgpt api的常见问答Q&A

问题1：怎样在 Node.js 中使用 OpenAI 的 ChatGPT API？

答案：使用 Node.js 调用 OpenAI 的 ChatGPT API 可以实现自定义的智能应对机器人。以下是使用 ChatGPT API 的步骤：

首先，在 OpenAI 官网注册账号并生成 API 密钥。
在 Node.js 中安装必要的依赖包，如 express、dotenv、cors 和 openai。
使用取得的 API 密钥进行身份验证。
编写 Node.js 代码调用 ChatGPT API。
将生成的智能应对机器人集成到自己的网站或利用中。

这样，你就能够在 Node.js 中使用 OpenAI 的 ChatGPT API 来创建一个自定义的智能应对机器人。

问题2：使用 ChatGPT API 需要哪些依赖包和 API 密钥？

答案：使用 ChatGPT API 需要以下依赖包和 API 密钥：

express：用于创建 Node.js 利用程序。
dotenv：用于从 `.env` 文件中加载环境变量，包括 API 密钥。
cors：用于处理跨域要求。
openai：OpenAI 官方提供的 Node.js 库，用于调用 ChatGPT API。

同时，还需要在 OpenAI 官网上注册账号并创建 API 密钥，该密钥用于身份验证和访问 ChatGPT API。

问题3：怎么将 ChatGPT API 集成到自己的网站中？

答案：要将 ChatGPT API 集成到自己的网站中，可以依照以下步骤进行操作：

在网站的前端部份使用 HTML、CSS 和 JavaScript 来创建用户界面。
在后端使用 Node.js 来处理用户要求并调用 ChatGPT API。
将前端和后端进行连接，可使用 AJAX 或其他 HTTP 要求库。
在前端接收到用户的输入后，将其发送到后端进行处理。
后端使用 ChatGPT API 来生成对用户输入的响应。
将后端生成的响应返回给前端，并在网页上显示给用户。

通过以上步骤，就能够将 ChatGPT API 集成到自己的网站中，实现一个智能的聊天机器人。