AI导哈

MCP市场前端

一个用于托管MCP服务器的简单市场前端，支持Poke集成，提供服务器状态显示、URL复制和集成指南等功能。

  • by akarnik23
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 akarnik23/mcp-marketplace

使用说明

MCP市场

一个简单的市场前端，用于与Poke配合使用的托管MCP服务器。

🚀 快速开始

cd nextjs-marketplace
npm install
npm run dev

打开 http://localhost:3000 看看市场。

🎯 这有什么作用

  • 显示6台MCP服务器：黑客新闻、天气、GitHub、Reddit、Spotify、新闻
  • 显示服务器状态：实时、部署或离线
  • 复制到剪贴板：Poke的简单URL复制
  • 说明：Poke集成分步指南
  • 干净的UI：采用Tailwind CSS的现代设计

🔧 MCP服务器

每个MCP服务器都单独部署在Render上：

  • 黑客新闻: https://hackernews-mcp.onrender.com/mcp | GitHub
  • 天气: https://weather-mcp-mqrh.onrender.com/mcp | GitHub
  • GitHub: https://github-mcp-lgfb.onrender.com/mcp | GitHub
  • 红迪: https://reddit-mcp-7ms2.onrender.com/mcp | GitHub
  • 声破天: https://spotify-mcp-092h.onrender.com/mcp | GitHub
  • 新闻: https://news-mcp-xd6i.onrender.com/mcp | GitHub

🎨 特性

  • ✅ 响应式设计 -适用于移动设备和台式机
  • ✅ 复制到剪贴板 -一键式URL复制
  • ✅ 状态指示器 -实时/部署/离线状态
  • ✅ 工具功能 -显示可用的MCP工具
  • ✅ 戳指令 -清晰的集成指南
  • ✅ 现代用户界面 -干净、专业的设计

参考文献

🚀 部署

MCP服务器（Render.com）

每个MCP服务器都可以在Render.com上单独部署：

1.GitHub MCP服务器

先决条件：

  • GitHub账号
  • GitHub个人访问令牌#否则将显示默认工具调用的演示数据

步骤：

  1. 首选 render.com 并在GitHub上注册/登录

  2. 点击“新建+”→ “Web服务”

  3. 连接包含MCP服务器的GitHub存储库

  4. 配置服务：

    • 名字: github-mcp （或您喜欢的名字）
    • 环境: Python 3
    • 计划: Free
    • 生成命令: pip install -r requirements.txt
    • 启动命令: python src/server.py
    • 自动部署: No （推荐免费版）

  5. 设置环境变量：

    • PORT: 8000
    • GITHUB_TOKEN：您的GitHub个人访问令牌

创建GitHub个人访问令牌：

  1. 转到GitHub→ 设置→ 开发人员设置→ 个人访问令牌→ 代币（经典）
  2. 点击“生成新令牌（经典）”
  3. 选择范围： repo, read:user, read:org
  4. 复制令牌并将其粘贴为 GITHUB_TOKEN 渲染中的值

2.气象MCP服务器

先决条件：

  • 无（使用美国国家气象局API；无需API密钥）

步骤：

  1. 在Render上创建新的Web服务

  2. 配置服务：

    • 名字: weather-mcp
    • 环境: Python 3
    • 计划: Free
    • 生成命令: pip install -r requirements.txt
    • 启动命令: python src/server.py

  3. 设置环境变量：

    • PORT: 8000
    • 不需要其他变量

3.黑客新闻MCP服务器

步骤：

  1. 在Render上创建新的Web服务

  2. 配置服务：

    • 名字: hackernews-mcp
    • 环境: Python 3
    • 计划: Free
    • 生成命令: pip install -r requirements.txt
    • 启动命令: python src/server.py

  3. 设置环境变量：

    • PORT: 8000
    • （不需要额外的API密钥-使用公共黑客新闻API）

4.Reddit MCP服务器

先决条件：

  • Reddit账号
  • Reddit API证书（免费）

步骤：

  1. 在Render上创建新的Web服务

  2. 配置服务：

    • 名字: reddit-mcp
    • 环境: Python 3
    • 计划: Free
    • 生成命令: pip install -r requirements.txt
    • 启动命令: python src/server.py

  3. 设置环境变量：

    • PORT: 8000
    • REDDIT_CLIENT_ID：您的Reddit应用程序客户端ID
    • REDDIT_CLIENT_SECRET：您的Reddit应用程序客户端机密

正在获取Reddit API凭据：

  1. 首选 Reddit应用程序首选项
  2. 点击“创建应用程序”或“创建另一个应用程序”
  3. 填写表格：
    • 名字: pokeMCPMarket
    • 应用程序类型: script （个人使用脚本）
    • 描述: MCP server for accessing Reddit data through Poke marketplace integration
    • 关于URL: https://github.com/yourusername/mcp-reddit
    • 重定向URI: http://localhost:8080
  4. 点击“创建应用”
  5. 复制您的 client_id 和 client_secret
  6. 将它们添加到渲染环境变量中，如上所示

5.Spotify MCP服务器

先决条件：

步骤：

  1. 在Render上创建新的Web服务

  2. 配置服务：

    • 名字: spotify-mcp
    • 环境: Python 3
    • 计划: Free
    • 生成命令: pip install -r requirements.txt
    • 启动命令: python src/server.py

  3. 设置环境变量：

    • PORT: 8000
    • SPOTIFY_CLIENT_ID：您的Spotify应用程序客户端ID
    • SPOTIFY_CLIENT_SECRET：您的Spotify应用程序客户端机密

