使用 OpenAI API 构建网页版 AI 聊天助手 | 极客日志

JavaScriptNode.jsAI大前端

使用 OpenAI API 构建网页版 AI 聊天助手

综述由AI生成介绍如何使用 Node.js 和 OpenAI API 构建一个网页版 AI 聊天助手。项目包含前后端交互，前端提供简洁的聊天界面，后端处理 API 请求并维护对话历史。通过 Express 搭建服务器，结合原生 JavaScript 实现消息发送与渲染，支持 Markdown 解析。文章涵盖环境配置、代码实现及运行步骤，重点讲解了环境变量管理、跨域处理及安全部署建议，适合希望快速集成 AI 能力的开发者参考。

赛博行者发布于 2025/2/6更新于 2026/6/322 浏览

使用 OpenAI API 构建网页版 AI 聊天助手

前言

随着大语言模型技术的普及，将 AI 能力集成到 Web 应用中已成为开发者的常见需求。本文将详细介绍如何基于 Node.js 和 OpenAI API，从零开始构建一个具备前后端交互能力的网页版 AI 聊天助手。项目涵盖环境搭建、后端服务配置、前端界面实现以及安全部署建议，适合希望快速掌握 AI 应用开发的开发者参考。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

Node.js: 推荐安装 LTS 版本（v16+），用于运行后端服务。
NPM: 随 Node.js 一同安装，用于管理依赖包。
OpenAI API Key: 需要拥有一个有效的 OpenAI 密钥。若无法直接访问官方接口，可使用兼容的代理地址。
代码编辑器: 如 VS Code，便于编写和调试代码。

项目结构

建议采用以下目录结构组织项目文件：

project-root/
├── .env                  # 环境变量配置文件
├── ai.js                 # 后端入口文件
├── package.json          # 项目依赖配置
├── public/               # 静态资源目录
│   ├── index.html        # 前端页面
│   ├── style.css         # 样式表
│   └── script.js         # 前端逻辑
└── README.md             # 项目说明

后端开发

1. 初始化项目与安装依赖

在项目根目录下打开终端，执行以下命令初始化项目并安装必要依赖：

npm init -y
npm install express body-parser openai dotenv cors marked

express: Web 应用框架。
body-parser: 解析请求体。
openai: OpenAI SDK。
dotenv: 加载环境变量。
cors: 处理跨域资源共享。
marked: Markdown 解析库（可选，用于前端渲染）。

2. 配置环境变量

创建 .env 文件，存储敏感信息，避免硬编码：

PORT=3000
OPENAI_KEY=your_api_key_here
BASE_URL=https://api.302.ai/v1

注意：请勿将 .env 文件上传至公共代码仓库（如 GitHub），以免泄露密钥。

3. 导入模块与初始化客户端

在 ai.js 中引入所需模块并配置 OpenAI 客户端：

const express = ();
 bodyParser = ();
  = ();
 dotenv = ();
 cors = ();

dotenv.();

 openai =  ({
  : process..,
  : process.. || ,
});

 app = ();
 port = process.. || ;

相关免费在线工具

RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online
Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online
随机西班牙地址生成器
随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。在线工具，随机西班牙地址生成器在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

app.use(bodyParser.json());
app.use(cors());
app.use(express.static("public")); // 托管静态文件

let chatHistory = [{ role: "system", content: "You are a helpful assistant." }];

