使用说明
MCP Frontend PluginA Backstage frontend plugin that visualizes Model Context Protocol (MCP) servers with rich UI components. This plugin allows backstage to centrally manage, discover, and collaborate around MCP entities directly from your Backstage catalog. |
先决条件
重要提示：
您必须首先安装后端插件 @mexl/backstage-plugin-catalog-backend-module-mcp。有关完整的配置步骤，请参阅其设置指南。
特性
- 交互式MCP实体概述和管理
- 在VSCode中打开和编辑MCP服务器配置
- MCP实体的增强UI卡
入门指南
1.安装前端插件
从Backstage应用程序目录：
yarn --cwd packages/app add @mexl/backstage-plugin-mcp-frontend
2.在实体页面上启用
编辑 packages/app/src/components/catalog/EntityPage.tsx:
import { MCPEntityPage } from '@mexl/backstage-plugin-mcp-frontend';
export const entityPage = (
<EntitySwitch>
<EntitySwitch.Case if={isKind('component')} children={componentPage} />
<EntitySwitch.Case if={isKind('api')} children={apiPage} />
{/* Add this line: */}
<EntitySwitch.Case if={isKind('MCP')} children={<MCPEntityPage />} />
<EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
</EntitySwitch>
);
3.重新启动Backstage
yarn start
MCP实体现在将显示增强的UI卡。
示例：完成设置
您可以浏览包含系统、用户、组和MCP实体的完整示例目录：
cp examples/complete-setup/catalog-info.yaml catalog-info/complete-example.yaml
此示例演示了具有Backstage、系统关系、UI增强和支持多种MCP传输类型的真实集成模式。
定制
对于高级布局，请导入单个卡片并在您自己的页面中使用它们：
import {
MCPOverviewCard,
MCPCapabilitiesCard,
MCPConfigurationCard,
MCPClientConfigCard,
} from '@mexl/backstage-plugin-mcp-frontend';
材质UI网格示例：
<Grid container spacing={3}>
<Grid item md={6}><MCPOverviewCard /></Grid>
<Grid item md={6}><MCPCapabilitiesCard /></Grid>
</Grid>
截图
Import new MCP entitiy interface
Showing MCP kind in catalog
Browse and manage your MCP entities backstage view
Comprehensive MCP entity overview with interactive components
添加MCP实体
要添加新的MCP实体，请执行以下操作：
- 选择或创建配置（参见示例）。
- 将其复制到您的目录中。
- 通过Backstage UI或目录配置导入。
贡献
我们欢迎捐款！请分叉仓库，创建分支，添加测试，确保所有测试通过，并提交拉取请求。
许可证
阿帕奇-2.0