获取Spotify API证书：

  1. 首选 Spotify开发者仪表板
  2. 使用您的Spotify帐户登录
  3. 点击“创建应用”
  4. 填写应用程序详细信息：
    • 应用程序名称: Your MCP Server （或您喜欢的任何名称）
    • 应用程序描述: MCP server for Spotify integration
    • 网站: https://spotify-mcp.onrender.com （使用已部署的URL）
    • 重定向URI: https://spotify-mcp.onrender.com （使用已部署的URL）
  5. 选择“Web API” 当被问及API/SDK时
  6. 点击“保存”
  7. 复制您的 Client ID 和 Client Secret
  8. 将它们添加到渲染环境变量中，如上所示

注： 请使用您部署的渲染URL（而不是localhost）作为重定向URI，因为Spotify需要HTTPS来保证安全。

6.部署前端

重要提示： 如果您添加了API密钥（GitHub令牌、Weather API密钥、Reddit凭据），请小心公开共享您部署的前端，因为它将包含您的MCP服务器URL。

更新中的MCP服务器URL app/page.tsx 使用已部署的渲染URL：

const mcpServers = [
  {
    id: 'hackernews',
    name: 'Hacker News',
    description: 'Browse and search Hacker News stories',
    icon: '/hackerNews.png',
    capabilities: ['get_top_stories', 'get_story', 'get_new_stories'],
    url: 'https://your-hackernews-mcp.onrender.com/mcp', // Update this
    status: 'live'
  },
  {
    id: 'weather',
    name: 'Weather',
    description: 'Get current weather, forecasts, and official alerts (NWS)',
    icon: '/weather.png',
    capabilities: ['get_current_weather', 'get_forecast', 'get_weather_alerts'],
    url: 'https://your-weather-mcp.onrender.com/mcp', // Update this
    status: 'live'
  },
  {
    id: 'github',
    name: 'GitHub',
    description: 'Access GitHub repositories, issues, pull requests, and more',
    icon: '/github.png',
    capabilities: ['get_repos', 'get_issues', 'get_pull_requests', 'search_code'],
    url: 'https://your-github-mcp.onrender.com/mcp', // Update this
    status: 'live'
  },
  {
    id: 'reddit',
    name: 'Reddit',
    description: 'Access Reddit posts, search, and user content from any subreddit',
    icon: '/reddit.png',
    capabilities: ['get_subreddit_posts', 'search_reddit', 'get_user_posts'],
    url: 'https://your-reddit-mcp.onrender.com/mcp', // Update this
    status: 'live'
  },
  {
    id: 'spotify',
    name: 'Spotify',
    description: 'Search tracks, artists, and get top tracks from any artist',
    icon: '/spotify.png',
    capabilities: ['search_tracks', 'search_artists', 'get_artist_top_tracks'],
    url: 'https://your-spotify-mcp.onrender.com/mcp', // Update this
    status: 'live'
  }
];

然后将前端部署到Vercel、Netlify或您首选的托管平台。

部署到Vercel（推荐）

  1. 将代码推送到GitHub （如果你还没有）
  2. 首选 vercel.com 并在GitHub上注册/登录
  3. 点击“新建项目”
  4. 导入您的存储库 包含mcp市场
  5. 配置项目：
    • 框架预设：Next.js（自动检测）
    • 根目录: nextjs-marketplace （如果您的仓库有多个文件夹）
    • 生成命令: next build （自动检测）
    • 输出目录: .next （自动检测）
  6. 点击“部署”
  7. 您的市场将上线 在 https://your-project-name.vercel.app

注： 当您将更改推送到主分支时，Vercel会自动部署。

🔧 在渲染中添加环境变量

对于每个需要API密钥的MCP服务器，您需要在“渲染”中添加环境变量：

  1. 转到渲染服务仪表板
  2. 点击“环境”选项卡
  3. 添加所需的环境变量：
    • 对于 GitHub MCP: GITHUB_TOKEN = your_github_token
    • 对于 天气MCP: WEATHER_API_KEY = your_openweathermap_key
    • 对于 Reddit MCP: REDDIT_CLIENT_ID = your_reddit_client_id 和 REDDIT_CLIENT_SECRET = your_reddit_client_secret
    • 对于 Spotify MCP: SPOTIFY_CLIENT_ID = your_spotify_client_id 和 SPOTIFY_CLIENT_SECRET = your_spotify_client_secret
  4. 点击“保存更改”
  5. 重新部署 您的服务（保存环境变量时，Render将自动重新部署）

注： Hacker News MCP不需要任何环境变量，因为它使用公共的API。

📝 定制

要添加更多MCP服务器，请编辑 app/page.tsx 并添加到 mcpServers 数组：

{
  id: 'new-server',
  name: 'New Server',
  description: 'Description here',
  icon: '🔧',
  capabilities: ['tool1', 'tool2'],
  url: 'https://new-server.onrender.com/mcp',
  status: 'live'
}

🎯 用于Poke集成

  1. 从市场复制任何MCP URL
  2. 首选 poke.com/设置/连接
  3. 添加带有描述性名称的MCP URL
  4. 测试：“告诉子代理使用[name]集成的[tool]工具”

相关 MCP