amCharts 5 MCP Server

Servidor MCP de amCharts 5

Un servidor MCP (Protocolo de Contexto de Modelo) que brinda a los asistentes de IA acceso bajo demanda a la base de conocimiento completa de amCharts 5: más de 140 páginas de documentación, más de 280 ejemplos de código y más de 1,000 referencias de API de clases.

Funciona con Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot y cualquier otra herramienta de IA compatible con MCP.

¿Por qué?

En lugar de cargar toda la referencia de amCharts en la ventana de contexto de la IA, el servidor MCP permite que la IA consulte exactamente lo que necesita: una referencia de tipo de gráfico específico, un ejemplo de código o una consulta de API. Esto significa mejores respuestas con menos desperdicio de contexto.

Inicio Rápido

La forma más fácil es el servidor alojado: sin instalación, solo agregue una URL. ¿Prefiere ejecutarlo usted mismo? Consulte Instalación local a continuación.

Alojado (sin instalación) — recomendado

Dirija su cliente de IA a:

https://mcp.amcharts.com/mcp

Claude Code

claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp

Claude Desktop / claude.ai — Configuración → Conectores → Agregar conector personalizado, luego pegue https://mcp.amcharts.com/mcp.

Cursor — .cursor/mcp.json:

{
  "mcpServers": {
    "amcharts5": {
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

VS Code + GitHub Copilot — .vscode/mcp.json:

{
  "servers": {
    "amcharts5": {
      "type": "http",
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

Windsurf — ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "amcharts5": {
      "serverUrl": "https://mcp.amcharts.com/mcp"
    }
  }
}

ChatGPT (Plus/Pro/Enterprise con conectores/modo desarrollador habilitado) — Configuración → Conectores → Agregar conector personalizado, luego pegue https://mcp.amcharts.com/mcp.

Cline (extensión de VS Code) — abra el panel Servidores MCP → Servidores Remotos, pegue https://mcp.amcharts.com/mcp, o agréguelo a su JSON de configuración MCP:

{
  "mcpServers": {
    "amcharts5": {
      "type": "streamableHttp",
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

Clientes que solo soportan servidores locales (stdio) (ej. Zed, Continue, Amazon Q Developer) — conecte a la URL alojada con mcp-remote. Use esto como el comando de ejecución del servidor en la configuración del cliente:

npx mcp-remote https://mcp.amcharts.com/mcp

Por ejemplo, en una configuración estilo command/args:

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.amcharts.com/mcp"]
    }
  }
}

Cualquier otro cliente MCP que acepte una URL de servidor remoto también funciona — use el endpoint /mcp (HTTP Transmisible) o /sse (SSE heredado). Para clientes que solo aceptan URL pero aún esperan un comando, use el puente mcp-remote mostrado arriba.

Instalación local (npx)

¿Prefiere ejecutarlo usted mismo? El servidor también está publicado en npm y se ejecuta sobre stdio.

Claude Code

Para todos los proyectos (global, recomendado):

claude mcp add -s user amcharts5 -- npx -y @amcharts/amcharts5-mcp

Para solo el proyecto actual:

claude mcp add amcharts5 -- npx -y @amcharts/amcharts5-mcp

Claude Desktop

Agregue a su claude_desktop_config.json:

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Cursor

Cree o edite .cursor/mcp.json en la raíz de su proyecto (o ~/.cursor/mcp.json para global):

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Windsurf

Edite ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

VS Code + GitHub Copilot

Cree o edite .vscode/mcp.json en su espacio de trabajo:

{
  "servers": {
    "amcharts5": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Otras herramientas compatibles con MCP

Para cualquier otra herramienta que soporte MCP (Cline, Continue, Amazon Q, Zed, etc.), configúrela para ejecutar:

npx -y @amcharts/amcharts5-mcp

Ejecutar localmente (para desarrollo)

git clone https://github.com/amcharts/amcharts5-mcp.git
cd amcharts5-mcp
npm install
npm start

Herramientas Disponibles

Herramienta	Descripción
get_core_reference	Obtener documentación principal de amCharts 5 — configuración, temas, colores, eventos, errores comunes
get_chart_reference	Obtener referencia completa para un tipo de gráfico (ej. "pie", "sankey", "xy")
list_chart_types	Listar todos los tipos de gráficos disponibles y sus palabras clave
search_docs	Buscar en los documentos de referencia de habilidades por palabra clave
search_all	Buscar en todo — documentos de habilidades, documentación completa y ejemplos de código
get_doc	Obtener una página de documentación completa (ej. "charts/xy-chart/axes", "concepts/events")
get_section	Obtener una sección específica de un archivo de referencia por encabezado
get_quick_start	Obtener una plantilla mínima funcional para cualquier tipo de gráfico
list_examples	Explorar los 283 ejemplos, opcionalmente filtrados por categoría
get_example	Obtener el código completo de un ejemplo específico

Ejemplo de Uso

Una vez conectado, su asistente de IA puede:

• "Constrúyeme un gráfico circular" → La IA llama a get_quick_start("pie") y adapta la plantilla
• "¿Cómo formateo las etiquetas del eje de fechas?" → La IA llama a search_all("date axis label format")
• "Muéstrame el ejemplo del diagrama de Sankey" → La IA llama a get_example("examples/flow/sankey-diagram")
• "¿Qué configuraciones soporta XYChart?" → La IA llama a get_doc("reference/xychart")
• "¿Cómo me integro con React?" → La IA llama a get_doc("getting-started/integrations/react")
• "¿Qué tipos de gráficos están disponibles?" → La IA llama a list_chart_types()

Contenido

El servidor incluye más de 1,500 documentos:

• Más de 140 páginas de documentación — introducción, guías de gráficos, conceptos (temas, eventos, adaptadores, enlace de datos, animaciones, accesibilidad, etc.) y guías de integración con frameworks (React, Angular, Vue, Next.js, Svelte y más)
• Más de 280 ejemplos de código — demostraciones funcionales en 16 categorías que incluyen columnas/barras, líneas/áreas, circular/donut, mapas, jerarquía, flujo, radar/polar, bolsa, medidores, Gantt, línea de tiempo y más
• Más de 1,000 referencias de API de clases — cada clase en la biblioteca amCharts 5 con sus configuraciones, propiedades, métodos, eventos y cadena de herencia
• Referencia de habilidades curada — plantillas de inicio rápido y guías específicas de gráficos de la Habilidad de IA de amCharts 5

Licencia

MIT