使用说明
🎥 MCP YouTube代理--（全自动+MCP+OAuth+Netflix用户界面）
一整堆 基于模型上下文协议（MCP）的YouTube代理 与现代 React前端, Node.js后端，以及 Google OAuth集成.
该代理通过以下方式智能地与YouTube交互：
✔ YouTube数据API（搜索、元数据） ✔ OAuth2（喜欢/不喜欢视频+观看历史+喜欢列表） ✔ MCP工具（搜索+元数据） ✔ 采用Netflix风格设计的干净电影UI
这个项目最初是一个元数据工具，但现在已经发展成为一个 完整的YouTube自动化助手.
🚀 现场演示
前端（Vercel）： 🔗 https://mcp-youtube-agent-rouge.vercel.app/
后端（渲染）： 🔗 https://mcp-youtube-agent.onrender.com/
🏗 项目架构（更新）
mcp-youtube-agent/
│
├── server/ # Backend (Node.js + Express)
│ ├── server.js # REST API + OAuth + MCP integration
│ ├── youtubeClient.js # YouTube search wrapper (API Key)
│ ├── services/
│ │ ├── youtubeOAuth.js # OAuth like/unlike/history/liked
│ ├── mcp/
│ │ ├── tools/
│ │ │ ├── youtube.js # MCP search tool
│ │ └── mcpServer.js # MCP tool registry
│ ├── .env.example # Credentials template
│ └── package.json
│
├── frontend/
│ ├── src/
│ │ ├── App.jsx # Full UI + chat + like/unlike system
│ │ ├── App.css # Netflix + glassmorphism UI
│ │ └── main.jsx
│ ├── index.html
│ ├── package.json
│
└── README.md
🔐 身份验证设置（已更新）
您的项目使用 两种类型的身份验证:
1.️⃣ YouTube API密钥（用于搜索+元数据）
由MCP工具内部使用 youtubeClient.js.
YT_API_KEY=your_key_here
2.️⃣ 谷歌OAuth2（用于点赞/不点赞/历史/点赞视频）
要求…… 真实的 YouTube互动。
环境变量：
YOUTUBE_CLIENT_ID=xxxxxxxxxxxx.apps.googleusercontent.com
YOUTUBE_CLIENT_SECRET=xxxxxxxxxxxx
YOUTUBE_REFRESH_TOKEN=xxxxxxxxxxxx
刷新令牌是使用 getRefreshToken.js 辅助脚本。
⚙ 后端环境变量（最终）
你的 server/.env 看起来像：
OPENAI_API_KEY=your_key
OPENAI_MODEL=gpt-4o-mini
YT_API_KEY=your_youtube_api_key
YOUTUBE_CLIENT_ID=xxx.apps.googleusercontent.com
YOUTUBE_CLIENT_SECRET=xxxxx
YOUTUBE_REFRESH_TOKEN=xxxxx
PORT=3001
ALLOWED_ORIGIN=https://mcp-youtube-agent-rouge.vercel.app
⚙ 前端环境变量（Vite）
创建 frontend/.env:
VITE_API_BASE_URL=https://mcp-youtube-agent.onrender.com
🧠 已实施MCP工具
| 工具 | 说明 |
|---|---|
| youtube.search | 使用API键搜索youtube视频 |
| youtube.videoInfo | 获取元数据 |
| youtube.getCaptions | 获取字幕 |
| （更具扩展性…） |
⭐ 当前功能（更新）
✅ 1. YouTube搜索（MCP）
- 基于查询的搜索
- 返回视频元数据
- 显示缩略图、频道、日期
✅ 2. YouTube OAuth自动化
✔ 像任何视频一样 ✔ 与视频不同 ✔ 获取满 喜欢的视频列表 ✔ 获取 观看历史记录（HL播放列表） ✔ 状态与UI同步
✅ 3. 智能UI状态管理
✔ 喜欢按钮变绿(✔ Liked)
✔ 再次单击可删除类似内容
✔ 获取喜欢的视频时自动同步
✅ 4. 电影风格的Netflix用户界面
- 黑色+红色主题
- Glassmorphism消息气泡
- 浮动消息列表
- 现代聊天界面
✅ 5. 与人工智能聊天（OpenAI）
- 征求建议
- 询问学习路径
- AI决定何时调用MCP工具
🧩 系统流程（更新）
User
↓
Frontend (React UI)
↓ /api/chat /api/like /api/unlike /api/liked /api/history
Backend (Node.js + OAuth + MCP)
↓
YouTube API (Search + OAuth)
↓
Response → UI (Videos + Like State)
🛠 地方发展指南
启动后端
cd server
npm install
npm start
运行时间： 👉 http://localhost:3001
启动前端
cd frontend
npm install
npm run dev
运行时间： 👉 http://localhost:5173
🧪 聊天查询示例
🔍 搜索
search AI tools
❤️ 喜欢的视频
show my liked videos
👍 喜欢/不喜欢
用户按 喜欢 → ✔ Liked
再次按下→ 不喜欢视频
🎓 学习查询
Recommend me a Kubernetes learning path
🎯 任务要求（更新版）
| 要求 | 状态 |
|---|---|
| MCP代理 | ✅ |
| YouTube API集成 | ✅ |
| OAuth自动化（点赞、历史） | ✅ |
| 前端UI | 🎨 高级Netflix用户界面 |
| 全栈架构 | ✅ |
| 工作部署 | 🔥 现场直播 |
| 文档 | ✔ 完成 |
👨💻 作者
赛·普拉萨德·帕德马纳巴