search2chart-mcp
search2chart-mcp: agent-native charting — turn search/research/tabular data into inline charts in agent conversations. Native DSH plugin (true inline) + cross-agent MCP server (file-link + interactive HTML).
Documentation
search2chart-mcp
> Turn any tabular data into inline charts directly inside agent conversations. Zero runtime dependencies, multi-client adaptive.
把「任意表格数据」变成直接内联在 agent 对话流里的图表。零运行时依赖,多端自适应。
安装
# 方式一: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两条路径
| 路径 | 目录 | 适用 |
|---|---|---|
| 通用 MCP server | `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 的测试 prompt:
用 chart_from_data 生成一个简单柱状图。
数据:[["城市","销量"],["北京",120],["上海",200],["广州",150]]
标题:城市销量对比
chartType:barAgent 返回 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:// 自动 fallback | 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` 文件,浏览器打开即支持 hover / 缩放 / 类型切换 / 配色调整。
工具
| 工具 | 作用 |
|---|---|
| `chart_from_data` | 结构化数据 → 图表 HTML + 内联图片 |
| `chart_from_file` | CSV/XLSX 路径 → 图表 HTML + 内联图片 |
| `list_chart_types` | 列出支持的类型 / 配色与字段约定 |
字段约定:第一列 = 类别轴;其余列 = 数值序列(多列即多序列);`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.mdLicense
MIT
Frequently asked questions
What is search2chart-mcp?
search2chart-mcp is search2chart-mcp: agent-native charting — turn search/research/tabular data into inline charts in agent conversations. Native DSH plugin (true inline) + cross-agent MCP server (file-link + interactive HTML).
How do I install search2chart-mcp?
Open the GitHub repository and follow its README. Most MCP servers are added to your client's MCP config, then called by your agent.
Is search2chart-mcp open source?
Yes — it is hosted on GitHub at https://github.com/iqingyoung/search2chart-mcp and has 1 stars.
Related MCP tools
🔥 Official Firecrawl MCP Server - Adds powerful web scraping and search to Cursor, Claude and any other LLM clients.
CTTF: MCP integration between Cursor and Figma, allowing Cursor Agentic AI to communicate with Figma for reading designs and modifying them programmatically.
This is MCP server for Claude that gives it terminal control, file system search and diff file editing capabilities JavaScript-based implementation.
A powerful Zotero AI and MCP plugin with ChatGPT, Gemini 3.7, Claude Fable 5, Claude Opus 5, DeepSeek V4, Grok, OpenRouter, Kimi k3, GLM 5.3, SiliconFlow, GPT-oss, Gemma 4, Qwen 3.8
Connect your browser to AI models. Just use Dia on Chrome, Arc or Firefox.
Shrimp Task Manager is a task tool built for AI Agents, emphasizing chain-of-thought, reflection, and style consistency.
Run your own MCP server? See who uses it and what to fix.
Measure it with TrackMCP