MCP工具注册表
一个全面且已准备好投入生产的React应用程序，用于管理和交互Model Context Protocol（MCP）工具。该应用程序提供了一个现代、易用的界面，用于工具发现、调用、缓存管理和系统管理。
🚀 特性
核心功能
- 仪表盘实时指标、系统健康监测和活动动态
- 工具注册表浏览、搜索并使用高级过滤功能管理MCP工具
- 工具详情包含交互式文档的全面工具信息
- 工具调用工具执行时的动态表单生成，实时显示结果
- 缓存管理使用详细分析监控和管理缓存系统
- 管理面板系统管理，包括用户管理和配置
技术特点
- 实时更新用于实时数据同步的WebSocket集成
- 响应式设计以移动设备为先，采用自适应布局
- 无障碍性符合WCAG 2.1 AA标准，支持全面的键盘导航
- 错误处理具有恢复机制的稳健错误边界
- 加载状态精致的加载指示器和骨架屏
- 暗色/亮色主题手动切换的系统偏好检测
- 演出懒加载、代码分割和优化后的包大小
🛠 技术栈
- 前端React 19.1.0，支持现代钩子（hooks）和上下文（context）
- 造型使用 shadcn/ui 组件的 Tailwind CSS
- 图标Lucide React：实现一致性的图标库
- 图表Recharts用于数据可视化
- 状态管理使用自定义钩子实现 React 上下文
- 路由React Router v6 配合懒加载
- 构建工具Vite 用于快速开发和优化构建
- 包管理器pnpm：实现高效依赖管理
📦 安装
先决条件
- Node.js 18及以上版本
- pnpm（推荐）或 npm
设置
# Clone the repository
git clone
cd mcp-tool-registry
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# Build for production
pnpm run build
# Preview production build
pnpm run preview🏗 项目结构
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (shadcn/ui)
│ ├── Layout.jsx # Main application layout
│ ├── ErrorBoundary.jsx # Error handling components
│ ├── LoadingStates.jsx # Loading and skeleton components
│ └── NotificationSystem.jsx # Toast notifications
├── contexts/ # React Context providers
│ ├── AppContext.jsx # Global application state
│ └── WebSocketContext.jsx # Real-time communication
├── hooks/ # Custom React hooks
│ ├── useApi.js # API integration hooks
│ └── useAccessibility.js # Accessibility utilities
├── pages/ # Application pages/screens
│ ├── Dashboard.jsx # Main dashboard
│ ├── ToolRegistry.jsx # Tool listing and search
│ ├── ToolDetails.jsx # Individual tool details
│ ├── ToolInvocation.jsx # Tool execution interface
│ ├── CacheManagement.jsx # Cache administration
│ ├── AdminPanel.jsx # System administration
│ └── UserManagement.jsx # User administration
├── services/ # External service integrations
│ └── api.js # API client configuration
├── types/ # TypeScript type definitions
│ └── index.ts # Application types
├── AppRouter.jsx # Application routing
├── App.jsx # Root application component
└── main.jsx # Application entry point🎨 设计系统
色板/调色板
该应用程序采用了一种语义色彩系统，能够适应浅色和深色主题：
- 主要的，重要的主要品牌行动和亮点色彩
- 次要的；二级的辅助颜色用于次要操作
- 静音背景和禁用状态使用微妙的颜色
- 具有破坏性的错误和警告状态
- 成功积极的反馈和确认
排版设计
- 字体家族Inter（系统备用字体：system-ui, Avenir, Helvetica, Arial）
- 比例；规模具有统一行高的响应式排版
- 等级制度；层级结构清晰的标题结构以提高可访问性
间距
- 基本单元0.25rem（4像素）
- 规模使用 Tailwind 的间距比例保持一致的间距
- 布局基于网格的布局，具有响应式断点
🔧 配置
环境变量
创建一个 .env.local 用于本地开发的文件：
# API Configuration
REACT_APP_API_BASE_URL=http://localhost:8000
REACT_APP_WS_HOST=localhost:8000
# Feature Flags
REACT_APP_ENABLE_DEVTOOLS=true
REACT_APP_ENABLE_ANALYTICS=false
# External Services
REACT_APP_SENTRY_DSN=your-sentry-dsnAPI集成
该应用程序期望一个具有以下端点的后端API：
GET /api/health # System health check
GET /api/tools # List all tools
GET /api/tools/:id # Get tool details
POST /api/tools/:id/invoke # Invoke tool
GET /api/cache/stats # Cache statistics
POST /api/cache/clear # Clear cache
GET /api/users # List users (admin)
POST /api/users # Create user (admin)WebSocket 事件
实时更新通过WebSocket处理，涉及以下事件类型：
// Incoming events
'metrics_update' // System metrics update
'tool_invocation' // Tool execution status
'cache_update' // Cache statistics update
'user_activity' // User activity logs
'system_alert' // System notifications
// Outgoing events
'request_metrics' // Request metrics update
'heartbeat' // Connection keepalive🎯 使用方法
仪表盘
- 查看实时系统指标和健康状态
- 监控最近的工具调用和用户活动
- 快速访问常用任务的操作
工具管理
- 使用搜索和过滤功能浏览可用工具
- 查看详细的工具文档和架构图
- 执行具有动态表单生成功能的工具
- 监控执行结果和历史记录
缓存管理
- 监控缓存性能和统计信息
- 按模式或全局清除缓存条目
- 查看视图缓存命中/未命中比率及趋势
管理
- 管理用户帐户和权限
- 配置系统设置和偏好
- 监控系统日志和审计轨迹
🔒 安全
认证
- 基于JWT的身份验证（已准备好实现）
- 基于角色的访问控制（RBAC）
- 会话管理，支持自动刷新
数据保护
- 输入验证和清理
- 使用内容安全策略进行XSS防护
- 针对状态改变操作的CSRF（跨站请求伪造）保护
隐私
- localStorage中未存储敏感数据
- 安全的WebSocket连接（生产环境中使用WSS）
- 管理操作的审计日志记录
♿ 无障碍设施
WCAG 2.1 AA 合规性
- 带有适当地标元素的语义化HTML结构
- 所有交互元素的键盘导航
- 支持屏幕阅读器，使用ARIA标签和描述
- 使用可见焦点指示器进行焦点管理
- 符合无障碍标准的色彩对比度
键盘导航
- 制表符顺序遵循逻辑流程
- Esc 键关闭模态框和下拉菜单
- 使用箭头键进行列表和菜单导航
- 按回车键/空格键进行激活
屏幕阅读器支持
- 所有表单控件的描述性标签
- 动态内容更新的实时区域
- 加载状态的状态公告
- 与表单字段相关的错误信息
🚀 性能
优化策略
- 代码拆分路由组件的懒加载
- 捆绑分析优化了块大小和依赖关系
- 图像优化具有懒加载功能的响应式图片
- 缓存对静态资源进行积极缓存
- 压缩文本资源的Gzip/Brotli压缩
指标
- 首次内容绘制（First Contentful Paint）小于1.5秒
- 最大内容绘制（Largest Contentful Paint）\< 2.5秒
- 累积布局偏移小于 0.1
- 首次输入延迟\< 100毫秒
🧪 测试
测试结构
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Generate coverage report
pnpm test:coverage
# Run accessibility tests
pnpm test:a11y测试策略
- 单元测试组件逻辑和实用函数
- 集成测试API集成与数据流
- 无障碍性测试使用axe进行自动化无障碍性测试
- 视觉回归截图对比测试
📱 浏览器支持
支持的浏览器
- Chrome90多
- Firefox88+
- Safari（浏览器）14岁以上
- 边缘90多
渐进增强
- 核心功能在无JavaScript的情况下也能运行
- 增强功能需要现代浏览器API
- 针对旧版浏览器的优雅降级
🚀 部署
生产构建
# Create optimized production build
pnpm run build
# Preview production build locally
pnpm run preview部署选项
静态托管（推荐）
- Vercel（注：Vercel是一个用于部署和托管静态网站及服务器端渲染应用的平台，直接音译为“维尔塞尔”，但通常保留原名以体现其品牌特性）零配置部署，自动预览
- Netlify（网络部署平台，常用于静态网站和前端应用的部署）带表单处理的持续部署
- GitHub Pages为开源项目提供免费托管服务
容器部署
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY dist ./dist
EXPOSE 3000
CMD ["npx", "serve", "-s", "dist", "-l", "3000"]CDN配置
- 为静态资源配置适当的缓存头
- 启用压缩（Gzip/Brotli）
- 为API请求设置适当的CORS头
🤝 贡献
开发工作流程
- 为仓库创建分支（或“克隆仓库”）
- 创建一个特性分支（
git checkout -b feature/amazing-feature） - 按照编码标准进行你的修改
- 为新功能添加测试
- 确保所有测试通过（
pnpm test) - 提交您的更改（
git commit -m 'Add amazing feature') - 推送到分支（
git push origin feature/amazing-feature) - 打开一个拉取请求
编码规范
- ESLint（一种用于JavaScript的静态代码分析工具）强制执行代码风格和最佳实践
- 更整洁（或更美观）一致的代码格式
- 约定式提交（或称为规范式提交）标准化的提交信息
- TypeScript类型安全性，提升可维护性
代码审查流程
- 所有更改都需要同行评审
- 自动化检查必须通过（测试、代码规范检查、构建）
- 用户界面更改的无障碍性审查
- 重大变更的性能影响评估
📄 许可证
这个项目遵循MIT许可证授权——详见 许可证 详情请见文件。
🙏 致谢
- shadcn/ui（可译为“Shadcn的用户界面库”或根据具体上下文简化为“Shadcn UI”，如果“shadcn”是一个特定项目或库的名称，且“ui”代表用户界面）美观且易用的用户界面组件
- Tailwind CSS实用优先的CSS框架
- 清醒的一致且美观的图标
- Recharts（注：这是一个专有名词，通常不直接翻译，但在中文语境下，可以理解为“用于React的图表库”或保持原名以体现其特定含义）可组合图表库
- React我们应用程序的基础
📞 支持
如需支持或有问题：
- 文档请查看此README文件和内联代码注释
- 问题在GitHub上提交一个关于错误和功能请求的问题
- 讨论使用GitHub讨论区来提出问题和分享想法
- 电子邮件请通过 dev@mcpregistry.com 联系开发团队
______________________________________________________________________
由MCP注册表团队用心打造