Backstage Plugin MCP Frontend

](https://www.npmjs.com/package/@mexl/backstage-plugin-mcp-frontend) 

MCP Frontend Plugin

A 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卡

Open and edit MCP server configurations directly in VSCode.

入门指南

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 = (
  
    
    
    {/* Add this line: */}
    } />
    {defaultEntityPage}
  
);

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网格示例：

截图

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实体，请执行以下操作：

1. 选择或创建配置（参见示例）。
2. 将其复制到您的目录中。
3. 通过Backstage UI或目录配置导入。

贡献

我们欢迎捐款！请分叉仓库，创建分支，添加测试，确保所有测试通过，并提交拉取请求。

许可证

阿帕奇-2.0

相关套餐

• 后端： @mexl/backstage-plugin-catalog-backend-module-mcp
• 后台： https://backstage.io
• 模型上下文协议： https://modelcontextprotocol.io