search2chart-mcp

Turn any tabular data into inline charts directly inside agent conversations. Zero runtime dependencies, multi-client adaptive.

Verwandle „beliebige Tabellendaten“ in direkt inline in den Agent-Konversationsfluss eingebettete Diagramme. Keine Laufzeit-Abhängigkeiten, mehreren Clients angepasst.

Installation

# 方式一：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

Zwei Wege

• MCP-Client verwenden → mcp/ wählen, die Diagramme erscheinen direkt im Chatfenster

• DSH verwenden und ein natives Erlebnis wünschen → dsh/ wählen; in DSH ist auch mcp/ möglich (über Dateilinks)

• Beides kann parallel verwendet werden

Schnellstart

1. In deine MCP-Konfiguration aufnehmen

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

Falls npx nichts ziehen kann, verwende den absoluten Pfad nach dem Klonen: "command": "node", "args": ["<repository>/mcp/server.js"]

2. Ersteinrichtung: Testen, welche Bilder dein Agent rendern kann

Verschiedene Agent-Renderer unterstützen unterschiedliche Bildformate. Teste zuerst einmal mit dem all-Modus:

Vorübergehende Konfiguration (Umgebungsvariablen zur MCP-Konfiguration hinzufügen):

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

Test-Prompt für deinen Agenten:

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

Der Agent liefert 3-4 Bildzeilen zurück, gekennzeichnet als:

• 【1·data URI】 — in sich geschlossenes base64, keine Internetverbindung nötig

• 【2·localhost http】 — lokaler HTTP-Dienst

• 【3·file://】 — lokaler Dateipfad

• 【4·CDN öffentliches https】 — öffentliche Adresse von GitHub + jsDelivr

Welches Format im Chatfenster tatsächlich als Bild gerendert wird, genau das unterstützt dein Agent.

3. Modus festlegen

| Gerendertes Format | Einstellung | | ----------------------- | ---------------------------------------------- -------------------------------- | | data URI ✅ | ECHARTS_INLINE_MODE=inline (Standard) | | file:// ✅ | ECHARTS_INLINE_MODE=file | | localhost http ✅ | ECHARTS_INLINE_MODE=inline | | CDN öffentliches https ✅ | ECHARTS_INLINE_MODE=cdn | | MCP image block ✅ | inline + bei Aufruf returnImage:true | | Keines davon wird angezeigt | ECHARTS_INLINE_MODE=none, das interaktive .html-Diagramm nutzen |

Automatische Erkennung durch den Agenten

In den Tool-Ergebnissen sind bereits Agent-Anweisungen eingebaut, die dem Modell sagen, wie es den Modus anhand von Benutzerfeedback automatisch setzt:

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

Bekannte Clients gemessen: ZCode → file, OpenCode → inline (data URI), WorkBuddy → cdn, DSH → inline (localhost http), Claude/Cursor → inline + returnImage:true.

Kernfunktionen

Mehrclient-Inline-Anpassung

Über die Umgebungsvariable ECHARTS_INLINE_MODE wurde das Inline-Stimmung gesteuert:

CDN-Bildhosting im öffentlichen Netz

• SVG → PNG-Rasterung (@resvg/resvg-js, optionale Abhängigkeit)

• Hochladen via GitHub-Contents-API + jsDelivr-CDN-Beschleunigung

• Geplante Bereinigung durch GitHub Actions (Standardmäßig 3 Tage Beibehalt)

Bereinigte Daten bleiben erhalten

Die Ergebnisse liefern die vollständigen Daten (JSON, in Codeblock) mit, sodass reine Textmodelle im Kontext weiter prozentuale Anteile, Trends und Vergleiche analysieren können, ohne das Bild zu sehen. Mit returnData: false abstellbar.

Eigenständige interaktive HTML-Dateien

Die Diagramme werden außerdem als .html-Dateien geschrieben und unterstützen nach dem Öffnen im Browser Hover-Faq, Zoom, Typ-Wechsel und Farbanpassungen.

Tools

Feldkonvention: erste Spalte = Kategorieachse; restliche Spalten = Serien (mehrere Spalten = mehrere Serien); chartType: auto wählt automatisch baldisches Teil-/Balkendiagramm.

Integration für Clients

Mehr dazu in mcp/README.md.

Verzeichnis

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

Lizenz

MIT