AI 聊天助手一、项目简介基于 DeepSeek API 的 PC 端在线 AI 对话项目。前端为单页 HTMLVue 2后端为 Express 代理服务负责转发聊天请求并隐藏 API Key支持多轮上下文对话、打字机效果展示与错误提示适合作为大模型接入与前后端分离入门示例。功能介绍核心功能功能说明实时对话用户输入消息后调用 DeepSeek 大模型生成回答并展示在聊天窗口多轮对话每次请求携带完整历史消息AI 可结合上下文连续作答打字机效果AI 回复逐字显示模拟真实输入体验加载状态等待回复时显示「正在输入」动画发送按钮自动禁用错误提示网络异常或 API 失败时在聊天区展示友好错误信息界面与交互聊天气泡布局用户消息靠右蓝色AI 消息靠左灰色支持Enter键发送空内容时发送按钮不可点击新消息自动滚动到底部页面打开时展示一条 AI 欢迎语技术实现要点浏览器 (index.html) │ POST /api/chat { messages: [...] } ▼ Express 服务 (server.js) │ 角色转换ai → assistant │ 调用 OpenAI SDKbaseURL 指向 DeepSeek ▼ DeepSeek API (deepseek-chat) │ 返回 completion.choices[0].message.content ▼ 前端打字机渲染前后端分离前端只负责 UI 与请求不直接接触 API KeyCORS 已开启允许跨域访问开发时前端与后端同源由 Express 统一托管单文件前端index.html内聚 HTML、CSS、Vue 逻辑无构建步骤文件目录介绍ai-chat-deepseek-pc/ ├── index.html # 前端页面聊天 UI、Vue 逻辑、样式 ├── server.js # 后端服务静态资源托管、/api/chat 接口、DeepSeek 调用 ├── package.json # 项目依赖与启动脚本start / dev ├── pnpm-lock.yaml # pnpm 锁文件依赖版本锁定 ├── README.md # 项目简介、API Key 配置与运行说明 ├── 项目说明.md # 本文件功能与目录说明 ├── .gitignore # Git 忽略规则 ├── node_modules/ # 依赖包npm/pnpm install 后生成勿手动修改 └── 演示材料/ └── 截图/ ├── 图-1.png # 项目演示截图 └── 图-2.png # 项目演示截图主要文件说明index.html前端唯一入口包含模板标题栏、消息列表、输入框与发送按钮样式聊天气泡、打字动画、响应式布局最大宽度 800px脚本Vue 2 实例负责消息管理、fetch调用后端、打字机效果与滚动关键请求地址POST http://localhost:3000/api/chatserver.jsNode.js 后端主要职责职责实现静态托管express.static托管项目根目录提供index.html首页路由GET /返回index.html聊天接口POST /api/chat接收消息数组转发至 DeepSeek角色映射将前端role: ai转为 API 要求的assistant错误处理参数校验、API 异常时返回 400 / 500 及错误信息API Key 配置位置server.js中OpenAI客户端的apiKey字段。package.json脚本命令用途startnode server.js生产/日常使用devnodemon server.js开发时热重载主要依赖express、cors、openai兼容 DeepSeek 接口、nodemon开发。运行方式# 1. 安装依赖npminstall# 或 pnpm install# 2. 在 server.js 中配置有效的 DeepSeek API Key# 3. 启动服务npmstart# 开发可用 npm run dev# 4. 浏览器访问http://localhost:3000注意不可直接双击index.html用file://打开。页面依赖后端http://localhost:3000/api/chat必须先启动server.js。配置说明端口默认3000可通过环境变量PORT修改模型deepseek-chat系统提示词You are a helpful assistant.可在server.js中调整许可证本项目仅供学习交流使用请勿用于商业用途。源码地址https://www.aiyuanma.vip/posts/ai-chat-deepseek-pc AI 聊天助手
AI 聊天助手一、项目简介基于 DeepSeek API 的 PC 端在线 AI 对话项目。前端为单页 HTMLVue 2后端为 Express 代理服务负责转发聊天请求并隐藏 API Key支持多轮上下文对话、打字机效果展示与错误提示适合作为大模型接入与前后端分离入门示例。功能介绍核心功能功能说明实时对话用户输入消息后调用 DeepSeek 大模型生成回答并展示在聊天窗口多轮对话每次请求携带完整历史消息AI 可结合上下文连续作答打字机效果AI 回复逐字显示模拟真实输入体验加载状态等待回复时显示「正在输入」动画发送按钮自动禁用错误提示网络异常或 API 失败时在聊天区展示友好错误信息界面与交互聊天气泡布局用户消息靠右蓝色AI 消息靠左灰色支持Enter键发送空内容时发送按钮不可点击新消息自动滚动到底部页面打开时展示一条 AI 欢迎语技术实现要点浏览器 (index.html) │ POST /api/chat { messages: [...] } ▼ Express 服务 (server.js) │ 角色转换ai → assistant │ 调用 OpenAI SDKbaseURL 指向 DeepSeek ▼ DeepSeek API (deepseek-chat) │ 返回 completion.choices[0].message.content ▼ 前端打字机渲染前后端分离前端只负责 UI 与请求不直接接触 API KeyCORS 已开启允许跨域访问开发时前端与后端同源由 Express 统一托管单文件前端index.html内聚 HTML、CSS、Vue 逻辑无构建步骤文件目录介绍ai-chat-deepseek-pc/ ├── index.html # 前端页面聊天 UI、Vue 逻辑、样式 ├── server.js # 后端服务静态资源托管、/api/chat 接口、DeepSeek 调用 ├── package.json # 项目依赖与启动脚本start / dev ├── pnpm-lock.yaml # pnpm 锁文件依赖版本锁定 ├── README.md # 项目简介、API Key 配置与运行说明 ├── 项目说明.md # 本文件功能与目录说明 ├── .gitignore # Git 忽略规则 ├── node_modules/ # 依赖包npm/pnpm install 后生成勿手动修改 └── 演示材料/ └── 截图/ ├── 图-1.png # 项目演示截图 └── 图-2.png # 项目演示截图主要文件说明index.html前端唯一入口包含模板标题栏、消息列表、输入框与发送按钮样式聊天气泡、打字动画、响应式布局最大宽度 800px脚本Vue 2 实例负责消息管理、fetch调用后端、打字机效果与滚动关键请求地址POST http://localhost:3000/api/chatserver.jsNode.js 后端主要职责职责实现静态托管express.static托管项目根目录提供index.html首页路由GET /返回index.html聊天接口POST /api/chat接收消息数组转发至 DeepSeek角色映射将前端role: ai转为 API 要求的assistant错误处理参数校验、API 异常时返回 400 / 500 及错误信息API Key 配置位置server.js中OpenAI客户端的apiKey字段。package.json脚本命令用途startnode server.js生产/日常使用devnodemon server.js开发时热重载主要依赖express、cors、openai兼容 DeepSeek 接口、nodemon开发。运行方式# 1. 安装依赖npminstall# 或 pnpm install# 2. 在 server.js 中配置有效的 DeepSeek API Key# 3. 启动服务npmstart# 开发可用 npm run dev# 4. 浏览器访问http://localhost:3000注意不可直接双击index.html用file://打开。页面依赖后端http://localhost:3000/api/chat必须先启动server.js。配置说明端口默认3000可通过环境变量PORT修改模型deepseek-chat系统提示词You are a helpful assistant.可在server.js中调整许可证本项目仅供学习交流使用请勿用于商业用途。源码地址https://www.aiyuanma.vip/posts/ai-chat-deepseek-pc