Mcp Chart Server

MCP Chart Server

包括的なチャート生成機能を提供する Model Context Protocol（MCP）サーバーです。このサーバーでは、型安全なチャート設定のために包括的な Zod スキーマ検証を備えた、幅広い種類のチャートを利用できます。

Claude.AI との連携（無料実行版）

ローカルでセットアップせずに Claude.AI ですぐに利用するには、次の公開エンドポイントを使用してください。

• Streamable HTTP: https://chart.mcp.cloudcertainty.com/mcp
• Server-Sent Events: https://chart.mcp.cloudcertainty.com/sse

いずれかのエンドポイントを Claude.AI の MCP 設定に追加するだけで、すぐにチャートを生成できます。

特長

• 🎯 15 種類以上のチャート - 主要な可視化ニーズを網羅した包括的なチャートライブラリ
• 🔒 型安全性 - すべてのチャート設定に対する完全な Zod スキーマ検証
• 🌐 複数のデプロイ方法 - ローカルサーバー、HTTP ストリーミング、SSE エンドポイント
• 🚀 Claude.AI との連携 - Claude.AI 連携用のすぐに使えるエンドポイント
• 📊 プロフェッショナルなチャート - 金融、統計、ビジネスの可視化に対応

対応するチャートの種類

基本的なチャート

• 棒グラフ - 複数のデータセットに対応する従来型の棒グラフ
• 折れ線グラフ - スタイルや塗りつぶしオプションをカスタマイズできる折れ線グラフ
• 円グラフ - ホバーエフェクトと色のカスタマイズに対応する円グラフ
• レーダーチャート - 比較分析向けの多軸レーダーチャート
• 極域面積グラフ - 周期データ向けの放射状面積グラフ

高度なチャート

• ドーナツチャート - 中央ラベルと半円表示に対応した拡張円グラフ
• 散布図 - トレンドラインを任意で追加できる X/Y 座標プロット
• バブルチャート - バブルのサイズで表現する三次元データの可視化
• OHLC チャート - 出来高とインジケーターに対応する金融用ローソク足チャート

特殊なチャート

• バイオリンプロット - 統計的分布の可視化
• ゲージチャート - 閾値を設定できるカスタマイズ可能なゲージメーター
• ラジアルゲージ - シンプルな放射状の進捗インジケーター
• プログレスバー - 線形の進捗インジケーター
• スパークライン - 最小限のトレンド可視化
• サンキーダイアグラム - フローとプロセスの可視化

クイックスタート

ローカル開発

1. リポジトリをクローンする

   git clone https://github.com/KamranBiglari/mcp-server-chart.git
   cd mcp-server-chart
   

2. 依存関係をインストールする

   npm install
   

3. プロジェクトをビルドする

   npm run build
   

4. サーバーを実行する

   npm start
   

使用例

基本的な棒グラフ

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March", "April", "May"],
    "datasets": [
      { "label": "Sales", "data": [50, 60, 70, 180, 190] },
      { "label": "Expenses", "data": [100, 200, 300, 400, 500] }
    ]
  }
}

金融用 OHLC チャート

{
  "type": "ohlc",
  "data": {
    "datasets": [
      {
        "label": "MSFT",
        "data": [
          {"x": 1459468800000, "o": 18.23, "h": 19.36, "l": 18.18, "c": 19.31}
        ],
        "color": {"up": "#26a69a", "down": "#ef5350", "unchanged": "#999"}
      }
    ]
  }
}

高度なドーナツチャート

{
  "type": "doughnut",
  "data": {
    "labels": ["Complete", "Remaining"],
    "datasets": [{"data": [75, 25], "backgroundColor": ["#4CAF50", "#E0E0E0"]}]
  },
  "options": {
    "circumference": 3.14159,
    "rotation": 3.14159,
    "plugins": {
      "doughnutlabel": {
        "labels": [{"text": "75%", "font": {"size": 24}}]
      }
    }
  }
}

散布図

{
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [
          {"x": 2, "y": 4},
          {"x": 3, "y": 3},
          {"x": 5, "y": 8}
        ]
      }
    ]
  }
}

設定

MCP クライアントの設定

MCP クライアントの設定に追加してください。

{
  "mcpServers": {
    "chart-server": {
      "command": "node",
      "args": ["path/to/mcp-server-chart/dist/index.js"]
    }
  }
}

Claude.AI の設定

Claude.AI と連携するには、次のいずれかのエンドポイントを追加してください。

{
  "mcpServers": {
    "chart-server": {
      "url": "https://chart.mcp.cloudcertainty.com/mcp"
    }
  }
}

開発

プロジェクト構成

src/
├── charts/           # Chart type definitions
│   ├── bar.ts       # Bar chart schema
│   ├── line.ts      # Line chart schema
│   ├── ohlc.ts      # OHLC chart schema
│   └── ...          # Other chart types
├── utils/           # Utility functions
│   ├── index.ts     # Zod to JSON schema conversion
│   └── schema.ts    # Common schema definitions
└── index.ts         # Main MCP server

ビルド

npm run build      # Build TypeScript
npm run dev        # Development mode with watch
npm run lint       # Run linting

テスト

npm test           # Run test suite
npm run test:watch # Watch mode testing

チャートの種類のリファレンス

チャートの種類	用途	データ形式
bar	カテゴリ間の比較	{labels: string[], datasets: {data: number[]}[]}
line	時系列の傾向	{labels: string[], datasets: {data: number[]}[]}
pie	全体に対する各部分の割合	{labels: string[], datasets: {data: number[]}[]}
doughnut	拡張円グラフ	{labels: string[], datasets: {data: number[]}[]}
radar	複数変数の比較	{labels: string[], datasets: {data: number[]}[]}
polarArea	周期データ	{labels: string[], datasets: {data: number[]}[]}
scatter	相関分析	{datasets: {data: {x: number, y: number}[]}[]}
bubble	三次元データ	{datasets: {data: {x: number, y: number, r: number}[]}[]}
ohlc	金融データ	{datasets: {data: {x: number, o: number, h: number, l: number, c: number}[]}[]}
violin	統計的分布	{labels: string[], datasets: {data: number[][]}[]}
gauge	KPI ダッシュボード	{datasets: {value: number, data: number[]}[]}
sankey	プロセスフロー	{datasets: {data: {from: string, to: string, flow: number}[]}[]}

API リファレンス

利用可能なツール

すべてのグラフタイプは、次のパターンで MCP ツールとして利用できます。

• ツール名はグラフタイプと一致します（例：bar、line、ohlc）
• 入力スキーマがグラフの設定を検証します
• 生成されたグラフデータを返します

スキーマ検証

すべてのグラフタイプには、次の項目を検証する包括的な Zod スキーマが含まれています。

• グラフの種類と構造
• データ形式と型
• スタイル設定
• グラフ固有の設定

コントリビューション

1. リポジトリをフォークします
2. 機能ブランチを作成します
3. グラフタイプまたは改善を追加します
4. テストとドキュメントを含めます
5. プルリクエストを送信します

ライセンス

MIT ライセンス - 詳細は LICENSE ファイルをご覧ください

サポート

• 📚 ドキュメント：インラインのスキーマドキュメントをご確認ください
• 🐛 問題：GitHub Issues からバグを報告してください
• 💬 ディスカッション：質問には GitHub Discussions をご利用ください
• 🌐 ライブデモ：Claude.AI で公開エンドポイントをお試しください

ロードマップ

• リアルタイムのデータバインディング
• カスタムテーマのサポート
• エクスポート形式（PNG、SVG、PDF）
• アニメーションとインタラクションのオプション
• ダッシュボードのレイアウト構成