Vibeframe - MCP UI for VS Code

Vibeframe - VS Code MCP UI

为你的 MCP 服务创建丰富的可视化界面，无缝集成到 VS Code、Cursor 和 Windsurf 中。

适用人群

想要在用户 VSCode 基础 IDE 中直接提供前端的 MCP 服务（仅限 SSE）开发者。只需向用户提供从 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 服务的网页界面，配备适当的安全策略

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

系统要求

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

安装

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 Canvas: 确保服务器 URL 正确且服务正在运行
• 连接丢失: 网络问题或服务宕机；扩展将尝试重新连接

MCP 服务配置

为了让 MCP 服务与此扩展配合工作，它必须：

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

开发

从源代码构建

# 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

运行和调试

1. 在 VS Code 中打开项目
2. 按 F5 启动加载了扩展的新 VS Code 窗口
3. 在新窗口中运行"Vibeframe: Open MCP Canvas"命令

许可证

Copyright Taggart Bowen-Gaddy

致谢

为与 Cursor 和 Windsurf 等启用 MCP 的 AI 编码 Agent 的无缝集成而创建。