Create rich visual interfaces for your MCP servers that integrate seamlessly into VS Code, Cursor, and Windsurf.

MCP Server (SSE only) developers that want a frontend directly inside users' VSCode-based IDEs. Simply include instructions to download the Vibeframe VSCode Extension from the Marketplace or include a link to https://vibeframe.dev where they can download the latest relase (Cursor and Windsurf do not support the Marketplace).

All you need to do is implement a /vibeframe endpoint from your server and run Vibeframe: Open MCP Canvas and you're all set up!

• SSE/WS Support: Two-way communication between your server and the Vibeframe canvas

• Server Discovery: Automatically finds MCP servers from:

  • Cursor configuration (global and project-specific)
  • Windsurf configuration
  • VS Code settings and workspace configuration
  • Manual settings in VS Code

• Project-Specific Priority: Project/workspace configurations take precedence over global ones

• Server Verification: Checks that discovered servers have valid /vibeframe endpoints

• Multiple Server Support: Select from multiple discovered servers with a simple interface

• Secure Integration: Loads the MCP server's web interface in a WebView with proper security policies

• Connection Monitoring: Automatically detects connection issues and attempts to reconnect

• VS Code 1.60.0 or higher / Cursor / Windsurf
• A running MCP server with a /vibeframe endpoint

1. Download the VSIX package from the releases page
2. Install it in VS Code by:
   • Running code --install-extension vibeframe-0.1.0.vsix in your terminal, or
   • In VS Code, select "Extensions" → click "..." → "Install from VSIX..." → select the downloaded file
3. Install it in Cursor: by:
   • Drag the .vsix file to the Extensions Pane

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette
2. Type "Vibeframe: Open MCP Canvas" and select it
3. If multiple servers are found, select the one you want to use
4. The MCP interface will load in a VS Code panel

When multiple MCP servers are detected:

• Verified servers (with confirmed /vibeframe endpoints) appear first with a ✓ icon
• Unverified servers show a ⚠️ warning icon
• Select a server from the list to connect to it

The extension automatically discovers MCP servers from:

• Cursor:
  • Global: ~/.cursor/mcp.json
  • Project-specific: .cursor/mcp.json (in your workspace)
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• VS Code:
  • Workspace: .vscode/mcp.json (in your workspace)
  • Settings: VS Code settings UI/JSON

Vibeframe supports multiple configuration formats:

{
  "mcpServers": {
    "server1": "https://example-mcp-server.com",
    "server2": {
      "url": "https://another-mcp-server.com",
      "name": "My Custom Server Name",
      "type": "sse"
    }
  }
}

{
  "servers": {
    "server1": "https://example-mcp-server.com",
    "server2": {
      "url": "https://another-mcp-server.com",
      "name": "My Custom Server Name",
      "type": "sse"
    }
  }
}

{
  "url": "https://example-mcp-server.com",
  "name": "Optional Server Name"
}

Add your own MCP servers in VS Code settings:

1. Go to Settings (Ctrl+, or Cmd+,)
2. Search for "Vibeframe"
3. Under "Vibeframe: Manual Server Urls", click "Edit in settings.json"
4. Add your servers in the format:

"vibeframe.manualServerUrls": [
  {
    "name": "My MCP Server",
    "url": "https://my-mcp-server.example.com"
  }
]

If you encounter connection problems:

1. Server verification failed - Check that your MCP server is running and has a /vibeframe endpoint
2. Connection lost - The extension will automatically attempt to reconnect with exponential backoff
3. Cannot connect to server - Ensure your network can reach the MCP server and no firewall is blocking access

• No MCP servers found: Configure a server manually in the settings
• Failed to load MCP Canvas: Ensure the server URL is correct and the server is running
• Connection lost: Network issue or server went down; the extension will attempt to reconnect

For an MCP server to work with this extension, it must:

1. Have a /vibeframe endpoint that serves the web interface
2. Allow cross-origin requests from the VS Code WebView

# Clone the repository
git clone https://github.com/your-org/vibeframe.git
cd vibeframe

# Install dependencies
npm install

# Build the extension
npm run compile

# Package the extension
npm run package

1. Open the project in VS Code
2. Press F5 to launch a new VS Code window with the extension loaded
3. Run the "Vibeframe: Open MCP Canvas" command in the new window

Copyright Taggart Bowen-Gaddy

Created for seamless integration with MCP-enabled AI coding assistants like Cursor and Windsurf.