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

キー

ダッシュボード → Developer API

ライセンス

MIT


機能

ツール

出力

provchart_generate

Web ページ用の 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