# aichat

**Repository Path**: i-share-code/aichat

## Basic Information

- **Project Name**: aichat
- **Description**: AIChat 是一个基于 Web 的多模型 AI 聊天应用，支持同时与多个 AI 模型进行对话。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-01
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AIChat - 多模型聊天应用

AIChat 是一个基于 Web 的多模型 AI 聊天应用，支持同时与多个 AI 模型进行对话。

## 功能特性

### 聊天模式
- **私聊模式**：与单个 AI 模型进行一对一对话
- **群聊模式**：多个人类用户和多个 AI 模型同时参与讨论
- **模型对话**：多个 AI 模型之间相互对话（可设置对话轮数）

### 模型管理
- 支持添加、编辑、删除 AI 模型配置
- 支持多种 LLM 提供商：
  - OpenAI
  - DeepSeek
  - MiniMax
  - Qwen (阿里千问)
  - 其他兼容 OpenAI API 的模型

### 聊天历史
- 自动保存到 localStorage
- 聊天记录格式：
```
[时间] 8:15:32 
[角色] 系统
[内容] "话题: xxx" 

[时间] 8:16:11
[角色] DeepSeek V3
[内容] "..."
```

### 继续对话
- 模型对话和群聊支持"继续聊"功能
- 用户输入内容后，模型会基于话题和历史记录继续讨论

## 技术栈

- **前端框架**：React 18 + TypeScript
- **构建工具**：Vite
- **状态管理**：Zustand
- **HTTP 客户端**：Axios
- **AI SDK**：OpenAI (兼容 OpenAI API 格式)

## 已知问题

### 1. 成语接龙游戏
- 模型可能会接错成语的尾字
- 模型可能会添加解释而非只说成语
- **原因**：AI 模型响应由模型本身控制，无法强制其完全按规则执行
- **建议**：可以自行调整 prompt 或选择更配合的模型

### 2. 网络稳定性
- 直接调用 API 依赖网络连接
- 网络不稳定时可能出现请求失败或超时
- **建议**：确保网络环境稳定

### 3. 聊天记录存储
- 聊天记录存储在浏览器 localStorage 中
- 清除浏览器数据会导致聊天记录丢失
- **建议**：定期备份重要对话（可导出 localStorage 数据）

### 4. 浏览器兼容性问题
- 未在所有浏览器环境下测试
- 推荐使用 Chrome、Edge、Firefox 最新版本

## 依赖

```json
{
  "dependencies": {
    "axios": "^1.6.5",
    "openai": "^4.28.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "uuid": "^9.0.1",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/uuid": "^9.0.7",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.12"
  }
}
```

## 运行

### 开发模式

```bash
npm install
npm run dev
```

启动后访问 http://localhost:5173

### 生产构建

```bash
npm install
npm run build
```

构建产物在 `dist` 目录

### 预览构建

```bash
npm run preview
```

## 配置模型

1. 点击侧边栏中的"设置"按钮
2. 在模型管理页面点击"添加模型"
3. 填写模型配置：
   - 模型名称（自定义）
   - API Key（从对应平台获取）
   - Base URL（API 端点地址）
   - 模型名称（实际模型 ID，如 `deepseek-chat`）

### 常用模型配置

| 提供商 | Base URL | 模型名称示例 |
|--------|----------|-------------|
| DeepSeek | https://api.deepseek.com/v1 | deepseek-chat |
| MiniMax | https://api.minimax.chat/v1 | abab6.5s-chat |
| Qwen | https://dashscope.aliyuncs.com/compatible-mode/v1 | qwen-turbo |
| OpenAI | https://api.openai.com/v1 | gpt-4o |

## 使用说明

### 创建对话
1. 点击侧边栏"新建对话"按钮
2. 选择聊天类型（私聊/群聊/模型对话）
3. 选择参与对话的模型
4. 输入话题开始讨论

### 私聊
- 选择一个模型后直接输入消息
- 模型会实时响应

### 群聊（多模型+人）
- 输入话题后，模型会自动讨论几轮
- 用户可以随时输入成语/内容继续接龙
- 模型会基于话题和历史记录继续讨论

### 模型对话
- 输入话题后，两个模型会自动对话
- 用户输入"继续聊"可以让模型继续讨论
- 可在设置中调整对话轮数

## 部署

### 静态部署

构建后的 `dist` 目录是静态文件，可以部署到任何静态网页托管服务：

```bash
npm run build
```

将 `dist` 目录内容上传到服务器即可。

### 注意事项

- 本应用在前端直接调用 AI API，API Key 会暴露在浏览器中
- **生产环境建议**：部署后端代理服务，将 API 调用转移到服务端
- 确保 API Key 的安全，不要在前端代码中硬编码敏感信息

## 项目结构

```
aichat/
├── src/
│   ├── components/      # React 组件
│   │   ├── Chat/        # 聊天相关组件
│   │   ├── Settings/    # 设置相关组件
│   │   └── Sidebar.tsx  # 侧边栏
│   ├── services/llm/   # LLM API 适配器
│   ├── stores/         # Zustand 状态管理
│   ├── types/          # TypeScript 类型定义
│   ├── App.tsx        # 主应用组件
│   ├── main.tsx       # 入口文件
│   └── index.css      # 样式文件
├── public/             # 静态资源
├── dist/               # 构建输出
├── package.json
├── vite.config.ts
└── tsconfig.json
```