storykit-mcp

MCP server for the StoryKit asset library — search and embed free, generated design blocks (charts, widgets, illustrations, themes) straight from your editor. Created with love by Story Kit. 🍮

It wraps the free, public StoryKit Asset API as read-only MCP tools. No API key, no account, no on-demand generation — just the thousands of already-generated blocks, embeddable in one line with your own data via data-sk-items.

Tools

Tool	What it does
search_assets	Search by text + kind (CHART_VARIANT, COMPONENT, INTERACTIVE, THEME, …). Returns dataSchema when the asset accepts rows.
get_asset	Full JSON: descriptor, dataSchema, html/css/js (when self-contained), embed snippet, bundle links.
get_embed_snippet	Copy-paste <div data-sk-asset> + sk-embed.js with example data-sk-items.
list_themes	Published themes (palette + vibe).
list_chart_families	43+ Datawrapper-aligned chart families → StoryKit blockTypes.
list_theme_families	Editorial theme palette catalog.
bundle_url	.zip download URL for one or more assets; optional theme id for multi-bundle.

Install

It runs with npx — no global install needed.

Claude Code

claude mcp add storykit -- npx -y storykit-mcp

Cursor

.cursor/mcp.json:

{
  "mcpServers": {
    "storykit": { "command": "npx", "args": ["-y", "storykit-mcp"] }
  }
}

opencode

opencode.json:

{
  "mcp": {
    "storykit": { "type": "local", "command": ["npx", "-y", "storykit-mcp"], "enabled": true }
  }
}

Windsurf / generic MCP client

{
  "mcpServers": {
    "storykit": { "command": "npx", "args": ["-y", "storykit-mcp"] }
  }
}

Try it

“Find a StoryKit column chart and embed it with my Q1–Q3 sales numbers.” “Search StoryKit for a stat-row component and give me the embed snippet with data-sk-items.” “List chart families and pick a dumbbell plot skin.”

Examples (curl equivalents)

# Search bar charts
curl -s "https://asset.storykit.space/api/v1/assets?kind=CHART_VARIANT&q=bar&size=5"

# Full asset + dataSchema
curl -s "https://asset.storykit.space/api/v1/assets/1757"

# Chart families catalog
curl -s "https://asset.storykit.space/api/v1/chart-families"

# Multi-bundle with theme
# → https://asset.storykit.space/api/v1/bundle.zip?ids=1757,1760&theme=1756

Embed with your data:

<div data-sk-asset="1757"
     data-sk-items='[{"label":"Q1","value":64},{"label":"Q2","value":41}]'></div>
<script src="https://asset.storykit.space/sk-embed.js" async></script>

Configuration

Env var	Default	Purpose
STORYKIT_API_BASE	https://asset.storykit.space	Override the API origin.
STORYKIT_API_KEY	—	Optional free key for a higher rate limit (mint one).

Develop

npm install
STORYKIT_API_BASE=http://localhost:8080 npm start

MIT licensed. Built on the Model Context Protocol.