szum

Render gambar grafik dari konfigurasi JSON dengan enam tema, sepuluh marka, output PNG/SVG.

Dokumentasi

MCP server

Connect ChatGPT, Claude, Cursor, VS Code, and other AI agents to the Szum chart design system.

The Szum MCP server gives AI agents the current chart types, curated themes, examples, validation, rendering, and saved-chart tools they need to produce considered charts reliably.

Quick start

Connect your MCP client to:

https://szum.io/mcp

Public discovery, validation, and preview tools work without authentication. Saved-chart tools require OAuth or a Bearer API key.

After connecting, ask for a chart in ordinary language:

Show quarterly revenue by region as an editorial column chart. Cite the source, preview it, and save the finished chart after I approve it.

The agent can discover the supported chart types, build and validate a request, render a temporary preview in compatible clients, or save a permanent document with stable image and embed links.

Connect from ChatGPT

Enable Developer mode under ChatGPT Settings → Security and login.
Open ChatGPT Plugins and use the plus button to add a connection.
Give it a name and description, and enter https://szum.io/mcp under Connection.
Create the connection, review the discovered tools, and complete authorization when prompted.
Add the connection from the tools menu in a new conversation.

Availability depends on account and workspace policy. See OpenAI's connection guide for the current flow.

Connect from Claude

Open Charts by Szum in Claude's Connectors Directory and follow the connection prompts.

Claude may ask you to authorize Szum when you use tools that access saved charts. Anonymous previews work without a Szum account.

Connect from Claude Code

Choose a server name, replace SERVER_NAME in the command below, and run it in your terminal.
Open Claude Code and enter /mcp.
Select the server you added and complete the browser authentication flow.

claude mcp add --transport http SERVER_NAME https://szum.io/mcp

See the Claude Code MCP guide for connection and authentication options.

Connect from Cursor

Open your global ~/.cursor/mcp.json, or a project's .cursor/mcp.json.
Replace SERVER_NAME with your chosen server name, add the configuration below, and save the file.
Restart Cursor, then complete authentication when requested.

{
  "mcpServers": {
    "SERVER_NAME": {
      "url": "https://szum.io/mcp"
    }
  }
}

See Cursor's MCP configuration guide for the current setup options.

Connect from VS Code

Open the Command Palette and run MCP: Add Server.
Choose HTTP, paste the endpoint, and set the server name.
Choose whether to install it globally or in the current workspace.
Start the server, confirm that you trust it, and complete authorization when prompted.

{
  "servers": {
    "SERVER_NAME": {
      "type": "http",
      "url": "https://szum.io/mcp"
    }
  }
}

VS Code's MCP server guide covers workspace and user-profile configuration.

Discover supported charts

list_chart_types returns the six current families plus shared and family-specific fields.
list_themes returns the curated themes and their intended uses.
get_examples({ chart_type?, purpose?, features?, example_id? }) returns complete current documents with stable IDs, a use_when explanation, and purpose/feature metadata. No filters returns six starters; any filter searches the complete catalog. All supplied filters intersect, and every requested feature must match.
validate_chart({ chart }) validates a JSON document or supported 2026-03-20 config without rendering or saving.

Use list_chart_types to discover supported chart types, their data roles, and their fields.

Example filter values are advertised directly in the tool's input schema. Purpose describes the chart question; features describe techniques such as annotations, references, intervals, normalization, and wide data. distribution means categorical frequencies, not automatic histogram binning. Use an example_id returned by a previous result for exact retrieval.

get_examples({ features: ["annotations"] });
get_examples({ chart_type: "scatter", features: ["intervals", "annotations"] });
get_examples({ purpose: "composition", features: ["normalized"] });
get_examples({ example_id: "grouped-wide" });

An empty result means no example satisfies every filter; remove one to broaden the search. Examples use illustrative data. The cookbook displays the same catalog. Its missing-data example intentionally produces a gap warning.

The szum://schema resource exposes the current data-free ChartConfig JSON Schema. szum://llms-txt documents the complete chart document, validation results, rendering, and saved-chart operations.

Work with charts

Need	Tool	Result
Discover chart families	`list_chart_types`	Current roles and family-specific fields
Find a starting point	`get_examples`	Ready-to-use current documents
Check input only	`validate_chart`	Structured findings without image or storage effects
Preview a chart	`render_chart`	Interactive App preview, temporary public image URLs, and durable-input status
Keep and share a chart	`save_chart`	Permanent image, embed, editor, and Studio URLs
Find saved charts	`list_charts`	Paginated chart metadata and URLs
Open a saved chart	`get_chart`	Metadata, URLs, and inline display when published
Read its definition	`get_chart_document`	Complete published document for inspection or reuse
Replace a saved chart	`update_chart`	New publication with the same id and URLs
Rename a saved chart	`rename_chart`	Updated library title without changing the document
Delete a saved chart	`delete_chart`	Permanent, retry-safe deletion
Restore App state	`get_preview_state`	Whether an App preview is still transient or was saved

