Youtube MCP Agent Frontend

YouTube AI代理前端

此存储库包含YouTube AI Agent项目的前端应用程序。该应用程序是使用 Next.js, 反应，以及 顺风CSS，并与MCP后端通信以执行诸如点赞、评论和订阅YouTube视频等操作。

______________________________________________________________________

🚀 特性

• 🔐 谷歌OAuth登录（YouTube身份验证）
• ▶️ 直接在应用程序内观看YouTube视频
• 💬 使用人工智能生成的回复进行评论
• 👍 喜欢汽车的视频
• 🔔 自动订阅频道
• 🤖 使用MCP（模型上下文协议）与AI工具交互
• ⚡ 使用Turbopack快速优化用户界面

______________________________________________________________________

📂 项目结构

frontend/
│── app/
│   ├── auth/
│   │   └── callback/page.tsx
│   ├── page.tsx
│── components/
│   ├── VideoCard.tsx
│   ├── CommentBox.tsx
│   | 
│── lib/
│   ├── api.js
│   |
│── public/
│── README.md
│── package.json

______________________________________________________________________

🛠️ 技术栈

• Next.js 14+ （应用路由器）
• 反应18
• 顺风CSS
• ShadCN用户界面 组件
• 谷歌OAuth
• YouTube数据API v3
• MCP客户端 用于AI操作

______________________________________________________________________

🔧 安装说明

1.️⃣ 克隆仓库

git clone 
cd frontend

2.️⃣ 安装依赖项

npm install

3.️⃣ 创建 .env.local

创建新文件：

NEXT_PUBLIC_API_URL=http://localhost:8000
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
NEXTAUTH_SECRET=your_secret
NEXTAUTH_URL=http://localhost:3000

4.️⃣ 运行开发服务器

npm run dev

应用程序将在以下时间运行： http://localhost:3000

______________________________________________________________________

🔗 后端集成

前端与MCP代理后端通信，用于：

• 人工智能生成的评论
• 喜欢的视频
• 订阅频道

后端回购： *（在此处添加链接）*

______________________________________________________________________

🧪 为生产而建

npm run build
npm start

______________________________________________________________________