MCP Manager Bridge

VS Code extension that provides a bridge to the MCP Manager desktop application, allowing you to view and control MCP servers directly from VS Code.

What is MCP Manager?
About This Extension
Features
Requirements
Installation
Usage
Configuration
Commands
How It Works
Troubleshooting
Development
License

What is MCP Manager?

MCP Manager is a standalone desktop application for managing MCP (Model Context Protocol) servers. It provides:

Centralized Process Management: Single application manages all MCP server processes
Workspace Isolation: Configure servers per project/workspace
Secure Secrets: OS keychain storage for API keys and tokens
MCP Gateway: Proxy requests to servers with workspace context
Real-time Updates: WebSocket events for status changes
Dynamic Tools: Create custom tools, prompts, and resources with JavaScript
AI Assistant: Built-in AI proxy for MCP servers (OpenAI-compatible)
Permissions System: Granular control over environment variables, secrets, and AI access
Cross-platform: Windows, macOS, and Linux support

Website: tscodex.com

GitHub Repository: https://github.com/unbywyd/tscodex-mcp-manager-app

📖 For complete MCP Manager documentation including server configuration, permissions, AI Assistant setup, and Dynamic Tools, see the MCP Manager README.

About This Extension

This VS Code extension acts as a bridge between your IDE and the MCP Manager application. It connects to the MCP Manager's HTTP API to provide server management capabilities directly in VS Code's sidebar.

Architecture

┌─────────────────────────────────────────┐
│         VS Code / Cursor                │
│  ┌───────────────────────────────────┐  │
│  │    MCP Manager Bridge Extension   │  │
│  │  - Server tree view               │  │
│  │  - Enable/disable servers         │  │
│  │  - Real-time status updates       │  │
│  │  - Cursor mcp.json sync           │  │
│  └───────────────────────────────────┘  │
│                   │                     │
│              HTTP API + WebSocket       │
│                   │                     │
└───────────────────┼─────────────────────┘
                    │
┌───────────────────┼─────────────────────┐
│         MCP Manager App                 │
│  ┌───────────────────────────────────┐  │
│  │    Electron Desktop App           │  │
│  │  - Process management             │  │
│  │  - Workspace configuration        │  │
│  │  - Secrets storage (OS keychain)  │  │
│  │  - MCP Gateway proxy              │  │
│  │  - AI Assistant proxy             │  │
│  │  - Dynamic Tools server           │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Features

Server Management

View All Servers: See all configured MCP servers in the sidebar tree view
Server Status: Real-time status indicators (running, stopped, error)
Enable/Disable: Toggle servers for the current workspace with one click
Restart Servers: Restart running servers without leaving the IDE

Workspace Integration

Automatic Detection: Extension detects current workspace folder
Per-Workspace Config: Each workspace can have different server configurations
Session Management: Registers IDE session with MCP Manager for context

Cursor Integration

Auto-sync mcp.json: Automatically update Cursor's MCP configuration
One-click Sync: Manual sync button to update mcp.json with enabled servers
MCP Tools Toggle: Enable/disable MCP Tools server for dynamic tools

Real-time Updates

WebSocket Connection: Live updates when server status changes
Statistics Display: View tool/resource counts for MCP Tools server
Connection Status: Visual indicator of connection to MCP Manager

Requirements

Requirement	Version
MCP Manager desktop app	Latest from Releases
VS Code or Cursor	1.74.0+
Node.js (for development)	18+

Installation

Step 1: Install MCP Manager Application

Windows & Linux:

Download from GitHub Releases
Run the installer
Launch MCP Manager

macOS:

Signed version coming soon

For now, build from source:

git clone https://github.com/unbywyd/tscodex-mcp-manager-app
cd tscodex-mcp-manager-app
npm install
npm run dev    # Development mode
# OR
npm run dist   # Build for distribution

Step 2: Install VS Code Extension

From Marketplace:

Open VS Code/Cursor
Go to Extensions (Ctrl+Shift+X)
Search for "MCP Manager Bridge"
Click Install

From VSIX file:

code --install-extension mcp-manager-bridge-0.1.0.vsix

Usage

Getting Started

Start MCP Manager desktop application
Open VS Code/Cursor with your project
Find the MCP Manager icon in the Activity Bar (left sidebar)
Click Connect (or wait for auto-connect if enabled)
View your servers in the tree view

Server Controls

Action	How To
Enable Server	Click ▶ (play icon) on a server
Disable Server	Click ■ (stop icon) on a running server
Restart Server	Right-click → "Restart Server"
View in MCP Manager	Right-click → "Open in MCP Manager"
Refresh List	Click 🔄 in the panel header

Cursor Integration

The extension automatically syncs enabled servers to Cursor's mcp.json:

~/.cursor/mcp.json  (macOS/Linux)
%APPDATA%\Cursor\mcp.json  (Windows)

