Vibeframe - MCP UI for VS Code - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

Vibeframe 是一个为 MCP 服务器设计的 VS Code 扩展，用于在 VS Code、Cursor 和 Windsurf 等 IDE 中创建丰富的可视化界面。

核心功能

• SSE/WS 支持：支持服务器与 Vibeframe 画布之间的双向通信。
• 服务器发现：自动从 Cursor、Windsurf 和 VS Code 的配置中发现 MCP 服务器。
• 项目特定优先级：项目/工作区配置优先于全局配置。
• 服务器验证：验证发现的服务器是否具有有效的 /vibeframe 端点。
• 多服务器支持：可以从多个发现的服务器中选择。
• 安全集成：在 WebView 中加载 MCP 服务器的 Web 界面，并应用适当的安全策略。
• 连接监控：自动检测连接问题并尝试重新连接。

适用场景

• 需要在 VS Code、Cursor 或 Windsurf 中集成 MCP 服务器前端的开发者。
• 需要为 MCP 服务器提供可视化界面的场景。

工具列表

• Vibeframe VS Code 扩展：提供 MCP 画布界面，支持服务器发现和连接。

常见问题解答

• 连接问题：检查服务器是否运行并具有 /vibeframe 端点，确保网络可达。
• 无服务器发现：手动在设置中配置服务器。
• 加载失败：确保服务器 URL 正确且服务器正在运行。

使用教程

使用依赖

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

安装教程

1. 从 发布页面 下载 VSIX 包。
2. 在 VS Code 中安装：
3. 在终端运行 code --install-extension vibeframe-0.1.0.vsix，或
4. 在 VS Code 中选择 "Extensions" → 点击 "..." → "Install from VSIX..." → 选择下载的文件。
5. 在 Cursor 中安装：
6. 将 .vsix 文件拖到 Extensions 面板。

调试方式

1. 打开 VS Code 命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
2. 输入 "Vibeframe: Open MCP Canvas" 并选择。
3. 如果发现多个服务器，选择要使用的服务器。
4. MCP 界面将在 VS Code 面板中加载。