プロトタイプ · プレビュー版:公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。Google でログインするとレビューを書けます。プロトタイプ · 30分ごとに更新
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説

MCP Server Chart

作者:antvisバージョン 1.0.0i★ 4,417iパソコンで動く
レジストリ名io.github.antvis/mcp-server-chart

インストール方法

What it does

A Model Context Protocol server for generating charts using AntV.

  • Connects パソコンで動く
  • Account or key Needs SERVICE_ID
  • Category デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 3/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月13日

まず:どの AI を使っていますか?

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげますが、先に準備が必要です

MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ) · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません

  1. Node.js を入れる

    1 回だけ。Node.js が必要なすべてのサーバーで使えます

    Node.js のダウンロードページを開く ↗

  2. MCP Server Chart に登録してキーを作る

    提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。

    キーの取り方は下の提供元 README にあります

  3. パソコン版 Claude アプリの設定ファイルを開く

    SettingsDeveloperEdit Config

  4. この設定を貼り付けて保存

    {
      "mcpServers": {
        "chart": {
          "command": "npx",
          "args": [
            "-y",
            "@antv/mcp-server-chart"
          ],
          "env": {
            "VIS_REQUEST_SERVER": "your-value",
            "SERVICE_ID": "your-value",
            "DISABLED_TOOLS": "your-value"
          }
        }
      }
    }

    キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください

  5. Claude を終了してもう一度開く

  6. 試してみる

    MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて

    ✓ Claude が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です

メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT はまだ MCP Server Chart につなげません

MCP Server Chart はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません

代わりにできること

A · MCP Server Chart につなげるアプリを使う

  • MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ) · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません
  • MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
  • MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
  • MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)

B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー

同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました

Claude Code につなげますが、先に準備が必要です

MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)

  1. Node.js を入れる

    1 回だけ。Node.js が必要なすべてのサーバーで使えます

    Node.js のダウンロードページを開く ↗

  2. MCP Server Chart に登録してキーを作る

    提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。

    キーの取り方は下の提供元 README にあります

  3. ターミナルを開く

    Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く

  4. このコマンドを貼り付けて Enter

    claude mcp add --scope user chart --env VIS_REQUEST_SERVER=your-value --env SERVICE_ID=your-value --env DISABLED_TOOLS=your-value -- npx -y @antv/mcp-server-chart

    Enter の前に「your-value」を自分のキーに書き換えてください

    キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください

  5. Claude Code で /mcp と入力

    MCP Server Chart が一覧にあり、接続済みと表示されれば OK です

  6. 試してみる

    MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて

    ✓ Claude Code が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です

メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげますが、先に準備が必要です

MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)

  1. Node.js を入れる

    1 回だけ。Node.js が必要なすべてのサーバーで使えます

    Node.js のダウンロードページを開く ↗

  2. MCP Server Chart に登録してキーを作る

    提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。

    キーの取り方は下の提供元 README にあります

  3. このボタンで Cursor を開く

    Cursor で開く

    Cursor がインストールの確認をするので Install を押します

  4. キーを入力

    MCP Server Chart の設定で VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS が空です。自分のキーを入れて保存します

    キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください

  5. Cursor の AI チャットを Agent モードで開く

  6. 試してみる

    MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて

    ✓ Cursor が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です

メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげますが、先に準備が必要です

MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)

  1. Node.js を入れる

    1 回だけ。Node.js が必要なすべてのサーバーで使えます

    Node.js のダウンロードページを開く ↗

  2. MCP Server Chart に登録してキーを作る

    提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。

    キーの取り方は下の提供元 README にあります

  3. このボタンで VS Code を開く

    VS Code で開く

    VS Code がインストールの確認をするので Install を押します

  4. キーを入力

    MCP Server Chart の設定で VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS が空です。自分のキーを入れて保存します

    キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください

  5. VS Code の AI チャットを Agent モードで開く

  6. 試してみる

    MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて

    ✓ VS Code が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です

メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

JSON 設定は下の「開発者向け」にあります

つまずいたら?MCP Server Chart を使っている人に聞いてみましょう💬 ディスカッション →
開発者向け:ターミナルのコマンドと JSON 設定

パソコンにインストール

Claude Code

