search2chart-mcp

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

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

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

Two Paths

• Use an MCP client → use mcp/, and charts render directly in the conversation.

• Use DSH and want a native experience → use dsh/; DSH can also use mcp/ (via file links).

• Both can coexist.

Quick Start

1. Add it to your MCP configuration

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

If npx cannot pull the package, use the absolute path after cloning: "command": "node", "args": ["<仓库>/mcp/server.js"]

2. First-time setup: test which image format your Agent can render

Different Agent renderers support different image formats. First use all mode to test all formats at once:

Temporary configuration (add an environment variable to the MCP configuration):

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

Test prompt to send to the Agent:

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

The Agent returns 3-4 image lines, identified as:

• 【1·data URI】 — self-contained base64, no network required.

• 【2·localhost http】 — local HTTP service.

• 【3·file://】 — local file path.

• 【4·CDN public https】 — public GitHub + jsDelivr CDN address.

Whichever one actually renders as an image in the conversation is the format your Agent supports.

3. Fix a mode

Agent auto-detection

Agent instructions are already built into tool results, telling the model how to automatically set the mode in response to user feedback:

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

Known client results: ZCode → file, OpenCode → inline (data URI), WorkBuddy → cdn, DSH → inline (localhost http), Claude/Cursor → inline + returnImage:true.

Core Capabilities

Multi-client inline adaptation

The ECHARTS_INLINE_MODE environment variable controls inline behavior:

CDN public image hosting

• SVG → PNG rasterization (@resvg/resvg-js, optional dependency)

• GitHub Contents API upload + jsDelivr CDN acceleration

• GitHub Actions scheduled cleanup (retained for 3 days by default)

Cleaned data retention

The result includes the full data (JSON, wrapped in a code block), letting text-only models continue proportion/trend/comparison analysis in context without looking at the image. This can be disabled with returnData: false.

Self-contained interactive HTML

The chart is also written to an .html file, which supports hover / zoom / chart-type switching / color adjustments right in the browser.

Tools

Field conventions: the first column is the category axis; the remaining columns are value series (multiple columns = multiple series). chartType: auto automatically chooses pie/bar based on the data.

Connecting to Various Clients

See mcp/README.md for details.

Directory

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