DevHub-多服务仪表板
从一个地方管理17个开发人员服务
一个全面的VS Code扩展，它提供了一个统一的仪表板，用于通过MCP（模型上下文协议）集成管理多个开发人员服务。
🚀 特性
- 17综合服务：GitHub、MongoDB、Auth、Stripe、LemonSqueezy、Context 7、顺序思维、Firecrawl、文件系统、浏览器、Figma、Supabase、Vercel、Sentry、Taskmaster、Desktop Commander、21st Dev
- 层次树视图：VS Code侧栏中的有组织服务管理
- 实时状态指示器：每个服务的视觉连接状态
- 交互式仪表板：用于服务概述的现代webview面板
- 50+命令：通过命令面板快速访问
- 上下文菜单：右键单击服务上的操作
- 键盘快捷键：使用键绑定的快速工作流程
- 人工智能驱动开发：用于代码生成和推理的集成人工智能服务
- 全栈支持：从设计到在一个地方部署
📸 截图
侧边栏视图
仪表盘
🛠️ 安装
来源（发展）
- 克隆此存储库
- 跑
npm install - 按F5打开扩展开发主机
来自Marketplace（即将推出）
在VS代码扩展中搜索“DevHub”
📋 用法
打开DevHub
- 单击活动栏中的DevHub图标
- 或者使用命令面板：
DevHub: Open Dashboard - 或键盘快捷键：
Ctrl+Shift+D
连接服务
- 在侧边栏中扩展服务
- 在操作中单击“连接”
- 提示时输入API密钥/凭据
- 或者使用命令面板：
DevHub: Connect Service
可用命令
服务管理
DevHub: Open Dashboard-打开主仪表板DevHub: Connect Service-连接到服务DevHub: Disconnect Service-断开与服务的连接DevHub: Connect All Services-连接到所有断开连接的服务DevHub: Disconnect All Services-断开与所有服务的连接DevHub: Refresh Services-刷新服务列表
服务特定命令
DevHub: List GitHub Repositories-查看GitHub存储库DevHub: List MongoDB Databases-查看MongoDB数据库DevHub: List Stripe Customers-查看Stripe客户DevHub: List LemonSqueezy Products-查看LemonSqueezy产品DevHub: Store Context-保存上下文数据（上下文7）DevHub: Solve with Reasoning-结构化问题解决（顺序思维）DevHub: Crawl Website-提取网站内容（Firecrawl）DevHub: List Directory-浏览文件（文件系统）DevHub: Open Browser-启动浏览器自动化DevHub: List Figma Files-查看设计文件DevHub: List Tables-查看数据库表（Supabase）DevHub: List Vercel Projects-查看部署DevHub: List Sentry Projects-查看错误跟踪项目DevHub: List Tasks-查看任务（Taskmaster）DevHub: Execute Command-运行系统命令（Desktop Commander）DevHub: Generate Code-人工智能驱动的代码生成（21世纪开发者）
🔧 服务
🐙 开发工具
GitHub -存储库管理、拉取请求、问题和协作 21日开发 -人工智能驱动的代码生成、项目脚手架和自主开发
🗄️ 数据库和存储
MongoDB -NoSQL数据库管理、集合和查询 Supabase -具有实时数据库、身份验证和存储的后端即服务 文件系统 -本地文件系统操作、项目结构分析
💳 支付与电子商务
条纹 -支付处理、订阅、客户管理 柠檬奶昔 -电子商务平台、产品目录、订单管理
🔐 身份验证和安全
认证 -OAuth提供者、令牌管理、用户身份验证 哨兵 -错误跟踪、性能监控、问题管理
🚀 部署和托管
维塞尔 -现代部署平台、项目管理、日志 桌面指挥官 -系统管理、流程管理、命令执行
🎨 设计与内容
Figma -设计文件管理、组件检查、资产导出 萤火虫 -网络爬行、页面抓取、内容提取 浏览器 -浏览器自动化、屏幕截图、网络交互
🧠 人工智能与智能
背景7 -上下文存储、检索和管理 顺序思考 -结构化推理、问题解决、替代分析
📋 生产力
模仿大师 -任务管理、项目组织、截止日期跟踪
🎯 用例
全栈开发工作流程
1. Generate project scaffold with 21st Dev
2. Clone repository with GitHub
3. Set up database with MongoDB/Supabase
4. Design UI components with Figma
5. Implement features with AI assistance from 21st Dev
6. Deploy to Vercel
7. Monitor with Sentry
8. Manage payments with Stripe/LemonSqueezy人工智能驱动开发
1. Use Sequential Thinking for problem analysis
2. Generate code with 21st Dev
3. Store development context with Context 7
4. Automate testing with Browser
5. Deploy and monitor with Vercel + Sentry系统管理
1. Monitor system with Desktop Commander
2. Manage tasks with Taskmaster
3. Automate workflows with Browser
4. Track errors with Sentry
5. Manage files with FileSystem🗺️ 路线图
- \[x\] 第一阶段：项目设置和基本结构
- \[x\] 第二阶段：核心功能（树视图、命令、仪表板）
- \[x\] 第3阶段：17 MCP服务器实施
- \[x\] 第四阶段：人工智能集成和高级功能
- \[\]第5阶段：分析和通知
- \[\]第6阶段：市场发布
- \[\]第7阶段：社区插件和扩展
📊 统计
当前状态
- 17台MCP服务器 实施
- 50+命令 可用的
- 零TypeScript错误
- 零ESLint警告
- 生产就绪 代码库
服务类别
- 开发工具：2项服务
- 数据库和存储：3项服务
- 支付与电子商务：2项服务
- 身份验证和安全：2项服务
- 部署和托管：2项服务
- 设计与内容：3项服务
- 人工智能与智能：2项服务
- 生产力：1项服务
💻 发展
先决条件
- Node.js 18+
- VS代码1.85+
- TypeScript 5.0+
构建
npm run compile测试
npm test包裹
npm run vscode:prepublish开发工作流程
# Install dependencies
npm install
# Start development
npm run dev
# Compile TypeScript
npm run compile
# Run tests
npm test
# Check linting
npm run lint
# Fix linting issues
npm run lint:fix📚 文档
🏗️ 建筑
核心组件
src/
├── extension.ts # Main extension entry point
├── mcpManager.ts # MCP server management
├── treeView.ts # Sidebar tree view
├── webview.ts # Dashboard webview
├── commands.ts # Command registration
├── types.ts # TypeScript interfaces
└── mcp-servers/ # 17 MCP server implementations
├── github/
├── mongodb/
├── stripe/
├── lemonsqueezy/
├── auth/
├── context7/
├── sequential-thinking/
├── firecrawl/
├── filesystem/
├── browser/
├── figma/
├── supabase/
├── vercel/
├── sentry/
├── taskmaster/
├── desktop-commander/
└── 21st-dev/MCP集成
每个MCP服务器实现：
- 连接管理
- API密钥验证
- 服务特定操作
- 错误处理
- 状态监测
🤝 贡献
欢迎投稿！拜托：
- 分叉存储库
- 创建要素分支
- 进行更改
- 如果适用，添加测试
- 提交拉取请求
开发指南
- 遵循TypeScript的最佳实践
- 使用ESLint提高代码质量
- 为公共API添加JSDoc注释
- 测试所有MCP服务器连接
- 更新新功能的文档
📧 联系
- github：https://github.com/Rarebox
- 电子邮件：info@birsonraki.net
- 问题：https://github.com/Rarebox/devhub-mcp/issues
⭐ 致谢
- Anthropic的MCP协议
- VS代码扩展API
- 临床集成支持
- 所有API的服务提供商
📄 许可证
MIT许可证-请参阅许可证文件
______________________________________________________________________
由以下材料制成❤️ 作者：Caglar Usta
17台MCP服务器-完整的开发生态系统 🌟
______________________________________________________________________
🚀 快速入门指南
- 安装：克隆并运行
npm install - 发射：在VS代码中按F5
- 连接：单击DevHub图标→ 连接服务
- 使用：命令选项板(
Ctrl+Shift+P) →DevHub:命令 - 开发：将所有17项服务用于您的开发工作流程
用DevHub编写代码快乐！ 🎉