✨ 一个现代化的多模型对话网页应用，支持同时与多个 AI 模型进行对话。
这是一个基于 Vue 3 和本机 Node 代理构建的多模型对话客户端，用户可以同时配置和对话多个 AI 模型（如 GPT、Claude、Gemini 等），实现"一发多收"的对话体验。
| 多模型对话 | 供应商管理 | 模型管理 |
|---|---|---|
 |
 |
 |
设计理念：
- 🎯 简单易用 - 无需云端业务后端，本机即可运行
- 🔧 高度可配置 - 用户完全掌控模型配置
- ⚡ 高性能 - 并发请求，流式响应
- 🎨 现代美观 - 简洁优雅的 UI 设计
- 🏠 本地优先 - 业务数据保存在浏览器 IndexedDB，经本机同源代理请求模型服务
- ✅ 同时配置多个 AI 模型
- ✅ 支持 OpenAI 兼容与 Anthropic Messages 文本模型
- ✅ 支持 OpenAI Images API 兼容的图片生成与单图编辑模型
- ✅ 支持默认关闭的联网搜索开关（本机先获取搜索上下文，再发送给模型）
- ✅ 一键切换模型激活状态
- ✅ 模型分组展示，颜色区分
- ✅ 实时流式输出（打字机效果）
- ✅ 并发发送消息到所有选中模型
- ✅ 消息历史记录
- ✅ Markdown 内容渲染
- ✅ 自定义模型添加
- ✅ API Key 安全存储（IndexedDB）
- ✅ 多供应商配置管理
- ✅ 模型分组展示，颜色区分
- ✅ 响应式设计，支持多面板分屏
- ✅ 现代化的 UI 风格
- ✅ 流畅的动画过渡
- ✅ 深色/浅色主题（可扩展）
- ✅ 手机端适配
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 访问 http://127.0.0.1:3002
# 4. 构建生产版本
npm run build- 点击首页顶部右上角的 设置 按钮，进入供应商配置页面
- 添加你的模型供应商（OpenAI、Claude、Gemini 等）
- 配置 API Key、接口地址等参数
- 保存供应商配置
- 进入模型管理页面
- 为每个供应商添加对应的模型
- 启用/禁用你想要使用的模型
- 可以自定义模型显示名称
- 返回聊天页面
- 在顶部标签栏选择你想要同时对话的模型（可多选）
- 被选中的模型会显示对应的聊天面板，可拖拽调整大小
- 在底部输入框中输入你的问题
- 需要实时信息时，可开启输入栏中的 联网搜索（默认关闭，会先由本机代理获取搜索上下文）
- 按 Enter 键发送（或点击发送按钮）
- 所有选中的模型会同时收到消息并开始回复
- 观察各个模型的回答，进行对比！
- 联网搜索默认关闭，只有开启后才会触发。
- 开启后，本机代理会先根据当前用户问题获取搜索/天气上下文，再把这些资料随聊天请求发送给模型。
- API Key 不会发送给搜索服务；搜索关键词和用于回答的搜索上下文会参与本次模型请求。
multi-model-dialogue/
├── docs/
│ └── images/ # 页面预览图
├── public/
│ └── favicon.svg # 站点图标
├── server/
│ ├── chat-proxy.js # 聊天代理
│ ├── image-proxy.js # 图片代理
│ ├── model-fetch.js # 供应商模型列表拉取
│ ├── provider-latency.js # 供应商请求地址测速
│ └── web-search.js # 联网搜索上下文
├── src/
│ ├── api/ # 跨页面底层访问能力
│ ├── composables/ # 共享组合式函数
│ ├── data/ # 字典和 IndexedDB 表定义
│ ├── router/ # 页面路由
│ ├── stores/ # Pinia 状态管理
│ ├── utils/ # 纯工具函数
│ ├── views/ # 页面目录（chat、models、providers）
│ ├── App.vue # 根组件
│ ├── main.js # Vue 应用入口
│ └── style.css # 全局样式
├── test/ # Node 测试（*.test.js）
├── .gitignore # Git 忽略规则
├── AGENTS.md # 编码代理协作和项目约束
├── LICENSE # 开源许可证
├── README.md # 项目说明文档
├── index.html # HTML 入口
├── package-lock.json # npm 依赖版本锁定
├── package.json # 项目依赖和脚本
├── postcss.config.js # PostCSS 配置
├── server.js # 本机服务入口和同源 API 路由
├── tailwind.config.js # Tailwind CSS 配置
└── vite.config.js # Vite 配置和开发期 API 插件
在对应页面目录的 api.js 中添加数据接口，在 src/data/dictionarys/ 中添加提供商字典：
- 在
src/data/dictionarys/providers.js中添加新的提供商定义 - 在
src/api/http.js中复用通用 HTTP 调用逻辑 - 使用
src/views/providers/api.js和src/views/models/api.js管理配置
项目使用 IndexedDB 进行本地数据存储，封装在 src/api/db.js 中：
STORE_PROVIDERS- 供应商配置表STORE_MODELS- 模型配置表
所有 CRUD 操作通过 src/views/providers/api.js 和 src/views/models/api.js 进行。
修改 tailwind.config.js 中的颜色配置：
theme: {
extend: {
colors: {
primary: {
500: '#your-color', // 更改主色调
}
}
}
}A: 完全安全。所有配置都保存在浏览器的 indexedDB 中，不会发送到任何第三方服务器，只有在调用模型 API 时才会直接发送到对应的模型提供商。
A: 响应速度取决于你使用的模型服务商的网络连接。建议：
- 选择网络延迟较低的模型
- 检查网络连接
- 考虑使用 API 代理
A: 当然可以！只要模型兼容 OpenAI API 格式：
- 点击「配置」→ 添加任意预设模型
- 修改「接口地址」为你的 API 地址
- 修改「模型名称」为你的模型名
- 输入 API Key 即可
A: 目前消息历史保存在内存中，刷新页面会清空。模型和供应商配置持久化存储在 IndexedDB 中。
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue | 3.4+ | 前端框架 |
| Pinia | 2.1+ | 状态管理 |
| Vue Router | 4.x | 路由管理 |
| Vite | 5.0+ | 构建工具 |
| Tailwind CSS | 3.4+ | CSS 框架 |
| Element Plus | 2.x | UI 组件库 |
| Lucide Vue Next | - | 图标库 |
| idb | 8.x | IndexedDB 封装 |
欢迎贡献代码、报告问题或提出建议！
- Fork 本项目
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
MIT License - 详见 LICENSE 文件
- 发现 Bug？请提交 Issue
- 有新功能想法？欢迎讨论
- 觉得好用？给个 Star ⭐ 吧！