​

MCP Server Management

​

Overview

​

Adding a New MCP Server

​

Step 1: Basic Information

1. Click the “Add MCP Server” button or the “Add MCP Server” card in the grid.
2. In the modal that appears, enter the following information:
   • Server Name: Internal identifier for the server (e.g., “github”)
   • Display Name: User-friendly name shown in the UI (e.g., “GitHub”)
   • Description: Brief description of the server’s functionality

​

Step 2: Configuration Template

1. Paste the MCP server configuration JSON template in the dedicated field. This template defines how the server will be started and what environment variables it needs.

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "{{slack_token}}",
        "SLACK_TEAM_ID": "{{team_id}}"
      }
    }
  }
}

​

Step 3: UI Schema

1. Paste the UI schema JSON in the dedicated field. This schema defines how the configuration form will be rendered to users.

{
  "sections": [
    {
      "title": "Slack Bot Token",
      "type": "password",
      "field": "slack_token",
      "placeholder": "xoxb-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxxxxx",
      "required": true,
      "helpText": "Bot token from your Slack App settings"
    },
    {
      "title": "Team ID",
      "type": "text",
      "field": "team_id",
      "placeholder": "T0123ABCD",
      "required": true,
      "helpText": "Your Slack workspace ID"
    }
  ]
}

2. Click “Detect Variables & Continue” to proceed to the next step.

​

Step 4: Configure Variables

1. The system will automatically detect variables from your configuration template.
2. For each variable, select the appropriate type:
   • Plain Text: For non-sensitive data
   • Secret: For sensitive data (passwords, tokens, keys)
3. Optionally, add a description for each variable.
4. Click “Add Server” to create the MCP server.

​

Managing Server Configurations

​

Viewing Configurations

1. Click on a server card to open its configuration modal.
2. The “Configurations” tab shows all saved configurations for the selected server.

​

Creating a New Configuration

1. In the server configuration modal, click “Create New Configuration”.
2. Enter a name for the configuration (e.g., “Production”, “Development”).
3. Fill in the required fields in the dynamically generated form based on the UI schema.
4. Click “Save Configuration” to save.

​

Activating a Configuration

1. In the Configurations tab, find the configuration you want to activate.
2. Click the “Activate” button next to it.
3. The system will deactivate any currently active configuration and activate the selected one.

​

Editing a Configuration

1. In the Configurations tab, click the “Edit” button next to the configuration you want to modify.
2. Make your changes in the form.
3. Click “Update Configuration” to save.

​

Deleting a Configuration

1. In the Configurations tab, click the “Delete” button next to the configuration you want to remove.
2. Confirm the deletion in the prompt.

​

Server Settings

1. In the server configuration modal, go to the “Server Settings” tab.
2. Update the server details, configuration template, or UI schema as needed.
3. Click “Update Server” to save the changes.

​

Supported UI Components

​

Text Input

{
  "title": "API Key",
  "type": "text",
  "field": "api_key",
  "placeholder": "Enter your API key",
  "required": true
}

​

Password Input

{
  "title": "Secret Token",
  "type": "password",
  "field": "token",
  "required": true
}

​

Text Area

{
  "title": "Configuration JSON",
  "type": "textarea",
  "field": "config",
  "rows": 4,
  "required": true
}

​

Radio Buttons

{
  "title": "Token Type",
  "type": "radio",
  "field": "token_type",
  "options": [
    {"label": "Personal", "value": "personal"},
    {"label": "Organization", "value": "org"}
  ],
  "required": true
}

​

Status Message

{
  "title": "Connection Required",
  "type": "status",
  "status": "warning",
  "color": "#f0ad4e"
}

​

Instructions Block

{
  "title": "Setup Instructions",
  "type": "instructions",
  "content": "Follow these steps to set up your connection."
}

​

Numbered Steps

{
  "title": "Follow These Steps",
  "type": "steps",
  "steps": [
    "Go to the developer portal",
    "Create a new application",
    "Copy your API key"
  ]
}

​

Enabling/Disabling Servers

• Enable: Activates the first available configuration for the server
• Disable: Deactivates all configurations for the server

​

Example: Discord Server Setup

​

Configuration Template

{
  "mcpServers": {
    "discord": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/discord-server"],
      "env": {
        "DISCORD_BOT_TOKEN": "{{bot_token}}"
      }
    }
  }
}

​

UI Schema

{
  "sections": [
    {
      "title": "Discord connection needed",
      "type": "status",
      "status": "warning",
      "color": "#f0ad4e"
    },
    {
      "title": "Connect Your Discord Bots",
      "type": "instructions",
      "content": "Follow these steps to connect your Discord bots:"
    },
    {
      "title": "Setup Instructions",
      "type": "steps",
      "steps": [
        "Go to Discord Developer Portal",
        "Create a new application or select an existing one",
        "Go to the \"Bot\" tab and click \"Add Bot\" if you haven't already",
        "Under the \"Token\" section, click \"Copy\" to copy your bot token",
        "Enable necessary \"Privileged Gateway Intents\" for your bot",
        "Go to \"OAuth2\" tab to invite your bot to servers",
        "Enter your bot token below"
      ]
    },
    {
      "title": "Discord Bot Token",
      "type": "password",
      "field": "bot_token",
      "placeholder": "Your Discord bot token",
      "required": true,
      "helpText": "Your Discord Bot Token from the Discord Developer Portal"
    }
  ]
}

​

Best Practices

• Naming Conventions: Use clear, concise names for servers and configurations
• Secret Variables: Always mark sensitive information (tokens, passwords, keys) as “Secret”
• Helpful Descriptions: Provide descriptive help text in UI schemas to guide users
• Configuration Naming: Use meaningful names for configurations (e.g., environment names, project names)
• Regular Maintenance: Review and update server configurations periodically to ensure they remain current

​

Troubleshooting

​

Server Not Connecting

• Verify that the server is enabled (toggle switch is on)
• Check that the configuration has all required variables
• Ensure that token/credentials are valid and have not expired

​

Configuration Changes Not Taking Effect

• Make sure to save configuration changes before closing the modal
• Check that the configuration is activated (has “Active” status)
• Refresh the page to ensure latest changes are loaded

​

UI Schema Issues

• Validate your UI schema JSON syntax
• Ensure field names in the UI schema match variable names in the configuration template
• Check for any required fields that might be missing