MCP Youtube Agent 1

🎥 MCP YouTube代理 一个全栈模型上下文协议（MCP）驱动的YouTube代理，将现代前端UI与后端Node.js服务器连接起来，以获取YouTube视频元数据、字幕，并执行与YouTube相关的自动化任务。

该项目包括：

🔍 获取视频元数据\ 🎞 获取缩略图\ 📝 获取字幕（自动/手动）\ 📺 获取频道信息\ 🎛 MCP工具集成\ 🌐 完整的前端+后端设置\ ⚡ 在没有OAuth的情况下工作（使用YouTube API密钥）

这是一个MCP YouTube代理模板，用于扩展到完全自动化，如点赞、历史记录等。

______________________________________________________________________

🚀 实时演示（如果稍后部署）

前端（Vercel）\ 🔗 *在此处添加您的Vercel URL*

后端（渲染/铁路/本地）\ 🔗 *在此处添加您的后端URL*

______________________________________________________________________

🏗 项目架构

mcp-youtube-agent-1/
│
├── server/                            # Backend (Node.js + Express)
│   ├── server.js                      # Main API server
│   ├── package.json                   # Backend dependencies
│   ├── .env.example                   # Sample .env file
│   ├── mcp/                           # MCP tools
│   │   ├── getVideoInfo.js            # Tool: fetches metadata
│   │   ├── getCaptions.js             # Tool: fetches captions
│   │   └── index.js                   # Exports all tools
│   └── utils/                         # YouTube helpers, parsers
│
├── frontend/                          # Frontend UI (React or HTML)
│   ├── src/
│   │   ├── App.jsx                    # Main UI logic
│   │   ├── api.js                     # Communicates with backend
│   └── index.html                     # UI layout
│
└── README.md                          # (This file)

______________________________________________________________________

🔐 身份验证设置

您的项目使用：

✔ YOUTUBE_API_键 （不需要OAuth）\ ✔ 后端读取 .env\ ✔ 前端安全地调用后端

示例 .env:

YOUTUBE_API_KEY=your_key_here
PORT=5000

______________________________________________________________________

⚙️ 后端环境变量

内部设置 server/.env:

YOUTUBE_API_KEY=xxxxxxxxxxxxxxxxxxxxx
PORT=3001

______________________________________________________________________

⚙️ 前端环境变量（如果使用Vite）

添加内部 frontend/.env:

VITE_API_BASE_URL=[http://localhost:3001](http://localhost:3001)

______________________________________________________________________

🧠 已实施MCP工具

工具位于 server/mcp/ 文件夹。

______________________________________________________________________

⭐ 当前功能（更新）

✅ 1.视频信息获取

• 标题
• 描述
• 视图
• 渠道详细信息
• 缩略图

✅ 2.捕获俘虏

支持：

• 英文字幕
• 自动生成字幕

✅ 3.前端用户界面

• 视频URL/ID的输入字段
• 显示完整的视频卡
• 显示元数据+标题

✅ 4.响应式布局

✔ 桌面视图\ ✔ 移动友好布局

✅ 5.持续的结果

搜索结果将一直保留到被替换为止\ 无自动清除问题

______________________________________________________________________

📱 响应式用户界面

✔ 桌面上的两列网格\ ✔ 移动设备上的单列\ ✔ 流畅的UI转换

______________________________________________________________________

🧩 系统流量

User
↓
Frontend (React / HTML)
↓  /api/video-info / api/captions
Backend (Node.js + MCP)
↓
YouTube Data API
↓
Backend → Frontend UI Display

______________________________________________________________________

🛠 地方发展指南

后端

cd server
npm install
npm start

运行时间： 👉 http://localhost:5000

前端

cd frontend
npm install
npm run dev

运行时间： 👉 http://localhost:5173

______________________________________________________________________

🧪 示例命令（前端输入）

🔍 获取视频信息

https://youtu.be/dQw4w9WgXcQ

🎬 字幕

captions dQw4w9WgXcQ

🔎 搜索示例

search ai videos

ℹ 获取元数据

info VIDEO_ID

______________________________________________________________________

🎯 任务要求（已勾选）

______________________________________________________________________

🧑‍💻 作者

赛·普拉萨德·帕德马纳巴 MCP代理开发人员