Saved-chart tools require authentication. get_chart returns metadata and URLs, not the document in model-visible output. get_chart_document returns the published document and never substitutes a newer Studio draft. update_chart refuses Bearer/MCP updates while unpublished editor changes exist, so it cannot silently discard newer work.

Validate, preview, then save

Validate each generated or changed input once before its next render, save, or update. Validation applies to that exact value and should not be repeated while it remains unchanged. A successful render returns the exact durable input to use next when no compatibility loss remains.

Errors block. Warnings must be shown to the user and require acknowledgeWarnings: true only after approval of the exact input. Suggestions never block and are never applied automatically. A suggestedDocument is a complete, validated replacement. Review the proposed changes before using it; validate again only if you modify it.

render_chart({ request, acknowledgeWarnings? }) accepts a JSON string containing a current document or supported 2026-03-20 config. It stores a 1 hour preview and returns temporary image URLs. Its durableInput is either ready with the current document, or loss_acceptance_required with every compatibility loss code and no document that could bypass acceptance.

After the user approves the finished preview, save durableInput.document when its status is ready. For loss_acceptance_required, show every loss code, obtain explicit approval, then call save_chart with the original older config and the complete acceptLosses list. A compatible App offers its direct save action only for ready input. save_chart may reuse the App preview identity; otherwise send one stable idempotencyKey for the intended chart and reuse it on retries. The same key and document return the same chart. The same key with different content conflicts.

Preview privacy and retention

Temporary image URLs are public capabilities: anyone holding the unguessable URL can fetch the chart during the retention window. Obtain explicit user consent before rendering sensitive, private, or non-public data.

In clients that support MCP Apps, the interactive preview can render from hidden result metadata without fetching a public static image. PNG, SVG, and fallback/open actions use /r/{id} URLs that remain available for 1 hour; each produced image may be cached for 1 hour.

An authenticated preview consumes one account render. Each later image produced from a returned URL is another render. An anonymous interactive preview is complimentary; its later static images use the separate anonymous image allowance.

Saved documents and older configs

save_chart and update_chart accept a complete current ChartDocument or supported 2026-03-20 config encoded as a JSON string. Use the exact validated current document, or the exact older input together with any explicitly approved loss codes.

Supported 2026-03-20 configs are converted to the current document shape. Validation exposes compatibility.classification and its stable loss or unsupported codes. exact and normalized input may be rendered and saved. lossy input may render, but durable writes require acceptLosses to name every code after the user approves them. unsupported input remains unchanged and cannot be rendered or saved.

See older config compatibility for the supported chart mappings and complete code lists.

Tool failures

Tool failures use a stable JSON text envelope with status and an error containing code, message, and retryable. Error results omit success-shaped structuredContent. Review errors include diagnostics and any applicable compatibility or suggestedDocument fields in their JSON text. Completed validate_chart calls return the validation-result shape described above.

Use error codes and retryability for automation. Do not parse human messages. A retryable storage or credential failure is different from an OAuth challenge and should be reported as temporary rather than as a request to reconnect blindly.

Authentication

No credentials are needed to connect, inspect the design system, validate input, or create an anonymous preview. OAuth-capable clients authorize access when saving, listing, opening, reading, updating, renaming, or deleting charts from the user's library.

If a client does not support OAuth, create an API key and send it as a Bearer token:

{
  "mcpServers": {
    "SERVER_NAME": {
      "type": "http",
      "url": "https://szum.io/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Keep keys out of shared project files. See Authentication for the complete model.

Usage and billing

MCP ingress allows 100 requests per second per IP. Authenticated credentials additionally use the API-key/OAuth credential bucket.

An authenticated render_chart preview counts against the signed-in user's plan limit. Each image subsequently produced from its temporary URL is another render against that account. Anonymous interactive previews are complimentary; their temporary image URLs use a separate allowance of 250 images per month, charged only when an origin image is produced.

Discovery, examples, themes, validation, saved-chart metadata reads, and App preview-state restoration do not consume render quota.

[

What is Szum

A chart design system built around purpose-driven chart types, curated themes, and consistent output.

](https://szum.io/docs/what-is-szum)[

Quick start

Create, customize, export, and publish a Szum chart in your browser. No signup required to start.

](https://szum.io/docs/editor)