search2chart-mcp

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

Convierte cualquier dato tabular en gráficos directamente incrustados en el flujo de conversación del agente. Cero dependencias en tiempo de ejecución, adaptable a múltiples clientes.

Instalación

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

Dos rutas

• Si usas un cliente MCP → usa mcp/; la imagen aparece directamente en el diálogo.

• Si usas DSH y quieres una experiencia nativa → usa dsh/; en DSH también puedes usar mcp/ (mediante enlace de archivo).

• Ambos pueden coexistir.

Inicio rápido

1. Añade en tu configuración MCP

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

Si npx no puede obtenerlo, usa la ruta absoluta después de clonar: "command": "node", "args": ["<仓库>/mcp/server.js"]

2. Primera integración: prueba qué tipo de imagen puede renderizar tu agente

Los distintos renderizadores de agentes tienen compatibilidades diferentes con los formatos de imagen. Prueba primero todo a la vez con el modo all:

Configuración temporal (agrega variables de entorno en la configuración MCP):

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

Prompt de prueba para el agente:

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

El agente devuelve 3-4 imágenes de gráficos, marcadas respectivamente como:

• 【1·data URI】 — base64 autocontenido, sin necesidad de red

• 【2·localhost http】 — servicio HTTP local

• 【3·file://】 — ruta de archivo local

• 【4·CDN público https】 — dirección pública de GitHub + jsDelivr

Aquella que realmente se renderice como imagen en el diálogo es la que tu agente soporta.

3. Modo fijo

Detección automática del agente

En los resultados de la herramienta ya hay instrucciones del agente, que le indican al modelo cómo ajustar el modo automáticamente según los comentarios del usuario:

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

Cliente probado conocido: ZCode → file, OpenCode → inline (data URI), WorkBuddy → cdn, DSH → inline (localhost http), Claude/Cursor → inline + inline + returnImage:true.

Capacidades principales

Adaptación inline en múltiples clientes

El comportamiento inline se controla mediante la variable de entorno ECHARTS_INLINE_MODE:

Alojamiento de imágenes en CDN público

• Rasterización SVG → PNG (@resvg/resvg-js, dependencia opcional)

• Subida mediante GitHub Contents API + aceleración con jsDelivr CDN

• GitHub Actions limpia per attendant (retiene 3 días por defecto)

Conservación de datos limpios

El resultado incluye los datos completos (JSON, envuelto en un bloque de código), lo que permite que un modelo de solo texto pueda seguir haciendo análisis de proporción/antecedencia/comparación en el contexto, sin necesidad de ver el gráfico. Se puede desactivar con return: Data: false.

HTML interactivo autónomo

El gráfico también se escribe en un archivo .html; al abrirlo en el navegador, soporta hover / zoom / cambio de tipo / ajuste de colores.

Herramientas

Convención de campos: primera columna = eje de categorías; resto de columnas = series de valores (varias columnas = varias series); chartType: auto selección automáticamente el tipo (pastel (o col) según los datos.

Integración con clientes

Ver detalles en mcp/README.md.

Estructura de directorios

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

Licencia

MIT