内容
# storykit-mcp
> **StoryKit** 資產庫的 MCP 伺服器 - 直接在編輯器中搜尋並嵌入免費、生成的設計區塊（圖表、元件、插圖、主題）。
> _由 **Story Kit** 愛心打造。_
它包裝了免費、公開的 [StoryKit 資產 API](https://asset.storykit.space/docs) 作為唯讀 MCP 工具。無需 API 金鑰、帳戶、按需生成 - 只需數千個已生成的區塊，可透過 `data-sk-items` 以一行程式碼嵌入您自己的資料。
## 工具列表
| 工具 | 功能 |
|------|--------------|
| `search_assets` | 透過文字 + 種類（`CHART_VARIANT`、`COMPONENT`、`INTERACTIVE`、`THEME` 等）搜尋。返回 `dataSchema`，如果資產接受行。 |
| `get_asset` | 完整的 JSON：描述、 `dataSchema`、html/css/js（如果自包含）、嵌入程式碼、套件連結。 |
| `get_embed_snippet` | 複製貼上 `<div data-sk-asset>` + `sk-embed.js`，並附上範例 `data-sk-items`。 |
| `list_themes` | 已發布的主題（色彩調色板 + 風格）。 |
| `list_chart_families` | 43+ 個 Datawrapper 對齊的圖表家族 → **StoryKit** `blockType`。 |
| `list_theme_families` | 編輯主題色彩調色板目錄。 |
| `bundle_url` | 一個或多個資產的 `.zip` 下載網址；可選的主題 ID 用於多套件。 |
## 安裝
它與 `npx` 運行 - 無需全域安裝。
### Claude Code
```bash
claude mcp add storykit -- npx -y storykit-mcp
```
### Cursor
`.cursor/mcp.json`:
```json
{
"mcpServers": {
"storykit": { "command": "npx", "args": ["-y", "storykit-mcp"] }
}
}
```
### opencode
`opencode.json`:
```json
{
"mcp": {
"storykit": { "type": "local", "command": ["npx", "-y", "storykit-mcp"], "enabled": true }
}
}
```
### Windsurf / generic MCP client
```json
{
"mcpServers": {
"storykit": { "command": "npx", "args": ["-y", "storykit-mcp"] }
}
}
```
## 試試看
> “找到一個 **StoryKit** 欄圖表，並使用我的 Q1–Q3 銷售數字嵌入它。”
> “在 **StoryKit** 中搜尋一個統計列元件，並給我嵌入程式碼，附上 `data-sk-items`。”
> “列出圖表家族，並選擇一個啞鈴繪圖皮膚。”
## 範例（curl 等價命令）
```bash
# 搜尋條形圖
curl -s "https://asset.storykit.space/api/v1/assets?kind=CHART_VARIANT&q=bar&size=5"
# 完整的資產 + dataSchema
curl -s "https://asset.storykit.space/api/v1/assets/1757"
# 圖表家族目錄
curl -s "https://asset.storykit.space/api/v1/chart-families"
# 多套件與主題
# → https://asset.storykit.space/api/v1/bundle.zip?ids=1757,1760&theme=1756
```
使用您自己的資料嵌入：
```html
<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>
```
## 設定
| 環境變數 | 預設值 | 目的 |
|---------|---------|---------|
| `STORYKIT_API_BASE` | `https://asset.storykit.space` | 覆蓋 API 起源。 |
| `STORYKIT_API_KEY` | — | 可選的免費金鑰，用於更高的速率限制（[兌換一個](https://asset.storykit.space/on-demand)）。 |
## 開發
```bash
npm install
STORYKIT_API_BASE=http://localhost:8080 npm start
```
MIT 授權。建置於 [Model Context Protocol](https://modelcontextprotocol.io) 之上。
