Visuals MCP

Name: Visuals MCP
Author: harrybin

ローカル

github.com/harrybinデータ・分析629 週間前に更新

リポジトリ

Visuals MCP について

Visuals MCP は、AI エージェント向けに表、チャート、画像プレビュー、マスターディテール、ツリー、リストを表示する MCP サーバーです。構造化データを操作できる形で示し、選択内容や表示状態をホストへ返せます。

主な機能

01並べ替えとフィルターに対応したテーブル
02折れ線、棒、面、円、散布図、複合チャート
03メタデータ付き画像プレビュー
04コレクション用マスターディテール表示
05展開可能な階層ツリービュー
06ドラッグで並べ替えられるリスト

活用シーン

01テーブルで構造化データを確認・絞り込み
02インタラクティブなチャートで指標を表示
03入れ子データやファイル階層の閲覧
04画像と詳細情報を含むコレクションの確認

MCP 対応

MCP クライアントに、チャートやその他のインタラクティブ表示用ツールを提供します。選択内容や表示状態をホストアプリケーションまたは LLM に返せます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "harrybin-visuals": {
      "command": "npx",
      "args": [
        "-y",
        "@harrybin/visuals-mcp"
      ]
    }
  }
}

起動コマンドnpx -y @harrybin/visuals-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npm@harrybin/visuals-mcp1.6.0stdio

ツール

掲載時のツール一覧 · 2 週間前に更新

パラメーター	型	必須	説明
rows	array	はい	行データオブジェクトの配列
title	string	いいえ	テーブルの任意のタイトル
columns	array	はい	列定義の配列
pageSize	number	いいえ
allowRowSelection	boolean	いいえ
allowColumnVisibility	boolean	いいえ

詳細

MCP Visuals Server

AI エージェントにインタラクティブなビジュアライゼーションを提供する MCP（Model Context Protocol）サーバーです。TanStack Table を使用したテーブル、Recharts を使用したチャート、メタデータ付きの画像プレビュー、コレクションを閲覧するためのマスターディテールビュー、階層データ用のツリービュー、ドラッグ＆ドロップで順序を変更できるカスタマイズ可能なリストなど、データを豊かでインタラクティブな形式で表示します。

クイックインストール

°°°

機能

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

インタラクティブなテーブル表示：TanStack Table v8 を使用した、豊富な機能を備えたデータテーブル
並べ替え：列ヘッダーをクリックして、昇順／降順に並べ替え
フィルタリング：列ごとのテキストフィルターと適用ボタン
ページネーション：カスタマイズ可能なページサイズ（5、10、20、50、100 行）
列の表示設定：表示する列を切り替え
行の選択：個別の行またはすべての行を選択
エクスポート：CSV／TSV としてコピーするか、PDF にエクスポート
エージェント連携：テーブルの状態（選択、フィルター、並べ替え）は、updateModelContext を介して LLM に自動的に送信されます
テーマ連携：VS Code のテーマカラーとフォントを反映
レスポンシブ対応：さまざまな画面サイズで動作
汎用データ対応：あらゆる列構成とデータ型を受け入れます

チャートビジュアライゼーション

インタラクティブなチャート：折れ線、棒、面、円、散布図、複合チャートを描画
1 つのビューに複数のチャートを表示：縦、横、またはグリッドのレイアウトで複数のチャートをまとめて表示
柔軟な系列設定：名前付き系列、カスタムカラー、積み上げ棒／面チャート、複合チャートの組み合わせを設定
豊富なチャート機能：凡例、ツールチップ、グリッド線、2 つの Y 軸を任意で使用可能
エクスポートオプション：UI からチャートデータを JSON または CSV として直接コピー
エージェントへの状態通知：選択中のチャートやホバー状態をホストアプリに通知できます
テーマ連携：VS Code のテーマカラーとフォントを反映
レスポンシブ対応：狭いパネルや広いレイアウトに適応

画像プレビュー

