MMCPMarkets
TV

taggartbg/vibeframe

开发工具

本页由 AI 翻译，技术细节请以原文为准。 查看原文

11 stars 5 forks 质量 56 趋势 18NOASSERTION
Repository Install

VSCode Extension to enable UIs for MCP Servers (SSE)

概览

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!

README

以下为原文 README 节选，完整内容请查看原文。

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:

在 GitHub 查看完整 README

安装

This server does not publish a one-line install command.

Open the repository installation guide 新手？先看 mcpskill.org 教程 →

配置

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