MCP Youtube Agent

🎥 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工具

______________________________________________________________________

⭐ 当前功能（更新）

✅ 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

______________________________________________________________________

🎯 任务要求（更新版）

______________________________________________________________________

👨‍💻 作者

赛·普拉萨德·帕德马纳巴