Vibframe-用于VS代码的MCP UI
为您的MCP服务器创建丰富的可视化界面，无缝集成到VS Code、Cursor和Windsurf中。
这是给谁的？
MCP服务器（仅限SSE）开发人员希望前端直接位于用户基于VSCode的IDE中。只需提供从Marketplace下载Vibframe VSCode扩展程序的说明，或提供以下链接https://vibeframe.dev在那里他们可以下载最新的relase（Cursor和Windsurf不支持Marketplace）。
你所要做的就是实现一个 /vibeframe 从您的服务器访问端点并运行 Vibeframe: Open MCP Canvas 你们都准备好了！
特性
- SSE/WS支持：服务器和Vibframe画布之间的双向通信
- 服务器发现：自动从以下位置查找MCP服务器：
- 游标配置（全局和项目特定） - 风帆配置 - VS代码设置和工作区配置 - VS Code中的手动设置
- 项目特定优先级：项目/工作区配置优先于全局配置
- 服务器验证：检查发现的服务器是否有效
/vibeframe端点
- 多服务器支持：使用简单界面从多个发现的服务器中进行选择
- 安全集成：在具有适当安全策略的WebView中加载MCP服务器的web界面
- 连接监控：自动检测连接问题并尝试重新连接
需求
- VS代码1.60.0或更高/光标/风帆
- 正在运行的MCP服务器
/vibeframe端点
安装
- 从下载VSIX软件包 发布页面
- 通过以下方式在VS代码中安装它：
- 跑步 code --install-extension vibeframe-0.1.0.vsix 在您的终端中，或 - 在VS Code中，选择“扩展”→ 单击“…”→“从VSIX安装…”→ 选择下载的文件
- 通过以下方式在Cursor:中安装它：
- 将.vsix文件拖动到扩展窗格
用法
打开MCP画布
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板 - 键入“振动框：打开MCP画布”并选择它
- 如果找到多个服务器，请选择要使用的服务器
- MCP接口将加载到VS代码面板中
服务器选择
当检测到多个MCP服务器时：
- 已验证的服务器（已确认
/vibeframe端点）首先以a出现✓ icon - 未经验证的服务器显示⚠️ 警告图标
- 从列表中选择要连接的服务器
管理服务器
自动发现
扩展程序会自动从以下位置发现MCP服务器：
- 光标：
- 全球的： ~/.cursor/mcp.json - 项目具体： .cursor/mcp.json （在您的工作区中）
- 风浪：
~/.codeium/windsurf/mcp_config.json - VS代码：
- 工作区： .vscode/mcp.json （在您的工作区中） - 设置：VS代码设置UI/JSON
配置格式
Vibframe支持多种配置格式：
光标和VS代码格式：
{
"mcpServers": {
"server1": "https://example-mcp-server.com",
"server2": {
"url": "https://another-mcp-server.com",
"name": "My Custom Server Name",
"type": "sse"
}
}
}VS代码工作区格式：
{
"servers": {
"server1": "https://example-mcp-server.com",
"server2": {
"url": "https://another-mcp-server.com",
"name": "My Custom Server Name",
"type": "sse"
}
}
}风帆格式：
{
"url": "https://example-mcp-server.com",
"name": "Optional Server Name"
}手动配置
在VS代码设置中添加您自己的MCP服务器：
- 转到设置(
Ctrl+,或Cmd+,) - 搜索“Vibframe”
- 在“Vibframe:手动服务器URL”下，单击“在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服务器要使用此扩展，必须：
- 有一个...，有...
/vibeframe服务于web界面的端点 - 允许来自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运行和调试
- 在VS Code中打开项目
- 按F5启动一个加载了扩展名的新VS Code窗口
- 在新窗口中运行“振动框：打开MCP画布”命令
许可证
版权所有Taggart Bowen Gaddy
鸣谢
专为与支持MCP的AI编码助手（如Cursor和Windsurf）无缝集成而创建。