直接从 Claude、Cursor、Windsurf 或任何兼容 MCP 的 AI 智能体中将图表渲染为 PNG、SVG 或 WebP 图像。
询问你的 AI：“生成一张显示第一季度至第四季度收入的柱状图” —— 它会调用 Chart-Output 并以内联方式返回图像。
让你的 AI 智能体生成一张图表。这就是返回的结果。
（如果图像在你的查看器中无法加载，请在 GitHub 上打开该文件。）
Related MCP server: Quick Chart MCP Server
现成的图表配置位于 /examples。
复制任意文件，替换你的数据，然后 POST 到 API。
添加到你的 mcp.json 中：
{
"mcpServers": {
"chart-output": {
"command": "npx",
"args": ["@chartoutput/mcp"],
"env": {
"CHART_OUTPUT_API_KEY": "pk_test_YOUR_KEY"
}
}
}
}在 chart-output.com 获取免费 API 密钥 — 无需信用卡。
工具 | 描述 |
| 已提供的示例规范 ID — 在手写 |
| 返回完整的 |
| Chart.js 风格的标签/数据集 → 内联图像（可选 |
| 与 |
| 完整的卡片组合 JSON → 内联图像（页眉、KPI 条、页脚、主题、 |
| 与 |
| 自然语言 + 数据 → 图像（需要 Pro/Business 密钥） |
MCP 资源 也会在 chart-output://examples/<id>（例如 mrr-breakdown）处以 application/json 格式公开相同的文件。建议优先使用 get_chart_example 或资源读取，而不是猜测架构。
安装完成后，只需询问你的 AI 智能体：
“创建一个折线图，显示月活跃用户从 1 月的 1.2 万增长到 12 月的 2.8 万”
智能体调用 render_chart、render_card 或 render_chart_ai 并直接在聊天中返回图像。无需代码。使用 render_card 进行品牌化仪表板布局（深色主题、KPI 行、页脚），或者在需要可打开/可共享链接时使用 render_card_url。
在 chart-output.com 注册
前往仪表板 → API 密钥 → 创建密钥
如上所示将其添加到你的 mcp.json 中
免费试用包含 500 次渲染。无需信用卡。
注册列表和质量卡片：
Render a chart from a Chart.js JSON specification. Returns the chart as an inline image. Supports line, bar, pie, doughnut, radar, and polarArea chart types.
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | Chart type | |
| labels | Yes | X-axis labels or category names | |
| datasets | Yes | One or more datasets | |
| width | No | ||
| height | No | ||
| title | No | Chart title | |
| format | No | png |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool renders and returns an image, but doesn't cover important aspects like performance characteristics (e.g., rendering time), error handling, rate limits, authentication requirements, or whether it's idempotent. For a tool that generates images, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately concise with two sentences that efficiently convey the core functionality. The first sentence states the purpose and output, while the second lists supported chart types. There's no wasted text, though it could be slightly more structured for clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a chart rendering tool with 7 parameters, no annotations, and no output schema, the description is insufficient. It doesn't explain the return format beyond 'inline image' (e.g., base64 encoding, MIME type), error conditions, or how to interpret the Chart.js specification. For a tool with this level of complexity, more contextual information is needed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description adds minimal parameter semantics beyond the schema. It mentions 'Chart.js JSON specification' and lists supported chart types (which are already in the schema's enum), but doesn't explain the relationship between parameters (e.g., how labels correspond to datasets) or provide examples. With 57% schema description coverage, the description doesn't adequately compensate for the gaps in parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Render a chart from a Chart.js JSON specification. Returns the chart as an inline image.' It specifies the verb ('render'), resource ('chart'), and output format ('inline image'), but doesn't explicitly differentiate from sibling tools like render_chart_ai or render_chart_url, which would require a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus its siblings (render_chart_ai, render_chart_url). It mentions supported chart types but doesn't indicate any prerequisites, alternatives, or exclusion criteria. This leaves the agent without context for tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Generate a chart from a natural language description and optional raw data. Chart-Output's AI layer builds the chart spec automatically. Requires a Pro or Business API key.
| Name | Required | Description | Default |
|---|---|---|---|
| description | Yes | Natural language description of the chart, e.g. 'Monthly revenue for 2024 growing from 12k to 28k, use a green bar chart' | |
| data | No | Optional raw data as a JSON array of objects or CSV string | |
| width | No | ||
| height | No | ||
| format | No | png |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions the AI layer and API key requirement, which adds some context about functionality and access control. However, it lacks details on rate limits, error handling, response format (e.g., image data vs. URL), or any destructive effects, leaving significant gaps for a tool that generates charts.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, with two sentences that efficiently convey the core functionality and requirements. Every sentence adds value: the first explains the tool's purpose, and the second provides essential context about the AI layer and API key. There's no wasted text, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a chart generation tool with 5 parameters, no annotations, and no output schema, the description is incomplete. It doesn't explain what the tool returns (e.g., image binary, URL, or error details), how to handle the AI layer's behavior, or any limitations beyond the API key requirement. This leaves the agent with insufficient information for reliable invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 40%, meaning most parameters are not described in the schema. The description adds minimal value by implying that 'description' is natural language and 'data' is optional raw data, but it doesn't elaborate on the semantics of 'width', 'height', or 'format' beyond what the schema provides (e.g., default values and constraints). This partially compensates but doesn't fully address the coverage gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate a chart from a natural language description and optional raw data.' It specifies the verb ('generate'), resource ('chart'), and method ('from natural language description and optional raw data'). However, it doesn't explicitly differentiate from sibling tools like 'render_chart' and 'render_chart_url', which likely have different approaches or outputs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides some usage context by mentioning that it uses 'Chart-Output's AI layer' and requires 'a Pro or Business API key,' which implies when to use it based on subscription level. However, it doesn't explicitly state when to choose this tool over its siblings (e.g., 'render_chart' and 'render_chart_url') or any alternatives, leaving the agent to infer usage scenarios.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Render a chart and return a CDN URL instead of image bytes. Use this when you need a stable URL to embed in HTML, email, or pass to another tool. Same inputs as render_chart.
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | ||
| labels | Yes | ||
| datasets | Yes | ||
| width | No | ||
| height | No | ||
| title | No | ||
| format | No | png |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool returns a 'stable URL' from a CDN, which is useful behavioral context. However, it lacks details on permissions, rate limits, URL expiration, or error handling, which are important for a tool generating external resources.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core purpose in the first sentence, followed by usage guidelines and a note on inputs. Every sentence earns its place with no wasted words, making it highly efficient and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (7 parameters, no annotations, no output schema), the description is reasonably complete for guiding usage. It clarifies the tool's purpose and when to use it, but lacks details on output format (e.g., URL structure, expiration) and error scenarios, which could be important for integration.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate. It adds value by noting 'Same inputs as render_chart,' implying parameters are consistent with a known sibling tool. However, it doesn't explain specific parameters like 'type' enums or 'datasets' structure, leaving significant gaps in parameter understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Render a chart and return a CDN URL instead of image bytes.' It specifies the action (render), resource (chart), and output format (CDN URL), and distinguishes it from sibling tools by noting it returns a URL rather than image bytes and referencing 'render_chart' as having the same inputs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool: 'Use this when you need a stable URL to embed in HTML, email, or pass to another tool.' It provides clear context for usage (embedding, email, passing to other tools) and distinguishes it from alternatives by implying 'render_chart' returns image bytes instead.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0render_chartrender_chart_airender_chart_urlScored across 3 tools
The three tools have clearly distinct purposes: render_chart for direct JSON specification rendering, render_chart_ai for AI-generated charts from natural language, and render_chart_url for URL-based output. However, render_chart and render_chart_url share the same input format, which could cause minor confusion about when to use each, though their different outputs (inline image vs. URL) help differentiate them.
All tool names follow a consistent verb_noun pattern with 'render_chart' as the base, extended with suffixes (_ai, _url) to indicate variations. This predictable naming makes it easy for an agent to understand the tool relationships and select the appropriate one based on the suffix.
With only 3 tools, this server is well-scoped for its purpose of chart rendering. Each tool serves a distinct use case (direct rendering, AI generation, URL output), and there are no extraneous tools. The count is appropriate for covering the core functionalities without being overwhelming or insufficient.
The tool set covers the main chart rendering workflows: direct specification, AI-assisted generation, and URL-based output. A minor gap is the lack of tools for chart editing, deletion, or management (e.g., updating or deleting rendered charts), but for a rendering-focused server, the provided tools are sufficient for most agent tasks.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Renders interactive Chart.js charts and dashboards inline in AI conversations. Supports bar, line, area, pie, doughnut, scatter, and radar charts with multi-chart dashboard grids.
Create, inspect, manage, and render charts and data visualizations as SVG/PNG or interactive embeds.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