Manual Sync:

Enable/disable servers as needed
Click the Sync button in the panel header
Cursor will use the updated configuration

MCP Tools Server

MCP Manager includes a built-in MCP Tools server for dynamic tools. In the extension:

Status: Shows enabled/disabled state with statistics
Toggle: Click to enable/disable in Cursor
Stats: View count of tools, prompts, and resources

Configuration

Access settings via: File → Preferences → Settings → Extensions → MCP Bridge

Setting	Default	Description
`mcpBridge.port`	`4040`	MCP Manager API port
`mcpBridge.autoConnect`	`true`	Connect automatically on startup
`mcpBridge.reconnectInterval`	`5000`	Time between reconnection attempts (ms)
`mcpBridge.heartbeatInterval`	`30000`	Keepalive ping interval (ms)

Changing the Port

If MCP Manager runs on a different port:

Via Command Palette: Ctrl+Shift+P → "MCP Bridge: Configure Port"
Via Settings: Change mcpBridge.port value
Reconnect if already connected

Commands

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type:

Command	Description
`MCP Bridge: Connect`	Connect to MCP Manager
`MCP Bridge: Disconnect`	Disconnect from MCP Manager
`MCP Bridge: Configure Port`	Set API port number
`MCP Bridge: Refresh`	Refresh server list
`MCP Bridge: Sync with MCP Manager`	Update Cursor's mcp.json

How It Works

1. Connection
   Extension ──HTTP GET──▶ MCP Manager /api/health
                          (verify running)

2. Session Registration
   Extension ──HTTP POST──▶ /api/sessions/connect
                           {clientId, clientType: "vscode", workspaceId}
                          ◀── {sessionId}

3. Server Discovery
   Extension ──HTTP GET──▶ /api/servers
                          ◀── [{id, name, status, ...}]

4. Real-time Updates
   Extension ◀──WebSocket──▶ /events
                            (server:started, server:stopped, etc.)

5. Cursor Sync
   Extension ──writes──▶ ~/.cursor/mcp.json
                        {mcpServers: {...}}

Session Context

When you enable a server, the extension sends workspace context to MCP Manager:

Workspace ID: Unique identifier for the project
Project Root: Folder path for MCP_PROJECT_ROOT
Client Type: "vscode" or "cursor"

This allows MCP servers to access project-specific information.

Troubleshooting

Extension Shows "Disconnected"

Check MCP Manager is running: Look for the system tray icon
Verify port: Default is 4040, check MCP Manager settings
Firewall: Ensure localhost:4040 is accessible
Restart: Try disconnecting and reconnecting

Servers Not Showing

Refresh: Click the refresh button
Check MCP Manager: Verify servers are added in the desktop app
Workspace: Make sure you have a folder open in VS Code

Cursor mcp.json Not Updating

Manual sync: Use "MCP Bridge: Sync with MCP Manager" command
Check permissions: Ensure write access to Cursor config folder
Restart Cursor: After sync, restart Cursor to load new config

Connection Keeps Dropping

Increase heartbeat: Set higher mcpBridge.heartbeatInterval
Check network: Ensure stable localhost connection
MCP Manager logs: Check for errors in the desktop app

Development

Prerequisites

Node.js 18+
VS Code Extension development environment
MCP Manager running locally

Setup

# Clone repository
git clone https://github.com/unbywyd/tscodex-msp-manager-bridge
cd tscodex-msp-manager-bridge

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode (for development)
npm run watch

Testing

Open project in VS Code
Press F5 to launch Extension Development Host
Test with MCP Manager running

Packaging

# Create VSIX package
npm run package

# Output: mcp-manager-bridge-x.x.x.vsix

MCP Manager - Desktop application for MCP server management
@tscodex/mcp-sdk - SDK for building MCP servers
@tscodex/mcp-images - Image processing MCP server

License

This project is licensed under the CC BY-NC 4.0 license.

Free to use for non-commercial purposes
Attribution required
Commercial use requires a separate license

For commercial licensing inquiries, please contact the author.

Author

Artyom Gorlovetskiy (@unbywyd)

Website: tscodex.com

MCP Manager Bridge

unbywyd

MCP Manager Bridge

Table of Contents

What is MCP Manager?

About This Extension

Architecture

Features

Server Management

Workspace Integration

Cursor Integration

Real-time Updates

Requirements

Installation

Step 1: Install MCP Manager Application

Step 2: Install VS Code Extension

Usage

Getting Started

Server Controls

Cursor Integration

MCP Tools Server

Configuration

Changing the Port

Commands

How It Works

Session Context

Troubleshooting

Extension Shows "Disconnected"

Servers Not Showing

Cursor mcp.json Not Updating

Connection Keeps Dropping

Development

Prerequisites

Setup

Testing

Packaging

Related Projects

License

Author