@storybook/addon-mcp 0.0.2 → 0.0.3

package/dist/preset.js

@@ -5,6 +5,7 @@ import { isInitializeRequest } from '@modelcontextprotocol/sdk/types.js';
 import path from 'path';
 import { storyNameFromExport } from 'storybook/internal/csf';
 import { logger } from 'storybook/internal/node-logger';
+import { telemetry } from 'storybook/internal/telemetry';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -15,7 +16,7 @@ var __export = (target, all) => {
 // package.json
 var package_default = {
   name: "@storybook/addon-mcp",
-  version: "0.0.2"};
+  version: "0.0.3"};
 
 // node_modules/.pnpm/zod@3.25.76/node_modules/zod/v3/external.js
 var external_exports = {};
@@ -4059,6 +4060,30 @@ var NEVER = INVALID;
 
 // node_modules/.pnpm/zod@3.25.76/node_modules/zod/index.js
 var zod_default = external_exports;
+async function collectTelemetry({
+  event,
+  mcpSessionId,
+  ...payload
+}) {
+  if (disableTelemetry) {
+    return;
+  }
+  try {
+    return await telemetry("addon-mcp", {
+      event,
+      mcpSessionId,
+      client: mcpSessionIdToClientMap[mcpSessionId],
+      ...payload
+    });
+  } catch (error) {
+    logger.debug("Error collecting telemetry:", error);
+  }
+}
+var mcpSessionIdToClientMap = {};
+var disableTelemetry = false;
+var setDisableTelemetry = (value = false) => {
+  disableTelemetry = value;
+};
 
 // src/tools/get-story-urls.ts
 var inputStoriesSchema = zod_default.array(
@@ -4088,11 +4113,12 @@ function registerStoryUrlsTool({
         urls: outputUrlsSchema
       }
     },
-    async ({ stories }) => {
+    async ({ stories }, { sessionId }) => {
       const index = await (await fetch(`${origin}/index.json`)).json();
       const entriesList = Object.values(index.entries);
       logger.debug("index entries found:", entriesList.length);
       const result = [];
+      let foundStoryCount = 0;
       for (const {
         exportName,
         explicitStoryName,
@@ -4114,6 +4140,7 @@ function registerStoryUrlsTool({
         if (foundStoryId) {
           logger.debug("Found story ID:", foundStoryId);
           result.push(`${origin}/?path=/story/${foundStoryId}`);
+          foundStoryCount++;
         } else {
           logger.debug("No story found");
           let errorMessage = `No story found for export name "${exportName}" with absolute file path "${absoluteStoryPath}"`;
@@ -4123,13 +4150,17 @@ function registerStoryUrlsTool({
           result.push(errorMessage);
         }
       }
+      await collectTelemetry({
+        event: "tool:getStoryUrls",
+        mcpSessionId: sessionId,
+        inputStoryCount: stories.length,
+        outputStoryCount: foundStoryCount
+      });
       return {
-        content: [
-          {
-            type: "text",
-            text: result.length > 1 ? `- ${result.join("\n- ")}` : result[0]
-          }
-        ],
+        content: result.map((text) => ({
+          type: "text",
+          text
+        })),
         // Note: Claude Code seems to ignore structuredContent at the moment https://github.com/anthropics/claude-code/issues/4427
         structuredContent: { urls: result }
       };
@@ -4137,46 +4168,12 @@ function registerStoryUrlsTool({
   );
 }
 
-// src/tools/get-ui-building-instructions.ts
-var INSTRUCTIONS = `
-  # Writing User Interfaces Components
-
-  When writing UI components, prefer breaking larger components up into smaller parts.
-
-  ALWAYS write a Storybook story for any component written. If editing a component, ensure appropriate changes have been made to stories for that component.
-
-  When writing stories, use CSF3 importing types from '@storybook/nextjs-vite'. Here is a simple example:
-
-  \`\`\`ts
-  import { Meta, StoryObj } from '@storybook/nextjs-vite';
-
-  import { Break } from './Break';
-
-  type Story = StoryObj<typeof Break>;
-
-  const meta: Meta<typeof Break> = {
-    component: Break,
-    args: {},
-  };
-
-  export default meta;
-
-  export const Horizontal: Story = {
-    args: {
-      orientation: 'horizontal',
-    },
-  };
-  \`\`\`
-
-  ALWAYS provide story links after any changes to stories files, including changes to existing stories.
-  After changing any UI components, ALWAYS search for related stories that might cover the changes you've made.
-  If you find any, provide the story links to the user. THIS IS VERY IMPORTANT, as it allows the user
-  to visually inspect the modifications you've made.
-  Even later in a session when changing UI components or stories that have already been linked to previously, YOU MUST PROVIDE THE LINKS AGAIN.
-  Use the ${GET_STORY_URLS_TOOL_NAME} tool /and provide links in the format \`[Story Name](<story_url_from_tool>)\`
-  whenever you create, modify, or update any story file.
-`;
-function registerUIBuildingTool(server) {
+// src/ui-building-instructions.md
+var ui_building_instructions_default = "# Storybook 9 Essential Changes for Story Writing\n\n## Package Consolidation\n\n### `Meta` and `StoryObj` imports\n\nUpdate story imports to use the framework package:\n\n```diff\n- import { Meta, StoryObj } from '{{RENDERER}}';\n+ import { Meta, StoryObj } from '{{FRAMEWORK}}';\n```\n\n### Test utility imports\n\nUpdate test imports to use `storybook/test` instead of `@storybook/test`\n\n```diff\n- import { fn } from '@storybook/test';\n+ import { fn } from 'storybook/test';\n```\n\n## Global State Changes\n\nThe `globals` annotation has be renamed to `initialGlobals`:\n\n```diff\n// .storybook/preview.js\nexport default {\n- globals: { theme: 'light' }\n+ initialGlobals: { theme: 'light' }\n};\n```\n\n## Autodocs Configuration\n\nInstead of `parameters.docs.autodocs` in main.js, use tags:\n\n```js\n// .storybook/preview.js or in individual stories\nexport default {\n  tags: [\"autodocs\"], // generates autodocs for all stories\n};\n```\n\n## Mocking imports in Storybook\n\nTo mock imports in Storybook, use Storybook's mocking features. ALWAYS mock external dependencies to ensure stories render consistently.\n\n1. **Register in the mock in Storybook's preview file**:\n   To mock dependendencies, you MUST register a module mock in `.storybook/preview.ts` (or equivalent):\n\n```js\nimport { sb } from \"storybook/test\";\n\n// Full mock (replaces with empty fn functions)\nsb.mock(import(\"some-library\"));\n```\n\n2. **Specify mock values in stories**:\n   You can override the behaviour of the mocks per-story using `beforeEach` and the `mocked()` type function:\n\n```js\nimport { expect, mocked, fn } from 'storybook/test';\nimport { library } from 'some-library';\n\nconst meta = {\n  component: AuthButton,\n  beforeEach: async () => {\n    mocked(library).mockResolvedValue({  user: 'data' });\n  },\n};\n\nexport const LoggedIn: Story = {\n  play: async ({ canvas }) => {\n    await expect(library).toHaveBeenCalled();\n  },\n};\n```\n\nBefore doing this ensure you have mocked the import in the preview file.\n\n## Key Requirements\n\n- **Node.js 20+**, **TypeScript 4.9+**, **Vite 5+**\n- React Native uses `.rnstorybook` directory\n- `afterEach` hook is now stable (was `experimental_afterEach`)\n\n# Story Linking Agent Behavior\n\n- ALWAYS provide story links after any changes to stories files, including changes to existing stories.\n- After changing any UI components, ALWAYS search for related stories that might cover the changes you've made. If you find any, provide the story links to the user. THIS IS VERY IMPORTANT, as it allows the user to visually inspect the changes you've made. Even later in a session when changing UI components or stories that have already been linked to previously, YOU MUST PROVIDE THE LINKS AGAIN.\n- Use the {{GET_STORY_URLS_TOOL_NAME}} tool to get the correct URLs for links to stories.\n";
+function registerUIBuildingTool({
+  server,
+  options
+}) {
   server.registerTool(
     "get_ui_building_instructions",
     {
@@ -4187,23 +4184,69 @@ function registerUIBuildingTool(server) {
       limited to adding or updating new components, pages, screens or layouts.`,
       inputSchema: {}
     },
-    async () => ({
-      content: [{ type: "text", text: INSTRUCTIONS }]
-    })
+    async (_, { sessionId }) => {
+      await collectTelemetry({
+        event: "tool:getUIBuildingInstructions",
+        mcpSessionId: sessionId
+      });
+      const frameworkPreset = await options.presets.apply("framework");
+      const framework = typeof frameworkPreset === "string" ? frameworkPreset : frameworkPreset?.name;
+      const renderer = frameworkToRendererMap[framework];
+      if (!framework || !renderer) {
+        logger.debug("Unable to determine framework or renderer", {
+          frameworkPreset,
+          framework,
+          renderer
+        });
+      }
+      const uiInstructions = ui_building_instructions_default.replace("{{FRAMEWORK}}", framework).replace("{{RENDERER}}", renderer ?? framework).replace("{{GET_STORY_URLS_TOOL_NAME}}", GET_STORY_URLS_TOOL_NAME);
+      return {
+        content: [{ type: "text", text: uiInstructions }]
+      };
+    }
   );
 }
+var frameworkToRendererMap = {
+  "@storybook/react-vite": "@storybook/react",
+  "@storybook/react-webpack5": "@storybook/react",
+  "@storybook/nextjs": "@storybook/react",
+  "@storybook/nextjs-vite": "@storybook/react",
+  "@storybook/react-native-web-vite": "@storybook/react",
+  "@storybook/vue3-vite": "@storybook/vue3",
+  "@nuxtjs/storybook": "@storybook/vue3",
+  "@storybook/angular": "@storybook/angular",
+  "@storybook/svelte-vite": "@storybook/svelte",
+  "@storybook/sveltekit": "@storybook/svelte",
+  "@storybook/preact-vite": "@storybook/preact",
+  "@storybook/web-components-vite": "@storybook/web-components",
+  "@storybook/html-vite": "@storybook/html"
+};
 
 // src/mcp-handler.ts
-function createMcpServer(options) {
+async function createMcpServer(options, client) {
   const transport = new StreamableHTTPServerTransport({
     sessionIdGenerator: () => randomUUID(),
-    onsessioninitialized: (sessionId) => {
+    onsessioninitialized: async (sessionId) => {
       transports[sessionId] = transport;
+      const { disableTelemetry: disableTelemetry2 } = await options.presets.apply(
+        "core",
+        {}
+      );
+      setDisableTelemetry(disableTelemetry2);
+      mcpSessionIdToClientMap[sessionId] = client;
+      await collectTelemetry({
+        event: "session:initialized",
+        mcpSessionId: sessionId
+      });
     }
   });
   transport.onclose = () => {
-    if (transport.sessionId) {
-      delete transports[transport.sessionId];
+    if (!transport.sessionId) {
+      return;
+    }
+    delete transports[transport.sessionId];
+    if (mcpSessionIdToClientMap[transport.sessionId]) {
+      delete mcpSessionIdToClientMap[transport.sessionId];
     }
   };
   const server = new McpServer({
@@ -4211,7 +4254,7 @@ function createMcpServer(options) {
     version: package_default.version
   });
   registerStoryUrlsTool({ server, options });
-  registerUIBuildingTool(server);
+  registerUIBuildingTool({ server, options });
   server.connect(transport);
   return transport;
 }
@@ -4228,7 +4271,7 @@ var handlePostRequest = async (req, res, options) => {
   if (sessionId && transports[sessionId]) {
     transport = transports[sessionId];
   } else if (!sessionId && isInitializeRequest(body)) {
-    transport = await createMcpServer(options);
+    transport = await createMcpServer(options, body.params.clientInfo.name);
   } else {
     res.statusCode = 400;
     res.end(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "everything you need to build a Storybook addon",
   "keywords": [
     "storybook-addons",
@@ -86,7 +86,7 @@
     "build-storybook": "storybook build",
     "build:watch": "pnpm run build -- --watch",
     "changeset": "changeset",
-    "inspect": "mcp-inspector --config .mcp.json",
+    "inspect": "mcp-inspector --transport streamable-http --server-url http://localhost:6006/mcp",
     "release": "pnpm run build && pnpm changeset publish",
     "start": "run-p build:watch \"storybook --quiet\"",
     "storybook": "storybook dev --port 6006 --loglevel debug",