Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
A Model Context Protocol server for generating charts using AntV.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月13日
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
SettingsDeveloperEdit Config
{
"mcpServers": {
"chart": {
"command": "npx",
"args": [
"-y",
"@antv/mcp-server-chart"
],
"env": {
"VIS_REQUEST_SERVER": "your-value",
"SERVICE_ID": "your-value",
"DISABLED_TOOLS": "your-value"
}
}
}
}キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
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 につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげますが、先に準備が必要です
MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
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-chartEnter の前に「your-value」を自分のキーに書き換えてください
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
MCP Server Chart が一覧にあり、接続済みと表示されれば OK です
MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげますが、先に準備が必要です
MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
MCP Server Chart の設定で VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげますが、先に準備が必要です
MCP Server Chart のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
MCP Server Chart の設定で VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
MCP Server Chart を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が MCP Server Chart を使っていると言うか、回答に MCP Server Chart のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
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-chartClaude 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 envSERVICE_ID 秘密 envDISABLED_TOOLS envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント antvis で確認済みです
コードの最終更新:3 か月前
MITを使用
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック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
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
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.
Now 26+ charts supported.
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.generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.generate_district_map - Generate a district-map, used to show administrative divisions and data distribution.generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.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.generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.generate_path_map - Generate a path-map, used to display route planning results for POIs.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.generate_pin_map - Generate a pin-map, used to show the distribution of POIs.generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.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.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.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.generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.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.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.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.
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.
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.
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
mcp-server-chart --transport streamable
Then you can access the server at:
http://localhost:1122/ssehttp://localhost:1122/mcpEnter the docker directory.
cd docker
Deploy using docker-compose.
docker compose up -d
Then you can access the server at:
http://localhost:1123/ssehttp://localhost:1122/mcpYou 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:
| Variable | Description | Default | Example |
|---|---|---|---|
VIS_REQUEST_SERVER | Custom chart generation service URL for private deployment | https://antv-studio.alipay.com/api/gpt-vis | https://your-server.com/api/chart |
SERVICE_ID | Service identifier for chart generation records | - | your-service-id-123 |
DISABLED_TOOLS | Comma-separated list of tool names to disable | - | generate_fishbone_diagram,generate_mind_map |
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.
POSTGPT-Vis-SSR for rendering. Such as, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.boolean Whether generate chart image successfully.string The chart image url.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.
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