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

Related MCP server: Chart-Output MCP Server

두 가지 경로

• 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：bar

Agent는 3~4줄의 차트를 반환하며, 각각 이렇게 표시됩니다.

• 【1·data URI】 — 자체 포함 base64, 인터넷 불필요

• 【2·localhost http】 — 로컬 HTTP 서비스

• 【3·file://】 — 로컬 파일 경로

• 【4·CDN 공개 https】 — GitHub + jsDelivr 공개 주소

대화창에서 실제로 이미지로 렌더링된 형식이 곧 Agent가 지원하는 형식입니다.

3. 모드 고정하기

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 환경 변수로 인라인 동작을 제어합니다.

CDN 공개 이미지 호스팅

• SVG → PNG 래스터화（@resvg/resvg-js, 선택 의존성）

• GitHub Contents API 업로드 + jsDelivr CDN 가속

• GitHub Actions 정기 정리（기본 3일 보관）

데이터 보존

결과에 본래 데이터 전체（JSON, 코드 블록으로 감쌈）가 포함되어，순수 텍스트 모델도 이미지를 보지 않고 맥락 안에서 점유율 / 추세 / 비교 분석을 계속할 수 있습니다. returnData: false로 끌 수 있습니다.

자체 포함 인터랙티브 HTML

차트는 동시에 .html 파일로 기록됩니다. 브라우저에서 열면 hover / 확대 / 차트 유형 전환 / 색상 조정을 지원합니다.

도구

필드 규칙: 첫 번째 열 = 범주 축; 나머지 열 = 수치 계열(다중 열 = 다중 계열)；chartType: auto는 데이터에 따라 자동으로 파이/바 차트를 선택합니다.

각 클라이언트 연동

자세한 내용은 됐어. Wait "详见" should be "자세한 내용은 mcp/README.md를 참조하세요."

Continue:

자세한 내용은 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.md

License

MIT