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. 在 创建 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