Visuals MCP

🚀 MCP Visuals Server

AIエージェントに対してインタラクティブなビジュアライゼーションを提供するMCP（Model Context Protocol）サーバーです。TanStack Tableを用いたテーブル、メタデータ付きの画像プレビュー、コレクションを閲覧するためのマスター-詳細ビュー、階層データ用のツリービュー、ドラッグアンドドロップで並べ替え可能なカスタマイズ可能なリストなど、豊富でインタラクティブな形式でデータを表示します。

🚀 クイックスタート

クイックインストール

°°°

✨ 主な機能

テーブルビジュアライゼーション

• インタラクティブなテーブル表示：TanStack Table v8を使用した機能豊富なデータテーブル
• ソート：列ヘッダーをクリックして昇順/降順にソート
• フィルタリング：各列にテキストフィルターを適用し、適用ボタンでフィルターをかける
• ページネーション：ページサイズをカスタマイズ可能（5、10、20、50、100行）
• 列の表示切り替え：表示する列を切り替える
• 行の選択：個々の行またはすべての行を選択
• エクスポート：CSV/TSVとしてコピーまたはPDFにエクスポート
• エージェント統合：テーブルの状態（選択、フィルター、ソート）がupdateModelContextを介してLLMに自動的に送信される
• テーマ統合：VS Codeのテーマの色とフォントを尊重する
• レスポンシブ：さまざまな画面サイズで動作する
• 汎用データサポート：任意の列構造とデータ型を受け入れる

画像プレビュー

• 豊富な画像カード：タイトル、キャプション、メタデータ付きで画像を表示
• メタデータ表示：ファイル名、寸法、ファイルサイズを表示
• 柔軟なソース：URLとデータURIをサポート
• ローカルファイルサポート：ローカルファイルパスを自動的にデータURIに変換
• テーマ統合：VS Codeのテーマの色とフォントを尊重する

マスター-詳細ビュー

• 柔軟なレイアウト：詳細コンテンツパネル付きのアイテムのリストを表示
• 複数のコンテンツタイプ：詳細パネルはテーブル、画像、またはカスタムテキスト/HTMLをサポート
• 再利用可能なコンポーネント：既存のテーブルと画像のビジュアライゼーションを利用
• 構成可能なレイアウト：水平（横並び）または垂直（縦積み）の向きを選択
• 状態管理：選択状態が自動的にLLMに送信される
• 豊富なマスターリスト：アイコン、ラベル、説明付きでアイテムを表示
• テーマ統合：すべてのコンポーネントで一貫したテーマ

ツリービュー

• 階層データ表示：ネストされたデータのためのインタラクティブなツリー構造
• 展開/折りたたみ：ノードをクリックして展開または折りたたむ
• ノードの選択：個々のノードを選択して強調表示
• メタデータサポート：各ノードにオプションのメタデータを表示
• アイコン：ノードにカスタムアイコン/絵文字を追加
• 一括操作：すべてのノードを一度に展開または折りたたむ
• エクスポートオプション：ツリーをクリップボードにコピー、HTMLとしてエクスポート、または画像（PNG）として保存
• エージェント統合：ツリーの状態（展開されたノード、選択）がLLMに送信される
• テーマ統合：VS Codeのテーマの色とフォントを尊重する
• 使用例：ファイルシステム、組織図、ネストされたカテゴリ、JSON/XML構造

リストビジュアライゼーション

• インタラクティブなリスト：豊富なフォーマットで任意のタイプのリストを表示
• ドラッグアンドドロップでの並べ替え：ドラッグしてアイテムを簡単に並べ替える
• チェックボックス：タスクリストや選択用のオプションのチェックボックス
• 画像サムネイル：リストアイテムの横に画像を表示
• コンパクトモード：快適なレイアウトとコンパクトなレイアウトを切り替える
• エクスポートオプション：プレーンテキスト、CSV、またはJSONとしてコピー
• 個々のアイテムのコピー：各アイテムにクイックコピーボタン
• サブテキストサポート：各アイテムに二次テキスト/説明を追加
• メタデータ：アイテムにカスタムメタデータを添付
• テーマ統合：VS Codeのテーマの色とフォントを尊重する

📷 スクリーンショット

ソート、フィルタリング、ページネーション、行選択が可能なインタラクティブなテーブル

テーブル、画像、またはカスタムコンテンツを持つコレクションを閲覧するためのマスター-詳細ビュー

ドラッグアンドドロップでの並べ替え、チェックボックス、画像サムネイル付きのインタラクティブなリスト

展開/折りたたみ、ノード選択、エクスポートオプション付きのインタラクティブなツリービュー

📦 インストール

VSCode拡張機能（最も簡単）

VS Code Marketplaceから直接インストールします。

1. VS Codeを開く
2. 拡張機能（Ctrl+Shift+X / Cmd+Shift+X）に移動
3. "Visuals MCP"を検索
4. インストールをクリック

拡張機能は自動的にMCPサーバーをVS CodeとGitHub Copilot Chatに登録します。

npmjs（他のMCPクライアントに推奨）

VSCodeのgithub Copilot Chatで：

• ツールアイコン（Configure tools...）をクリック
• "Add MCP Server"をクリック
• "Install from npm"をクリック
• @harrybin/visuals-mcp を入力
• エンターキーを押す/ "Install"をクリック

コマンドラインを使用する場合：

npm install -g @harrybin/visuals-mcp
visuals-mcp

GitHub Packages

1. GitHub Packagesでnpmを認証します：

npm config set @harrybin:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

2. インストールして実行します：

npm install -g @harrybin/visuals-mcp
visuals-mcp

ローカル開発

# 依存関係をインストール
npm install

# UIをビルド
npm run build

# サーバーを実行
npm run serve

1. MCPサーバーを構成する

VS Codeの場合：このワークスペースには.vscode/settings.jsonにMCP構成が含まれています。

グローバルに追加するには、VS Codeの設定を更新します：

{
  "github.copilot.chat.mcpServers": {
    "visuals-mcp": {
			"type": "stdio",
			"command": "node",
			"args": [
				"dist/server.js"
			]
		}
  }
}

Claude Desktopの場合：設定例についてはclaude_desktop_config.jsonを参照してください。

📄 ライセンス

MIT

🤝 コントリビューション

コントリビューションを歓迎します！issueまたはPRを開いてください。

📚 リソース

• MCP Apps Documentation
• MCP Apps Examples
• TanStack Table Docs
• VS Code MCP Guide