Vibeframe 是一個 VSCode 擴展，通過 SSE 為 MCP 伺服器提供豐富的視覺界面。它允許開發者自動發現 MCP 伺服器，支持多個伺服器配置，並提供安全的 WebView 集成，使得可以直接在 IDE 中高效地管理 MCP 伺服器。
新增日期：
創建者：
Apr 18 2025
精選
Vibeframe 是什麼？
Vibeframe 是一個專門為 MCP 伺服器設計的 UI 擴展，特別針對 Visual Studio Code 中的開發工具集成而設。它使得創建基於 Web 的互動用戶界面成為可能，這些界面通過伺服器發送事件（SSE）與 MCP 伺服器進行通訊。用戶可以通過配置文件或手動輸入自動發現 MCP 服務，檢查伺服器端點，並無縫選擇多個伺服器。該擴展通過簡單的命令促進了 MCP 界面的初始化，並支持安全的 WebView 嵌入，確保安全的數據交換。它通過將 MCP 伺服器管理集成到熟悉的 VSCode 環境中，提高了生產力，非常適合構建基於 MCP 的解決方案或高效管理 MCP 伺服器的開發人員。
誰會使用 Vibeframe？
- MCP 伺服器（僅 SSE）開發者
- 從事 MCP 的 VSCode 擴展開發者
- MCP 伺服器管理員
- 尋求在 IDE 中集成 MCP UI 的開發者
如何使用 Vibeframe？
- 步驟 1：從市場或 VSIX 文件下載並安裝 Vibeframe VSCode 擴展。
- 步驟 2：在 VSCode 中啟動命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）。
- 步驟 3：輸入 'Vibeframe: Open MCP Canvas' 並選擇它。
- 步驟 4：如果有多個 MCP 伺服器可用，從列表中選擇所需的伺服器。
- 步驟 5：MCP 界面將在新的 VSCode 面板中加載，準備進行交互。
Vibeframe 的核心特徵與益處
主要功能
- 支持 SSE/WS 進行實時通信
- 通過配置自動發現 MCP 伺服器
- 支持多伺服器管理
- MCP UI 的安全 WebView 嵌入
- 連接監控和自動重新連接
- 在設置中手動配置伺服器
優點
- 在 VSCode 中無縫集成 MCP UIs
- 自動伺服器發現節省設置時間
- 支持多個伺服器以獲得靈活性
- 實時通信使得界面動態
- 安全嵌入確保與伺服器的安全交互
Vibeframe 的主要使用案例與應用
- 為 IDE 伺服器管理創建自定義 MCP 界面
- 開發 MCP 伺服器儀表板進行監控
- 將 MCP UI 集成到開發管道中
- 在 VSCode 中高效管理多個 MCP 伺服器
Vibeframe 的常見問答
開發者
- taggartbg
您可能也喜歡：
開發者工具
一個 Docker 映像，承載多個 MCP 伺服器，透過整合 supergateway 以統一入口點訪問。
研究與數據
NOL 整合了 LangChain 和 Open Router，以使用 Next.js 創建一個多客戶端的 MCP 伺服器。
官方伺服器
基於Node.js和TypeScript的MCP伺服器，具有Express.js、日誌記錄、環境配置、測試和Git集成。