This server enables AI agents to generate charts and dashboard cards as images directly from structured data or natural language.
render_chart: Generate an inline chart image from a Chart.js-style JSON spec (type, labels, datasets). Supports line, bar, pie, doughnut, radar, and polarArea.
render_chart_url: Same as above, but returns a stable CDN URL for embedding in HTML or emails.
render_chart_ai: Create a chart from a plain-English description and optional raw data (JSON or CSV); the AI builds the spec automatically. (Requires a Pro/Business API key.)
render_card: Render a full dashboard card with header, KPI strip, footer, and custom theme from a JSON spec.
list_chart_output_examples / get_chart_example: Browse and retrieve built-in example specs to use as templates.
Output formats: PNG (default), JPEG, WebP, SVG (where applicable). Width, height, and dataset styling (colors, border radius) are configurable.
Free tier: 500 renders included with a free API key.
Allows rendering charts as PNG, SVG, or WebP images using Chart.js specifications, with tools for generating charts from natural language descriptions and data.
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., "@Chart-Output MCP Server show me a bar chart of monthly sales data"
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.
Render charts as PNG, SVG, or WebP images directly from Claude, Cursor, Windsurf, or any MCP-compatible AI agent.
Ask your AI: "Generate a bar chart showing Q1–Q4 revenue" — it calls Chart-Output and returns the image inline.
Ask your AI agent to generate a chart. This is what comes back.
(If the image does not load in your viewer, open the file on GitHub.)
Related MCP server: Quick Chart MCP Server
Ready-to-use chart configs in /examples.
Copy any file, swap in your data, POST to the API.
Add to your mcp.json:
{
"mcpServers": {
"chart-output": {
"command": "npx",
"args": ["@chartoutput/mcp"],
"env": {
"CHART_OUTPUT_API_KEY": "pk_test_YOUR_KEY"
}
}
}
}Get a free API key at chart-output.com — no credit card required.
Tool | Description |
| Shipped example spec ids — use before hand-writing |
| Return full |
| Chart.js-style labels/datasets → inline image (optional |
| Same as |
| Full card composition JSON → inline image (header, KPI strip, footer, theme, |
| Same full card composition as |
| Natural language + data → image (Pro/Business key required) |
MCP resources also expose the same files as application/json at chart-output://examples/<id> (e.g. mrr-breakdown). Prefer get_chart_example or a resource read over guessing the schema.
Once installed, just ask your AI agent:
"Create a line chart showing monthly active users growing from 12k in January to 28k in December"
The agent calls render_chart, render_card, or render_chart_ai and returns
the image directly in chat. No code required. Use render_card for branded dashboard layouts (dark theme, KPI row, footer), or render_card_url when you need an openable/shareable link.
Sign up at chart-output.com
Go to Dashboard → API Keys → Create key
Add it to your mcp.json as shown above
Free trial includes 500 renders. No credit card required.
Registry listing and quality card:
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.
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.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
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, and PDFs from HTML, URLs, or templates — from your AI agent.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/lavondev/chart-output-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
