amCharts 5 MCP Server

Servidor MCP amCharts 5

Um servidor MCP (Model Context Protocol) que oferece a assistentes de IA acesso sob demanda à base de conhecimento completa do amCharts 5: mais de 140 páginas de documentação, mais de 280 exemplos de código e mais de 1.000 referências de API de classes.

Funciona com Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot e qualquer outra ferramenta de IA compatível com MCP.

Por quê?

Em vez de carregar toda a referência do amCharts na janela de contexto da IA, o servidor MCP permite que a IA consulte exatamente o que precisa — uma referência de tipo de gráfico específico, um exemplo de código ou uma consulta de API. Isso significa respostas melhores com menos desperdício de contexto.

Início Rápido

A maneira mais fácil é o servidor hospedado — sem instalação, basta adicionar uma URL. Prefere executá-lo você mesmo? Veja Instalação local abaixo.

Hospedado (sem instalação) — recomendado

Aponte seu cliente de IA para:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — Configurações → Conectores → Adicionar conector personalizado, depois cole 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 com conectores/modo desenvolvedor habilitado) — Configurações → Conectores → Adicionar conector personalizado, depois cole https://mcp.amcharts.com/mcp.

Cline (extensão do VS Code) — abra o painel Servidores MCP → Servidores Remotos, cole https://mcp.amcharts.com/mcp, ou adicione ao seu JSON de configurações MCP:

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

Clientes que suportam apenas servidores locais (stdio) (ex.: Zed, Continue, Amazon Q Developer) — faça a ponte para a URL hospedada com mcp-remote. Use isso como comando de execução do servidor na configuração do cliente:

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

Por exemplo, em uma configuração no estilo command/args:

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

Qualquer outro cliente MCP que aceite uma URL de servidor remoto também funciona — use o endpoint /mcp (HTTP Transmissível) ou /sse (SSE legado). Para clientes que aceitam apenas URL e ainda esperam um comando, use a ponte mcp-remote mostrada acima.

Instalação local (npx)

Prefere executá-lo você mesmo? O servidor também está publicado no npm e roda via stdio.

Claude Code

Para todos os projetos (global, recomendado):

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

Para apenas o projeto atual:

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

Claude Desktop

Adicione ao seu claude_desktop_config.json:

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

Cursor

Crie ou edite .cursor/mcp.json na raiz do seu projeto (ou ~/.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

Crie ou edite .vscode/mcp.json no seu espaço de trabalho:

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

Outras ferramentas compatíveis com MCP

Para qualquer outra ferramenta que suporte MCP (Cline, Continue, Amazon Q, Zed, etc.), configure-a para executar:

npx -y @amcharts/amcharts5-mcp

Executar localmente (para desenvolvimento)

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

Ferramentas Disponíveis

Ferramenta	Descrição
get_core_reference	Obtenha a documentação principal do amCharts 5 — configuração, temas, cores, eventos, armadilhas comuns
get_chart_reference	Obtenha a referência completa para um tipo de gráfico (ex.: "pie", "sankey", "xy")
list_chart_types	Liste todos os tipos de gráficos disponíveis e suas palavras-chave
search_docs	Pesquise a documentação de referência de habilidades por palavra-chave
search_all	Pesquise em tudo — documentos de habilidades, documentação completa e exemplos de código
get_doc	Obtenha uma página completa da documentação (ex.: "charts/xy-chart/axes", "concepts/events")
get_section	Obtenha uma seção específica de um arquivo de referência pelo título
get_quick_start	Obtenha um modelo funcional mínimo para qualquer tipo de gráfico
list_examples	Navegue por todos os 283 exemplos, opcionalmente filtrados por categoria
get_example	Obtenha o código completo de um exemplo específico

Exemplos de Uso

Uma vez conectado, seu assistente de IA pode:

• "Crie um gráfico de pizza para mim" → IA chama get_quick_start("pie") e adapta o modelo
• "Como formatar rótulos de eixo de data?" → IA chama search_all("date axis label format")
• "Mostre-me o exemplo de diagrama Sankey" → IA chama get_example("examples/flow/sankey-diagram")
• "Quais configurações o XYChart suporta?" → IA chama get_doc("reference/xychart")
• "Como faço a integração com React?" → IA chama get_doc("getting-started/integrations/react")
• "Quais tipos de gráficos estão disponíveis?" → IA chama list_chart_types()

Conteúdo

O servidor inclui mais de 1.500 documentos:

• Mais de 140 páginas de documentação — guias de introdução, guias de gráficos, conceitos (temas, eventos, adaptadores, vinculação de dados, animações, acessibilidade, etc.) e guias de integração com frameworks (React, Angular, Vue, Next.js, Svelte e mais)
• Mais de 280 exemplos de código — demonstrações funcionais em 16 categorias, incluindo colunas/barras, linhas/áreas, pizza/rosquinha, mapas, hierarquia, fluxo, radar/polar, ações, medidores, Gantt, linha do tempo e mais
• Mais de 1.000 referências de API de classes — cada classe na biblioteca amCharts 5 com suas configurações, propriedades, métodos, eventos e cadeia de herança
• Referência de habilidades curada — modelos de início rápido e guias específicos de gráficos da Habilidade de IA amCharts 5

Licença

MIT