MCP-市场平台
项目介绍
MCP 市场
一个简单的前端市场，用于托管与Poke兼容的MCP服务器。
🚀 快速开始
cd nextjs-marketplace
npm install
npm run dev
打开 http://localhost:3000 查看市场。
🎯 功能概述
- 显示6个MCP服务器：Hacker News、Weather、GitHub、Reddit、Spotify、News
- 显示服务器状态：Live、Deploying或Offline
- 复制到剪贴板：轻松复制Poke的URL
- 操作指南：逐步集成Poke的指南
- 简洁界面：使用Tailwind CSS的现代设计
🔧 MCP服务器
每个MCP服务器都在Render上独立部署：
- Hacker News：
https://hackernews-mcp.onrender.com/mcp| GitHub - Weather：
https://weather-mcp-mqrh.onrender.com/mcp| GitHub - GitHub：
https://github-mcp-lgfb.onrender.com/mcp| GitHub - Reddit：
https://reddit-mcp-7ms2.onrender.com/mcp| GitHub - Spotify：
https://spotify-mcp-092h.onrender.com/mcp| GitHub - News：
https://news-mcp-xd6i.onrender.com/mcp| GitHub
🎨 特性
- ✅ 响应式设计 - 在移动设备和桌面设备上均适用
- ✅ 复制到剪贴板 - 单击复制URL
- ✅ 状态指示器 - 显示Live/Deploying/Offline状态
- ✅ 工具能力 - 显示可用的MCP工具
- ✅ Poke操作指南 - 清晰的集成指南
- ✅ 现代UI - 清洁、专业的设计
参考资料
- 基于Interaction MCP服务器模板和MCP模式：MCP服务器模板
- 通过Interaction的HackMIT挑战发现：Interaction HackMIT挑战
🚀 部署
MCP服务器（Render.com）
每个MCP服务器都可以在Render.com上单独部署：
1. GitHub MCP服务器
前提条件：
- GitHub账户
- GitHub个人访问令牌 # 否则将显示默认工具调用的演示数据
步骤：
-
访问 render.com 并使用GitHub账号注册/登录
-
点击 "新建 +" → "Web服务"
-
连接包含MCP服务器的GitHub仓库
-
配置服务：
- 名称：
github-mcp（或您喜欢的名称） - 环境：
Python 3 - 计划：
免费 - 构建命令：
pip install -r requirements.txt - 启动命令：
python src/server.py - 自动部署：
否（建议用于免费层级）
- 名称：
-
设置环境变量：
PORT：8000GITHUB_TOKEN：您的GitHub个人访问令牌
创建GitHub个人访问令牌：
- 访问 GitHub → 设置 → 开发者设置 → 个人访问令牌 → 令牌（经典）
- 点击 "生成新令牌（经典）"
- 选择范围：
repo，read:user，read:org - 复制令牌并将其粘贴到Render中的
GITHUB_TOKEN值
2. Weather MCP服务器
前提条件：
- 无（使用国家气象局API；无需API密钥）
步骤：
-
在Render上创建一个新的Web服务
-
配置服务：
- 名称：
weather-mcp - 环境：
Python 3 - 计划：
免费 - 构建命令：
pip install -r requirements.txt - 启动命令：
python src/server.py
- 名称：
-
设置环境变量：
PORT：8000- 不需要其他变量
3. Hacker News MCP服务器
步骤：
-
在Render上创建一个新的Web服务
-
配置服务：
- 名称：
hackernews-mcp - 环境：
Python 3 - 计划：
免费 - 构建命令：
pip install -r requirements.txt - 启动命令：
python src/server.py
- 名称：
-
设置环境变量：
PORT：8000- （不需要额外的API密钥 - 使用公开的Hacker News API）
4. Reddit MCP服务器
前提条件：
- Reddit账户
- Reddit API凭证（免费）
步骤：
-
在Render上创建一个新的Web服务
-
配置服务：
- 名称：
reddit-mcp - 环境：
Python 3 - 计划：
免费 - 构建命令：
pip install -r requirements.txt - 启动命令：
python src/server.py
- 名称：
-
设置环境变量：
PORT：8000REDDIT_CLIENT_ID：您的Reddit应用客户端IDREDDIT_CLIENT_SECRET：您的Reddit应用客户端密钥
获取Reddit API凭证：
- 访问 Reddit应用偏好设置
- 点击 "创建应用" 或 "创建另一个应用"
- 填写表单：
- 名称：
pokeMCPMarket - 应用类型：
脚本（用于个人用途） - 描述：
通过Poke市场集成访问Reddit数据的MCP服务器 - 关于网址：
https://github.com/yourusername/mcp-reddit - 重定向URI：
http://localhost:8080
- 名称：
- 点击 "创建应用"
- 复制您的
client_id和client_secret - 将它们添加到Render环境变量中，如上所示
5. Spotify MCP服务器
前提条件：
- Spotify账户
- Spotify API凭证（免费，可在developer.spotify.com获取）
步骤：
-
在Render上创建一个新的Web服务
-
配置服务：
- 名称：
spotify-mcp - 环境：
Python 3 - 计划：
免费 - 构建命令：
pip install -r requirements.txt - 启动命令：
python src/server.py
- 名称：
-
设置环境变量：
PORT：8000SPOTIFY_CLIENT_ID：您的Spotify应用客户端IDSPOTIFY_CLIENT_SECRET：您的Spotify应用客户端密钥
获取Spotify API凭证：
- 访问 Spotify开发者仪表盘
- 使用您的Spotify账户登录
- 点击 "创建应用"
- 填写应用详情：
- 应用名称：
您的MCP服务器（或您喜欢的名称） - 应用描述：
用于Spotify集成的MCP服务器 - 网站：
https://spotify-mcp.onrender.com（使用您的已部署URL） - 重定向URI：
https://spotify-mcp.onrender.com（使用您的已部署URL）
- 应用名称：
- 当询问API/SDK时，选择 "Web API"
- 点击 "保存"
- 复制您的
Client ID和Client Secret - 将它们添加到Render环境变量中，如上所示
注意：使用您的已部署Render URL（而不是localhost），因为Spotify出于安全原因需要HTTPS。
6. 部署前端
重要：如果您添加了API密钥（GitHub令牌、天气API密钥、Reddit凭证），请注意不要公开分享您的已部署前端，因为它将包含您的MCP服务器URL。
在app/page.tsx中更新MCP服务器URL为您的已部署Render URL：
const mcpServers = [
{
id: 'hackernews',
name: 'Hacker News',
description: '浏览和搜索Hacker News故事',
icon: '/hackerNews.png',
capabilities: ['get_top_stories', 'get_story', 'get_new_stories'],
url: 'https://your-hackernews-mcp.onrender.com/mcp', // 更新此URL
status: 'live'
},
{
id: 'weather',
name: 'Weather',
description: '获取当前天气、预报和官方警报（NWS）',
icon: '/weather.png',
capabilities: ['get_current_weather', 'get_forecast', 'get_weather_alerts'],
url: 'https://your-weather-mcp.onrender.com/mcp', // 更新此URL
status: 'live'
},
{
id: 'github',
name: 'GitHub',
description: '访问GitHub存储库、问题、拉取请求等',
icon: '/github.png',
capabilities: ['get_repos', 'get_issues', 'get_pull_requests', 'search_code'],
url: 'https://your-github-mcp.onrender.com/mcp', // 更新此URL
status: 'live'
},
{
id: 'reddit',
name: 'Reddit',
description: '访问任何子版块的Reddit帖子、搜索和个人内容',
icon: '/reddit.png',
capabilities: ['get_subreddit_posts', 'search_reddit', 'get_user_posts'],
url: 'https://your-reddit-mcp.onrender.com/mcp', // 更新此URL
status: 'live'
},
{
id: 'spotify',
name: 'Spotify',
description: '搜索曲目、艺术家，并获取任何艺术家的热门曲目',
icon: '/spotify.png',
capabilities: ['search_tracks', 'search_artists', 'get_artist_top_tracks'],
url: 'https://your-spotify-mcp.onrender.com/mcp', // 更新此URL
status: 'live'
}
];
然后将前端部署到Vercel、Netlify或您首选的托管平台。
部署到Vercel（推荐）
- 将代码推送到GitHub（如果尚未推送）
- 访问 vercel.com 并使用GitHub注册/登录
- 点击 "新建项目"
- 导入您的仓库 包含mcp市场的
- 配置项目：
- 框架预设：Next.js（自动检测）
- 根目录：
nextjs-marketplace（如果您的仓库有多个文件夹） - 构建命令：
next build（自动检测） - 输出目录：
.next（自动检测）
- 点击 "部署"
- 您的市场将在
https://your-project-name.vercel.app上线
注意：当您向主分支推送更改时，Vercel会自动进行部署。
🔧 在Render上添加环境变量
对于需要API密钥的每个MCP服务器，您需要在Render上添加环境变量：
- 访问您的Render服务仪表盘
- 点击 "环境" 标签
- 添加所需环境变量：
- 对于 GitHub MCP：
GITHUB_TOKEN=your_github_token - 对于 Weather 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
- 对于 GitHub MCP：
- 点击 "保存更改"
- 重新部署 您的服务（当您保存环境变量时，Render会自动重新部署）
注意：Hacker News MCP不需要任何环境变量，因为它使用公共API。
📝 自定义
要添加更多的MCP服务器，请编辑 app/page.tsx 并在 mcpServers 数组中添加：
{
id: 'new-server',
name: '新服务器',
description: '此处填写描述',
icon: '🔧',
capabilities: ['tool1', 'tool2'],
url: 'https://new-server.onrender.com/mcp',
status: 'live'
}
🎯 对于Poke集成
- 从市场中复制任意MCP URL
- 访问 poke.com/settings/connections
- 添加带有描述性名称的MCP URL
- 测试："告诉子代理使用[name]集成的[工具]工具"