AI导哈

YouTube AI代理前端

一个基于Next.js、React和Tailwind CSS构建的YouTube AI代理前端应用，支持Google OAuth登录、观看视频、AI生成评论、自动点赞和订阅等功能。

  • by saikrishnavarmauppalapati
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 saikrishnavarmauppalapati/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 <repo_url>
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

相关 MCP