Mcpstudio

🚀 MCPStudio: The Courier Platform for Model Context Protocol

MCPStudio is a powerful and user-friendly platform dedicated to creating, testing, managing, and discovering Model Context Protocol (MCP) servers. Similar to how Postman revolutionized API development and testing, MCPStudio simplifies the underlying technical complexity by interacting with MCP servers through an intuitive visual interface.

🚀 Quick Start

To quickly get started with MCPStudio, follow these steps:

1. Clone the repository:

   git clone https://github.com/lonexreb/mcpstudio.git
   cd mcpstudio
   

2. Set up the backend:

   cd backend/mcp_studio_backend
   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

3. Set up the frontend:

   cd frontend/ai-server-forge
   npm install
   

4. Start the development servers:
   • Backend:

     cd backend/mcp_studio_backend
     uvicorn mcp_studio.main:app --reload
     

   • Frontend:

     cd frontend/ai-server-forge
     npm run dev
     

5. Open your browser and visit http://localhost:3000

✨ Features

Server Management

• Create, list, update, and delete MCP servers.
• Support connecting and disconnecting from servers.

Tool Management

• List all available tools on a specific server.
• Execute operations of specified tools.

Authentication

• JWT-based authentication.
• Support Google OAuth login.

📦 Installation

1. Clone the repository:

   git clone https://github.com/lonexreb/mcpstudio.git
   cd mcpstudio
   

2. Set up the backend:

   cd backend/mcp_studio_backend
   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

3. Set up the frontend:

   cd frontend/ai-server-forge
   npm install
   

4. Start the development servers:
   • Backend:

     cd backend/mcp_studio_backend
     uvicorn mcp_studio.main:app --reload
     

   • Frontend:

     cd frontend/ai-server-forge
     npm run dev
     

5. Open your browser and visit http://localhost:3000

💻 Usage Examples

Initializing the Backend Environment

python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install uv
uv pip install -e .

Configuring the Project Structure

mcpstudio/
├── backend/
│   └── mcp_studio/
│       ├── config.py
│       └── main.py
└── frontend/
    └── ai-server-forge/
        └── package.json

Submitting Code (Git Workflow)

git checkout main
git pull origin main
git checkout feature/my-feature
# Development...
git add .
git commit -m "feat: Add a new feature"
git push origin feature/my-feature

📚 Documentation

What is the Model Context Protocol (MCP)?

The Model Context Protocol is a standard that enables AI systems (such as large language models) to seamlessly connect to external tools, services, or other systems. MCP defines the interface between an AI agent and its environment, allowing these agents to perform operations and obtain results.

Core Architecture

Backend

Frontend

API Endpoints

Server Management

• POST /api/servers - Create a new server
• GET /api/servers - List all servers
• GET /api/servers/{server_id} - Get server details
• PUT /api/servers/{server_id} - Update a server
• DELETE /api/servers/{server_id} - Delete a server
• POST /api/servers/{server_id}/connect - Connect to a server
• POST /api/servers/{server_id}/disconnect - Disconnect from a server

Tool Management

• GET /api/servers/{server_id}/tools - List tools on a server
• GET /api/tools/{tool_id} - Get tool details
• POST /api/servers/{server_id}/tools/{tool_id}/execute - Execute a tool operation

Authentication

• POST /api/auth/token - Get a JWT access token
• GET /api/auth/google/auth - Get the Google OAuth link
• GET /api/auth/google/callback - Handle the Google OAuth callback
• GET /api/auth/user - Get the current user information

Contribution Guidelines

1. When submitting code, follow the Git workflow:

   git checkout main
   git pull origin main
   git checkout feature/my-feature
   # Development...
   git add .
   git commit -m "feat: Add a new feature"
   git push origin feature/my-feature
   

2. Before submitting a Pull Request, ensure that your code passes all tests.

🔧 Technical Details

How it Works

1. The user creates an MCP server through the interface.
2. The platform sends a connection request to the server.
3. After a successful connection, the user can view and manage the tools on the server.
4. When executing a tool operation, the platform receives and displays the results.

Implementation Stages

Backend (Python)

1. Initialize the environment:

   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

2. The configuration file path:

   mcpstudio/
   ├── backend/
   │   └── mcp_studio/
   │       ├── config.py
   │       └── main.py
   └── frontend/
       └── ai-server-forge/
           └── package.json
   

📄 License

This project is licensed under the MIT License. Please refer to the LICENSE file for detailed information.

Contact

If you have any questions or suggestions, please contact:

• Email: contact@example.com
• GitHub: https://github.com/lonexreb/mcpstudio