About backstage-plugin-frontend
backstage-plugin-frontend is an MCP server published by git+automationpi in the Developer Tools category: enhanced Backstage frontend plugin for MCP (Model Context Protocol) entity visualization with JSON/Text toggle, syntax highlighting, and VSCode integration. It has been installed 0 times through Conduid.
Install
npx @mexl/backstage-plugin-mcp-frontendclaude mcp add backstage-plugin-mcp-frontend -- npx -y @mexl/backstage-plugin-mcp-frontendnpx -y @mexl/backstage-plugin-mcp-frontendThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
Ask AI about backstage-plugin-frontend
Powered by Claude · Grounded in docs
Security checks
- ·README presentNot checked yet.
- ·License declaredNot checked yet.
- ·Tests presentNot checked yet.
- ·Dependencies pinnedNot checked yet.
- ·No dynamic code executionNot checked yet.
- !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.
README
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
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
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
README mirrored from the source repository 2 months ago. The original is authoritative.