mc-skills/catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
catalog/repos/aikdeirel--daily-pulse-chatbot.md

385 lines
11 KiB
Markdown
Raw Permalink Normal View History

catalog: 更新 2026-04-07 11:44
2026-04-07 11:44:56 +08:00
# 每日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://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
[![Next.js](https://img.shields.io/badge/Next.js-16-black)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-19-61dafb)](https://react.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)](https://typescriptlang.org)
[![Tests](https://img.shields.io/badge/tests-Playwright-green)](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平台：
[![Deploy with Vercel](https://vercel.com/button)](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>
Reference in New Issue Copy Permalink