claude mcp add --scope user chart --env VIS_REQUEST_SERVER=your-value --env SERVICE_ID=your-value --env DISABLED_TOOLS=your-value -- npx -y @antv/mcp-server-chart

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "VIS_REQUEST_SERVER": "your-value",
        "SERVICE_ID": "your-value",
        "DISABLED_TOOLS": "your-value"
      }
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "VIS_REQUEST_SERVER": "your-value",
        "SERVICE_ID": "your-value",
        "DISABLED_TOOLS": "your-value"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "chart": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "VIS_REQUEST_SERVER": "your-value",
        "SERVICE_ID": "your-value",
        "DISABLED_TOOLS": "your-value"
      }
    }
  }
}

自分で入力する値

  • VIS_REQUEST_SERVER env
    Custom chart generation service URL for private deployment
  • SERVICE_ID 秘密 env
    Service identifier for chart generation records
  • DISABLED_TOOLS env
    Comma-separated list of tool names to disable

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

週あたりのダウンロードi
6,900/週
接続方法
パソコンで動く
最新バージョンi
1.0.0
レジストリ公開日i
2025年9月15日
コードの最終更新i
2026年8月27日
作者
antvis
パッケージ
npm: @antv/mcp-server-chart
レジストリでの状態
有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

パソコン上で動かせるアプリ

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast

すべてのアプリと長所・短所 →

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名は、リポジトリを所有するGitHubアカウント antvis で確認済みです

  • ✓ 合格

    今もメンテナンスされている

    コードの最終更新:3 か月前

  • ✓ 合格

    ライセンスがある

    MITを使用

  • – 対象外

    エンドポイントが応答する

    これはパソコンで動くため、インターネット上のエンドポイントはありません

  • – 対象外

    OAuthでサインイン

    パソコンで動き、代わりにローカルの設定を使います

  • … 未チェック

    ツールの説明に隠れた指示がない

    パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

Google でログインして投稿

ユーザーレビュー

まだレビューはありません

Google でログインしてレビューを書く

デザイン・画像・音声のほかのサーバーとの比較i

  • このカテゴリのほかの3035件のうち99%よりスターが多い
  • このカテゴリのほかの3035件のうち0%より最近レジストリに公開
  • 基本チェックの結果が、このカテゴリのほかの3035件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

MCP Server Chartは安全ですか?

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか?

入力が必要なもの:SERVICE_ID

パソコンで動きますか、それともクラウドですか?

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。

今もメンテナンスされていますか?

GitHubリポジトリの最終更新は3 か月前、最新バージョン(1.0.0)がレジストリに届いたのは14 か月前です。

どのアプリで使えますか?

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは?

同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io

同じカテゴリのほかの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

作者:GLips広く使われている↓ 15.2万/週★ 1.6万5 か月前更新

パソコンで動く

AutoClip

Clip long videos into short clips with covers and captions. Local CLI and MCP.

作者:zhouxiaoka広く使われている↓ 205/週★ 1万17 日前更新

パソコンで動く

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

作者:DayuanJiang広く使われている↓ 2.2万/週★ 3.7万 リポジトリ全体のスター昨日更新

パソコンで動く

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

MCP Server Chart

A Model Context Protocol server for generating charts using AntV. We can use this mcp server for _chart generation_ and _data analysis_.

This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools. You can also use it in Dify.

📋 Table of Contents

  • ✨ Features
  • 🤖 Usage
  • 🎨 Skill Usage
  • 🚰 Run with SSE or Streamable transport
  • 🎮 CLI Options
  • ⚙️ Environment Variables
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
  • 📠 Private Deployment
  • 🗺️ Generate Records
  • 🎛️ Tool Filtering
  • 🔨 Development
  • 📄 License

✨ Features

