Chat Chat — 多模型统一对话与搜索平台

图1：ChatChat 项目作者头像

项目背景与定位

对于经常在多个 AI 模型之间切换的开发者来说，每次切换网页、复制粘贴上下文是一件令人头疼的事。Chat Chat 正是为解决这一痛点而生——它是一个统一的 AI 对话与搜索平台，支持同时接入 OpenAI GPT 系列、Anthropic Claude、Cohere、Google Gemini、Mistral、HuggingFace、Groq、Fireworks、Perplexity 等十余家主流 AI 服务商，用户可以在同一个界面中自由切换模型，并支持网络搜索增强回答。

项目由独立开发者 okisdev（GitHub ID: 125832256）创建并维护，采用了 Next.js 14 + TypeScript + TailwindCSS + shadcn/ui 的现代 Web 技术栈，代码质量高，项目结构清晰，支持国际化（内置 12 种语言）。截至分析时，GitHub 获星 1270 颗，Fork 213 次，在同类聚合类 AI 应用中属于活跃度较高的项目。

核心技术架构

前端框架与 UI

项目基于 Next.js 14（App Router）构建，这是当前 React 生态中最主流的全栈框架。UI 层使用了：

• TailwindCSS 作为原子化 CSS 方案，配合 tailwindcss-animate 实现流畅动画
• shadcn/ui（基于 Radix UI）提供高质量无障碍组件：Dialog、Drawer、Dropdown、Select、Switch、Tabs 等
• Vercel Analytics + Speed Insights 集成性能监控

组件按功能分为三大模块：

• components/layout/ — 布局层（侧边栏、对话窗口、设置面板、搜索窗口）
• components/layout/chat/ — 对话核心组件（输入框、消息渲染、模型选择、历史列表）
• components/layout/settings/ — 设置面板（通用设置、Provider 设置、搜索引擎设置）

AI 集成层

这是项目的核心创新点。作者没有使用 langchain 等重型封装库，而是基于 Vercel AI SDK（ai v3.1.17）实现流式对话。Vercel AI SDK 提供了一个统一的 Provider 接口，底层对接各厂商官方 SDK：

Provider	SDK	模型
OpenAI	@ai-sdk/openai	GPT-4o, GPT-4-Turbo, GPT-3.5-Turbo
Anthropic	@ai-sdk/anthropic / @anthropic-ai/sdk	Claude 3 Opus/Sonnet/Haiku
Google	@ai-sdk/google / @google/generative-ai	Gemini Pro/Flash
Cohere	cohere-ai	Command R+
Mistral	@mistralai/mistralai	Mistral Large
Groq	groq-sdk	Llama/Gemma
HuggingFace	@huggingface/inference	Inference API
Fireworks	直接调用	Mixtral/Mixtral-8x7B
AWS Bedrock	@aws-sdk/client-bedrock-runtime	Claude via Bedrock
Azure OpenAI	@azure/openai	GPT-4 via Azure
Perplexity	直接调用	Sonar 系列

每个 Provider 都有独立的 API 路由（app/api/chat/<provider>/route.ts），例如 app/api/chat/openai/route.ts 处理 OpenAI 对话请求。这种架构使得添加新 Provider 的成本极低，只需实现一个新的 route handler。

状态管理

采用 Jotai（原子化状态管理）管理全局状态，核心 atoms 包括：

• currentUseModelAtom — 当前选中的模型
• conversationsAtom — 对话历史（持久化到 localStorage）
• preferencesAtom — 用户偏好（主题、Markdown 渲染、发送键等）
• advancedSettingsAtom — 高级设置（统一端点、流式消息）

国际化（i18n）

使用 next-intl 实现 12 种语言支持（中/英/日/韩/法/德/意/葡/俄/荷/西/繁中），通过 middleware.ts 路由中间件自动匹配用户语言偏好，无需 URL 前缀。

PWA 支持

通过 @ducanh2912/next-pwa 集成渐进式 Web 应用能力，支持离线缓存和桌面端安装。

网络搜索增强

app/api/search/route.ts 集成了 Tavily、Google Custom Search、You.com 三个搜索 API，AI 可以实时搜索网络补充知识后回答，prompt 模板定义在 lib/prompt/index.ts 中，支持在回复中内嵌引用链接。

部署方案

Docker 一键部署（推荐）

项目提供完整的多阶段 Dockerfile + docker-compose.yml，最小镜像基于 node:lts-alpine：

# 方式一：docker-compose
git clone https://github.com/okisdev/ChatChat.git
cd ChatChat
cp .env.example .env.local
# 编辑 .env.local 填入各 Provider 的 API Key
docker-compose up -d
# 访问 http://localhost:3000

# Dockerfile（多阶段构建）
FROM node:lts-alpine AS base
WORKDIR /app
RUN npm i -g pnpm@latest && pnpm install
COPY . . && pnpm build

FROM node:lts-alpine AS production
COPY --from=base /app/.next ./.next
COPY --from=base /app/public ./public
COPY --from=base /app/node_modules ./node_modules
EXPOSE 3000
CMD ["pnpm", "start"]

Vercel / Railway 一键部署

README 提供了 Vercel 和 Railway 的部署按钮，对非技术用户友好。Vercel 部署无需 Docker，适合快速验证。

环境变量说明

.env.example 暴露了所有支持的配置项，分两大类：

AI Provider 配置（至少需要配置一个）：

• OPENAI_API_KEY（最常用）
• ANTHROPIC_API_KEY
• GOOGLE_API_KEY
• MISTRAL_API_KEY 等

搜索引擎配置（可选，用于搜索增强）：

• TAVILY_SEARCH_API_KEY
• GOOGLE_SEARCH_API_KEY
• YOU_SEARCH_API_KEY

适用场景

1. 多模型对比评测：在同一个对话中切换不同模型，对比回答质量
2. 开发者调试：聚合多个 API，减少在多个平台间切换的认知负担
3. 搜索增强问答：结合 Tavily/Google 搜索，AI 实时引用网络资源
4. 团队共享部署：在内网部署，为团队提供统一的 AI 对话入口
5. 离线场景：通过 PWA 安装到桌面，离线也可访问（需 API Key 在线）

局限与风险

1. 隐私风险：对话内容会发送到第三方 AI 服务商，敏感场景不适用
2. API 成本：各服务商独立计费，无用量聚合统计
3. 模型覆盖不全：暂不支持国内模型（文心、通义等），无 Ollama 本地模型支持
4. 搜索 API 依赖：搜索增强功能依赖第三方搜索服务，API Key 管理复杂度上升

行业意义

Chat Chat 代表了 AI 应用聚合层的一个典型方向——不是训练新模型，而是做模型之上的体验层。随着 AI 模型越来越多（当前已有 11+ Provider），用户对统一入口的需求会持续增长。这类项目通常技术门槛不高，但用户体验和部署便利性是关键竞争维度。Chat Chat 在这两方面都做得不错，特别是 Docker 支持和一键部署按钮，降低了非技术用户的上手门槛。