AI导哈

MCP工具导航站

一个基于Nuxt 3的动态MCP工具导航站，从GitHub聚合并展示最新的MCP相关开源项目，支持智能分类和实时搜索。

  • by aoe-top
  • Vue
  • 本地部署
  • 更新于
在 GitHub 查看 aoe-top/mcp.aoe.top

使用说明

MCP 工具导航站

一个基于 Nuxt 3 的 Model Context Protocol (MCP) 工具导航站，动态从 GitHub 获取最新的 MCP 相关开源项目。

✨ 特性

  • 🔍 动态数据源 - 自动从 GitHub 搜索并聚合 MCP 相关项目
  • 🎨 现代化 UI - 使用 Nuxt UI 和 Tailwind CSS 构建的精美界面
  • 🖱️ 交互特效 - Hero 区域和工具卡片的鼠标悬停特效
  • 🌓 深色模式 - 完整支持深色/浅色主题切换
  • 📱 响应式设计 - 完美适配各种设备
  • 🏷️ 智能分类 - 自动识别项目类型并分类
  • ⭐ 推荐系统 - 基于 star 数和维护者的推荐算法
  • 🔄 实时搜索 - 快速搜索工具名称、描述和标签

🚀 快速开始

安装依赖

yarn install

配置 GitHub Token (可选)

为了提高 GitHub API 的请求速率限制，建议配置 GitHub Personal Access Token：

  1. 复制 .env.example 为 .env
  2. 在 GitHub Settings 创建 token（不需要任何特殊权限）
  3. 将 token 填入 .env 文件
GITHUB_TOKEN=your_github_token_here

启动开发服务器

yarn dev

访问 http://localhost:3000

构建生产版本

yarn build
yarn preview

📦 技术栈

  • 框架: Nuxt 3
  • UI 库: Nuxt UI
  • 样式: Tailwind CSS 4
  • 数据源: GitHub REST API
  • 部署: 支持 Vercel, Netlify, 静态托管等

🔧 项目结构

app/
├── components/        # Vue 组件
│   └── ToolCard.vue  # 工具卡片组件
├── composables/       # 组合式函数
│   └── useMCPTools.ts # MCP 工具数据管理
├── pages/            # 页面路由
│   ├── index.vue     # 首页
│   └── tool/         # 工具详情页
├── utils/            # 工具函数
│   └── github.ts     # GitHub 数据转换
└── layouts/          # 布局组件
    └── default.vue   # 默认布局

server/
└── api/              # API 路由
    └── github-search.get.ts  # GitHub 搜索 API

🎯 数据源说明

本项目通过 GitHub API 搜索以下关键词来获取 MCP 相关项目：

  • mcp-server topic:mcp
  • model-context-protocol
  • mcp anthropic in:name,description
  • modelcontextprotocol

项目会自动：

  • 去重并合并结果
  • 根据项目描述和标签智能分类
  • 基于 star 数量和维护者进行推荐排序
  • 提取语言、标签等元数据

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT

相关 MCP