使用 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 = require("express");
const bodyParser = require("body-parser");
const OpenAI = require("openai");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config();

const openai = new OpenAI({
  apiKey: process.env.OPENAI_KEY,
  baseURL: process.env.BASE_URL || "https://api.openai.com/v1",
});

const app = express();
const port = process.env.PORT || 3000;

4. 中间件配置

启用 JSON 解析和 CORS 支持，允许前端跨域调用：

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

5. 聊天历史管理

为了保持对话上下文，需维护一个聊天历史数组。注意：在生产环境中，建议使用数据库或 Redis 持久化历史记录，而非仅保存在内存中。

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

6. 实现聊天接口

定义 /chat POST 路由，处理用户消息并返回 AI 回复：

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" });
  }
});

7. 启动服务器

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

前端开发

1. HTML 结构

在 public/index.html 中构建聊天界面骨架：

<!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" =>
      
        
        发送

2. CSS 样式

在 public/style.css 中设计简洁美观的界面：

* { 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; : hidden;
}
 { : none ; }
 { : ; : ; : auto; }
 { : ; :  solid ; : flex; : ; }
 { : ; : ; :  solid ; : ; : none; }
 { :  ; : ; : white; : none; : ; : pointer; }
 { : ; :  ; : ; : ; }
 { : ; : flex-end; : auto; }
 { : ; : flex-start; }

3. JavaScript 逻辑

在 public/script.js 中实现交互逻辑：

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.. = .(., ) + ;
  });

  
    () {
     message = userInput..();
     (!message) ;

    
    (message, );
    userInput. = ;
    userInput.. = ;
    sendButton. = ;

     {
       response =  (, {
        : ,
        : { :  },
        : .({ message }),
      });

       (!response.)   ();
       data =  response.();
      (data., );
    }  (error) {
      (, );
    }  {
      sendButton. = ;
    }
  }

   () {
     div = .();
    div. = ;
    div. = marked.(text);
    chatBox.(div);
    chatBox. = chatBox.;
  }

  sendButton.(, sendMessage);
  userInput.(,  {
     (e. ===  && !e.) {
      e.();
      ();
    }
  });
});

运行与测试

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

安全与部署建议

1. 密钥保护

切勿在前端代码中暴露 API Key。所有涉及密钥的操作必须在后端完成。生产环境中建议使用环境变量注入或密钥管理服务（如 AWS Secrets Manager）。

2. 限流与鉴权

为防止滥用，建议在 Express 中集成限流中间件（如 express-rate-limit）。同时，可考虑增加简单的身份验证机制，确保只有授权用户能调用接口。

3. 容器化部署

推荐使用 Docker 进行部署，确保环境一致性。示例 Dockerfile：

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

4. 错误处理优化

当前示例仅捕获了网络错误。实际项目中应记录详细日志（如使用 Winston 或 Morgan），以便排查问题。对于敏感信息，确保不打印到控制台。

总结

本文完整演示了如何利用 OpenAI API 构建一个功能完备的网页版 AI 聊天助手。通过 Node.js 后端处理业务逻辑，结合原生 JavaScript 实现流畅的前端交互，并提供了安全部署的最佳实践。开发者可根据实际需求扩展功能，如接入多模态模型、支持语音输入或集成知识库等。希望本教程能为您的 AI 应用开发提供有价值的参考。

注：本文代码示例仅供参考，生产环境请务必加强安全性与稳定性测试。

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