# 每日AI助手聊天机器人 `AI聊天` `Next.js` `Spotify集成` `Google集成` `多模型`
Daily Pulse AI 聊天机器人

✨ Daily Pulse ✨

您的个人AI助手，助力日常任务、音乐、研究与创意工作

[![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)
### 🌤️ 智能天气洞察 天气洞察 ### 🎵 AI驱动的音乐发现 音乐发现 ### 更多功能 更多功能
--- ## 💡 核心亮点 - 🎯 **全栈开发** – 从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) │ └─────────────────────┘ ``` ## 🛠️ 技术栈
框架 Next.js 16（App Router、React 19、服务端组件）
语言 TypeScript 5.3
AI Vercel AI SDK + OpenRouter
数据库 PostgreSQL + Drizzle ORM
缓存 Redis（Vercel KV）
样式 Tailwind CSS + shadcn/ui 组件
认证 Auth.js（NextAuth v5）
存储 Vercel Blob
测试 Playwright（E2E）
代码检查 Biome
包管理器 pnpm
部署 Vercel（含边缘函数）
--- ## 🚀 快速开始 ### 前置条件 - 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组件 - 所有使本项目成为可能的优秀开源项目 ---
由人类与机器人携手构建，使用Next.js、Vercel AI SDK、OpenRouter及其他优秀工具。