search2chart-mcp

search2chart-mcp

Transforme qualquer dado tabular em gráficos inline diretamente nas conversas do agente. Zero dependências em tempo de execução, adaptável a múltiplos clientes.

Transforme "qualquer dado tabular" em gráficos diretamente inline no fluxo de conversa do agente. Zero dependências em tempo de execução, adaptável a múltiplos dispositivos.

Instalação

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

Dois caminhos

Caminho	Diretório	Aplicável
Servidor MCP genérico	mcp/	ZCode / Claude Desktop / Cursor / WorkBuddy / Trae / Codex / DSH genérico
Plugin DSH nativo	dsh/	DeepSeek Harness (inline real, imagens direto na conversa)

• Usa cliente MCP → use mcp/, imagens aparecem direto no diálogo
• Usa DSH e quer experiência nativa → use dsh/; no DSH também pode usar mcp/ (via link de arquivo)
• Ambos podem coexistir

Início rápido

1. Adicione na sua configuração MCP

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

Se o npx não conseguir baixar, use o caminho absoluto após o clone: "command": "node", "args": ["<仓库>/mcp/server.js"]

2. Primeira integração: teste qual imagem seu agente consegue renderizar

Diferentes renderizadores de agentes têm suporte variado a formatos de imagem. Primeiro use o modo all para testar de uma vez:

Configuração temporária (adicione variáveis de ambiente na configuração MCP):

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

Prompt de teste enviado ao agente:

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

O agente retorna 3-4 linhas de imagem, marcadas respectivamente como:

• 【1·data URI】 — base64 autocontido, sem necessidade de rede
• 【2·localhost http】 — serviço HTTP local
• 【3·file://】 — caminho de arquivo local
• 【4·CDN público https】 — endereço público GitHub + jsDelivr

Qualquer um que realmente renderizar como imagem no diálogo é o formato que seu agente suporta.

3. Fixar o modo

Formato que renderiza	Configuração
data URI ✅	ECHARTS_INLINE_MODE=inline (padrão)
file:// ✅	ECHARTS_INLINE_MODE=file
localhost http ✅	ECHARTS_INLINE_MODE=inline
CDN público https ✅	ECHARTS_INLINE_MODE=cdn
Bloco de imagem MCP ✅	inline + ao chamar returnImage:true
Nenhum funciona	ECHARTS_INLINE_MODE=none, use .html para gráficos interativos

Detecção automática pelo agente

As instruções do agente já estão embutidas nos resultados da ferramenta, informando ao modelo como definir o modo automaticamente com base no feedback do usuário:

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

Testes com clientes conhecidos: ZCode → file, OpenCode → inline (data URI), WorkBuddy → cdn, DSH → inline (localhost http), Claude/Cursor → inline + returnImage:true.

Capacidades principais

Adaptação inline para múltiplos clientes

Controle o comportamento inline via variável de ambiente ECHARTS_INLINE_MODE:

Modo	Comportamento	Clientes aplicáveis
inline (padrão)	data URI → localhost http → file:// fallback automático	OpenCode / DSH / genérico
file	Apenas saída de caminho local file://	ZCode
cdn	Upload para GitHub+jsDelivr, saída https público	WorkBuddy
all	Modo de teste: retorna todos os formatos de uma vez	Teste na primeira integração
none	Texto puro (caminho .html + dados), sem inline	Modelos de texto puro / terminal

CDN público para imagens

• Rasterização SVG → PNG (@resvg/resvg-js, dependência opcional)
• Upload via GitHub Contents API + aceleração CDN jsDelivr
• Limpeza agendada via GitHub Actions (retenção padrão de 3 dias)

Retenção de dados limpos

O resultado inclui dados completos (JSON, envolto em bloco de código), permitindo que modelos de texto puro continuem análises de proporção/tendência/comparação no contexto, sem precisar ver a imagem. returnData: false pode desativar.

HTML interativo autocontido

O gráfico também é gravado no arquivo .html; ao abrir no navegador, suporta hover / zoom / troca de tipo / ajuste de cores.

Ferramentas

Ferramenta	Função
chart_from_data	Dados estruturados → HTML de gráfico + imagem inline
chart_from_file	Caminho CSV/XLSX → HTML de gráfico + imagem inline
list_chart_types	Lista tipos suportados / convenções de cores e campos

Convenção de campos: primeira coluna = eixo de categoria; demais colunas = séries numéricas (várias colunas = várias séries); chartType: auto seleciona automaticamente pizza/barras com base nos dados.

Integração com cada cliente

Veja mcp/README.md.

Índice

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

Licença

MIT