search2chart-mcp

search2chart-mcp

表形式のデータを、エージェントとの会話に直接インライン表示できるグラフに変換します。実行時依存関係はゼロで、複数クライアントに適応します。

「任意の表形式データ」をエージェントとの会話に直接インライン表示できるグラフに変換します。実行時依存関係はゼロで、複数クライアントに適応します。

インストール

# 方式一：DSH 原生插件（DeepSeek Harness 用户推荐，真·内联）
dsh plugin --profile web add dsh-chart

# 方式二：npx（通用 MCP server，无需 clone）
npx search2chart-mcp

# 方式三：git clone
git clone https://github.com/iqingyoung/search2chart-mcp.git

2つの方法

方法	ディレクトリ	対象
汎用 MCP サーバー	mcp/	ZCode / Claude Desktop / Cursor / WorkBuddy / Trae / Codex / DSH 全般
ネイティブ DSH プラグイン	dsh/	DeepSeek Harness（真のインライン表示。画像が会話に直接表示されます）

• MCP クライアントを使う場合 → mcp/ を使うと、会話欄に直接グラフが表示されます
• DSH を使い、ネイティブな体験を求める場合 → dsh/ を使います。DSH では mcp/ も使えます（ファイルリンク経由）
• 両方を併用できます

クイックスタート

1. MCP 設定に追加する

{
  "mcpServers": {
    "search2chart-mcp": {
      "command": "npx",
      "args": ["search2chart-mcp"],
      "env": {}
    }
  }
}

npx で取得できない場合は、clone した後の絶対パスを使ってください："command": "node", "args": ["<仓库>/mcp/server.js"]

2. 初回接続時：Agent がどの画像形式をレンダリングできるかテストする

Agent によって画像形式のサポート状況は異なります。まず all モードで一度にテストしてください：

一時設定（MCP 設定に環境変数を追加）：

{
  "env": {
    "ECHARTS_INLINE_MODE": "all"
  }
}

Agent に送るテスト用プロンプト：

用 chart_from_data 生成一个简单柱状图。
数据：[["城市","销量"],["北京",120],["上海",200],["广州",150]]
标题：城市销量对比
chartType：bar

Agent は、次のラベルが付いた3〜4行のグラフを返します：

• 【1・data URI】 — 自己完結型の base64。インターネット接続は不要です
• 【2・localhost http】 — ローカル HTTP サービス
• 【3・file://】 — ローカルファイルのパス
• 【4・CDN 公開 https】 — GitHub + jsDelivr の公開アドレス

会話欄で実際に画像として表示された形式が、Agent によってサポートされています。

3. モードを固定する

レンダリング可能な形式	設定
data URI ✅	ECHARTS_INLINE_MODE=inline（デフォルト）
file:// ✅	ECHARTS_INLINE_MODE=file
localhost http ✅	ECHARTS_INLINE_MODE=inline
CDN 公開 https ✅	ECHARTS_INLINE_MODE=cdn
MCP image block ✅	inline + 呼び出し時に returnImage:true
どれも表示できない	ECHARTS_INLINE_MODE=none を設定し、インタラクティブな .html グラフを使います

Agent による自動検出

ツールの結果には Agent 向けの指示が組み込まれており、ユーザーのフィードバックに基づいてモードを自動設定する方法をモデルに伝えます：

[Agent]: 返回 4 行图片，哪张正常显示？
[User]:  3正常
[Agent]: 确认了。file:// 可渲染 → 请设置 ECHARTS_INLINE_MODE=file

既知のクライアントでの実測値：ZCode → file、OpenCode → inline（data URI）、WorkBuddy → cdn、DSH → inline（localhost http）、Claude/Cursor → inline + returnImage:true。

主な機能

複数クライアント向けインライン表示の適応

ECHARTS_INLINE_MODE 環境変数でインライン表示の動作を制御します：

モード	動作	対象クライアント
inline（デフォルト）	data URI → localhost http → file:// の順に自動フォールバック	OpenCode / DSH / 汎用
file	ローカルの file:// パスのみを出力	ZCode
cdn	GitHub + jsDelivr にアップロードし、公開 https を出力	WorkBuddy
all	テストモード：すべての形式を一度に返す	初回接続時のテスト
none	プレーンテキスト（.html のパス + データ）。インライン表示なし	プレーンテキストモデル / ターミナル

CDN 公開画像ホスティング

• SVG → PNG にラスタライズ（@resvg/resvg-js、オプションの依存関係）
• GitHub Contents API にアップロードし、jsDelivr CDN で高速配信
• GitHub Actions で定期的にクリーンアップ（デフォルトの保持期間は3日）

整形済みデータの保持

結果には完全なデータ（JSON、コードブロックで囲んだもの）が含まれます。これにより、プレーンテキストモデルは画像を見ずに、コンテキスト内で引き続き割合・傾向・比較を分析できます。returnData: false で無効にできます。

自己完結型のインタラクティブ HTML

グラフは .html ファイルにも書き込まれます。ブラウザーで開くと、ホバー・ズーム・種類の切り替え・配色の調整ができます。

ツール

ツール	用途
chart_from_data	構造化データ → グラフ HTML + インライン画像
chart_from_file	CSV/XLSX のパス → グラフ HTML + インライン画像
list_chart_types	対応する種類・配色・フィールドの規約を一覧表示

フィールドの規約：1列目 = カテゴリー軸。それ以降の列 = 数値系列（複数列の場合は複数系列）。chartType: auto はデータに基づいて円グラフ／棒グラフを自動選択します。

各クライアントとの接続

詳しくは mcp/README.md を参照してください。

ディレクトリ

search2chart-mcp/
├── mcp/              # 跨端 MCP server（内联 SVG + 可交互 HTML）
│   ├── server.js     # MCP stdio 协议 + 工具入口
│   ├── lib/
│   │   ├── chart.js      # 数据归一化 + ECharts option
│   │   ├── html.js       # 自包含可交互 HTML
│   │   ├── svg.js        # 零依赖 SVG 渲染器
│   │   ├── httpserver.js # 本地 HTTP 服务
│   │   ├── rasterize.js  # SVG→PNG
│   │   ├── upload.js     # GitHub + jsDelivr CDN
│   │   └── parse.js      # CSV/XLSX 解析
│   └── scripts/
│       ├── selftest.js    # 端到端自检
│       └── verify_cdn.cjs # CDN 端到端验证
├── dsh/              # 原生 DSH 内联插件
├── LICENSE
└── README.md

ライセンス

MIT