app.post("/chat", async (req, res) => {
  const userMessage = req.body.message;
  
  if (!userMessage) {
    return res.status(400).json({ error: "Message is required" });
  }

  // 添加用户消息到历史
  chatHistory.push({ role: "user", content: userMessage });

  try {
    const completion = await openai.chat.completions.create({
      messages: chatHistory,
      model: "gpt-3.5-turbo",
    });

    const aiMessage = completion.choices[0].message.content;
    
    // 添加 AI 回复到历史
    chatHistory.push({ role: "assistant", content: aiMessage });

    res.json({ aiMessage, chatHistory });
  } catch (error) {
    console.error("API Error:", error);
    res.status(500).json({ error: "Failed to process request" });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI 助手</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <button id="openAiButton" class="button--openai">🤖</button>
    
    <div id="aiWindow" class="ai-window hidden">
      <button id="closeButton" class="button--close-window">&times;</button>
      <div id="chatBox" class="ai-chatbox"></div>
      <div class="input-box">
        <textarea id="userInput" placeholder="输入消息..."></textarea>
        <button id="sendButton">发送</button>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; background: #f0f2f5; }
.container { position: relative; height: 100vh; }
.button--openai { 
  position: absolute; bottom: 20px; right: 20px; 
  width: 50px; height: 50px; border-radius: 50%; 
  background: #007bff; color: white; border: none; cursor: pointer;
}
.ai-window { 
  position: absolute; bottom: 80px; right: 20px; 
  width: 400px; height: 500px; background: white; 
  border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
  display: flex; flex-direction: column; overflow: hidden;
}
.hidden { display: none !important; }
.ai-chatbox { flex: 1; padding: 15px; overflow-y: auto; }
.input-box { padding: 10px; border-top: 1px solid #eee; display: flex; gap: 10px; }
textarea { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: none; }
button { padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
.message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; }
.message.user { background: #d1e7dd; align-self: flex-end; margin-left: auto; }
.message.assistant { background: #f8d7da; align-self: flex-start; }

document.addEventListener("DOMContentLoaded", function () {
  const sendButton = document.getElementById("sendButton");
  const closeButton = document.getElementById("closeButton");
  const openAiButton = document.getElementById("openAiButton");
  const chatBox = document.getElementById("chatBox");
  const userInput = document.getElementById("userInput");
  const aiWindow = document.getElementById("aiWindow");

  // 显示/隐藏窗口
  openAiButton.addEventListener("click", () => aiWindow.classList.remove("hidden"));
  closeButton.addEventListener("click", () => aiWindow.classList.add("hidden"));

  // 调整文本框高度
  userInput.addEventListener("input", function() {
    this.style.height = "auto";
    this.style.height = Math.min(this.scrollHeight, 150) + "px";
  });

  // 发送消息
  async function sendMessage() {
    const message = userInput.value.trim();
    if (!message) return;

    // 显示用户消息
    appendMessage(message, "user");
    userInput.value = "";
    userInput.style.height = "auto";
    sendButton.disabled = true;

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

      if (!response.ok) throw new Error("Network response was not ok");
      const data = await response.json();
      appendMessage(data.aiMessage, "assistant");
    } catch (error) {
      appendMessage("系统错误，请稍后重试。", "system");
    } finally {
      sendButton.disabled = false;
    }
  }

  function appendMessage(text, type) {
    const div = document.createElement("div");
    div.className = `message ${type}`;
    div.innerHTML = marked.parse(text);
    chatBox.appendChild(div);
    chatBox.scrollTop = chatBox.scrollHeight;
  }

  sendButton.addEventListener("click", sendMessage);
  userInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });
});

确保 .env 文件中已填入正确的 OPENAI_KEY。
启动后端服务：
```
node ai.js
```
在浏览器中访问 http://localhost:3000。
点击右下角机器人图标打开聊天窗口，输入问题并发送。

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["node", "ai.js"]

使用 OpenAI API 构建网页版 AI 聊天助手

使用 OpenAI API 构建网页版 AI 聊天助手

前言

环境准备

项目结构

后端开发

1. 初始化项目与安装依赖

2. 配置环境变量

3. 导入模块与初始化客户端

更多推荐文章

相关免费在线工具

4. 中间件配置

5. 聊天历史管理

6. 实现聊天接口

7. 启动服务器

前端开发

1. HTML 结构

2. CSS 样式

3. JavaScript 逻辑

运行与测试

安全与部署建议

1. 密钥保护

2. 限流与鉴权

3. 容器化部署

4. 错误处理优化

总结

更多推荐文章

相关免费在线工具

使用 OpenAI API 构建网页版 AI 聊天助手

使用 OpenAI API 构建网页版 AI 聊天助手

前言

环境准备

项目结构

后端开发

1. 初始化项目与安装依赖

2. 配置环境变量

3. 导入模块与初始化客户端

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

4. 中间件配置

5. 聊天历史管理

6. 实现聊天接口

7. 启动服务器

前端开发

1. HTML 结构

2. CSS 样式

3. JavaScript 逻辑

运行与测试

安全与部署建议

1. 密钥保护

2. 限流与鉴权

3. 容器化部署

4. 错误处理优化

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具