如何在2025年7月将ChatGPT嵌入网站？详细教程

2025年7月，OpenAI提供了更加完善和便捷的API接口，使得将ChatGPT嵌入网站变得简单高效。通过合理调用API，结合前端技术，你可以快速构建智能聊天机器人，提升用户体验。本文将为你详细讲解从申请API到前端集成的全过程。

第一步：申请并获取OpenAI API密钥

注册OpenAI账号
访问 OpenAI官网注册账号。
申请API访问权限
登录后进入控制台，申请ChatGPT相关API的使用权限。
获取API密钥
在控制台的API管理页面生成API密钥，保存好，后续调用需要用到。

第二步：搭建后端服务（Node.js示例）

为了保护API密钥安全，建议通过后端服务器转发请求。

初始化项目

mkdir chatgpt-web
cd chatgpt-web
npm init -y
npm install express axios cors

编写服务器代码（index.js）

const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const OPENAI_API_KEY = '你的API密钥';

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

  try {
    const response = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: 'gpt-4o-mini',
        messages: [{ role: 'user', content: message }],
        max_tokens: 500,
      },
      {
        headers: {
          'Authorization': `Bearer ${OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );

    res.json({ reply: response.data.choices[0].message.content });
  } catch (error) {
    console.error(error);
    res.status(500).send('Error communicating with OpenAI API');
  }
});

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

启动服务器

node index.js

第三步：前端集成示例（HTML + JavaScript）

编写简单的网页（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>ChatGPT 聊天机器人</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    #chatbox { width: 100%; height: 300px; border: 1px solid #ccc; padding: 10px; overflow-y: auto; }
    #input { width: 80%; padding: 10px; }
    #send { padding: 10px 20px; }
    .user { color: blue; }
    .bot { color: green; }
  </style>
</head>
<body>
  <h1>ChatGPT 聊天机器人</h1>
  <div id="chatbox"></div>
  <input id="input" type="text" placeholder="请输入消息" />
  <button id="send">发送</button>

  <script>
    const chatbox = document.getElementById('chatbox');
    const input = document.getElementById('input');
    const send = document.getElementById('send');

    send.onclick = async () => {
      const message = input.value.trim();
      if (!message) return;

      appendMessage('你', message, 'user');
      input.value = '';
      chatbox.scrollTop = chatbox.scrollHeight;

      const response = await fetch('http://localhost:3000/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message }),
      });

      if (response.ok) {
        const data = await response.json();
        appendMessage('ChatGPT', data.reply, 'bot');
      } else {
        appendMessage('系统', '请求失败，请稍后重试', 'bot');
      }

      chatbox.scrollTop = chatbox.scrollHeight;
    };

    function appendMessage(sender, text, className) {
      const p = document.createElement('p');
      p.className = className;
      p.textContent = `${sender}: ${text}`;
      chatbox.appendChild(p);
    }

    // 支持回车发送
    input.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') send.click();
    });
  </script>
</body>
</html>