MCP-Loader

MCP Loader

Overview

The MCP Loader is a powerful and user-friendly web application designed to help you manage and configure your Model Context Protocol (MCP) server setups. It provides a streamlined interface for defining, loading, and exporting MCP configurations, making it easier to integrate AI models with various external resources and tools.

Features

• Structured Configuration Creation: Easily create new MCP configurations by providing a name, optional inputs JSON (for API keys, etc.), and detailed server definitions (server key, type like stdio or http, command/URL, arguments, and environment variables).

• Load and View Configurations: Select any saved MCP configuration to load it into the active view, displaying its complete JSON structure for review.

• Configuration Management: Add new configurations, load existing ones, and delete outdated entries from your personal list.

• VS Code / Visual Studio Export: Export the currently loaded MCP configuration as a .mcp.json file, formatted correctly for direct use in Visual Studio and Visual Studio Code environments.

• Bulk Import/Export: Save your entire collection of MCP configurations as a single JSON array or import a list from a previously saved JSON, facilitating backup, sharing, and transfer of your setups.

How to Use

1. Create New MCP Configuration:

   • Click the "Create New MCP Configuration" button to expand the form.

   • Enter a Configuration Name (e.g., "GitHub Access MCP").

   • (Optional) Paste your inputs JSON array into the "Inputs JSON" textarea. This is where you define prompts for credentials like API keys.

   • Provide Server Details:

     • Server Key (Name): The unique name for this specific server (e.g., "github").

     • Server Type: Select stdio (for command-line based servers) or http (for web-based servers).

     • Command/URL:

       • If stdio, enter the command (e.g., docker or npx) and comma-separated arguments (e.g., run, -i, --rm, mcp/github).

       • If http, enter the full URL of the server.

     • (Optional) Paste your Environment Variables JSON object for server-specific environment variables.

   • Click "Add Configuration" to save it to your list.

2. Load an MCP Configuration:

   • In the "Your Stored MCP Configurations" section, find the configuration you want to use.

   • Click the "Load" button next to it. The "Currently Loaded MCP Configuration" section will update to show its details.

3. Delete an MCP Configuration:

   • In "Your Stored MCP Configurations," click the "Delete" button next to the configuration you wish to remove.

   • Confirm your action in the modal.

4. Export to .mcp.json:

   • Ensure an MCP configuration is currently loaded.

   • Go to the "Export to .mcp.json" section.

   • Click "Download .mcp.json". A file named after your configuration (e.g., github_access_mcp.mcp.json) will be downloaded, ready for use in VS Code.

5. Import/Export All Configurations (JSON):

   • The "Import/Export Your MCP Configurations (JSON)" section displays the JSON representation of all your currently stored configurations.

   • To export, simply copy the content from the textarea.

   • To import, paste a valid JSON array of MCP configurations into the textarea and click "Load Configurations from JSON". This will replace your current list with the imported data.

Installation

To run this application locally, you'll need Node.js and npm installed on your machine.

1. Clone the Repository (or set up manually): If you've already pushed your project to GitHub (as per previous instructions), clone it:

   git clone https://github.com/YOUR_USERNAME/mcp-loader.git
   cd mcp-loader
   

   If you're setting up manually from the code provided:

   • Create a directory named mcp-loader.

   • Inside mcp-loader, create package.json, public/index.html, src/index.js, src/index.css, and src/App.js with the content provided in our previous conversation.

2. Install Dependencies: Navigate to your project's root directory (mcp-loader) in your terminal and install the necessary Node.js packages:

   npm install
   

3. Start the Development Server: Once dependencies are installed, you can start the application:

   npm start
   

   This will open the MCP Loader in your default web browser (usually at http://localhost:3000).

Project Structure

mcp-loader/
├── public/
│   └── index.html         # Main HTML file
├── src/
│   ├── App.js             # The main React application component
│   ├── index.js           # React entry point
│   └── index.css          # Tailwind CSS directives
├── .gitignore             # Specifies intentionally untracked files to ignore
├── package.json           # Project metadata and dependencies
└── README.md              # This file

Contributing

Feel free to fork this repository, open issues, or submit pull requests if you have suggestions or improvements!

License

This project is open-source and available under the MIT License.