Vibeframe - MCP Integration for VS Code, Cursor, Windsurf

Vibeframe seamlessly integrates your MCP (Model Control Protocol) servers into VS Code, allowing for interaction between the MCP servers and a WebView directly within your development environment.

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, the MCP developer, needs to do is implement a /vibeframe endpoint from your server and runVibeframe: Open Vibeframe Panel and you're all set up!

Features

• SSE/WS Support: Two-way communication between your server and the Vibeframe Panel
• 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 Vibeframe Panel

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette
2. Type "Vibeframe: Open Vibeframe Panel" and select it
3. If multiple servers are found, select the one you want to use
4. The Vibeframe Panel 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:

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

Configuration Options

Settings

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 Vibeframe Panel: 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 Vibeframe Panel" command in the new window

License

GNU AFFERO GENERAL PUBLIC LICENSE Version 3, 19 November 2007 Copyright (C) 2025 Taggart Bowen-Gaddy This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses.