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

Related MCP server: Chart-Output MCP Server

2つのパス

• 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. 初回接続：自分のエージェントがどの画像形式を描画できるかをテストする

エージェントのレンダラーによって、画像形式のサポート状況は異なります。まず all モードで一度にテストしてください。

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

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

エージェントに送るテスト用プロンプト：

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

エージェントは3〜4行の画像を返し、それぞれ次のようにラベル付けされます。

• 【1・data URI】 — 自己完結型の base64、ネットワーク不要

• 【2・localhost http】 — ローカル HTTP サービス

• 【3・file://】 — ローカルファイルパス

• 【4・CDN パブリック https】 — GitHub + jsDelivr の公開 URL

実際にダイアログ内で画像として描画された形式が、あなたのエージェントがサポートする形式です。

3. モードの固定

エージェントの自動検出

ツールの結果にはエージェントへの指示が組み込まれており、モデルがユーザーのフィードバックに応じてモードを自動設定できます：

[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 環境変数でインライン動作を制御します：

CDN 公開画像ホスティング

• SVG → PNG ラスタライズ（@resvg/resvg-js、オプション依存）

• GitHub Contents API にアップロード + jsDelivr CDN で高速配信

• GitHub Actions で定期クリーンアップ（デフォルトでは3日間保持）

クレンジング済みデータの保持

結果には完全なデータ（JSON、コードブロックで包含）が含まれるため、テキストのみのモデルでも画像を確認せずに、コンテキスト内で比率・トレンド・比較分析を続けられます。returnData: false でオフにできます。

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

チャートは同時に .html ファイルにも書き出されます。ブラウザで開けば hover / ズーム / タイプ切替 / 配色調整が可能です。

ツール

フィールド規約：最初の列 = カテゴリ軸；残りの列 = 数値シリーズ（複数列で複数シリーズ）；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

License

MIT