logo

构建您自己的AI聊天机器人：使用React和ChatGPT API

686
2023年11月20日
在这篇博客中，我们将指导您使用React和ChatGPT API构建您自己的人工智能（AI）聊天机器人的过程。

人工智能（AI）聊天机器人已经改变了企业与在线客户互动的方式。它们提供即时、全天候的客户支持和互动，为用户提供无缝高效的体验。在本博客中，我们将指导您使用React和ChatGPT API构建自己的AI聊天机器人的过程。通过本教程的最后，您将拥有一个功能齐全的聊天机器人，能够理解并回应用户的查询，使您的网站或应用程序更具互动性和用户友好性。

为什么选择ChatGPT？

ChatGPT是由OpenAI开发的尖端语言模型。它经过大量文本数据的训练，具备自然语言理解和生成的能力。这使得它成为构建对话式AI应用的理想选择。您可以利用ChatGPT API将其能力集成到您自己的聊天机器人中。

先决条件

在我们深入开发过程之前，让我们确保您具备必要的工具和知识：

  1. React的基本知识 ：您应该熟悉React，这是一个用于构建用户界面的流行JavaScript库。
  2. Node.js和npm ：您需要在系统上安装Node.js和npm（Node包管理器）。
  3. ChatGPT API密钥 ：要访问ChatGPT API，您需要OpenAI提供的API密钥。您可以在他们的平台上注册获取。
  4. 文本编辑器 ：选择您喜欢的文本编辑器或集成开发环境（IDE）来编写代码。
  5. 创建React应用 ：我们将从一个React应用开始。确保您已安装了Create React App。

React应用

步骤1：设置您的React项目

我们将通过使用Create React App创建一个新的React项目来开始。打开您的终端并运行以下命令：

npx create-react-app chatbot
cd chatbot npm start

这将创建一个名为“chatbot”的新React项目并启动开发服务器。您可以在Web浏览器中通过http://localhost:3000访问您的应用程序。

步骤2：创建一个聊天机器人组件

在您的React项目中，创建一个新的聊天机器人组件。您可以通过在项目的src文件夹内创建一个名为Chatbot.js的新文件来实现这一点。

// src/Chatbot.js
import React, { useState } from 'react';

function Chatbot() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSendMessage = () => {
    // 实现此功能以将用户消息发送到ChatGPT
  };

  return (
    <div className="chatbot">
      <div className="chatbox">
        <div className="messages">
          {messages.map((message, index) => (
            <div key={index} className="message">
              {message.role === 'bot' ? (
                <div className="bot-message">{message.text}</div>
              ) : (
                <div className="user-message">{message.text}</div>
              )}
            </div>
          ))}
        </div>
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
}

export default Chatbot;

在这个组件中，我们设置了聊天机器人界面的基本结构，包括消息显示区域、输入字段和发送按钮。我们使用React状态来管理消息和用户输入。

步骤3：集成ChatGPT API

要将ChatGPT API集成到您的聊天机器人中，您需要进行API调用以发送用户消息并接收机器人的响应。为此，您可以使用axios库进行HTTP请求。如果您尚未安装axios，可以通过运行以下命令来安装：

npm install axios

接下来，创建一个函数来将用户消息发送到ChatGPT API并处理机器人的响应。将Chatbot.js组件中的占位符函数handleSendMessage替换为以下代码：

// 在文件顶部添加此导入语句
import axios from 'axios';

// ...

const handleSendMessage = async () => {
  if (input.trim() === '') return;

  // 将用户消息添加到消息数组中
  setMessages([...messages, { role: 'user', text: input }]);

  try {
    // 将用户消息发送到ChatGPT API
    const response = await axios.post(
      'https://api.openai.com/v1/engines/davinci-codex/completions',
      {
        prompt: `User: ${input}\nChatGPT:`,
        max_tokens: 150,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY',
        },
      }
    );

    // 从API响应中提取机器人的响应
    const botResponse = response.data.choices[0].text;

    // 将机器人的响应添加到消息数组中
    setMessages([...messages, { role: 'bot', text: botResponse }]);

    // 清空输入字段
    setInput('');
  } catch (error) {
    console.error('发送消息时出错：', error);
  }
};

