Content
# 🚀 MCP Server Manager
> 🔧 A powerful Model Context Protocol (MCP) service management platform
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://nodejs.org/)
[](https://expressjs.com/)
## 📖 Project Overview
MCP Server Manager is a modern web application designed for managing multiple MCP (Model Context Protocol) servers. It provides an intuitive user interface to create, configure, and monitor MCP servers, as well as manage related tools, prompts, and access tokens.
### 🎯 Core Features
- 🖥️ **Server Management** - Create, start, stop, and monitor MCP servers
- 🔧 **Tool Management** - Dynamically create and deploy JavaScript functions as MCP tools
- 📝 **Prompt Management** - Manage parameterized prompt templates
- 🔑 **Token Management** - Generate and manage access tokens for each server
- 📡 **Real-time Monitoring** - View server status in real-time via SSE (Server-Sent Events)
- 💾 **Data Persistence** - Reliable data storage based on SQLite
- 📋 **Configuration Copying** - One-click copy MCP server configuration to clipboard
## 🎮 Usage Guide
### 📊 Server Management
1. **Create Server**
- Click the "Create Server" button
- Fill in the server name, description, and port
- Select the tools and prompts to associate
2. **Start Server**
- Click the "Start" button in the server list
- View real-time changes in server status
3. **Monitor Server**
- Check the server's operational status
- Monitor connection counts and request statistics
### 🔧 Tool Management
1. **Create Tool**
- Write JavaScript function code
- Define the tool's JSON Schema
- Test tool functionality
2. **Deploy Tool**
- Associate the tool with the specified server
- Automatically register with the MCP server instance
### 📝 Prompt Management
1. **Create Prompt**
- Write prompt templates
- Define parameter lists
- Preview prompt effects
2. **Use Prompt**
- Associate the prompt with the server
- Access via the MCP protocol
### 🔑 Token Management
1. **Generate Token**
- Generate access tokens for the specified server
- Set token name and description
2. **Manage Tokens**
- View all tokens
- Revoke unnecessary tokens
### 📋 Configuration Copying
1. **Copy Configuration**
- Find the server whose configuration you want to copy in the server list
- Click the orange "Copy Configuration" button 📋
- Choose what to copy:
- **Confirm** = Copy complete configuration description (including proxy scripts and usage guide)
- **Cancel** = Only copy Claude Desktop configuration JSON
2. **Use Configuration**
- Paste the configuration into the Claude Desktop configuration file
- Ensure the MCP server is running
- Restart the Claude Desktop application
- The tools and prompts provided by the server will be available in the conversation
## 📁 Project Structure
```
mcp-server-manage/
├── 📦 packages/
│ ├── 🔧 backend/ # Node.js backend
│ │ ├── 📁 src/
│ │ │ ├── 📊 models/ # Data models
│ │ │ ├── 🔧 services/ # Business services
│ │ │ ├── 🚀 mcp/ # MCP server management
│ │ │ ├── 🛣️ routes/ # API routes
│ │ │ ├── 🛡️ middleware/ # Middleware
│ │ │ └── 🏠 index.ts # Application entry
│ │ └── 📦 package.json
│ └── 🎨 frontend/ # React frontend
│ ├── 📁 src/
│ │ ├── 🧩 components/ # UI components
│ │ ├── 📄 pages/ # Page components
│ │ ├── 🔗 services/ # API services
│ │ ├── 📘 types/ # Type definitions
│ │ └── 🏠 main.tsx # Application entry
│ └── 📦 package.json
├── 📦 package.json # Root configuration
├── 🚫 .gitignore # Git ignore rules
└── 📖 README.md # Project documentation
```
## 🔗 API Endpoints
### 📊 Server API
| Method | Path | Description |
|--------|------|-------------|
| `GET` | `/api/servers` | 📋 Get all servers |
| `POST` | `/api/servers` | ➕ Create new server |
| `GET` | `/api/servers/:id` | 📄 Get specified server |
| `PUT` | `/api/servers/:id` | ✏️ Update server |
| `DELETE` | `/api/servers/:id` | ❌ Delete server |
| `POST` | `/api/servers/:id/start` | ▶️ Start server |
| `POST` | `/api/servers/:id/stop` | ⏹️ Stop server |
| `GET` | `/api/servers/:id/status` | 📈 Get server status |
| `GET` | `/api/servers/:id/mcp-config` | 🆕 Get server MCP configuration |
### 🔧 Tool API
| Method | Path | Description |
|--------|------|-------------|
| `GET` | `/api/tools` | 📋 Get all tools |
| `POST` | `/api/tools` | ➕ Create new tool |
| `GET` | `/api/tools/:id` | 📄 Get specified tool |
| `PUT` | `/api/tools/:id` | ✏️ Update tool |
| `DELETE` | `/api/tools/:id` | ❌ Delete tool |
### 📝 Prompt API
| Method | Path | Description |
|--------|------|-------------|
| `GET` | `/api/prompts` | 📋 Get all prompts |
| `POST` | `/api/prompts` | ➕ Create new prompt |
| `GET` | `/api/prompts/:id` | 📄 Get specified prompt |
| `PUT` | `/api/prompts/:id` | ✏️ Update prompt |
| `DELETE` | `/api/prompts/:id` | ❌ Delete prompt |
### 🔑 Token API
| Method | Path | Description |
|--------|------|-------------|
| `GET` | `/api/tokens` | 📋 Get all tokens |
| `POST` | `/api/tokens` | ➕ Create new token |
| `DELETE` | `/api/tokens/:id` | ❌ Delete token |
## 🛠️ Development Guide
### 🔧 Setting Up Development Environment
1. **Install Dependencies**
```bash
npm run install:all
```
2. **Start Development Mode**
```bash
npm run dev
```
3. **Run Tests**
```bash
npm run test
```
4. **Code Linting**
```bash
npm run lint
```
### 📦 Build Production Version
```bash
# Build backend
cd packages/backend
npm run build
# Build frontend
cd packages/frontend
npm run build
```
### 🐛 Debugging Tips
- 🔍 Use browser developer tools to debug the frontend
- 📊 Check backend logs: `packages/backend/logs/`
- 🗃️ Database file location: `packages/backend/database.db`
## 🤝 Contribution Guidelines
We welcome all forms of contributions! 🎉
1. **🍴 Fork the project**
2. **🌿 Create a feature branch** (`git checkout -b feature/AmazingFeature`)
3. **💾 Commit your changes** (`git commit -m 'Add some AmazingFeature'`)
4. **📤 Push the branch** (`git push origin feature/AmazingFeature`)
5. **🔄 Create a Pull Request**
### 📋 Development Standards
- 📘 Write code in TypeScript
- 🧪 Write tests for new features
- 📝 Keep code comments clear
- 🎨 Follow existing code style
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- 🔗 [Model Context Protocol](https://modelcontextprotocol.io/) - Official protocol specification
- ⚛️ [React](https://reactjs.org/) - UI library
- 🎨 [Ant Design](https://ant.design/) - UI component library
- 🟢 [Node.js](https://nodejs.org/) - JavaScript runtime
## 📞 Contact Us
- 📧 **Email**: [your-email@example.com]
- 🐛 **Issue Feedback**: [GitHub Issues](https://github.com/your-username/mcp-server-manage/issues)
- 💬 **Discussion**: [GitHub Discussions](https://github.com/your-username/mcp-server-manage/discussions)
---
⭐ If this project helps you, please give us a Star!
## New Feature: MCP Configuration Copying
Now you can easily copy the configuration of the MCP server for use with Claude Desktop or other MCP clients:
### ✨ Important Features
Our MCP server supports the **SSE (Server-Sent Events)** transport protocol, which is **natively supported** by Claude Desktop without the need for additional proxy scripts or tools.
### How to Use
1. In the server list, find the server whose configuration you want to copy
2. Click the orange "Copy Configuration" button 📋
3. Choose what to copy based on the server status:
- **With authentication token**: Choose the configuration with authentication (recommended) or basic configuration
- **Without authentication token**: Choose complete description or only JSON configuration
### Configuration Format
#### 1. Basic SSE Configuration
```json
{
"mcpServers": {
"your-server": {
"url": "http://localhost:3001/sse"
}
}
}
```
#### 2. Configuration with Authentication (Recommended)
```json
{
"mcpServers": {
"your-server": {
"url": "http://localhost:3001/sse",
"headers": {
"Authorization": "Bearer your-token-here"
}
}
}
}
```
### 🔧 How It Works
- **Direct Connection**: Claude Desktop connects directly to the server's SSE endpoint
- **Real-time Communication**: Real-time bidirectional communication via SSE protocol
- **Standard Protocol**: Fully compliant with MCP (Model Context Protocol) standards
- **No Proxy Needed**: No intermediate scripts or tools required
### Claude Desktop Integration Steps
1. After copying the configuration, open the Claude Desktop configuration file:
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
2. Paste the copied configuration into the file
3. Ensure the server is running (start it in our management interface)
4. Restart the Claude Desktop application
5. The 🔨 icon should appear in the lower left corner of the chat interface, indicating that tools are available
### 🔍 Troubleshooting
#### Connection Issues
- Check server status: Ensure it shows as "Running" in the management interface
- Test SSE endpoint: `curl http://localhost:port/sse`
- Check health: `curl http://localhost:port/health`
#### Claude Desktop Logs
- **macOS**: `~/Library/Logs/Claude/mcp*.log`
- **Windows**: `%APPDATA%\Claude\logs\mcp*.log`
#### Common Solutions
1. Ensure the JSON configuration format is correct (use an online JSON validator)
2. Wait a moment after restarting Claude Desktop for the connection to establish
3. Check if the firewall is blocking local port access
4. Confirm that the server port matches the port in the configuration
### 🚀 Advantages
- **🔌 Plug and Play**: No additional dependencies required
- **🔒 Secure Authentication**: Supports Bearer Token authentication
- **⚡ High Performance**: Direct SSE connection with low latency
- **📱 Cross-Platform**: Supports all platforms that Claude Desktop supports
- **🛠️ Easy Maintenance**: Standard protocol for easy debugging and monitoring
