Zen Citizen MCP Server

Zen Citizen MCP服务器

构建了一个高级MCP（模型上下文协议）服务器 mcp使用 它集成了YouTube和Twitter/X API，用于搜索视频、评论和推文，同时在交互式小部件中显示结果。

特性

🎯 核心能力

• YouTube搜索 -搜索与任何查询相关的视频
• YouTube评论 -从视频中获取并显示热门评论
• Twitter搜索 -搜索最近关于任何主题的推文
• 作者信息 -显示频道和配置文件信息
• 组合搜索 -同时搜索两个平台
• 交互式用户界面 -具有选项卡式视图的基于列表的小部件
• 暗模式支持 -主题感知风格

🔧 可用工具

安装和设置

1.克隆或下载项目

cd Zen-Citizen
npm install

2.获取API凭据

YouTube API

1. 首选 谷歌云控制台
2. 创建一个新项目
3. 启用 YouTube数据API v3
4. 首选 API和服务>凭据
5. 创建一个 API密钥 （应用程序类型：桌面应用程序）
6. 复制API密钥

Twitter/X API

1. 首选 Twitter开发者门户
2. 创建应用程序或使用现有应用程序
3. 首选 密钥和令牌
4. 复制 持有者令牌

3.配置环境变量

创建一个 .env 文件（或复制自 .env.example):

cp .env.example .env

编辑 .env 使用您的凭据：

YOUTUBE_API_KEY=your_api_key_here
TWITTER_BEARER_TOKEN=your_bearer_token_here
MCP_URL=http://localhost:3000

运行服务器

发展

npm run dev

服务器启动于 http://localhost:3000\ 检查员可在 http://localhost:3000/inspector

生产构建

npm run build
npm run start

部署到Manufact Cloud

npm run deploy

用法示例

在ChatGPT/Claude

搜索YouTube：

Search for "machine learning tutorials" on YouTube

搜索推特：

Find recent tweets about AI and machine learning

组合搜索：

Search for "React 19 features" on both YouTube and Twitter

项目结构

├── index.ts                          # Main server & tool definitions
├── api.ts                            # YouTube & Twitter API handlers
├── package.json                      # Dependencies
├── resources/
│   ├── product-search-result/        # Fruit search widget (demo)
│   └── api-results/
│       ├── widget.tsx                # Results display widget
│       ├── types.ts                  # TypeScript types
│       └── styles.css                # Styling
├── public/                           # Static assets
└── .env.example                      # Environment template

API响应结构

YouTube结果

{
  videos: [
    {
      id: string,
      title: string,
      description: string,
      thumbnail: string,
      channelTitle: string,
      viewCount: string,
      publishedAt: string,
      url: string
    }
  ],
  comments: [
    {
      id: string,
      authorDisplayName: string,
      textDisplay: string,
      likeCount: number,
      publishedAt: string,
      authorProfileImageUrl: string
    }
  ],
  query: string
}

推特结果

{
  tweets: [
    {
      id: string,
      text: string,
      author: string,
      authorHandle: string,
      authorAvatarUrl: string,
      createdAt: string,
      likeCount: number,
      retweetCount: number,
      url: string
    }
  ],
  query: string,
  count: number
}

小部件功能

这 api结果 小部件提供：

• 📺 标签导航 -在YouTube、Twitter和所有结果之间切换
• 🎬 视频卡 -缩略图、标题、频道、浏览次数
• 💬 评论显示 -带有点赞和日期的热门评论
• 🐦 推特卡 -包含点赞和转发的完整推文
• 👤 作者信息 -个人资料图片和手柄
• 🔗 直接链接 -点击打开平台上的内容
• 🌓 深色模式 -主题意识

故障排除

“未设置YOUTUBE_API_KEY环境变量”

• 确保您已创建 .env 使用您的YouTube API密钥文件
• 添加环境变量后重新启动开发服务器

“TWITTER_BEARER_TOKEN环境变量未设置”

• 确保您已创建 .env 使用您的Twitter承载令牌文件
• 验证令牌是否具有推文的读取权限

“YouTube搜索失败：403”

• 您的API密钥配额可能已超出
• 检查配额 谷歌云控制台
• YouTube API有每日配额限制（默认情况下：10000个单位/天）

“推特搜索失败：401”

• 承载令牌可能无效或已过期
• 从Twitter开发者门户重新生成令牌

速率限制

• YouTube API：每天10000个单位（默认配额）
• Twitter API：检查您的 API计划限制

后续步骤

• ✅ 添加更高级的搜索筛选器
• ✅ 缓存结果以减少API调用
• ✅ 添加用户偏好和收藏夹
• ✅ 实现分页
• ✅ 为推文添加情绪分析

了解更多

• mcp使用文档
• YouTube API参考
• Twitter API v2参考

在Manufact Cloud上部署

npm run deploy

______________________________________________________________________