mc-skills/catalog

Fork 0

mc-skills 52efc07510 catalog: 更新 2026-04-07 11:44

2026-04-07 11:44:56 +08:00

11 KiB

Raw Blame History

每日AI助手聊天机器人

AI聊天 Next.js Spotify集成 Google集成 多模型

✨ Daily Pulse ✨

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

🌤️ 智能天气洞察

🎵 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 支持Claude（Opus、Sonnet、Haiku）、GPT-5、Mistral等
智能工具 – 天气预报、网页搜索以及与Spotify、Google等的集成
技能系统 – 专项能力，涵盖上下文交接、新闻研究、音乐发现等

🎵 Spotify集成

正在播放 – 实时标题栏指示器与播放控制
音乐管理 – 搜索曲目、管理播放列表、查看收听历史
智能推荐 – 基于您偏好的个性化建议
📖 完整Spotify文档

📅 Google集成

日历管理 – 查看、创建、更新和删除事件
Gmail – 读取和管理邮件及标签
Google任务 – 管理任务列表、任务和子任务
📖 完整Google文档

📝 工件（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）
Redis实例（推荐：Vercel KV）

安装

克隆并安装依赖

git clone https://github.com/aikdeirel/vercel-nextjs-ai-chatbot.git
cd vercel-nextjs-ai-chatbot
pnpm install

配置环境变量

将 .env.example 复制为 .env.local 并填写您的凭据：
```
cp .env.example .env.local
```
必填变量：
- AUTH_SECRET – 认证密钥（使用 openssl rand -base64 32 生成）
- POSTGRES_URL – PostgreSQL连接字符串
- REDIS_URL – Redis连接字符串
- OPENROUTER_API_KEY – OpenRouter API密钥，用于LLM访问（在此获取）
- BLOB_READ_WRITE_TOKEN – Vercel Blob存储令牌（配置指南）
可选（Spotify功能）：
- SPOTIFY_CLIENT_ID
- SPOTIFY_CLIENT_SECRET
- SPOTIFY_REDIRECT_URI
可选（Google功能）：
- GOOGLE_CLIENT_ID
- GOOGLE_CLIENT_SECRET
- GOOGLE_REDIRECT_URI
初始化数据库
```
pnpm db:generate
pnpm db:migrate
```
启动开发服务器
```
pnpm dev
```

访问 http://localhost:3000 开始聊天！🎉

📦 可用脚本

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平台：

点击上方按钮后：

连接您的GitHub账号并创建新仓库
在Vercel控制台配置环境变量：

必填：
- AUTH_SECRET – 使用 openssl rand -base64 32 生成
- POSTGRES_URL – 使用 Vercel Postgres（提供免费套餐）
- REDIS_URL – 使用 Vercel KV（提供免费套餐）
- OPENROUTER_API_KEY – 在 OpenRouter 获取
- BLOB_READ_WRITE_TOKEN – 在Vercel Blob存储中创建（配置指南）
可选（集成功能）：
- Spotify：SPOTIFY_CLIENT_ID、SPOTIFY_CLIENT_SECRET、SPOTIFY_REDIRECT_URI
- Google：GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、GOOGLE_REDIRECT_URI
部署并等待构建完成

运行数据库迁移（仅需一次）：

# 安装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测试套件：

# 无界面模式运行测试
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。

Fork本仓库
创建您的功能分支（git checkout -b feature/amazing-feature）
提交您的更改（git commit -m 'Add some amazing feature'）
推送到分支（git push origin feature/amazing-feature）
发起Pull Request

📄 许可证

基于 Apache License 2.0 授权。

本项目原始Fork自 Vercel的AI聊天机器人模板，在此基础上进行了定制化开发，新增了Spotify集成、Google Workspace集成和技能系统等功能。

🙏 致谢

Vercel 提供AI SDK和托管平台
OpenRouter 提供统一的LLM访问
shadcn/ui 提供精美的UI组件
所有使本项目成为可能的优秀开源项目

_{由人类与机器人携手构建，使用Next.js、Vercel AI SDK、OpenRouter及其他优秀工具。}

11 KiB Raw Blame History Unescape Escape