MCP Gateway Ui

MCP网关管理UI

一个现代化的管理界面 微软MCP网关，是用ExpressRoute构建的。NET 10和FluentUI的哈维V5。

特性

• 📊 仪表盘：所有适配器和工具的概述及统计信息
• 🖥️ 适配器管理：部署、更新和删除MCP服务器
• 🔧 工具管理：注册、配置和管理MCP工具
• 📋 状态监测：所有部署的实时状态和日志
• ⚙️ 设置：为本地或Azure部署配置网关连接

建筑

该项目遵循 垂直切片架构 模式，按功能而不是技术层组织代码：

src/McpGateway.Admin/
├── Features/
│   ├── Adapters/           # Adapter management feature
│   │   ├── Pages/          # Razor pages
│   │   ├── IAdaptersApi.cs # Refit API interface
│   │   ├── AdaptersService.cs
│   │   └── AdapterRequestValidator.cs
│   ├── Tools/              # Tool management feature
│   │   ├── Pages/
│   │   ├── IToolsApi.cs
│   │   ├── ToolsService.cs
│   │   └── ToolRequestValidator.cs
│   ├── Dashboard/          # Dashboard feature
│   └── Settings/           # Settings feature
├── Shared/
│   ├── Components/         # Reusable UI components
│   ├── Models/             # Shared data models
│   └── Services/           # Shared services
└── wwwroot/                # Static assets

技术

• .NET 10 -最新。网络框架
• 变量服务器 -交互式服务器端渲染
• FluentUI新版本5 -现代UI组件库（预览版）
• 重构 -类型安全的REST客户端
• 流畅的验证 -验证库

⚠️ 备注：此项目使用 预览版 FluentUI ActivityV5(5.0.0-preview.*).预览版本可能包含突破性更改。该项目引用自定义NuGet提要来访问这些预览包。看 nuget.config feed配置文件。

先决条件

• .NET 10 SDK
• MCP网关 在本地或Azure中运行
• 码头工人 （可选，用于容器化部署）

入门指南

1.克隆和构建

cd mcp-gateway-ui
dotnet restore
dotnet build

2.配置网关URL

编辑 src/McpGateway.Admin/appsettings.Development.json:

{
  "McpGateway": {
    "BaseUrl": "http://localhost:8000",
    "DeploymentMode": "Local"
  }
}

对于Azure部署：

{
  "McpGateway": {
    "BaseUrl": "http://..cloudapp.azure.com",
    "DeploymentMode": "Azure",
    "Azure": {
      "ResourceLabel": "mygateway",
      "Location": "eastus",
      "ClientId": ""
    }
  }
}

3.运行应用程序

cd src/McpGateway.Admin
dotnet run

打开https://localhost:7100在您的浏览器中。

用法

管理适配器（MCP服务器）

1. 引导到 MCP服务器 > 所有适配器
2. 点击 部署新 创建新适配器
3. 填写容器图像详细信息和配置
4. 在详细信息页面上查看状态、日志和连接信息

管理工具

1. 引导到 工具 > 所有工具
2. 点击 注册新 注册新工具
3. 使用输入模式配置工具定义
4. 使用工具网关路由器端点进行动态工具路由

连接VS代码

使用您的适配器/工具详细信息页面上显示的MCP端点 .vscode/mcp.json:

{
  "servers": {
    "my-adapter": {
      "url": "http://localhost:8000/adapters/my-adapter/mcp"
    }
  }
}

发展

项目结构

添加新功能

1. 在下创建新文件夹 Features/
2. 在中添加Razor页面 Pages/ 子文件夹
3. 如果需要，创建重新装配API界面
4. 添加服务和验证器类
5. 在中注册服务 Program.cs

码头工人

构建Docker镜像

docker build -t mcp-gateway-admin .

使用Docker运行

docker run -d \
  --name mcp-gateway-admin \
  -p 8080:8080 \
  -e McpGateway__BaseUrl=http://host.docker.internal:8000 \
  -e McpGateway__DeploymentMode=Local \
  --add-host=host.docker.internal:host-gateway \
  mcp-gateway-admin

打开http://localhost:8080在您的浏览器中。

使用Docker Compose运行

运行应用程序最简单的方法是使用Docker Compose：

# Build and start the container
docker compose up -d

# View logs
docker compose logs -f

# Stop the container
docker compose down

环境变量

连接到MCP网关

在Docker中运行时，使用 host.docker.internal 要连接到主机上运行的服务，请执行以下操作：

-e McpGateway__BaseUrl=http://host.docker.internal:8000

要连接到同一Docker网络上的另一个容器，请使用容器名称：

-e McpGateway__BaseUrl=http://mcp-gateway:8000

许可证

该项目根据MIT许可证获得许可。

贡献

欢迎投稿！在提交拉取请求之前，请阅读贡献指南。

相关项目

• MCP网关 -此UI管理的后端网关
• 模型上下文协议 -协议规范
• FluentUI参数 -UI组件库