本项目完全由 AI 编写，人类未手写一行代码。
从第一行 HTML 到最后一个 CSS 样式，从 JavaScript 逻辑到项目结构，全部由 AI 模型（Claude）根据需求对话生成。这是一个实验性的项目，旨在展示当前 AI 编码能力所能达到的边界——构建一个功能完整、界面精致、可直接使用的 Web 应用。
- 多模型支持 — 兼容任意 OpenAI 协议 API（DeepSeek、GPT 等），支持自定义模型名称
- 流式响应 — 使用 SSE 协议实时流式显示 AI 回复，打字效果平滑自然
- 推理过程展示 — 支持 DeepSeek 等推理模型的思维链展示（可折叠，流式完成后自动收起）
- 工具调用系统 — 内置 6 种实用工具：联网搜索、计算器、时间日期、随机数、UUID 生成、网页抓取，支持多轮 tool calling，每项可单独开关
- 联网搜索 — 支持博查搜索 API 和本地多引擎代理（必应/搜狗/360/百度），tool calling 自动选择
- LaTeX 公式渲染 — 支持行内
$...$和块级$$...$$数学公式，基于 KaTeX 渲染 - 对话管理 — 多会话管理，支持新建、切换、重命名、删除，自动生成对话标题
- 预设提示词系统 — 内置 6 大类 20+ 预设提示词，支持自定义、搜索、分组管理
- 消息操作 — 复制（富文本/纯文本/Markdown/思考内容）、编辑、重新生成
- 文件上传 — 支持文本文件、图片、DOCX，拖拽/粘贴上传，图片自动压缩
- 配置持久化 — 所有设置自动保存至 IndexedDB（降级至 localStorage）
- 导出/导入 — JSON 多选导出、CSV 单对话导出，支持导入预览确认
- 加密分享 — 通过 AES-256-GCM 加密分享 API 配置
- 响应式设计 — 桌面端左侧栏布局，移动端抽屉式导航，触摸友好
- 暗色模式 — 跟随系统或手动切换，Element Plus 组件完整适配
npm install
npm run devnpm run build
npm run preview联网搜索提供两种方式：
1. 博查搜索（推荐） 免费注册获取 API Key：open.bocha.cn，在设置面板中填入即可使用。
2. 本地代理
node server.js启动后支持必应/搜狗/360/百度四个搜索引擎代理。
| 参数 | 说明 | 默认值 |
|---|---|---|
| API 地址 | OpenAI 兼容接口地址 | https://api.deepseek.com/v1 |
| API 密钥 | 你的 API Key | — |
| 模型 | 模型名称（支持预设和自定义） | deepseek-v4-flash |
| 系统提示词 | 系统级 prompt | 聊天机器人预设 |
| Temperature | 生成温度 (0-2) | 0.7 |
| Max Tokens | 最大生成长度 | 0（不限制） |
| Top P | 核采样参数 | 1.0 |
| 频率惩罚 | 频率惩罚系数 | 0.0 |
| 存在惩罚 | 存在惩罚系数 | 0.0 |
| 历史上限 | 包含的上下文轮数 | 20 |
| 深度思考 | 启用推理模型的思维链输出 | 开启 |
| 计算器 / 时间日期 / 随机数 / UUID / 网页抓取 | AI 可用工具集 | 全部开启 |
| 联网搜索 | 启用互联网搜索能力 | 开启（需配置 API Key 或本地代理） |
ai-chat-box/
├── index.html # Vite 入口
├── package.json # 依赖配置
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
├── server.js # Node.js 搜索代理（无需构建）
├── src/
│ ├── main.ts # 应用入口
│ ├── App.vue # 根组件（布局 + 抽屉式设置面板）
│ ├── router/ # Vue Router
│ ├── types/ # TypeScript 类型定义（6 个类型文件）
│ ├── stores/ # Pinia 状态管理（6 个 store）
│ ├── services/ # 服务层（API/DB/搜索）
│ ├── composables/ # 组合式函数（SSE流式/文件处理/剪贴板/加密/主题）
│ ├── components/
│ │ ├── layout/ # AppHeader, HistorySidebar, SettingsSidebar
│ │ ├── chat/ # 聊天核心（MessageBubble, ChatInput 等）
│ │ ├── settings/ # 设置面板（API/参数/预设/搜索/格式）
│ │ └── dialogs/ # 导出/导入/分享对话框
│ ├── utils/ # 工具函数
│ └── styles/ # 全局样式 + CSS 变量
└── data/
└── presets.json # 内置预设提示词
| 技术 | 用途 |
|---|---|
| Vue 3 (Composition API) | UI 框架 |
| TypeScript | 类型安全 |
| Vite | 构建工具 |
| Pinia | 状态管理 |
| Element Plus | UI 组件库 |
| KaTeX | LaTeX 数学公式渲染 |
| marked | Markdown → HTML 渲染 |
| mammoth | DOCX 解析 |
| IndexedDB | 数据持久化 |
支持所有提供 OpenAI 兼容 API 的服务商：
- DeepSeek (
api.deepseek.com) - OpenAI (
api.openai.com) - 任何使用
/v1/chat/completions接口的代理或本地服务（如 Ollama、vLLM、LocalAI 等）
- Chrome / Edge (最新版)
- Firefox (最新版)
- Safari (最新版)
- 移动端浏览器（响应式适配）
此版本是从 Vanilla JS 迁移到 Vue 3 + TypeScript + Element Plus 的重构版本，已通过迭代测试修复多项问题，主要功能稳定可用。
已知情况：
- KaTeX（~1.8MB）因体积较大被拆分为独立 chunk，首次加载可能较慢
- 搜狗/360/百度搜索引擎存在反爬限制，本地代理方式下仅必应可稳定工作；推荐使用博查搜索 API
本项目基于 MIT 许可证开源。
- 本项目全部代码由 Claude (Anthropic) 生成
- marked.js — 轻量级 Markdown 解析器
- Element Plus — Vue 3 组件库
完全由 AI 编写 · 从零到一 · 没有人类开发者的参与
Built entirely by AI — from concept to code
Built entirely by AI — from concept to code