Overview

MCP Server Web UI for Claude App is a lightweight management interface that helps developers configure, run, and monitor Model Context Protocol (MCP) server instances used by the Claude application. Instead of editing JSON files or launching servers from the command line, this tool exposes a compact web UI and REST API to create, edit, start/stop, and inspect MCP server processes and their runtime state.

The UI is useful for local development, testing multiple model/context configurations, and operational troubleshooting. It centralizes logs, metrics, and configuration export/import so teams can quickly iterate on MCP setups and validate how the Claude app connects to and uses MCP endpoints.

Features

Web-based UI to create, modify, and delete MCP server instances
Start, stop, and restart individual MCP servers from the browser
Live logs and basic runtime metrics per server
Import/export of server configurations (JSON)
REST API for automation and scripting
Docker Compose and source-based installation options
Basic authentication and configuration via environment variables
Lightweight; intended for local/dev and small-scale testing

Installation / Configuration

Below are common installation methods. Adjust ports and environment variables to fit your environment.

Clone the repository:

git clone https://github.com/zueai/mcp-manager.git
cd mcp-manager

Run with Docker Compose (recommended for quick start):

docker-compose up -d
# visit http://localhost:3000

Run from source (Node.js required):

cd mcp-manager
npm install
# development mode
npm run dev
# production build + start
npm run build
npm start

Environment variables (example .env):

# Server port for the web UI
PORT=3000

# Base URL used when generating links, optional
EXTERNAL_BASE_URL=http://localhost:3000

# Simple API auth token (optional)
API_TOKEN=your_token_here

# Default MCP server backend to use for new instances (example)
DEFAULT_MCP_BACKEND=http://localhost:8080

Docker Compose snippet example:

version: "3.8"
services:
  mcp-manager:
    image: zueai/mcp-manager:latest
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - API_TOKEN=changeme
    volumes:
      - ./data:/app/data

Configuration file example (server definition JSON):

{
  "id": "local-mcp-1",
  "name": "Local MCP",
  "listen_addr": "127.0.0.1:6100",
  "upstream_url": "http://127.0.0.1:8080",
  "max_context_size": 32768,
  "enabled": true,
  "auth_token": "optional-token"
}

Available Resources

The application exposes a small set of resources useful to developers:

Web UI: interactive dashboard for server lifecycle and logs
REST API: CRUD operations for server definitions, start/stop actions, and log retrieval
Data directory: persisted server definitions and exported configs (configurable)
Export/Import: JSON export of server lists for sharing or CI
Logs & metrics: per-server logs visible in the UI and downloadable

Example REST endpoints (typical):

Action	Endpoint
List servers	GET /api/servers
Create server	POST /api/servers
Get server	GET /api/servers/:id
Update server	PUT /api/servers/:id
Delete server	DELETE /api/servers/:id
Start server	POST /api/servers/:id/start
Stop server	POST /api/servers/:id/stop
Fetch logs	GET /api/servers/:id/logs

Note: Exact endpoints may vary by release — consult the repository for up-to-date API docs.

Use Cases

Local development and debugging
- Spin up an MCP instance that proxies to a local model backend. Use the UI to tweak context sizes and observe log output while exercising the Claude app against that endpoint.
Testing multiple configurations
- Create multiple server entries with different upstreams or context limits (for example, to compare behavior between 16k and 64k context sizes), then switch Claude to point at one of the local MCP endpoints.
CI / integration testing
- Use the REST API to create and start ephemeral MCP servers as part of integration tests. Export configuration to reproduce test environments.
Troubleshooting connectivity and auth
- When Claude cannot connect to a model, add a managed MCP server that terminates TLS, injects an authorization token, or logs raw requests to help trace where failures occur.
Educational demos
- Demonstrate how context sizes, message routing, or upstream failover affect responses by adjusting settings in the UI and observing runtime metrics.

Security & Best Practices

For local development, bind the web UI to localhost or restrict access via a firewall.
Set API_TOKEN or enable authentication when exposing the UI to untrusted networks.
Use TLS or a reverse proxy (nginx/traefik) for production exposure.
Persist config and logs to a mounted volume if you want state across container restarts.

Where to find the project

Repository and source code: https://github.com/zueai/mcp-manager

Refer to the repo for the latest instructions, issues, and release notes.