Secure scalable API portal with RBAC JWT React backend and documentation
The MCP Gateway is an essential component in the Model Context Protocol (MCP) ecosystem, designed to expose and manage internal tools (APIs) for secure, scalable, and auditable access. It leverages Role-Based Access Control (RBAC) and JWT authentication to ensure only authorized users can access specific functionalities. This gateway serves as a crucial bridge between AI applications like Claude Desktop, Continue, Cursor, and other MCP clients, enabling seamless integration with various data sources and tools.
The backend of the MCP Gateway is built using FastAPI, providing robust and efficient API management. It includes authentication mechanisms such as JWT (JSON Web Tokens) for secure user sessions and RBAC (Role-Based Access Control) to manage permissions at different levels. The server can persist data in a JSON format, making it easy to integrate with NoSQL databases if needed.
The frontend is developed using React (with Vite), creating an intuitive portal that allows users to interact with the tools exposed through the backend API. This integration ensures a seamless user experience and provides comprehensive management capabilities for groups, users, and tools.
The gateway supports multiple operational modes: development (with auto-reloading) and production (where the frontend is built separately). This dual-mode operation ensures flexibility in both testing and deployment environments.
The MCP Gateway is compatible with various AI clients, including:
The architecture of the MCP Gateway is modular, consisting of distinct components that handle different aspects of the system:
app/
: Houses the main FastAPI application along with configuration and authentication modules.data/
: Stores persistent data like RBAC configurations in JSON format.frontend/
: Contains the React frontend source code for the portal.requirements.txt
: Lists all necessary Python dependencies.The backend is responsible for handling API requests, managing user sessions, and integrating tools. The frontend provides a user-friendly interface for interacting with these APIs.
The frontend is built using Vite, which allows hot reloading during development. It serves as the primary interface through which users interact with the exposed tools.
To get MCP Gateway running on your local machine, follow these steps:
Backend (FastAPI) Installation:
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --reload
Frontend (React) Installation:
cd frontend
npm install
npm run dev
Access the portal by navigating to http://localhost:5173 for development purposes, or http://localhost:8000 for production.
cd frontend
npm run build
This will generate the frontend/dist
folder which can be served by the FastAPI server if desired.
An AI analyst uses Claude Desktop to conduct data analysis. They connect to a PostgreSQL database via an MCP Gateway endpoint that has been configured with permission levels for reading, writing, and executing queries. The analyst creates an interactive dashboard using the PostgreSQL tool, retrieving and visualizing data in real time.
A company uses Continue as its AI chatbot solution. They integrate this tool via an MCP Gateway endpoint that has access to customer support tickets stored in a NoSQL database. The chatbot can now pull these tickets, analyze them, and provide relevant responses to customer inquiries efficiently.
The MCP Gateway supports multiple clients, ensuring seamless interaction between different AI tools:
Here is a compatibility matrix showing the status of different MCP clients with the gateway:
MCP Client | Resources | Tools | Prompts | Status |
---|---|---|---|---|
Claude Desktop | ✅ | ✅ | ✅ | Full Support |
Continue | ✅ | ✅ | ✅ | Full Support |
Cursor | ❌ | ✅ | ❌ | Tools Only |
The server includes several key security features:
Configuration settings are stored in the config.py
file within the backend module. Example configuration code:
{
"mcpServers": {
"[server-name]": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-[name]"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}
To contribute to or develop this MCP server further:
pip
.docs/
directory.The MCP Gateway is part of a broader ecosystem of tools and resources aimed at enhancing AI application integration. The official documentation, including detailed guidelines and examples, can be found here:
Below is the flow diagram for the Model Context Protocol (MCP):
graph TD
A[AI Application] -->|MCP Client| B[MCP Server]
B --> C[Data Source/Tool]
style A fill:#e1f5fe
style C fill:#f3e5f5
{
"mcpServers": {
"[server-name]": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-[name]"],
"env": {
"API_KEY": "your-api-key"
}
}
}
}
This sample demonstrates how to configure an MCP client connection within the gateway.
By providing extensive documentation and configuration examples, this MCP Gateway serves as a robust foundation for building integrations between AI applications and data sources, ensuring seamless and secure access management.
Learn to connect to MCP servers over HTTP with Python SDK using SSE for efficient protocol communication
Next-generation MCP server enhances documentation analysis with AI-powered neural processing and multi-language support
Build a local personal knowledge base with Markdown files for seamless AI conversations and organized information.
Integrate AI with GitHub using MCP Server for profiles repos and issue creation
Python MCP client for testing servers avoid message limits and customize with API key
Explore MCP servers for weather data and DigitalOcean management with easy setup and API tools