Charta MCP
Enables chart generation within Windsurf IDE, powered by Codeium.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Charta MCPgenerate a line chart showing revenue over the last 6 months"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Charta MCP
Charta MCP is a Model Context Protocol server that lets AI coding agents generate beautiful, presentation-ready charts (SVG + PNG) with zero setup.
Install & Run
npx @charta/mcpRelated MCP server: Chart-Output MCP Server
MCP Configuration
Claude Desktop
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"charta": {
"command": "npx",
"args": ["@charta/mcp"]
}
}
}Cursor
Add to .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):
{
"mcpServers": {
"charta": {
"command": "npx",
"args": ["@charta/mcp"]
}
}
}Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"charta": {
"command": "npx",
"args": ["@charta/mcp"]
}
}
}Tools
generate_chart
Generate a chart and return an SVG string.
Input:
{
"type": "waterfall",
"title": "Revenue Bridge Q1→Q2",
"data": [
{"label": "Q1 Revenue", "value": 500, "isTotal": true},
{"label": "+ New Deals", "value": 120},
{"label": "- Churn", "value": -45},
{"label": "- Discounts", "value": -30},
{"label": "Q2 Revenue", "value": 545, "isTotal": true}
],
"style": {"theme": "dark", "accentColor": "#7C5CFC"}
}Output:
{
"chartId": "chart_1234567890_abc123",
"type": "waterfall",
"svg": "<svg ...>...</svg>"
}list_chart_types
List all supported chart types with descriptions and data shapes.
No input required.
Output: Array of { type, description, dataShape, example }
get_chart_schema
Get the full JSON schema for a specific chart type.
Input: { "type": "waterfall" }
Output: JSON Schema object
save_chart
Save a chart to disk as SVG or PNG.
Input:
{
"chartId": "chart_1234567890_abc123",
"outputPath": "/tmp/revenue-bridge.png",
"format": "png"
}Output: { "path": "/tmp/revenue-bridge.png", "bytes": 48291 }
describe_chart
Given your data and intent, get a chart type recommendation.
Input:
{
"data": [{"label": "Q1", "value": 100}, {"label": "Q2", "value": 120}],
"context": "Show revenue growth over quarters"
}Output:
{
"recommended": "line",
"reason": "Time series context — line chart is the clearest for continuous data.",
"alternatives": ["area", "bar"]
}Supported Chart Types
Type | Description | Best For |
| Vertical bars | Comparing values across categories |
| Side-by-side bars | Comparing multiple series per category |
| Stacked bars | Composition + total across categories |
| Floating bars with connectors | Financial bridges, P&L, variance analysis |
| Connected line | Trends, time series |
| Filled area under line | Volume/magnitude of trends |
| Circular proportions | Part-to-whole (≤6 categories) |
| Pie with center metric | Part-to-whole + total callout |
| X-Y points | Correlation between two variables |
| X-Y points + size | Three-variable relationships |
| Horizontal timeline bars | Project schedules, task durations |
| Variable-width stacked bars | Market share, segment analysis |
| Spider/web chart | Multi-dimensional profiles |
| Color-coded grid | Patterns across two categorical dimensions |
Curl Examples
Note: These show the MCP JSON-RPC protocol. In practice your agent calls the tools directly.
List tools
echo '{"jsonrpc":"2.0","method":"tools/list","params":{},"id":1}' | npx @charta/mcpGenerate a bar chart
echo '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "generate_chart",
"arguments": {
"type": "bar",
"title": "Monthly Sales",
"data": [
{"label": "Jan", "value": 120},
{"label": "Feb", "value": 180},
{"label": "Mar", "value": 150},
{"label": "Apr", "value": 210}
]
}
},
"id": 2
}' | npx @charta/mcpSave chart to PNG
echo '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "save_chart",
"arguments": {
"chartId": "chart_1234567890_abc123",
"outputPath": "/tmp/sales.png",
"format": "png"
}
},
"id": 3
}' | npx @charta/mcpGet chart recommendation
echo '{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "describe_chart",
"arguments": {
"data": [{"label": "A", "value": 30}, {"label": "B", "value": 45}],
"context": "market share breakdown"
}
},
"id": 4
}' | npx @charta/mcpStyling
All charts support a style object:
{
"style": {
"theme": "dark",
"accentColor": "#7C5CFC",
"fontFamily": "Inter, sans-serif",
"width": 800,
"height": 500,
"showGrid": true,
"showLegend": true,
"showValues": true
}
}Default theme is dark (#0a0a0a background, #7C5CFC accent, white text).
Python SDK
Install the typed Python client for use in notebooks, scripts, and AI agent pipelines:
pip install chartafrom charta import ChartaClient, BarChart, BarData, ChartStyle
chart = BarChart(
title="Quarterly Revenue",
data=[BarData(label="Q1", value=120), BarData(label="Q2", value=180)],
style=ChartStyle(theme="dark"),
)
with ChartaClient("https://api.getcharta.ai", api_key="sk-...") as client:
svg = client.generate_svg(chart)Full docs: python/README.md
Links
Website: getcharta.ai
Issues: github.com/charta-ai/charta-mcp
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables AI agents to generate chart visualizations by interacting with QuickChart API, allowing users to create and retrieve chart image links through natural language requests.Last updated1354Apache 2.0
- AlicenseAqualityDmaintenanceEnables AI agents to generate and render charts as PNG, SVG, or WebP images directly in chat interfaces. Supports Chart.js specifications and natural language descriptions for creating visualizations from data.Last updated3301MIT
- Alicense-qualityBmaintenanceLet AI agents create interactive visualizations that render live inside your chat — no code required.Last updated1BSD 3-Clause
- FlicenseAqualityDmaintenanceEnables AI assistants and clients to generate Highcharts-based charts with schema validation, export to PNG/SVG/PDF, and natural language to chart conversion.Last updated21
Related MCP Connectors
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Provide real-time data querying and visualization by integrating Tako with your agents. Generate o…
Appeared in Searches
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/mortenator/charta-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server