Charta MCP

Charta MCP

Charta MCP是一个模型上下文协议服务器，它允许AI编码代理生成美观的、演示就绪的图表（SVG+PNG），无需设置。

安装并运行

npx @charta/mcp

MCP配置

克劳德桌面版

添加 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

光标

添加 .cursor/mcp.json （项目）或 ~/.cursor/mcp.json （全球）：

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

帆板运动

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

______________________________________________________________________

工具

generate_chart

生成图表并返回SVG字符串。

输入：

{
  "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"}
}

输出：

{
  "chartId": "chart_1234567890_abc123",
  "type": "waterfall",
  "svg": "..."
}

______________________________________________________________________

list_chart_types

列出所有支持的图表类型，包括描述和数据形状。

无需输入。

输出： 一大批 { type, description, dataShape, example }

______________________________________________________________________

get_chart_schema

获取特定图表类型的完整JSON模式。

输入： { "type": "waterfall" }

输出： JSON模式对象

______________________________________________________________________

save_chart

将图表另存为SVG或PNG格式。

输入：

{
  "chartId": "chart_1234567890_abc123",
  "outputPath": "/tmp/revenue-bridge.png",
  "format": "png"
}

输出： { "path": "/tmp/revenue-bridge.png", "bytes": 48291 }

______________________________________________________________________

describe_chart

根据您的数据和意图，获得图表类型建议。

输入：

{
  "data": [{"label": "Q1", "value": 100}, {"label": "Q2", "value": 120}],
  "context": "Show revenue growth over quarters"
}

输出：

{
  "recommended": "line",
  "reason": "Time series context — line chart is the clearest for continuous data.",
  "alternatives": ["area", "bar"]
}

______________________________________________________________________

支持的图表类型

______________________________________________________________________

卷发示例

注： 这些显示了MCP JSON-RPC协议。在实践中，您的代理直接调用这些工具。

列出工具

echo '{"jsonrpc":"2.0","method":"tools/list","params":{},"id":1}' | npx @charta/mcp

生成条形图

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/mcp

将图表保存为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/mcp

获取图表推荐

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/mcp

______________________________________________________________________

样式

所有图表都支持 style 对象：

{
  "style": {
    "theme": "dark",
    "accentColor": "#7C5CFC",
    "fontFamily": "Inter, sans-serif",
    "width": 800,
    "height": 500,
    "showGrid": true,
    "showLegend": true,
    "showValues": true
  }
}

默认主题为 黑暗 (#0a0a0a 背景 #7C5CFC 口音、白色文本）。

______________________________________________________________________

开发包

安装类型化的Python客户端，用于笔记本电脑、脚本和AI代理管道：

pip install charta

from 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)

完整文档： python/README.md

______________________________________________________________________

链接

• 网站： Getcharts。
• 问题：