Vibeframe - MCP UI for VS Code

为您的MCP服务器创建丰富的视觉界面，这些界面可以无缝集成到VS Code、Cursor和Windsurf中。

这是为谁准备的？

适用于仅使用SSE的MCP服务器开发者，他们希望在基于VSCode的IDE内部拥有前端界面。只需包含从Marketplace下载Vibeframe VSCode扩展的说明，或者提供一个链接至https://vibeframe.dev，在那里可以下载最新版本（Cursor和Windsurf不支持Marketplace）。

您需要做的就是实现一个/vibeframe端点，并运行Vibeframe: Open MCP Canvas命令，一切就设置好了！

功能

• SSE/WS支持：服务器与Vibeframe画布之间的双向通信

• 服务器发现：自动查找来自以下位置的MCP服务器：

  • Cursor配置（全局和项目特定）
  • Windsurf配置
  • VS Code设置和工作区配置
  • VS Code中的手动设置

• 项目优先级：项目/工作区配置优先于全局配置

• 服务器验证：检查发现的服务器是否具有有效的/vibeframe端点

• 多服务器支持：通过简单的界面选择多个发现的服务器

• 安全集成：在WebView中加载MCP服务器的Web界面，并采用适当的安全策略

• 连接监控：自动检测连接问题并尝试重新连接

要求

• VS Code 1.60.0或更高版本 / Cursor / Windsurf
• 具有/vibeframe端点的正在运行的MCP服务器

安装

1. 从发布页面下载VSIX包
2. 在VS Code中安装它：
   • 在终端中运行code --install-extension vibeframe-0.1.0.vsix，或
   • 在VS Code中，选择“扩展”→点击“...”→“从VSIX安装...”→选择下载的文件
3. 在Cursor中安装它：
   • 将.vsix文件拖放到扩展面板中

使用

打开MCP画布

1. 按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板
2. 输入“Vibeframe: Open MCP Canvas”并选择它
3. 如果找到多个服务器，请选择您要使用的服务器
4. MCP界面将在VS Code面板中加载

服务器选择

当检测到多个MCP服务器时：

• 验证过的服务器（具有确认的/vibeframe端点）会首先显示，并带有✓图标
• 未验证的服务器会显示⚠️警告图标
• 从列表中选择一个服务器进行连接

管理服务器

自动发现

该扩展程序会自动从以下位置发现MCP服务器：

• Cursor：
  • 全局：~/.cursor/mcp.json
  • 项目特定：.cursor/mcp.json（在您的工作区中）
• Windsurf：~/.codeium/windsurf/mcp_config.json
• VS Code：
  • 工作区：.vscode/mcp.json（在您的工作区中）
  • 设置：VS Code设置UI/JSON

配置格式

Vibeframe支持多种配置格式：

Cursor和VS Code格式：

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

VS Code工作区格式：

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

Windsurf格式：

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

手动配置

在VS Code设置中添加自己的MCP服务器：

1. 前往设置（Ctrl+, 或 Cmd+,）
2. 搜索“Vibeframe”
3. 在“Vibeframe: Manual Server Urls”下，点击“在settings.json中编辑”
4. 添加您的服务器，格式如下：

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

配置选项

设置

设置	描述	默认值
vibeframe.autoDiscoverServers	自动从配置文件中发现MCP服务器	true
vibeframe.manualServerUrls	手动配置的MCP服务器列表	[]

故障排除

连接问题

如果您遇到连接问题：

1. 服务器验证失败 - 检查您的MCP服务器是否正在运行并且具有/vibeframe端点
2. 连接丢失 - 扩展程序将自动尝试重新连接，并采用指数退避策略
3. 无法连接到服务器 - 确保您的网络可以访问MCP服务器且没有防火墙阻止访问

常见错误

• 未找到MCP服务器：在设置中手动配置一个服务器
• 无法加载MCP画布：确保服务器URL正确且服务器正在运行
• 连接丢失：网络问题或服务器已关闭；扩展程序将尝试重新连接

MCP服务器配置

为了让MCP服务器与此扩展程序一起工作，它必须：

1. 具有一个提供Web界面的/vibeframe端点
2. 允许来自VS Code WebView的跨域请求

开发

从源代码构建

# 克隆仓库
git clone https://github.com/your-org/vibeframe.git
cd vibeframe

# 安装依赖
npm install

# 构建扩展
npm run compile

# 打包扩展
npm run package

运行和调试

1. 在VS Code中打开项目
2. 按F5启动一个新的VS Code窗口，其中加载了扩展程序
3. 在新窗口中运行“Vibeframe: Open MCP Canvas”命令

许可证

版权所有 Taggart Bowen-Gaddy

致谢

为与Cursor和Windsurf等MCP启用的人工智能编码助手无缝集成而创建。