Erstellen Sie Diagramme als PNG-, SVG- oder WebP-Bilder direkt aus Claude, Cursor, Windsurf oder jedem anderen MCP-kompatiblen KI-Agenten.
Fragen Sie Ihre KI: "Erstelle ein Balkendiagramm, das den Umsatz von Q1 bis Q4 zeigt" — sie ruft Chart-Output auf und gibt das Bild direkt im Chat aus.
Bitten Sie Ihren KI-Agenten, ein Diagramm zu erstellen. Das ist das Ergebnis:
(Falls das Bild in Ihrem Viewer nicht geladen wird, öffnen Sie die Datei auf GitHub.)
Related MCP server: Quick Chart MCP Server
Gebrauchsfertige Diagrammkonfigurationen finden Sie unter /examples.
Kopieren Sie eine beliebige Datei, fügen Sie Ihre Daten ein und senden Sie sie per POST an die API.
Fügen Sie dies zu Ihrer mcp.json hinzu:
{
"mcpServers": {
"chart-output": {
"command": "npx",
"args": ["@chartoutput/mcp"],
"env": {
"CHART_OUTPUT_API_KEY": "pk_test_YOUR_KEY"
}
}
}
}Holen Sie sich einen kostenlosen API-Schlüssel unter chart-output.com — keine Kreditkarte erforderlich.
Tool | Beschreibung |
| Vorhandene Beispiel-Spezifikations-IDs — verwenden Sie diese, bevor Sie |
| Gibt den vollständigen Text von |
| Chart.js-Stil Labels/Datasets → Inline-Bild (optional |
| Wie |
| Vollständige Kartenkomposition JSON → Inline-Bild (Header, KPI-Leiste, Footer, Theme, |
| Wie |
| Natürliche Sprache + Daten → Bild (Pro/Business-Schlüssel erforderlich) |
MCP-Ressourcen stellen dieselben Dateien auch als application/json unter chart-output://examples/<id> bereit (z. B. mrr-breakdown). Bevorzugen Sie get_chart_example oder das Lesen einer Ressource, anstatt das Schema zu erraten.
Nach der Installation fragen Sie einfach Ihren KI-Agenten:
"Erstelle ein Liniendiagramm, das zeigt, wie die monatlich aktiven Nutzer von 12.000 im Januar auf 28.000 im Dezember wachsen"
Der Agent ruft render_chart, render_card oder render_chart_ai auf und gibt das Bild direkt im Chat aus. Kein Code erforderlich. Verwenden Sie render_card für gebrandete Dashboard-Layouts (dunkles Design, KPI-Zeile, Footer) oder render_card_url, wenn Sie einen öffnungsfähigen/teilbaren Link benötigen.
Registrieren Sie sich unter chart-output.com
Gehen Sie zu Dashboard → API Keys → Create key
Fügen Sie ihn wie oben gezeigt zu Ihrer mcp.json hinzu
Die kostenlose Testversion beinhaltet 500 Renderings. Keine Kreditkarte erforderlich.
Registrierungseintrag und Qualitätskarte:
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.
