OpenAPI控制面板MCP服务器
  
用于OpenAPI/Swagger规范管理的MCP服务器,具有版本控制、LLM驱动的编辑和漂亮的web UI。
🎨 特性
后端(MCP服务器)
- 10个MCP工具 实现完整的OpenAPI管理
- 多工作空间组织 基于文件夹的规范管理
- 版本控制 具有差分跟踪和突变检测功能
- 审计跟踪 使用LLM推理捕获
- 验证 使用频谱和SwaggerParser
- 存储抽象 便于后端切换
- REST API 用于UI集成
前端(Nuxt.js用户界面)
- 📊 仪表盘 使用Apache ECharts可视化
- 📁 多工作区管理 使用文件夹组织
- 📝 规格清单 带有搜索和过滤器
- 🔍 OpenAPI查看器 使用端点渲染
- 📜 版本历史记录 具有变更跟踪功能
- 📋 审计日志 具有高级过滤功能
- 💾 本地存储持久性 用于工作区首选项
- 🎨 Voicenter红色品牌 遍及
🚀 快速开始
先决条件
- Node.js>=20.0.0
- npm或纱线
安装
# Install backend dependencies
npm install
# Install UI dependencies
cd ui && npm install && cd ..发展
# Run backend only (API server on port 3001)
npm run dev
# Run UI only (dev server on port 3000)
npm run dev:ui
# Run both backend and UI concurrently
npm run dev:all访问:
- 用户界面: http://localhost:3000
- API: http://localhost:3001
生产
# Build everything
npm run build:all
# Start production server
npm start生产服务器在同一端口上同时为API和UI提供服务(默认值:3001)。
📁 项目结构
openapi-control-plane-mcp/
├── src/ # Backend source
│ ├── config/ # Configuration
│ ├── services/ # Core services
│ │ ├── folder-manager.ts # Workspace/folder management
│ │ ├── spec-manager.ts # Spec CRUD operations
│ │ └── version-manager.ts # Version control
│ ├── storage/ # Storage layer
│ ├── tools/ # MCP tools (10 tools)
│ ├── types/ # TypeScript types
│ │ └── metadata.ts # Including FolderMetadata
│ └── utils/ # Utilities
│ └── migrate-to-folders.ts # Migration utility
├── ui/ # Frontend Nuxt.js app
│ ├── assets/ # CSS and theme
│ ├── components/ # Vue components
│ │ ├── FolderSidebar.vue # Workspace navigation
│ │ ├── FolderCreateModal.vue # Create workspace dialog
│ │ └── SpecMoveDialog.vue # Move spec dialog
│ ├── composables/ # Data fetching
│ │ ├── useFolders.ts # Workspace management
│ │ └── useSpecs.ts # Spec management
│ ├── layouts/ # Page layouts
│ ├── pages/ # 5 main pages
│ ├── public/ # Static assets
│ └── types/ # Frontend types
│ └── api.ts # Including FolderMetadata
├── tests/ # Backend tests (434 passing!)
└── docs/ # Documentation📁 多工作空间组织
将API规范组织到工作区/文件夹中,以便更好地进行项目管理:
- 默认工作区:“活动项目”和“回收站”
- 自定义工作区:使用标题、描述、颜色和图标创建无限的自定义工作区
- 规范迁移:在保留完整版本历史记录的工作区之间移动规格
- UI集成:带有可视工作区指示器的侧栏导航
- 本地存储持久性:跨会话记住您上次查看的工作区
工作区功能
- 通过MCP工具或UI创建/读取/更新/删除工作区
- 在工作区之间移动规格,同时保留所有版本历史记录
- 按工作空间筛选规格,以实现集中开发
- 带有自定义颜色和图标的可视化工作区指示器
- 自动将现有规范迁移到默认的“活动”工作区
🛠️ MCP工具
- spec_read -阅读带有自定义扩展的OpenAPI规范
- spec_validate -使用Spectral进行验证
- 元数据更新 -更新规范元数据
- schema_manage -管理架构(添加/更新/删除)
- 端点管理 -管理端点
- 版本控制 -版本管理和差异化
- 参数_配置 -配置参数
- 响应配置 -配置响应
- 安全配置 -配置安全性
- 参考资料_管理 -管理$ref
🎨 UI页面
- 仪表盘 (
/)-带有ECharts的统计数据和图表 - 规格清单 (
/specs)-浏览所有API规范 - OpenAPI查看器 (
/specs/:apiId)-查看规格详细信息 - 版本 (
/specs/:apiId/versions)-版本历史 - 审计日志 (
/audit)-完整的审计跟踪
🔧 配置
环境变量
# Backend
PORT=3001
HOST=0.0.0.0
DATA_DIR=./
LOG_LEVEL=info
NODE_ENV=development
# Custom x- attributes
X_ATTRIBUTE_ENDPOINT_LOGO=Logo URL for endpoint
X_ATTRIBUTE_ENDPOINT_DEPRECATED_REASON=Deprecation reasonVoicenter品牌
用户界面使用官方Voicenter品牌颜色:
- 初级红色:
#F52222(hsl(0、85%、50%)) - 浅红色:
#FABDBD(hsl(0、85%、85%)) - 深红色:
#750B0B(hsl(0、85%、25%)
看 docs/voicenter-brand-colors.md 了解详情。
📚 API终点
UI REST API
工作区/文件夹管理
GET /api/folders-列出所有文件夹POST /api/folders-创建新文件夹GET /api/folders/:folderName-获取文件夹元数据PUT /api/folders/:folderName-更新文件夹元数据DELETE /api/folders/:folderName-删除空文件夹GET /api/folders/:folderName/specs-在文件夹中列出规格POST /api/folders/:folderName/move-spec-将规格移动到其他文件夹
规格管理
GET /api/specs-列出所有规格(跨所有文件夹)GET /api/specs/:apiId?folder=name-获取规格详细信息GET /api/specs/:apiId/versions?folder=name-列出版本GET /api/specs/:apiId/versions/:version?folder=name-获取特定版本PUT /api/specs/:apiId-更新规格DELETE /api/specs/:apiId?folder=name-删除规范
审计与统计
GET /api/audit-获取审核日志GET /api/audit/:apiId-获取特定于API的审核日志GET /api/stats-仪表板统计信息
MCP端点
GET /health-健康检查GET /tools-列出MCP工具POST /tools/:toolName-执行工具GET /mcp/sse-SSE连接POST /mcp/sse-MCP协议消息
🧪 测试
# Run all tests
npm test
# Watch mode
npm run test:watch
# Coverage
npm run test:coverage
# Integration tests only
npm run test:integration当前状态:434项测试通过! 🎉
🐳 码头工人
# Build
npm run docker:build
# Run
npm run docker:run
# Stop
npm run docker:stop
# Logs
npm run docker:logs📖 文档
- 代理商.md -开发者指南
- 工具文档 -每个工具都有记录
- 建筑 -系统设计
- Voicenter品牌 -品牌颜色
🤝 贡献
- 阅读 docs/AGENTS.md
- 遵循鲍勃叔叔的原则
- 添加幽默的JSDoc
- 编写测试(保持80%以上的覆盖率)
- 使用常规提交消息
📝 许可证
麻省理工学院
🎯 路线图
- \[x\] 完成10个MCP工具
- \[x\] SSE/HTTP传输
- \[x\] 带有Voicenter品牌的漂亮Nuxt.js UI
- \[x\] 带ECharts的仪表板
- \[x\] OpenAPI查看器
- \[x\] 版本历史
- \[x\] 审核日志
- \[x\] 多工作区/文件夹组织
- \[x\] 本地存储工作区持久性
- \[\]身份验证
- \[\]多用户支持
- \[\]S3存储后端
- \[\]Redis缓存
- \[\]Kubernetes部署
💡 鸣谢
内置:
- 快车 -快速后端框架
- Nuxt.js -视图3框架
- 阿帕奇ECharts -数据可视化
- @nuxt/ui -顺风CSS组件
- MCP-SDK -模型上下文协议
语音输入器 -VoIP/电信平台品牌
______________________________________________________________________
由以下材料制成❤️ 还有很多☕
