search2chart-mcp

search2chart-mcp

Convierte cualquier dato tabular en gráficos en línea directamente dentro de las conversaciones del agente. Cero dependencias en tiempo de ejecución, adaptativo a múltiples clientes.

Convierte «cualquier dato tabular» en gráficos directamente integrados en el flujo de conversación del agente. Cero dependencias en tiempo de ejecución, adaptativo a múltiples plataformas.

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

Dos rutas

Ruta	Directorio	Aplicable
Servidor MCP universal	mcp/	ZCode / Claude Desktop / Cursor / WorkBuddy / Trae / Codex / DSH universal
Plugin nativo DSH	dsh/	DeepSeek Harness (verdadera integración, las imágenes entran directamente en la conversación)

• Usas un cliente MCP → usa mcp/, las imágenes aparecen directamente en el cuadro de diálogo
• Usas DSH y quieres experiencia nativa → usa dsh/; en DSH también puedes usar mcp/ (a través de enlaces de archivos)
• Ambos pueden coexistir

Inicio rápido

1. Añade a tu configuración MCP

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

Si npx no lo descarga, 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 soporte variable para formatos de imagen. Primero prueba con el modo all de una sola vez:

Configuración temporal (añade 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 líneas de imágenes, 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 GitHub + jsDelivr

El que realmente se renderice como imagen en el cuadro de diálogo es el que tu agente soporta.

3. Fijar el modo

Formato que se puede renderizar	Configuración
data URI ✅	ECHARTS_INLINE_MODE=inline (predeterminado)
file:// ✅	ECHARTS_INLINE_MODE=file
localhost http ✅	ECHARTS_INLINE_MODE=inline
CDN público https ✅	ECHARTS_INLINE_MODE=cdn
Bloque de imagen MCP ✅	inline + al llamar returnImage:true
No se muestra nada	ECHARTS_INLINE_MODE=none, usa .html para gráficos interactivos

Detección automática del agente

Las instrucciones del agente ya están integradas en los resultados de la herramienta, indicando al modelo cómo configurar automáticamente el modo según los comentarios del usuario:

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

Pruebas reales con clientes conocidos: ZCode → file, OpenCode → inline (data URI), WorkBuddy → cdn, DSH → inline (localhost http), Claude/Cursor → inline + returnImage:true.

Capacidades principales

Adaptación en línea para múltiples clientes

Controla el comportamiento en línea mediante la variable de entorno ECHARTS_INLINE_MODE:

Modo	Comportamiento	Clientes aplicables
inline (predeterminado)	data URI → localhost http → file:// con fallback automático	OpenCode / DSH / universal
file	Solo genera ruta local file://	ZCode
cdn	Sube a GitHub+jsDelivr, genera https público	WorkBuddy
all	Modo de prueba: devuelve todos los formatos a la vez	Para pruebas en la primera integración
none	Solo texto (ruta .html + datos), sin integración	Modelos de solo texto / terminal

Alojamiento de imágenes CDN público

• Rasterización SVG → PNG (@resvg/resvg-js, dependencia opcional)
• Subida mediante GitHub Contents API + aceleración CDN jsDelivr
• Limpieza programada con GitHub Actions (retención predeterminada de 3 días)

Conservación de datos limpios

Los resultados incluyen datos completos (JSON, envueltos en bloques de código), para que los modelos de solo texto puedan continuar con análisis de proporciones/tendencias/comparaciones en el contexto, sin necesidad de ver la imagen. Se puede desactivar con returnData: false.

HTML interactivo autocontenido

Los gráficos también se escriben en el archivo .html; al abrirlo en el navegador, admite hover / zoom / cambio de tipo / ajuste de colores.

Herramientas

Herramienta	Función
chart_from_data	Datos estructurados → HTML de gráfico + imagen en línea
chart_from_file	Ruta CSV/XLSX → HTML de gráfico + imagen en línea
list_chart_types	Lista los tipos admitidos / convenciones de colores y campos

Convención de campos: primera columna = eje de categorías; columnas restantes = series numéricas (múltiples columnas = múltiples series); chartType: auto selecciona automáticamente pastel/barras según los datos.

Integración con cada cliente

Consulta mcp/README.md.

Directorio

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