backstage-plugin-frontend
Enhanced Backstage frontend plugin for MCP (Model Context Protocol) entity visualization with JSON/Text toggle, syntax highlighting, and VSCode integration
Installation
npx @mexl/backstage-plugin-mcp-frontendAsk AI about backstage-plugin-frontend
Powered by Claude · Grounded in docs
I know everything about backstage-plugin-frontend. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
|
|
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. |
Prerequisites
Important:
You must first install the backend plugin @mexl/backstage-plugin-catalog-backend-module-mcp. See its setup guide for full configuration steps.
Features
- Interactive MCP entity overview and management
- Open and edit MCP server configurations in VSCode
- Enhanced UI cards for MCP entities
Open and edit MCP server configurations directly in VSCode.
Getting Started
1. Install the Frontend Plugin
From your Backstage app directory:
yarn --cwd packages/app add @mexl/backstage-plugin-mcp-frontend
2. Enable on Entity Page
Edit 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. Restart Backstage
yarn start
MCP entities will now display with enhanced UI cards.
Example: Complete Setup
You can explore a full example catalog containing systems, users, groups, and MCP entities:
cp examples/complete-setup/catalog-info.yaml catalog-info/complete-example.yaml
This example demonstrates real-world integration patterns with Backstage, system relationships, UI enhancements, and support for multiple MCP transport types.
Customization
For advanced layouts, import individual cards and use them in your own pages:
import {
MCPOverviewCard,
MCPCapabilitiesCard,
MCPConfigurationCard,
MCPClientConfigCard,
} from '@mexl/backstage-plugin-mcp-frontend';
Example with Material-UI Grid:
<Grid container spacing={3}>
<Grid item md={6}><MCPOverviewCard /></Grid>
<Grid item md={6}><MCPCapabilitiesCard /></Grid>
</Grid>
Screenshots
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
Adding MCP Entities
To add new MCP entities:
- Choose or author a configuration (see examples).
- Copy it to your catalog directory.
- Import via the Backstage UI or your catalog config.
Contributing
We welcome contributions! Please fork the repo, create a branch, add tests, ensure all tests pass, and submit a pull request.
License
Apache-2.0
Related Packages
- Backend:
@mexl/backstage-plugin-catalog-backend-module-mcp - Backstage: https://backstage.io
- Model Context Protocol: https://modelcontextprotocol.io
