@miyucy/storybook-mcp 1.0.0

package/dist/index.js

@@ -0,0 +1,254 @@
+import { McpServer, ResourceTemplate, } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { McpError, ErrorCode } from "@modelcontextprotocol/sdk/types.js";
+import path from "node:path";
+import fs from "node:fs/promises";
+import process from "node:process";
+import { exec } from "node:child_process";
+import { z } from "zod";
+const escapeRegExp = (str) => str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+class Storybook {
+    constructor(storybookRoot) {
+        this.CHUNK_SIZE = 6;
+        this.server = new McpServer({
+            name: "storybook",
+            description: "",
+            version: "0.1.0",
+        });
+        this.storybookRoot = storybookRoot;
+        this.componentInformation = [];
+        this.loadStorybookData();
+        this.registerStorybook();
+    }
+    async run() {
+        await this.server.connect(new StdioServerTransport());
+    }
+    registerStorybook() {
+        this.server.resource("Storybookの情報を返します", "storybook://stories", async (uri) => {
+            const inf = this.componentInformation;
+            if (inf.length === 0) {
+                return { contents: [{ uri: uri.href, text: "No stories found." }] };
+            }
+            return {
+                contents: [{ uri: uri.href, text: JSON.stringify(inf, null, 2) }],
+            };
+        });
+        this.server.tool("get_storybooks", "Storybookの情報を返します", {}, async () => {
+            const inf = this.componentInformation;
+            if (inf.length === 0) {
+                return {
+                    content: [{ type: "text", text: "No stories found." }],
+                };
+            }
+            return {
+                content: inf.map((entry) => ({
+                    type: "text",
+                    text: JSON.stringify(entry, null, 2),
+                })),
+            };
+        });
+        this.server.resource("Storybookのタイトルや説明をクエリーします\nクエリーは大文字・小文字を区別しません", new ResourceTemplate("storybook://stories?{query}", { list: undefined }), async (uri, { query }) => {
+            const inf = this.componentInformation;
+            if (inf.length === 0) {
+                return { contents: [{ uri: uri.href, text: "No stories found." }] };
+            }
+            // queryがない場合はエラー
+            if (!query) {
+                throw new McpError(ErrorCode.InvalidParams, "Query is required.");
+            }
+            const filtered = this.queryComponentInformation(inf, query);
+            return {
+                contents: [
+                    { uri: uri.href, text: JSON.stringify(filtered, null, 2) },
+                ],
+            };
+        });
+        this.server.tool("query_storybooks", "Storybookのタイトルや説明をクエリーします\nクエリーは大文字・小文字を区別しません", { query: z.string() }, async ({ query }) => {
+            const inf = this.componentInformation;
+            if (inf.length === 0) {
+                return {
+                    content: [{ type: "text", text: "No stories found." }],
+                };
+            }
+            // queryがない場合はエラー
+            if (!query) {
+                throw new McpError(ErrorCode.InvalidParams, "Query is required.");
+            }
+            const filtered = this.queryComponentInformation(inf, query);
+            return {
+                content: filtered.map((entry) => ({
+                    type: "text",
+                    text: JSON.stringify(entry, null, 2),
+                })),
+            };
+        });
+    }
+    queryComponentInformation(inf, query) {
+        const isMatch = (entry, q) => {
+            const regex = new RegExp(escapeRegExp(q), "i");
+            return (entry.title.match(regex) ||
+                entry.name.match(regex) ||
+                entry.docgenInfo.some((info) => {
+                    if (info.displayName.match(regex)) {
+                        return true;
+                    }
+                    if (info.description?.match(regex)) {
+                        return true;
+                    }
+                    return false;
+                }));
+        };
+        if (Array.isArray(query)) {
+            return inf.filter((entry) => query.some((q) => isMatch(entry, q)));
+        }
+        return inf.filter((entry) => isMatch(entry, query));
+    }
+    async loadStorybookData() {
+        // storybook-static/index.jsonを読み込む
+        console.debug("Loading storybook data...");
+        const content = await fs.readFile(path.resolve(this.storybookRoot, "storybook-static", "index.json"), "utf-8");
+        const data = JSON.parse(content);
+        console.debug("Loaded storybook data successfully.");
+        if (data.v !== 5) {
+            throw new Error("Invalid version (expected 5)");
+        }
+        const entries = [];
+        // entriesの中身を確認する
+        for (const entry of Object.values(data.entries)) {
+            // typeがstoryでないものは無視する
+            if (entry.type !== "story") {
+                continue;
+            }
+            // idがないものは無視する
+            if (!entry.id) {
+                continue;
+            }
+            // nameがないものは無視する
+            if (!entry.name) {
+                continue;
+            }
+            // titleがないものは無視する
+            if (!entry.title) {
+                continue;
+            }
+            // componentPathがないものは無視する
+            if (!entry.componentPath) {
+                continue;
+            }
+            // importPathがないものは無視する
+            if (!entry.importPath) {
+                continue;
+            }
+            entries.push(entry);
+        }
+        console.debug(`Found ${entries.length} entries.`);
+        {
+            const chunks = Array.from(new Set(entries.map((entry) => entry.componentPath))).reduce((r, e) => {
+                const last = r[r.length - 1];
+                if (last.length < this.CHUNK_SIZE) {
+                    last.push(e);
+                }
+                else {
+                    r.push([e]);
+                }
+                return r;
+            }, [[]]);
+            for await (const chunk of chunks) {
+                const docgenInfos = {};
+                // docgenInfoを取得する
+                const results = await Promise.allSettled(chunk.map((componentPath) => this.getComponentInfo(componentPath)));
+                for (let i = 0; i < results.length; i++) {
+                    const result = results[i];
+                    if (result.status === "fulfilled") {
+                        docgenInfos[chunk[i]] = result.value;
+                    }
+                    else {
+                        console.error(`Failed to get component info for ${chunk[i]}:`, result.reason);
+                    }
+                }
+                // componentInformationを作成する(随時更新)
+                for (const entry of entries) {
+                    for (const componentPath of chunk) {
+                        if (entry.componentPath === componentPath) {
+                            this.componentInformation.push({
+                                title: entry.title,
+                                id: entry.id,
+                                name: entry.name,
+                                importPath: entry.importPath,
+                                componentPath: entry.componentPath,
+                                docgenInfo: docgenInfos[entry.componentPath] || [],
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        // for await (const entry of entries) {
+        //   if (docgenInfos[entry.componentPath]) {
+        //     // すでに取得済みの場合はスキップ
+        //     continue;
+        //   }
+        //   try {
+        //     console.debug(`Getting component info for ${entry.componentPath}...`);
+        //     const infos = await this.getComponentInfo(entry.componentPath);
+        //     if (infos.length > 0) {
+        //       console.debug(`Got ${infos.length} component info for ${entry.componentPath}.`);
+        //       docgenInfos[entry.componentPath] = infos;
+        //     }
+        //   } catch (error) {
+        //     console.error(`Failed to get component info for ${entry.componentPath}:`, error);
+        //   }
+        // }
+        // componentInformationを作成する
+        // for (const entry of entries) {
+        //   this.componentInformation.push({
+        //     id: entry.id,
+        //     name: entry.name,
+        //     title: entry.title,
+        //     importPath: entry.importPath,
+        //     componentPath: entry.componentPath,
+        //     docgenInfo: docgenInfos[entry.componentPath] || [],
+        //   });
+        // }
+        console.debug("Component information loaded successfully.");
+    }
+    // npx -y @react-docgen/cli --resolver find-all-exported-components を実行して標準出力からコンポーネントの情報を取得する
+    async getComponentInfo(importPath) {
+        const regex = /\.[jt]sx$/;
+        const argImportPath = regex.test(importPath)
+            ? importPath
+            : `${importPath}/index.[jt]sx`;
+        return new Promise((resolve, reject) => {
+            console.debug(`Executing command to get component info for ${argImportPath}...`);
+            exec(`npx -y @react-docgen/cli --resolver find-all-exported-components '${argImportPath}'`, {
+                cwd: this.storybookRoot,
+                env: { ...process.env, NO_COLOR: "true" },
+            }, (error, stdout, _stderr) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+                if (stdout === "") {
+                    resolve([]);
+                    return;
+                }
+                const data = JSON.parse(stdout);
+                resolve(Object.values(data).flat());
+            });
+        });
+    }
+}
+// --- サーバー起動 ---
+async function main() {
+    const storybookRoot = process.env.STORYBOOK_ROOT;
+    if (!storybookRoot) {
+        console.error("STORYBOOK_ROOT environment variable is not set.");
+        process.exit(1);
+    }
+    const absStorybookRoot = path.resolve(storybookRoot);
+    await new Storybook(absStorybookRoot).run();
+}
+main().catch((error) => {
+    console.error("Error starting server:", error);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@miyucy/storybook-mcp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rm -rf dist && tsc",
+    "start": "node dist/index.js"
+  },
+  "author": "miyucy",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.10.1",
+    "zod": "3.24.3"
+  },
+  "devDependencies": {
+    "@types/node": "22.14.1",
+    "typescript": "5.8.3"
+  },
+  "bin": "dist/index.js"
+}