ChatHub 多智能助手集成平台技术指南

功能特性：一站式AI协作中心

💡 开发者伙伴注意：ChatHub并非单一AI服务，而是整合多家对话模型的协作平台，当前支持15+主流AI服务提供商。

多模型并行对话

🔍 核心价值：告别在不同AI平台间反复切换的低效工作流，实现"一次提问，多模型响应"的对比式交互。平台采用卡片式布局，每个AI助手拥有独立对话窗口，支持2×2、3×1等多种分屏模式（完成此步骤约需1分钟配置）。

图1：四窗口布局下的多模型并行对话展示，左侧为模型选择区，右侧为对话窗口

智能工作流工具集

⚙️ 实用功能矩阵：

• 跨模型消息转发：一键将问题同步至所有已加载模型
• 会话历史云同步：基于浏览器本地存储的加密历史记录
• 深色/浅色模式切换：支持跟随系统设置或手动切换（如图2所示）
• 自定义快捷键：通过Ctrl+Shift+P呼出命令面板配置

图2：深色主题下的双窗口对话界面，展示Claude与Bing的响应对比

快速上手：5分钟环境部署

💡 环境要求：Node.js ≥16.0.0，npm ≥7.0.0，Git客户端。推荐使用VSCode作为开发环境，配合ESLint插件获得最佳开发体验。

源码获取与依赖安装

git clone https://gitcode.com/gh_mirrors/ch/chathub
cd chathub
npm install

完成此步骤约需2分钟，取决于网络速度

开发环境启动

执行以下命令启动开发服务器，默认会在http://localhost:5173打开预览页面：

npm run dev

开发模式下支持热重载，修改代码后浏览器会自动刷新（首次启动约需30秒）。

扩展打包与安装

生成可安装的浏览器扩展包：

npm run build

构建产物位于dist/目录，在Chrome中通过"开发者模式→加载已解压的扩展程序"选择该目录完成安装。

核心模块：智能厨房架构解析

💡 架构类比：将ChatHub比作智能厨房，各模块如同专业化厨具，协同完成AI对话的"烹饪"过程。

模型适配层（食材处理区）

负责与各AI服务提供商API对接，位于src/app/bots/目录下，每个模型拥有独立适配模块：

• 标准化接口：统一的sendMessage、abort等方法定义
• 认证管理：处理API密钥、Cookie等身份验证信息
• 响应转换：将不同模型的返回格式标准化为内部统一结构

主要模型实现文件：

• chatgpt-webapp/：网页版ChatGPT适配
• claude-web/：Claude网页版接口封装
• gemini-api/：Google Gemini API客户端

界面渲染层（料理展示台）

位于src/app/components/目录，采用React组件化设计：

• ChatMessageList：对话消息展示列表，支持无限滚动加载
• ChatMessageInput：支持Markdown的富文本输入框
• LayoutSwitch：分屏布局控制器，提供多种窗口排列方案

状态管理层（厨房指挥中心）

基于React Context API实现全局状态管理：

• src/app/context.ts：定义全局状态结构
• src/app/state/：状态更新逻辑
• src/hooks/use-chat.ts：提供对话相关的自定义Hooks

扩展配置：个性化你的AI助手

💡 配置原则：所有敏感信息（如API密钥）均存储在浏览器本地，不会上传至任何服务器。建议定期备份localStorage中的配置数据。

基础设置项说明

参数名	类型	默认值	风险等级
apiTimeout	数字	30000	低：仅影响响应速度
defaultModel	字符串	"chatgpt"	低：仅影响初始加载
enableWebAccess	布尔值	false	中：启用时会发起网络请求
themeMode	字符串	"system"	低：仅影响界面展示

高级功能配置

⚙️ 多模型协同策略：在src/app/consts.ts中修改BOT_PRIORITY数组调整模型加载顺序。示例配置：

export const BOT_PRIORITY = [
  'chatgpt', 
  'claude', 
  'gemini', 
  'bing'
];

快捷键自定义

编辑src/app/utils/keyboard.ts文件配置自定义快捷键，支持单键、组合键（如Ctrl+Enter发送消息）。

常见排障速查表

问题现象	可能原因	解决方案
模型无法加载	1. 网络连接问题 2. 认证信息过期	1. 检查网络代理设置 2. 清除相关网站Cookie后重新登录
消息发送失败	1. API密钥错误 2. 模型配额耗尽	1. 重新配置API密钥 2. 切换至其他可用模型
界面布局错乱	1. 浏览器版本过低 2. 扩展冲突	1. 升级Chrome至90+版本 2. 禁用其他可能冲突的扩展
历史记录丢失	1. 浏览器数据清理 2. 扩展重新安装	1. 通过设置→导出数据定期备份 2. 使用设置→导入数据恢复

扩展开发建议

新AI模型集成

开发者可通过以下步骤添加新的AI模型支持：

1. 在src/app/bots/目录下创建新模型文件夹（如newbot/）
2. 实现AbstractBot抽象类定义的核心方法
3. 在src/app/bots/index.ts中注册新模型
4. 添加对应的图标至src/assets/logos/目录

自定义主题开发

通过修改src/app/theme.ts文件创建个性化主题：

1. 定义新的主题配色方案
2. 添加主题切换逻辑
3. 在设置界面增加主题选择项

数据导出增强

扩展src/app/utils/export.ts功能，支持更多格式导出：

• 实现Markdown格式对话记录导出
• 添加PDF生成功能
• 支持按日期范围筛选导出内容

完成以上扩展开发后，可通过npm run build打包新扩展，在浏览器中测试效果。对于稳定的功能贡献，建议通过项目的PR流程提交代码。