Vibeframe - MCP UI for VS Code

What is Vibeframe - MCP UI for VS Code?

Vibeframe - MCP UI for VS Code is a Visual Studio Code extension that lets MCP server developers create rich web interfaces for their SSE-based MCP servers. The interface loads inside a VS Code panel and also works in Cursor and Windsurf. It is intended for developers who build MCP servers that expose a /vibeframe endpoint.

How to use Vibeframe - MCP UI for VS Code?

1. Download the VSIX package from the releases page or install from the VS Code Marketplace.
2. In VS Code, install via code --install-extension or the Extensions pane. For Cursor, drag the .vsix file onto the Extensions pane.
3. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS), type Vibeframe: Open MCP Canvas, and select it.
4. If multiple servers are discovered, pick one from the list. The web interface loads in a VS Code panel.

Key features of Vibeframe - MCP UI for VS Code

• SSE/WebSocket two‑way communication between server and canvas
• Automatic server discovery from Cursor, Windsurf, and VS Code configs
• Verified servers shown with a checkmark; unverified ones with a warning
• Manual server configuration via VS Code settings
• Secure WebView with proper content‑security policies
• Automatic reconnection with exponential backoff

Use cases of Vibeframe - MCP UI for VS Code

• Building in‑IDE dashboards or controls for MCP‑powered tools
• Testing and debugging MCP endpoints without leaving the editor
• Providing a visual frontend for AI coding assistants that use MCP servers

FAQ from Vibeframe - MCP UI for VS Code

Which editors does Vibeframe support?

It supports VS Code (version 1.60.0+), Cursor, and Windsurf. The extension is installed from the Marketplace for VS Code; Cursor and Windsurf require manual VSIX installation.

Do I need a running MCP server to use Vibeframe?

Yes. Your MCP server must be running and expose a /vibeframe endpoint that serves the web interface. The extension only works with SSE (Server‑Sent Events) transport, not stdio.

How does Vibeframe discover my MCP server?

It automatically scans Cursor’s global and project‑specific mcp.json, Windsurf’s mcp_config.json, and VS Code workspace/settings configurations. You can also add servers manually in VS Code settings under vibeframe.manualServerUrls.

What happens if the connection to the server is lost?

The extension automatically tries to reconnect with exponential backoff. If reconnection fails, you will see a “Connection lost” error and can manually reopen the canvas.

Is Vibeframe open‑source?

The repository is available on GitHub, and the extension is distributed as a VSIX package. The license is listed as “Copyright Taggart Bowen‑Gaddy.” No explicit open‑source license is stated.