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.
Elige la app de IA que usas y copia la configuración.
Pasó 3/3 revisiones · Funciona en tu computadora · ✓ Comandos revisados el 13 nov 2026
Primero: ¿qué IA usas?
Elige tu app y los pasos aparecen abajo.
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
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"
}
}
}
}Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa MCP Server Chart y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude dice que está usando MCP Server Chart o muestra una herramienta de MCP Server Chart en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
ChatGPT todavía no puede conectar MCP Server Chart
MCP Server Chart se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web
A · Usa una app que pueda conectar MCP Server Chart
B · Otros en Diseño, imágenes y audio que funcionan con ChatGPT
Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave
Funciona con Claude Code, pero hay que preparar algo antes
Necesitas una clave de MCP Server Chart (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre 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-chartCambia “your-value” por tu clave antes de pulsar Enter
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Deberías ver MCP Server Chart en la lista como conectado
Usa MCP Server Chart y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude Code dice que está usando MCP Server Chart o muestra una herramienta de MCP Server Chart en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con Cursor, pero hay que preparar algo antes
Necesitas una clave de MCP Server Chart (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
En la configuración de MCP Server Chart, VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa MCP Server Chart y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Cursor dice que está usando MCP Server Chart o muestra una herramienta de MCP Server Chart en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con VS Code, pero hay que preparar algo antes
Necesitas una clave de MCP Server Chart (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Cómo obtener la clave está en el README del autor, más abajo
En la configuración de MCP Server Chart, VIS_REQUEST_SERVER, SERVICE_ID, DISABLED_TOOLS está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa MCP Server Chart y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si VS Code dice que está usando MCP Server Chart o muestra una herramienta de MCP Server Chart en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps
Ver todas las apps que usan MCP →
La configuración JSON está en “Para desarrolladores”, abajo
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 secreto envDISABLED_TOOLS envEsta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.
Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.
Se ejecutan en tu computadora en
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.
Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 13 nov 2026
El nombre en el registro se verificó con la cuenta de GitHub antvis, dueña del repo
Último cambio de código: hace 3 meses
Usa MIT
Este se ejecuta en tu computadora; no hay endpoint en internet
Se ejecuta en tu computadora y usa ajustes locales en su lugar
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet
Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.
Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.
Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.
Aún no hay reseñas
Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.
Superó 3 de 3 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.
Debes completar: SERVICE_ID
Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).
El repo de GitHub cambió por última vez hace 3 meses, y la última versión (1.0.0) llegó al registro hace 14 meses.
Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.
En la misma categoría: Figma Context MCP, AutoClip, Next AI Draw.io
Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.
Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.
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