Skip to main content
Glama
Figsh
by Figsh

provchart-mcp

ProvChart용 MCP 서버 — 에이전트가 README/문서용 순수 CSS 차트(HTML + CSS) 또는 SVG를 생성합니다.

Chart.js가 필요 없습니다. 렌더링에 클라이언트 차트 런타임이 필요하지 않습니다. 대시보드가 사용하는 것과 동일한 JSON을 사용합니다.

npm

provchart-mcp (준비되면 게시)

API

chart.devtem.org/docs

대시보드 → 개발자 API

라이선스

MIT


기능

도구

출력

provchart_generate

웹 페이지용 HTML + CSS

provchart_generate_svg

Markdown / 문서용 SVG (+ data URI)

provchart_explain

주입 / SVG / 런타임 / 오류에 대한 간단한 메모 (API 호출 없음)

에이전트는 Chart.js 스니펫을 직접 만들지 않고 이 도구들을 호출합니다.


Related MCP server: ECharts ChartPage MCP Server

요구 사항

  • Node.js 18+ (기본 fetch 지원)

  • ProvChart API 키 — 무료 가입 계정에는 월간 제한 테스트 생성이 포함됩니다

export PROVCHART_API_KEY=pc_live_xxxxxxxx

실제 키를 커밋하지 마세요. 환경 변수 또는 MCP env 구성을 사용하세요.


설치 및 실행

소스에서 (이 저장소)

cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.js

이 프로세스는 stdio를 통한 MCP로 통신합니다 (클라이언트가 연결할 때까지 대기).

게시 후

npx -y provchart-mcp

Claude Desktop

claude_desktop_config.json을 편집하세요:

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

또는 npx 사용 (게시 후):

{
  "mcpServers": {
    "provchart": {
      "command": "npx",
      "args": ["-y", "provchart-mcp"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

저장 후 Claude Desktop을 다시 시작하세요.


Cursor

mcp.json (프로젝트 또는 전역):

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

예시 프롬프트

  • provchart_generate를 사용하여 미드나이트 테마 영역 차트 생성: 트래픽 vs 가입자, 월~일.

  • GitHub README용 p50/p95 지연 시간 SVG 라인 차트 생성.

  • 차트 라이브러리 없이 ProvChart HTML/CSS를 주입하는 방법 설명.

예시 도구 인자 (provchart_generate)

{
  "type": "area",
  "theme": "midnight",
  "series": [
    { "name": "Traffic", "color": "#4fd8c4", "points": [30, 45, 40, 60, 55, 70, 65] },
    { "name": "Signups", "color": "#f0a860", "points": [8, 12, 11, 18, 16, 22, 20] }
  ],
  "axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}

반환된 CSS를 <style> 태그에, HTML을 컨테이너에 주입하세요. 선택 사항: 툴팁용 provchart-runtime렌더링에는 필요하지 않습니다.


환경 변수

변수

필수

설명

PROVCHART_API_KEY

*

API 키 (X-API-Key)

PROVCHART_API_BASE

아니요

기본값 https://provchart-api.devtem.org

*또는 도구 인자에 apiKey를 전달하세요 (환경 변수 권장).


오류

코드 / 메시지

의미

API 키 누락

PROVCHART_API_KEY 설정

INVALID_API_KEY

잘못되었거나 폐기된 키

MONTHLY_LIMIT_REACHED

할당량 소진 (HTML + SVG가 풀을 공유)

SUBSCRIPTION_REQUIRED

요금제에 이 기능이 포함되지 않음


프로젝트 구조

provchart-mcp/
  package.json
  README.md
  src/
    index.js    # MCP stdio server
    client.js   # ProvChart HTTP helper
    tools.js    # Tool schemas + handlers

관련 링크


A
license - permissive license
Not graded
quality - not tested
B
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • Diagrams, badges, charts and QR codes as plain image URLs you can paste into Markdown.

  • Renders interactive Chart.js charts and dashboards inline in AI conversations.

  • Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Figsh/provchart-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server