backstage-plugin-frontend

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

Adding MCP Entities

To add new MCP entities:

1. Choose or author a configuration (see examples).
2. Copy it to your catalog directory.
3. 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