provchart-mcp
provchart-mcp
ProvChart 用 MCP サーバー — エージェントが README / ドキュメント用に純 CSS チャート(HTML + CSS)または SVG を生成します。
Chart.js は不要。描画にクライアント側のチャートランタイムは不要です。ダッシュボードが使うのと同じ JSON を使用します。
npm |
|
API | |
キー | |
ライセンス | MIT |
機能
ツール | 出力 |
| Web ページ用の HTML + CSS |
| Markdown / ドキュメント用の SVG(+ data URI) |
| インジェクション / 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-mcpClaude 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 — 描画には不要です。
環境変数
変数 | 必須 | 説明 |
| はい* | API キー( |
| いいえ | デフォルト |
*またはツール引数で apiKey を渡すことも可能(環境変数を推奨)。
エラー
コード / メッセージ | 意味 |
API キーがありません |
|
| キーが無効または失効しています |
| 割り当て枠を使い切りました(HTML と SVG で共有) |
| プランにこの機能が含まれていません |
プロジェクト構成
provchart-mcp/
package.json
README.md
src/
index.js # MCP stdio server
client.js # ProvChart HTTP helper
tools.js # Tool schemas + handlers関連リンク
ProvChart — プロダクト & ビルダー
ライブデモ — 複数チャートの API バッチ
provchart-runtime — 任意の HTML 拡張
st-core.fscss — オープンな純 CSS ルート
This server cannot be installed
Maintenance
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
- AlicenseAqualityCmaintenanceGenerates Apache ECharts diagrams and charts with AI dynamically, supporting all ECharts features and exporting to png, svg, and option formats.18442263MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to generate safe, runnable HTML chart pages from structured JSON data using Apache ECharts. It provides tools for chart type recommendation, page generation, validation, and patching with controlled, deterministic output.5MIT
- AlicenseAqualityAmaintenanceZero-dependency charts for Python and AI agents. SVG and PNG, 15 chart types, a one-line MCP server, and a Claude skill.411MIT
- AlicenseAqualityBmaintenanceEnables AI agents to create data visualizations like bar charts, line charts, pie charts, scatter plots, and histograms, returning inline SVG or PNG files.5MIT
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…
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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