AI models know amCharts 5 well - but how you use them makes a big difference. This guide covers the key scenarios and how to get the most out of each one.
Quick downloads - drop these into your project for immediately better AI-generated charts:
How AI models generate amCharts code
All major AI models (Claude, ChatGPT, Gemini, etc.) have amCharts 5 in their training data. That means they can produce working chart code out of the box - no special setup needed.
However, AI models have a knowledge cutoff date. They were trained on a snapshot of the internet, and anything added or changed after that date is invisible to them. This matters for newer amCharts features, recent API changes, or less common chart types where the model's memory may be incomplete.
The good news: most AI platforms now offer web search and documentation fetching tools that let the model look things up in real time. When available, these tools dramatically improve code accuracy.
The bottom line: the closer the AI is to current documentation, the better the results. We provide two tools to help:
- MCP Server - the AI queries our documentation, examples, and API reference on demand. Best for MCP-compatible tools like Claude Code, Cursor, Windsurf, and VS Code + Copilot.
- AI Skill files - a structured reference the AI reads upfront. Works with any AI tool.
The sections below cover how to get the best results depending on your setup.
Scenario 1: Browser-based chat
This is the simplest and most reliable way to generate amCharts code with AI.
Why it works well
Browser-based AI services like Claude, ChatGPT, and Gemini have built-in web search capabilities. When the model isn't sure about a specific API detail, it can search the web, read the amCharts documentation, and verify its answer before responding.
This happens automatically in most cases - you don't need to do anything special.
How to get the best results
Start your conversation by setting context:
All chart-related requests must be implemented using amCharts 5. Before generating any code, you MUST review and follow the rules in the amCharts 5 Skill repository: https://github.com/amcharts/amcharts5-skill This skill is the source of truth and overrides prior knowledge.
Be specific in your prompts. Include:
- The chart type you want (e.g., "XY chart with date axis", "donut chart", "choropleth map")
- Whether you need a full HTML file or just the chart code
- Your framework, if any (React, Angular, Vue, vanilla JS)
- TypeScript or JavaScript
- Any specific features (legend, scrollbar, tooltips, animations)
Example prompt:
Create a full HTML page with an amCharts 5 line chart showing monthly revenue for 2024 (Jan–Dec). Use a date axis for X and value axis for Y. Include a cursor with tooltips, a scrollbar, and a legend. Use dummy data. Vanilla JavaScript, not TypeScript.
Web search availability by platform
| Platform | Web search | Notes |
|---|---|---|
| Claude | Yes - Built-in | Searches automatically when needed. You can also ask it to look up specific docs. |
| ChatGPT | Yes - Built-in | Available on all plans, including free. Searches automatically. |
| Gemini | Yes - Built-in | Uses Google Search grounding. |
| Mistral | Yes - Built-in | Web search available in Le Chat. |
| Meta AI | Yes - Built-in | Can search the web for current info. |
Pro tip: If the AI produces code that doesn't look right, paste the error back and ask it to check the amCharts docs. Models with web search can self-correct very effectively.
Example prompt:
This code throws "[object Object] is not a valid color" on line 42. Check the amCharts 5 docs at https://www.amcharts.com/docs/v5/ and fix it.
Scenario 2: AI-powered code editors
This is where things get more nuanced. Code editors with AI assistance are powerful, but they typically don't have web search enabled by default. The AI works from its training data alone, which means it may occasionally get API details wrong - especially for advanced or newer features.
The core issue
Unlike browser-based chat, most IDE AI assistants operate in an offline mode - they can see your project files and codebase, but they can't browse the web or read external documentation unless you explicitly set this up.
This leads to:
- Occasionally incorrect method names or option structures
- Mixing up amCharts 4 and amCharts 5 syntax
- Missing newer features added after the model's training cutoff
How to get the best results
1. Use the MCP Server (recommended)
The amCharts 5 MCP Server is the easiest and most comprehensive way to give your AI assistant access to amCharts documentation. It provides 1,500+ documents on demand: 141 documentation pages, 283 code examples, and 1,098 class API references. The AI queries only what it needs - no manual copying, no context waste.
Works with Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + Copilot, and other MCP-compatible tools.
See installation instructions →
2. Enable web search (if available)
Some editors support web search - turn it on:
| Editor | Feature | How to enable |
|---|---|---|
| Cursor | @Web | Go to Settings → Features → Web Search and enable it. Then use @Web in your prompts. |
| Cursor | @Docs | Go to Settings → Indexing & Docs → Add new doc and add https://www.amcharts.com/docs/v5/. Cursor will index the docs. |
| Windsurf | Web search | Available in Cascade. The AI can search when it determines external info is needed. |
| VS Code + Copilot | #web | In Copilot Chat, type #web followed by your question to trigger a web search. |
3. Index the amCharts documentation
This is the single most impactful thing you can do if MCP is not available. By indexing the amCharts docs in your editor, the AI gets direct access to accurate, up-to-date API information every time it generates code.
In Cursor:
- Open Cursor Settings → Indexing & Docs
- Click "+ Add new doc"
- Paste:
https://www.amcharts.com/docs/v5/ - Let Cursor index the pages
- When prompting, use
@Docs amChartsto include the documentation as context
If your editor supports custom documentation indexing, you can connect it to the amCharts docs in a similar way. Check your editor's documentation for details.
4. Add a project-level instruction file
Most AI-powered editors support a rules file that guides the AI's behavior across your project. We provide a ready-made file that includes all the critical amCharts 5 patterns, common pitfalls, and v4→v5 migration rules.
Drop it in your project root. Then rename as needed for your editor:
- Cursor -
.cursorrules(works as-is) - Windsurf - rename to
.windsurfrules - VS Code + Copilot - rename to
.github/copilot-instructions.md
Or write your own minimal version:
When generating charts, always use amCharts 5 (not v4). Import from @amcharts/amcharts5 and related packages. Use am5.Root.new() to create the root element. Apply the Animated theme by default.
5. Use amCharts AI skill files
We also provide a single AI skill - a structured reference that AI agents can read on demand. It follows the Anthropic skill spec with one central SKILL.md entry point and separate reference files per chart family. This works with any AI tool, including those without MCP support.
Download amCharts 5 Skill (GitHub)
The skill folder structure:
amcharts5-skill/
├── SKILL.md ← entry point: core rules, package map, routing table
└── references/
├── xy.md ← line, area, bar, column, candlestick, scatter
├── pie.md ← pie, donut, funnel, pyramid, pictorial stacked
├── map.md ← world/country maps, choropleth, bubble maps
├── hierarchy.md ← treemap, force-directed, sunburst, pack, tree
├── flow.md ← Sankey, chord, arc diagram
├── radar.md ← spider/radar charts, gauges, polar charts
├── stock.md ← financial stock charts, candlestick, indicators
├── timeline.md ← serpentine, spiral, custom-curve charts
├── gantt.md ← Gantt project charts, task hierarchy, editing
├── wordcloud.md ← word cloud, tag cloud, sentence cloud
└── venn.md ← Venn diagrams, set overlaps
The AI reads SKILL.md first (core patterns + which reference to load), then reads only the relevant reference file for the chart type being built. This keeps context lean and focused.
For Cursor / Windsurf / Copilot - place in your project root or a docs/ folder. The AI will use the files as reference when generating chart code.
For Claude Code - extract into .claude/skills/amcharts5/. (If you've already installed the MCP server, you may not need this - the MCP server includes all the same content and more.)
For Claude API - paste SKILL.md plus the relevant reference into the system prompt.
6. Keep a reference example in your project
Having a working amCharts example file in your project gives the AI something concrete to learn from. Create a file like charts/example-chart.ts with a well-structured chart, and the AI will pick up on patterns like import structure, root element creation, and theme application.
7. Paste relevant docs into the prompt
When all else fails, the most reliable approach is to copy a relevant section from the amCharts 5 documentation directly into your prompt:
Here is the relevant amCharts 5 documentation for XY charts: [paste docs here] Now create a bar chart with these specifications: ...
This guarantees the AI has the right information, regardless of its training data.
MCP server vs. Skill files
| Skill files | MCP server | |
|---|---|---|
| How it works | Loads reference docs into context upfront | AI queries only what it needs on demand |
| Content | Curated skill reference | 1,500+ docs, examples, and class API references |
| Context usage | Higher - entire skill loaded at once | Lower - only relevant sections fetched |
| Setup | Copy files into project or editor config | Single install command |
| Works with | Any AI tool (Claude, ChatGPT, Cursor, Copilot, etc.) | MCP-compatible tools (see MCP setup guide) |
| Best for | Editors without MCP support | Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + Copilot |
| Stays up to date | Manual update needed | Easy to update via npm |
Recommendation: If your tool supports MCP, use the MCP server - it has much more content and uses context more efficiently. If your tool doesn't support MCP, use the skill files. You can also use both.
Scenario 3: Using the API
If you're building tools or applications that use AI to generate amCharts code programmatically (via the Claude API, OpenAI API, or Gemini API), you can enable web search as a tool to get the same quality boost.
Claude API
const response = await anthropic.messages.create({
model: "claude-sonnet-4-5-20250929",
max_tokens: 4096,
tools: [{
type: "web_search_20250305",
name: "web_search"
}],
messages: [{
role: "user",
content: "Create an amCharts 5 XY chart with..."
}]
});
OpenAI API (Responses API)
const response = await openai.responses.create({
model: "gpt-4o",
tools: [{ type: "web_search_preview" }],
input: "Create an amCharts 5 XY chart with..."
});
Gemini API
from google import genai
from google.genai import types
client = genai.Client()
response = client.models.generate_content(
model="gemini-2.5-flash",
contents="Create an amCharts 5 XY chart with...",
config=types.GenerateContentConfig(
tools=[types.Tool(google_search=types.GoogleSearch())]
),
)
System prompt recommendation
When using any API, include a system prompt that guides the model. For even better results, include the content of the relevant skill file in your system prompt - this gives the model a compact, accurate reference for the chart type you need.
You are an expert in amCharts 5 data visualization library. Always use amCharts 5 (not v4). When generating chart code: - Use am5.Root.new() for the root element - Import from @amcharts/amcharts5 and sub-packages - Apply am5themes_Animated theme by default - If unsure about any API detail, search the documentation at https://www.amcharts.com/docs/v5/ before writing code
Pro tip: For API usage without web search, paste the content of the relevant SKILL.md file (e.g., the XY Charts skill) directly into your system prompt. This gives the model all the critical patterns without needing to search.
Recommended models for amCharts code
Not all AI models produce equally good chart code. Based on our testing, here are the models that currently generate the most accurate and idiomatic amCharts 5 output.
Best results
| Model | Why it works well | Best for |
|---|---|---|
| Claude Opus 4.6 | Strongest at understanding large codebases and complex configurations. Produces clean, well-structured chart code with correct v5 patterns. Excellent at self-correction when pointed to docs. | Complex charts, multi-panel stock charts, large projects |
| GPT-5.3-Codex | Fast and reliable code generation across many chart types. Strong polyglot support - good when mixing amCharts with React, Angular, or Vue boilerplate. | Quick prototyping, framework integrations, polyglot projects |
| Gemini 2.5 Pro | Google Search grounding gives it excellent access to current documentation. Very large context window helps with complex setups. | Documentation-heavy queries, Google ecosystem projects |
| Claude Sonnet 4.5 | Best balance of speed, quality, and cost. Handles most chart types correctly and is fast enough for real-time coding assistance in editors. | Day-to-day coding, IDE assistants, cost-conscious teams |
Also good
| Model | Notes |
|---|---|
| GPT-5 | Solid general-purpose coding model. Slightly less specialized than Codex variant but widely available. |
| DeepSeek V3.2 | Strong open-source option. Good reasoning on chart configuration, but may need more explicit prompting for amCharts-specific patterns. |
| Qwen 3.5 Coder | Capable coding model, especially for local/self-hosted setups. Performs well with the .cursorrules file to guide it. |
| Mistral Codestral | Good for IDE integrations. Benefits significantly from having the skill files or rules file in the project. |
Key insight: The gap between "best" and "also good" models shrinks dramatically when you provide context - whether through MCP, web search, the skill files, or the .cursorrules file. A mid-tier model with the right context often outperforms a top model without it.
Quick reference: what works where
| Technique | Browser chat | Cursor | Windsurf | VS Code + Copilot | Claude Code |
|---|---|---|---|---|---|
| Web search | Yes - automatic | Yes - enable @Web | Yes - available | Yes - #web | Yes - built-in |
| MCP server | - | Yes - mcp.json | Yes - mcp_config.json | Yes - mcp.json | Yes - claude mcp add |
| Index amCharts docs | - | Yes - @Docs | - | - | - |
| Project rules file | - | Yes - .cursorrules | Yes - .windsurfrules | Yes - copilot-instructions.md | Yes - CLAUDE.md |
| Paste docs into prompt | Yes | Yes | Yes | Yes | Yes |
| Reference example in project | - | Yes | Yes | Yes | Yes |
| AI skill file | via system prompt | Yes - project root | Yes - project root | Yes - project root | Yes - .claude/skills/ |
Summary
- Browser-based chat gives the best results out of the box - web search is built in and handles most cases automatically.
- Code editors need a little setup but can match browser-quality results. The MCP server is the fastest path - one install command gives the AI access to 1,500+ documentation pages, code examples, and API references.
- The single biggest improvement in any scenario is making sure the AI has access to the amCharts 5 documentation, whether through MCP, web search, doc indexing, skill files, or pasting docs into the prompt.
- Always specify amCharts 5 in your prompts to avoid confusion with older versions.
- For MCP-compatible tools (Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + Copilot), install the MCP server - it's the most comprehensive and context-efficient option available.
Still unsure where to start? Open Claude or ChatGPT, browse our demo gallery where most demos include sample AI prompts you can copy, and see the results for yourself.