Now 26+ charts supported.

  1. generate_area_chart: Generate an area chart, used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.
  2. generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.
  3. generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.
  4. generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.
  5. generate_district_map - Generate a district-map, used to show administrative divisions and data distribution.
  6. generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.
  7. generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.
  8. generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.
  9. generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.
  10. generate_histogram_chart: Generate a histogram, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.
  11. generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.
  12. generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.
  13. generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.
  14. generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.
  15. generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.
  16. generate_path_map - Generate a path-map, used to display route planning results for POIs.
  17. generate_pie_chart: Generate a pie chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.
  18. generate_pin_map - Generate a pin-map, used to show the distribution of POIs.
  19. generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.
  20. generate_sankey_chart: Generate a sankey chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.
  21. generate_scatter_chart: Generate a scatter plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.
  22. generate_treemap_chart: Generate a treemap, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.
  23. generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.
  24. generate_violin_chart: Generate a violin plot, used to display the distribution of data, combining features of boxplots and density plots to provide a more detailed view of the data distribution.
  25. generate_word_cloud_chart: Generate a word-cloud, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.
  26. generate_spreadsheet: Generate a spreadsheet or pivot table for displaying tabular data. When 'rows' or 'values' fields are provided, it renders as a pivot table (cross-tabulation); otherwise, it renders as a regular table.

[!NOTE]

The above geographic visualization chart generation tool uses AMap service and currently only supports map generation within China.

🤖 Usage

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, Cursor, and so on, add the MCP server config below. On Mac system:

{

"mcpServers": { "mcp-server-chart": { "command": "npx", "args": ["-y", "@antv/mcp-server-chart"] } } }

On Window system:

{

"mcpServers": { "mcp-server-chart": { "command": "cmd", "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"] } } }

Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.

🎨 Skill Usage

If you are using an AI IDE with skill support (like Claude Code), you can use the chart-visualization skill to automatically select the best chart type and generate visualizations.

You can add the skill from https://github.com/antvis/chart-visualization-skills using:

npx skills add antvis/chart-visualization-skills

Then provide your data or describe the visualization you want. The skill will intelligently choose from 25+ chart types and generate the chart for you.

🚰 Run with SSE or Streamable transport

Run directly

Install the package globally.

npm install -g @antv/mcp-server-chart

Run the server with your preferred transport option:

# For SSE transport (default endpoint: /sse)

mcp-server-chart --transport sse

For Streamable transport with custom endpoint

mcp-server-chart --transport streamable

Then you can access the server at:

  • SSE transport: http://localhost:1122/sse
  • Streamable transport: http://localhost:1122/mcp
Docker deploy

Enter the docker directory.

cd docker

Deploy using docker-compose.

docker compose up -d

Then you can access the server at:

  • SSE transport: http://localhost:1123/sse
  • Streamable transport: http://localhost:1122/mcp

🎮 CLI Options

You can also use the following CLI options when running the MCP server. Command options by run cli with -H.

MCP Server Chart CLI

Options: --transport, -t Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio") --host, -h Specify the host for SSE or streamable transport (default: localhost) --port, -p Specify the port for SSE or streamable transport (default: 1122) --endpoint, -e Specify the endpoint for the transport:

  • For SSE: default is "/sse"
  • For streamable: default is "/mcp" --help, -H Show this help message

⚙️ Environment Variables

VariableDescriptionDefaultExample
VIS_REQUEST_SERVERCustom chart generation service URL for private deploymenthttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_IDService identifier for chart generation records-your-service-id-123
DISABLED_TOOLSComma-separated list of tool names to disable-generate_fishbone_diagram,generate_mind_map
📠 Private Deployment

MCP Server Chart provides a free chart generation service by default. For users with a need for private deployment, they can try using VIS_REQUEST_SERVER to customize their own chart generation service.

{

"mcpServers": { "mcp-server-chart": { "command": "npx", "args": ["-y", "@antv/mcp-server-chart"], "env": { "VIS_REQUEST_SERVER": " " } } } }

You can use AntV's project GPT-Vis-SSR to deploy an HTTP service in a private environment, and then pass the URL address through env VIS_REQUEST_SERVER.

  • Method: POST
  • Parameter: Which will be passed to GPT-Vis-SSR for rendering. Such as, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
  • Return: The return object of HTTP service.
  • success: boolean Whether generate chart image successfully.
  • resultObj: string The chart image url.
  • errorMessage: string When success = false, return the error message.

[!NOTE]

The private deployment solution currently does not support geographic visualization chart generation include 3 tools: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Generate Records

By default, users are required to save the results themselves, but we also provide a service for viewing the chart generation records, which requires users to generate a service identifier for themselves and configure it.

Use Alipay to scan and open the mini program to generate a personal service identifier (click the "My" menu below, enter the "My Services" page, click the "Generate" butto

冒頭だけを表示しています。続きはリポジトリで読めます