将'YOUR_API_KEY'替换为您实际的ChatGPT API密钥。

这段代码将用户的消息发送到ChatGPT API，并将机器人的响应附加到聊天界面中。max_tokens参数指定了机器人响应的最大长度。您可以根据需要调整此值。

步骤4：为您的聊天机器人添加样式

为了使您的聊天机器人在视觉上更具吸引力，您可以为聊天机器人组件添加一些CSS样式。您可以创建一个单独的CSS文件，也可以使用styled-components等CSS-in-JS库来为您的组件添加样式。以下是使用内联样式的基本示例：

// 在Chatbot组件内部
const chatbotStyles = {
  chatbot: {
    width: '300px',
    backgroundColor: '#f0f0f0',
    border: '1px solid #ccc',
    borderRadius: '5px',
    margin: '0 auto',
    padding: '10px',
  },
  chatbox: {
    display: 'flex',
    flexDirection: 'column',
  },
  messages: {
    maxHeight: '300px',
    overflowY: 'scroll',
  },
  message: {
    marginBottom: '10px',
  },
  botMessage: {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '5px 10px',
    borderRadius: '5px',
    marginLeft: 'auto',
  },
  userMessage: {
    backgroundColor: '#e0e0e0',
    padding: '5px 10px',
    borderRadius: '5px',
    marginRight: 'auto',
  },
  input: {
    width: '100%',
    padding: '5px',
    border: '1px solid #ccc',
    borderRadius: '5px',
    marginBottom: '10px',
  },
  button: {
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    padding: '10px 20px',
    borderRadius: '5px',
    cursor: 'pointer',
  },
};

您可以将这些样式应用于return语句中的相应元素。例如，您可以为输入字段和按钮设置style属性：

<input
  type="text"
  value={input}
  onChange={handleInputChange}
  placeholder="Type a message..."
  style={chatbotStyles.input}
/>
<button onClick={handleSendMessage} style={chatbotStyles.button}>
  Send
</button>

随意定制样式以匹配您的网站或应用程序的外观和感觉。

步骤5：渲染您的聊天机器人

现在，您已经创建了聊天机器人组件并集成了ChatGPT API，您可以在您的React应用程序中渲染它。打开src/App.js文件并用以下内容替换其内容：

// src/App.js
import React from 'react';
import Chatbot from './Chatbot';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>AI Chatbot</h1>
        <Chatbot />
      </header>
    </div>
  );
}

export default App;

这段代码导入了Chatbot组件，并在App组件中渲染它。

步骤6：测试您的聊天机器人

现在，您可以通过运行您的React应用程序来测试您的聊天机器人。在终端中，确保您在项目目录中，并运行以下命令：

npm start

您的聊天机器人应该会出现在您的浏览器中，您可以开始输入消息与其进行交互。聊天机器人将会将用户消息发送到ChatGPT API，并在聊天界面中显示机器人的响应。

步骤7：部署

一旦您对您的聊天机器人满意，您可以将其部署到您选择的Web服务器或托管平台上。部署React应用程序的热门选项包括Vercel、Netlify和GitHub Pages。

请记住配置您的API密钥，并确保在部署到生产环境时安全存储您应用程序的环境变量。

结论

使用React和GPT API构建您自己的AI聊天机器人是一次激动人心的旅程，它可以增强用户参与度，并在您的网站或应用程序上提供有价值的帮助。通过遵循本教程中概述的步骤，您已经创建了一个功能齐全的聊天机器人，它可以理解并回应用户的查询，使您的项目更具互动性和用户友好性。随着您不断开发和完善您的聊天机器人，您可以探索其他功能，比如与外部数据库或服务集成以及增强机器人的自然语言理解。可能性是无限的，聊天机器人的未来充满潜力。祝您编码愉快！

本文链接：https://www.iokks.com/art/d6d6f5894d1e
本博客所有文章除特别声明外，均采用CC BY 4.0 CN协议 许可协议。转载请注明出处！