What is Vibeframe

Vibeframe is a Visual Studio Code extension designed to create rich visual interfaces for MCP servers, enabling seamless integration within the VS Code environment.

Use cases

Use cases for Vibeframe include developing interactive user interfaces for MCP servers, enhancing user experience in coding environments, and facilitating real-time communication between servers and clients.

How to use

To use Vibeframe, developers need to implement a ‘/vibeframe’ endpoint on their MCP server. After that, they can open the MCP Canvas by running the command ‘Vibeframe: Open MCP Canvas’ in VS Code.

Key features

Key features of Vibeframe include SSE/WS support for two-way communication, automatic server discovery from various configurations, project-specific priority settings, server verification for valid endpoints, support for multiple servers, secure integration via WebView, and connection monitoring.

Where to use

Vibeframe is primarily used in development environments that utilize MCP servers, specifically within the Visual Studio Code IDE, as well as in Cursor and Windsurf applications.

Vibeframe - MCP UI for VS Code

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

Who is this for?

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!

Features

• 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

Requirements

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

Installation

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

Usage

Opening the MCP Canvas

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

Server Selection

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

Managing Servers

Automatic Discovery

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

Configuration Format

Vibeframe supports multiple configuration formats:

Cursor and VS Code format:

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

VS Code workspace format:

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

Windsurf format:

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

Manual Configuration

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:

Configuration Options

Settings

Setting	Description	Default
vibeframe.autoDiscoverServers	Automatically discover MCP servers from config files	true
vibeframe.manualServerUrls	List of manually configured MCP servers	[]

Troubleshooting

Connection Issues

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

Common Errors

• 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

MCP Server Configuration

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

Development

Building from Source

# 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

Running and Debugging

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

License

Copyright Taggart Bowen-Gaddy

Credits

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