无需编程：三分钟帮你添加一个功能强大的ChatGPT网站聊天机器人！

前端

2024-01-27 18:27:18

随着ChatGPT的不断火爆，越来越多的开发者开始将ChatGPT应用到自己的实际工作中，旨在提高开发效率并减轻开发工作负担。现在，你也能在短短几分钟内创建一个简单的网站聊天机器人，这篇教程将告诉你如何实现。

前提条件

拥有一个网站或博客。
访问ChatGPT的权限。
基本的HTML和CSS知识。

步骤1：创建一个ChatGPT API密钥

登录OpenAI网站，创建或登录你的账户。
点击右上角的“API”按钮，然后点击“Create New API Key”按钮。
将你的API密钥复制到一个安全的地方。

步骤2：将ChatGPT API密钥添加到你的网站

打开你的网站代码，在<head>标签中添加以下代码：

<script src="https://unpkg.com/chatgpt-api-client@0.0.1/dist/chatgpt-api-client.min.js"></script>

在<body>标签中添加以下代码：

<div id="chatgpt-container"></div>

将你的ChatGPT API密钥添加到以下代码中，然后将代码粘贴到<body>标签中：

<script>
  const chatgpt = new ChatGPTClient({
    apiKey: 'YOUR_API_KEY',
  });

  const chatgptContainer = document.getElementById('chatgpt-container');

  const createMessage = (message, isBot) => {
    const messageElement = document.createElement('div');
    messageElement.classList.add('chatgpt-message');
    messageElement.classList.add(isBot ? 'chatgpt-message--bot' : 'chatgpt-message--user');
    messageElement.textContent = message;

    chatgptContainer.appendChild(messageElement);
  };

  const sendMessage = (message) => {
    createMessage(message, false);

    chatgpt.send(message).then((response) => {
      createMessage(response, true);
    });
  };

  chatgptContainer.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      const message = event.target.value;
      sendMessage(message);
      event.target.value = '';
    }
  });
</script>