Claude, Cursor, Windsurf 또는 모든 MCP 호환 AI 에이전트에서 직접 차트를 PNG, SVG 또는 WebP 이미지로 렌더링하세요.
AI에게 다음과 같이 요청하세요: "1분기~4분기 매출을 보여주는 막대 차트를 생성해줘" — 그러면 Chart-Output을 호출하여 이미지를 인라인으로 반환합니다.
AI 에이전트에게 차트 생성을 요청하면 다음과 같은 결과가 나옵니다.
(이미지가 뷰어에서 로드되지 않으면 GitHub의 파일을 여세요.)
Related MCP server: Quick Chart MCP Server
/examples에서 바로 사용할 수 있는 차트 구성 파일을 확인하세요.
파일을 복사하고 데이터를 교체한 뒤 API로 POST 요청을 보내면 됩니다.
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월 12k에서 12월 28k로 성장하는 월간 활성 사용자(MAU)를 보여주는 선 차트를 만들어줘"
에이전트가 render_chart, render_card 또는 render_chart_ai를 호출하여 채팅창에 이미지를 직접 반환합니다. 코드는 필요 없습니다. 브랜드 대시보드 레이아웃(다크 테마, KPI 행, 푸터)이 필요할 때는 **render_card**를 사용하고, 열거나 공유할 수 있는 링크가 필요할 때는 **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.
