@mexl/backstage-plugin-mcp-frontend

🎨 Backstage MCP Frontend plugin for MCP (Model Context Protocol) entities in Backstage - enabling organizations to centrally manage, discover and share MCP servers across teams. Streamline MCP adoption, improve collaboration, and maintain governance through a unified interface for your organization's MCP infrastructure.

⚠️ Prerequisites: This plugin requires the backend plugin @mexl/backstage-plugin-catalog-backend-module-mcp to be installed first.

✨ Features

🚀 Quick Setup

Prerequisites

1. Install Backend Plugin First:

   yarn --cwd packages/backend add @mexl/backstage-plugin-catalog-backend-module-mcp

   See backend setup guide for complete instructions.

Step 1: Install Frontend Plugin

# Install the frontend plugin
yarn --cwd packages/app add @mexl/backstage-plugin-mcp-frontend

Step 2: Add to EntityPage

In packages/app/src/components/catalog/EntityPage.tsx:

// Add this import
import { MCPEntityPage } from '@mexl/backstage-plugin-mcp-frontend';

// Add to your existing entityPage switch (isKind should already be imported)
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>
);

Step 3: Restart Backstage

yarn start

MCP entities now display with enhanced UI cards

🎯 Usage

Complete Setup Example

🌟 New! Try our complete setup example that includes a full organizational catalog with systems, components, users, groups, and MCP entities working together:

# Import the complete example
cp examples/complete-setup/catalog-info.yaml catalog-info/complete-example.yaml

This demonstrates:

• Real-world integration patterns with existing Backstage entities
• System relationships showing how MCP servers fit into your architecture
• Enhanced UI features with rich descriptions and interactive components
• Multiple transport types (stdio, HTTP, SSE) and configurations

Adding Individual MCP Entities

To add specific MCP entities to your catalog:

1. Choose from our example configurations
2. Copy to your catalog directory
3. Import through Backstage UI or configuration

Using Individual Components

For custom entity pages, import components individually:

import {
  MCPOverviewCard,
  MCPCapabilitiesCard,
  MCPConfigurationCard,
  MCPClientConfigCard,
} from '@mexl/backstage-plugin-mcp-frontend';

// Use in your custom layouts
<Grid container spacing={3}>
  <Grid item md={6}>
    <MCPOverviewCard />
  </Grid>
  <Grid item md={6}>
    <MCPCapabilitiesCard />
  </Grid>
</Grid>

🤝 Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Add tests for new functionality
4. Ensure all tests pass
5. Submit a pull request

📄 License

Apache-2.0

🔗 Related Packages

• Backend: @mexl/backstage-plugin-catalog-backend-module-mcp
• Backstage: backstage.io
• MCP Protocol: modelcontextprotocol.io

Made with ❤️ for the Backstage community