Vibeframe - MCP UI for VS Code

Vibeframe - VS Code 用 MCP UI

MCP サーバー用のリッチなビジュアルインターフェースを作成し、VS Code、Cursor、Windsurf にシームレスに統合します。

誰向けですか？

MCP サーバー（SSE のみ）開発者で、ユーザーの VSCode ベースの IDE 内に直接フロントエンドを提供したい方向けです。Vibeframe VSCode 拡張機能をマーケットプレイスからダウンロードするための手順を含めるか、https://vibeframe.dev へのリンクを含めてください。そこから最新リリースをダウンロードできます（Cursor と Windsurf はマーケットプレイスをサポートしていません）。

必要なのは、サーバーから /vibeframe エンドポイントを実装し、Vibeframe: Open MCP Canvas を実行するだけです。準備完了です！

機能

• SSE/WS サポート: サーバーと Vibeframe キャンバス間の双方向通信

• サーバーディスカバリー: 以下から MCP サーバーを自動検出します：

  • Cursor 設定（グローバルおよびプロジェクト固有）
  • Windsurf 設定
  • VS Code 設定およびワークスペース設定
  • VS Code のマニュアル設定

• プロジェクト固有の優先順位: プロジェクト/ワークスペース設定がグローバル設定より優先されます

• サーバー検証: 検出されたサーバーが有効な /vibeframe エンドポイントを持っていることを確認します

• 複数サーバーサポート: シンプルなインターフェースで複数の検出されたサーバーから選択できます

• セキュアな統合: MCP サーバーのウェブインターフェースを適切なセキュリティポリシーで WebView に読み込みます

• 接続監視: 接続の問題を自動検出し、再接続を試みます

要件

• VS Code 1.60.0 以上 / Cursor / Windsurf
• /vibeframe エンドポイントを持つ実行中の MCP サーバー

インストール

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. Web インターフェースを提供する /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 コーディングアシスタントとのシームレスな統合のために作成されました。