385 lines
11 KiB
Markdown
385 lines
11 KiB
Markdown
# 每日AI助手聊天机器人
|
||
|
||
`AI聊天` `Next.js` `Spotify集成` `Google集成` `多模型`
|
||
|
||
<div align="center">
|
||
<img alt="Daily Pulse AI 聊天机器人" src="public/images/readme-title.jpeg" width="100%">
|
||
<h1>✨ Daily Pulse ✨</h1>
|
||
<p><em>您的个人AI助手，助力日常任务、音乐、研究与创意工作</em></p>
|
||
|
||
[](LICENSE)
|
||
[](https://nextjs.org)
|
||
[](https://react.dev)
|
||
[](https://typescriptlang.org)
|
||
[](https://playwright.dev)
|
||
|
||
<br>
|
||
|
||
### 🌤️ 智能天气洞察
|
||
|
||
<img src="public/images/weather-insights.jpg" width="400" alt="天气洞察">
|
||
|
||
### 🎵 AI驱动的音乐发现
|
||
|
||
<img src="public/images/music-discovery.jpg" width="400" alt="音乐发现">
|
||
|
||
### 更多功能
|
||
|
||
<img src="public/images/news-research.jpg" width="400" alt="更多功能">
|
||
</div>
|
||
|
||
---
|
||
|
||
## 💡 核心亮点
|
||
|
||
- 🎯 **全栈开发** – 从UI到数据库的端到端实现
|
||
- 🔄 **API集成精通** – OAuth流程、令牌刷新、Spotify & Google API错误处理
|
||
- 🧪 **质量保障** – 使用Playwright进行E2E测试
|
||
- 📊 **现代化工具链** – TypeScript、Biome代码检查器、Drizzle ORM、Docker Compose
|
||
- 🚀 **生产就绪** – 部署于Vercel，具备完善的环境管理
|
||
- 🤖 **AI驱动** – 通过OpenRouter支持多模型（Claude、GPT、Mistral等）
|
||
|
||
---
|
||
|
||
## 🌟 功能特性
|
||
|
||
### 🤖 AI驱动聊天
|
||
|
||
- **Vercel AI SDK框架** – 基于Vercel AI SDK构建，使用OpenRouter提供者实现多模型访问
|
||
- **多种LLM模型** – 通过 [OpenRouter](https://openrouter.ai/) 支持Claude（Opus、Sonnet、Haiku）、GPT-5、Mistral等
|
||
- **智能工具** – 天气预报、网页搜索以及与Spotify、Google等的集成
|
||
- **技能系统** – 专项能力，涵盖上下文交接、新闻研究、音乐发现等
|
||
|
||
### 🎵 Spotify集成
|
||
|
||
- **正在播放** – 实时标题栏指示器与播放控制
|
||
- **音乐管理** – 搜索曲目、管理播放列表、查看收听历史
|
||
- **智能推荐** – 基于您偏好的个性化建议
|
||
- [📖 完整Spotify文档](docs/SPOTIFY_INTEGRATION.md)
|
||
|
||
### 📅 Google集成
|
||
|
||
- **日历管理** – 查看、创建、更新和删除事件
|
||
- **Gmail** – 读取和管理邮件及标签
|
||
- **Google任务** – 管理任务列表、任务和子任务
|
||
- [📖 完整Google文档](docs/GOOGLE_INTEGRATION.md)
|
||
|
||
### 📝 工件（Beta）
|
||
|
||
在聊天中直接创建和编辑交互式内容：
|
||
|
||
- **文本文档** – 支持实时预览的富文本Markdown编辑
|
||
- **代码片段** – 支持多语言的语法高亮代码
|
||
- **电子表格** – 用于数据分析的交互式数据网格
|
||
|
||
### 🔐 认证与存储
|
||
|
||
- **安全认证** – 通过Auth.js实现邮箱/密码认证
|
||
- **持久存储** – PostgreSQL存储聊天历史，Redis用于缓存
|
||
- **文件上传** – Vercel Blob集成支持附件
|
||
|
||
### 📱 现代化体验
|
||
|
||
- **渐进式Web应用** – 可在任意设备上安装为原生应用
|
||
- **响应式设计** – 基于Tailwind CSS和shadcn/ui构建的精美UI
|
||
- **深色模式** – 系统感知主题，提供舒适的视觉体验
|
||
|
||
---
|
||
|
||
## 🏗️ 架构
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ Next.js 前端 │ ← App Router、React 19、服务端组件
|
||
│ (Tailwind CSS + │ ← shadcn/ui、响应式设计
|
||
│ shadcn/ui) │
|
||
└──────────┬──────────┘
|
||
│
|
||
┌──────────▼──────────┐
|
||
│ API 层 │ ← 路由处理器、中间件
|
||
│ (Next.js 路由) │
|
||
└──────────┬──────────┘
|
||
│
|
||
┌──────────▼──────────────────────┐
|
||
│ 服务层 │
|
||
├─────────────────────────────────┤
|
||
│ • Vercel AI SDK │
|
||
│ • OpenRouter 提供者 │
|
||
│ • Spotify API 客户端（OAuth） │
|
||
│ • Google APIs 客户端（OAuth） │
|
||
│ • Auth.js（NextAuth v5） │
|
||
│ • Vercel Blob 存储 │
|
||
└──────────┬──────────────────────┘
|
||
│
|
||
┌──────────▼──────────┐
|
||
│ 数据持久层 │
|
||
├─────────────────────┤
|
||
│ • PostgreSQL │ ← 聊天历史、用户数据
|
||
│ (Drizzle ORM) │
|
||
│ • Redis 缓存 │ ← 会话管理
|
||
│ (Vercel KV) │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
<table>
|
||
<tr>
|
||
<td><strong>框架</strong></td>
|
||
<td>Next.js 16（App Router、React 19、服务端组件）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>语言</strong></td>
|
||
<td>TypeScript 5.3</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>AI</strong></td>
|
||
<td>Vercel AI SDK + OpenRouter</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>数据库</strong></td>
|
||
<td>PostgreSQL + Drizzle ORM</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>缓存</strong></td>
|
||
<td>Redis（Vercel KV）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>样式</strong></td>
|
||
<td>Tailwind CSS + shadcn/ui 组件</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>认证</strong></td>
|
||
<td>Auth.js（NextAuth v5）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>存储</strong></td>
|
||
<td>Vercel Blob</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>测试</strong></td>
|
||
<td>Playwright（E2E）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>代码检查</strong></td>
|
||
<td>Biome</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>包管理器</strong></td>
|
||
<td>pnpm</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>部署</strong></td>
|
||
<td>Vercel（含边缘函数）</td>
|
||
</tr>
|
||
</table>
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 前置条件
|
||
|
||
- Node.js 18+ 及 pnpm
|
||
- PostgreSQL数据库（推荐：[Vercel Postgres](https://vercel.com/storage/postgres)）
|
||
- Redis实例（推荐：[Vercel KV](https://vercel.com/storage/kv)）
|
||
|
||
### 安装
|
||
|
||
1. **克隆并安装依赖**
|
||
|
||
```bash
|
||
git clone https://github.com/aikdeirel/vercel-nextjs-ai-chatbot.git
|
||
cd vercel-nextjs-ai-chatbot
|
||
pnpm install
|
||
```
|
||
|
||
2. **配置环境变量**
|
||
|
||
将 `.env.example` 复制为 `.env.local` 并填写您的凭据：
|
||
|
||
```bash
|
||
cp .env.example .env.local
|
||
```
|
||
|
||
**必填变量：**
|
||
|
||
- `AUTH_SECRET` – 认证密钥（使用 `openssl rand -base64 32` 生成）
|
||
- `POSTGRES_URL` – PostgreSQL连接字符串
|
||
- `REDIS_URL` – Redis连接字符串
|
||
- `OPENROUTER_API_KEY` – OpenRouter API密钥，用于LLM访问（[在此获取](https://openrouter.ai/keys)）
|
||
- `BLOB_READ_WRITE_TOKEN` – Vercel Blob存储令牌（[配置指南](docs/BLOB_STORAGE_SETUP.md)）
|
||
|
||
**可选（Spotify功能）：**
|
||
|
||
- `SPOTIFY_CLIENT_ID`
|
||
- `SPOTIFY_CLIENT_SECRET`
|
||
- `SPOTIFY_REDIRECT_URI`
|
||
|
||
**可选（Google功能）：**
|
||
|
||
- `GOOGLE_CLIENT_ID`
|
||
- `GOOGLE_CLIENT_SECRET`
|
||
- `GOOGLE_REDIRECT_URI`
|
||
|
||
3. **初始化数据库**
|
||
|
||
```bash
|
||
pnpm db:generate
|
||
pnpm db:migrate
|
||
```
|
||
|
||
4. **启动开发服务器**
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
访问 [http://localhost:3000](http://localhost:3000) 开始聊天！🎉
|
||
|
||
---
|
||
|
||
## 📦 可用脚本
|
||
|
||
```bash
|
||
pnpm dev # 使用Turbopack启动开发服务器
|
||
pnpm build # 构建生产版本
|
||
pnpm start # 启动生产服务器
|
||
pnpm lint # 运行Biome代码检查
|
||
pnpm format # 使用Biome格式化代码
|
||
pnpm test # 运行Playwright E2E测试
|
||
pnpm db:migrate # 应用数据库迁移
|
||
pnpm db:studio # 打开Drizzle Studio
|
||
```
|
||
|
||
---
|
||
|
||
## 🚢 部署
|
||
|
||
### 部署到Vercel
|
||
|
||
部署您自己版本的最简方式是使用Vercel平台：
|
||
|
||
[](https://vercel.com/new/clone?repository-url=https://github.com/aikdeirel/vercel-nextjs-ai-chatbot)
|
||
|
||
**点击上方按钮后：**
|
||
|
||
1. **连接您的GitHub账号**并创建新仓库
|
||
2. 在Vercel控制台**配置环境变量**：
|
||
|
||
**必填：**
|
||
|
||
- `AUTH_SECRET` – 使用 `openssl rand -base64 32` 生成
|
||
- `POSTGRES_URL` – 使用 [Vercel Postgres](https://vercel.com/storage/postgres)（提供免费套餐）
|
||
- `REDIS_URL` – 使用 [Vercel KV](https://vercel.com/storage/kv)（提供免费套餐）
|
||
- `OPENROUTER_API_KEY` – 在 [OpenRouter](https://openrouter.ai/keys) 获取
|
||
- `BLOB_READ_WRITE_TOKEN` – 在Vercel Blob存储中创建（[配置指南](docs/BLOB_STORAGE_SETUP.md)）
|
||
|
||
**可选（集成功能）：**
|
||
|
||
- Spotify：`SPOTIFY_CLIENT_ID`、`SPOTIFY_CLIENT_SECRET`、`SPOTIFY_REDIRECT_URI`
|
||
- Google：`GOOGLE_CLIENT_ID`、`GOOGLE_CLIENT_SECRET`、`GOOGLE_REDIRECT_URI`
|
||
|
||
3. **部署**并等待构建完成
|
||
|
||
4. **运行数据库迁移**（仅需一次）：
|
||
|
||
```bash
|
||
# 安装Vercel CLI
|
||
npm i -g vercel
|
||
|
||
# 链接到您的项目
|
||
vercel link
|
||
|
||
# 拉取环境变量
|
||
vercel env pull
|
||
|
||
# 运行迁移
|
||
pnpm db:migrate
|
||
```
|
||
|
||
### 其他部署选项
|
||
|
||
您也可以部署到任何支持以下条件的Node.js托管平台：
|
||
|
||
- Node.js 18+
|
||
- PostgreSQL数据库
|
||
- Redis实例
|
||
- 环境变量配置
|
||
|
||
常用替代方案：Railway、Render、AWS、DigitalOcean
|
||
|
||
---
|
||
|
||
## 🧪 测试
|
||
|
||
运行E2E测试套件：
|
||
|
||
```bash
|
||
# 无界面模式运行测试
|
||
pnpm test
|
||
|
||
# UI模式运行测试
|
||
pnpm test:ui
|
||
|
||
# 调试模式运行测试
|
||
pnpm test:debug
|
||
```
|
||
|
||
---
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
vercel-nextjs-ai-chatbot/
|
||
├── app/ # Next.js App Router页面和API路由
|
||
│ ├── (auth)/ # 认证页面
|
||
│ ├── (chat)/ # 聊天界面和API
|
||
│ └── api/ # API端点（Spotify、Google等）
|
||
├── components/ # React组件
|
||
│ ├── auth-form.tsx # 认证表单
|
||
│ ├── chat.tsx # 主聊天界面
|
||
│ └── ui/ # shadcn/ui组件
|
||
├── lib/ # 工具函数和服务
|
||
│ ├── ai/ # AI SDK配置和工具
|
||
│ ├── db/ # 数据库模式和查询
|
||
│ └── services/ # 外部API客户端（Spotify、Google）
|
||
├── docs/ # 文档
|
||
├── tests/ # E2E测试
|
||
└── public/ # 静态资源
|
||
```
|
||
|
||
---
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎贡献！请随时提交Pull Request。
|
||
|
||
1. Fork本仓库
|
||
2. 创建您的功能分支（`git checkout -b feature/amazing-feature`）
|
||
3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
|
||
4. 推送到分支（`git push origin feature/amazing-feature`）
|
||
5. 发起Pull Request
|
||
|
||
---
|
||
|
||
## 📄 许可证
|
||
|
||
基于 [Apache License 2.0](LICENSE) 授权。
|
||
|
||
本项目原始Fork自 [Vercel的AI聊天机器人模板](https://github.com/vercel/ai-chatbot)，在此基础上进行了定制化开发，新增了Spotify集成、Google Workspace集成和技能系统等功能。
|
||
|
||
---
|
||
|
||
## 🙏 致谢
|
||
|
||
- [Vercel](https://vercel.com) 提供AI SDK和托管平台
|
||
- [OpenRouter](https://openrouter.ai) 提供统一的LLM访问
|
||
- [shadcn/ui](https://ui.shadcn.com) 提供精美的UI组件
|
||
- 所有使本项目成为可能的优秀开源项目
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
<sub>由人类与机器人携手构建，使用Next.js、Vercel AI SDK、OpenRouter及其他优秀工具。</sub>
|
||
</div> |