リッチな画像カード：タイトル、キャプション、メタデータ付きで画像を表示
メタデータ表示：ファイル名、寸法、ファイルサイズを表示
柔軟なソース：URL とデータ URI に対応
ローカルファイル対応：ローカルファイルパスをデータ URI に自動変換
テーマ連携：VS Code のテーマカラーとフォントを反映

マスターディテールビュー

柔軟なレイアウト：詳細コンテンツパネルとともに項目のリストを表示
複数のコンテンツタイプ：詳細パネルではテーブル、画像、またはカスタムテキスト／HTML に対応
再利用可能なコンポーネント：既存のテーブルおよび画像ビジュアライゼーションを活用
設定可能なレイアウト：横並びまたは縦積みの向きを選択
状態管理：選択状態は LLM に自動的に送信されます
リッチなマスターリスト：アイコン、ラベル、説明付きで項目を表示
テーマ連携：すべてのコンポーネントで一貫したテーマを適用

ツリービュー

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

リストの可視化

インタラクティブなリスト：あらゆる種類のリストを豊かな書式で表示します
ドラッグ＆ドロップによる並べ替え：項目をドラッグして簡単に並べ替えられます
チェックボックス：タスクリストや選択項目にオプションでチェックボックスを追加できます
画像サムネイル：リスト項目の横に画像を表示します
コンパクトモード：ゆったりしたレイアウトとコンパクトなレイアウトを切り替えられます
エクスポートオプション：プレーンテキスト、CSV、または JSON としてコピーできます
個別項目のコピー：各項目にクイックコピーボタンがあります
補足テキストのサポート：各項目にセカンダリテキストや説明を追加できます
メタデータ：項目にカスタムメタデータを付加できます
テーマ連携：VS Code のテーマカラーとフォントを反映します

スクリーンショット

テーブルの例

並べ替え、フィルタリング、ページネーション、行選択に対応したインタラクティブなテーブル

チャートの例

複数のチャートタイプとグリッドレイアウトを備えたインタラクティブなチャートダッシュボード

マスター／詳細の例

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

リストの例

ドラッグ＆ドロップによる並べ替え、チェックボックス、画像サムネイルに対応したインタラクティブなリスト

ツリーの例

展開／折りたたみ、ノード選択、エクスポートオプションに対応したインタラクティブなツリービュー

インストール

VSCode 拡張機能（最も簡単）

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

VS Code を開きます
拡張機能を開きます（Ctrl+Shift+X / Cmd+Shift+X）
"Visuals MCP" を検索します
「インストール」をクリックします

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

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

VSCode の github Copilot Chat で

ツールアイコンをクリックします（Configure tools...）
"Add MCP Server" をクリックします
"Install from npm" をクリックします
@harrybin/visuals-mcp を入力します
Enter キーを押すか、「Install」をクリックします

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

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

GitHub Packages

GitHub Packages で npm を認証します：

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

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

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

ローカル開発

# Install dependencies
npm install

# Build all UI bundles and the server
npm run build

# Optional: rebuild only the chart UI bundle
npm run build:charts

# Run the server
npm run serve

チャートツール

display_chart を使用して、MCP クライアントに 1 つ以上のインタラクティブなチャートを描画します。

対応するチャートタイプ：

line
bar
area
pie
scatter
composed

リポジトリメトリクスダッシュボードの例

まず、最新のメトリクスを生成します：

npm run metrics:repo:write

これにより、スナップショットが doc/repo-metrics.json に書き込まれます。

次に、すべてのチャートタイプ（line、bar、area、pie、scatter、composed）を使用するダッシュボードを描画します：

リリース品質のドキュメントを作成する場合は、README の例を更新する直前に、必ず doc/repo-metrics.json を再生成してください。

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 を作成してください。

リソース

Markdown 対応

ログインしてコメント

基本情報

作者: harrybin
言語: node
バージョン: 1.6.0
トランスポート: stdio
掲載日: 2026年4月7日
最終更新: 29 週間前
公式 Registry: io.github.harrybin/visuals-mcp

問題を報告

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。