ChatHub实战指南：从安装到进阶的5个关键步骤

核心功能解析

ChatHub作为一款All-in-one聊天机器人客户端，最核心的价值在于实现了多AI服务的集成与对比。想象一下，当你需要撰写一份技术方案时，只需输入一次问题，就能同时获得ChatGPT的逻辑严谨性、Claude的长文本处理能力、Bard的实时信息获取以及Gemini的多模态响应。这种并行对比能力不仅能帮助你快速找到最优答案，还能让你发现不同AI模型的思维差异。

核心模块解析

1. 多AI集成引擎

   • 功能作用：统一管理不同AI服务的认证、请求与响应处理
   • 为什么需要：避免在多个AI平台间切换的繁琐操作，保持工作流的连贯性
   • 源码位置：src/app/bots/

2. 聊天管理系统

   • 功能作用：保存历史对话、支持会话导入导出、实现多窗口并行聊天
   • 为什么需要：解决多轮对话上下文管理问题，便于追踪思考过程
   • 源码位置：src/services/chat-history.ts

3. 界面布局引擎

   • 功能作用：提供灵活的窗口布局，支持分屏、标签页等多种展示方式
   • 为什么需要：满足不同场景下的对比需求，从简单并排到复杂网格布局
   • 源码位置：src/app/components/Chat/LayoutSwitch.tsx

环境准备

让我们一起准备开发环境，只需三步即可完成：

步骤1：克隆项目代码

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

步骤2：安装依赖

yarn install
# 预期输出：
# yarn install v1.22.19
# [1/4] Resolving packages...
# [2/4] Fetching packages...
# [3/4] Linking dependencies...
# [4/4] Building fresh packages...
# Done in 30.52s.

步骤3：配置开发环境

确保你的开发环境满足以下要求：

• Node.js 16.x或更高版本
• npm 7.x或yarn 1.x
• 现代浏览器（Chrome 90+、Edge 90+或Firefox 88+）

快速上手

接下来尝试启动应用，体验ChatHub的核心功能：

开发模式启动

yarn dev
# 预期输出：
# vite v4.3.9 dev server running at:
# 
#  > Local: http://localhost:5173/
#  > Network: use `--host` to expose
# 
#  ready in 300ms.

基本操作流程

1. 在左侧导航栏选择需要使用的AI服务（如ChatGPT、Claude、Bard等）
2. 点击"Add Chat"创建新对话窗口
3. 在底部输入框中输入问题，点击"Send"或按Enter发送
4. 使用顶部布局按钮切换不同的窗口排列方式

深度配置

环境变量配置

环境变量	作用	默认值	Windows设置方法	macOS/Linux设置方法
API_TIMEOUT	请求超时时间（秒）	30	set API_TIMEOUT=45	export API_TIMEOUT=45
DEBUG_MODE	是否启用调试模式	false	set DEBUG_MODE=true	export DEBUG_MODE=true
DEFAULT_LAYOUT	默认布局方式	grid	set DEFAULT_LAYOUT=stacked	export DEFAULT_LAYOUT=stacked
MAX_CONCURRENT_CHATS	最大并发聊天数	4	set MAX_CONCURRENT_CHATS=6	export MAX_CONCURRENT_CHATS=6

配置文件修改

主要配置文件位置：src/app/consts.ts

常用配置项修改示例：

// 修改默认主题
export const DEFAULT_THEME = 'dark'; // 可选 'light' | 'dark' | 'system'

// 调整字体大小
export const FONT_SIZE = 14; // 单位：px

// 配置默认启用的AI服务
export const DEFAULT_ENABLED_BOTS = [
  'chatgpt',
  'claude',
  'bing'
];

扩展开发

添加新AI服务支持

1. 创建服务实现 在src/app/bots/目录下创建新的AI服务目录，例如newbot/，并添加以下文件：

newbot/
├── api.ts      // API调用实现
└── index.ts    // 服务注册

2. 实现基础接口 在api.ts中实现必要的接口方法：

import { AbstractBot } from '../abstract-bot';

export class NewBot extends AbstractBot {
  async sendMessage(message: string, context: any): Promise<string> {
    // 实现与新AI服务的通信逻辑
    const response = await fetch('https://api.newbot.com/chat', {
      method: 'POST',
      body: JSON.stringify({ prompt: message, ...context }),
    });
    return response.text();
  }
  
  // 实现其他必要方法...
}

3. 注册新服务 在index.ts中注册服务：

import { NewBot } from './api';

export const newbot = {
  name: 'NewBot',
  icon: 'path-to-icon.svg',
  botClass: NewBot,
  settingsComponent: null, // 可选：配置界面组件
};

4. 在主入口注册 修改src/app/bots/index.ts，添加新服务：

import { newbot } from './newbot';

export const bots = [
  // 现有服务...
  newbot,
];

常见问题

Q: 如何导出聊天记录？

A: 在聊天窗口右上角点击"更多"按钮（三个点），选择"Export"，支持JSON和Markdown两种格式导出。

Q: 提示API密钥无效怎么办？

A: 检查src/app/settings/目录下对应AI服务的配置页面，确保API密钥正确且具有相应权限。

Q: 如何切换深色/浅色模式？

A: 点击左下角设置图标，在"外观"选项中选择主题模式，或使用快捷键Ctrl+Shift+T(Windows/Linux)或Cmd+Shift+T(macOS)。

Q: 应用运行缓慢如何解决？

A: 尝试以下方法：

1. 减少同时运行的AI服务数量
2. 清除缓存（设置 → 高级 → 清除缓存）
3. 升级Node.js到最新LTS版本