AI导哈

MCP服务器管理仪表盘

一个用于构建和管理模型上下文协议（MCP）服务器的现代仪表盘应用，提供项目概览、创建和详细查看功能。

  • by mauriciosimon
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 mauriciosimon/mcp-builder

使用说明

MCP 构建器

一个用于构建和管理模型上下文协议（MCP）服务器的现代仪表板应用程序。

特点/特性

  • 仪表盘视图通过搜索功能，一目了然地查看您的所有MCP项目
  • 项目创建使用模板创建新的MCP项目
  • 详细项目视图以清晰、教学性的方式探索MCP（可能指某种编程语言或框架的）基本元素：
    • 工具查看可调用函数及其参数和模式
    • 资源探索数据源和上下文信息
    • 提示检查带有参数的提示模板

技术栈

  • React 18 - 用户界面（UI）框架
  • TypeScript - 类型安全
  • Vite 翻译成中文是“快”。 - 构建工具和开发服务器
  • React Router - 客户端路由

入门指南

安装

npm install

发展

npm run dev

打开你的浏览器以 http://localhost:5173

构建

npm run build

预览生产构建

npm run preview

部署

部署到Vercel

部署这个应用程序最简单的方法是使用Vercel：

选项1：通过Vercel CLI进行部署

  1. 全局安装 Vercel CLI：
npm install -g vercel
  1. 登录Vercel：
vercel login
  1. 从项目目录部署：
vercel
  1. 对于生产环境部署：
vercel --prod

选项2：通过Vercel仪表板进行部署

  1. 将你的代码推送到GitHub
  2. 参观 vercel.com（可译为“Vercel官网”或直接保留原域名，根据语境决定是否需要翻译）
  3. 点击“新建项目”
  4. 导入您的GitHub仓库
  5. Vercel 将自动检测 Vite 配置并进行部署

该应用将自动部署，您将收到一个实时访问链接！

项目结构

src/
├── components/          # React components
│   ├── Dashboard.tsx    # Main dashboard view
│   ├── NewProject.tsx   # Project creation form
│   ├── ProjectDetail.tsx # Detailed project view
│   └── primitives/      # MCP primitive visualizations
│       ├── ToolCard.tsx
│       ├── ResourceCard.tsx
│       └── PromptCard.tsx
├── types/              # TypeScript type definitions
│   └── mcp.ts         # MCP-related types
├── data/              # Mock data and state
│   └── mockData.ts    # Sample MCP projects
├── App.tsx            # Root application component
├── main.tsx           # Application entry point
└── index.css          # Global styles

MCP 原语（或基本操作）

工具

工具是可调用以执行特定操作的函数。每个工具都定义了：

  • 名称和描述
  • 带有参数的输入模式
  • 必需参数与可选参数

资源

资源是提供上下文信息的数据来源：

  • 基于URI的识别
  • MIME类型规范
  • 描述和元数据

提示

提示是引导交互的模板：

  • 模板名称和描述
  • 可选参数
  • 必需参数与可选参数

许可证

麻省理工学院（MIT）

相关 MCP