振动框架

Name: 振动框架
Author: taggartbg

作者：taggartbg12 星标更新：2025-04-18

安装使用来源：spider==github.com

项目介绍

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服务器

安装

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

使用

打开MCP画布

按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板
输入“Vibeframe: Open MCP Canvas”并选择它
如果找到多个服务器，请选择您要使用的服务器
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服务器：

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

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

配置选项

设置

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

故障排除

连接问题

如果您遇到连接问题：

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

常见错误

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

MCP服务器配置

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

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

开发

从源代码构建

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

# 安装依赖
npm install

# 构建扩展
npm run compile

# 打包扩展
npm run package

运行和调试

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

许可证

致谢

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