@storybook/addon-mcp 0.0.9 → 0.1.1

package/README.md

@@ -6,9 +6,6 @@ It enables a workflow where for each UI component created, the agent will automa
 
 The addon provides tools to improve agents' UI development capabilities, retrieve story URLs, and access component documentation.
 
-> [!IMPORTANT]
-> This addon currently only supports Vite-based Storybook setups, such as [`@storybook/react-vite`](https://storybook.js.org/docs/get-started/frameworks/react-vite), [`@storybook/nextjs-vite`](https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite), and [`@storybook/sveltekit`](https://storybook.js.org/docs/get-started/frameworks/sveltekit).
-
 <div align="center">
    <img src="https://storybook.js.org/embed/addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
 </div>
@@ -18,7 +15,7 @@ The addon provides tools to improve agents' UI development capabilities, retriev
 ### Installation and Setup
 
 > [!NOTE]
-> This addon requires Storybook 9.0 or higher.
+> This addon requires Storybook version 9.1.16 or higher.
 
 Use Storybook's CLI to automatically install and configure the addon:
 
@@ -128,8 +125,8 @@ These additional tools are available when the **experimental** component manifes
 
 **Requirements:**
 
-- Storybook v10.1 or later (prereleases), currently available as [canary version `0.0.0-pr-32810-sha-af0645cd`](https://www.npmjs.com/package/storybook/v/0.0.0-pr-32810-sha-af0645cd)
-- React-based framework (`react-vite`, `nextjs-vite`)
+- Storybook version 10.1.0 or higher (currently only available as prereleases, `storybook@next`)
+- React-based framework (`react-vite`, `nextjs-vite`, `nextjs`, `react-webpack5`)
 - Feature flag `features.experimentalComponentsManifest` set to `true` in `.storybook/main.js`
 
 **To enable:**

package/dist/preset.js

@@ -11,7 +11,7 @@ import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.0.9";
+var version = "0.1.1";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -223,21 +223,40 @@ const initializeMCPServer = async (options) => {
 	transport = new HttpTransport(server, { path: null });
 	origin = `http://localhost:${options.port}`;
 	logger.debug("MCP server origin:", origin);
+	return server;
 };
 /**
 * Vite middleware handler that wraps the MCP handler.
 * This converts Node.js IncomingMessage/ServerResponse to Web API Request/Response.
 */
 const mcpServerHandler = async (req, res, next, options) => {
-	const { disableTelemetry = false } = await options.presets.apply("core", {});
+	const disableTelemetry = options.disableTelemetry ?? false;
 	if (!initialize) initialize = initializeMCPServer(options);
-	await initialize;
+	const server = await initialize;
 	const webRequest = await incomingMessageToWebRequest(req);
 	const addonContext = {
 		options,
 		origin,
 		disableTelemetry,
-		source: `${origin}/manifests/components.json`
+		source: `${origin}/manifests/components.json`,
+		...!disableTelemetry && {
+			onListAllComponents: async ({ manifest }) => {
+				await collectTelemetry({
+					event: "tool:listAllComponents",
+					server,
+					componentCount: Object.keys(manifest.components).length
+				});
+			},
+			onGetComponentDocumentation: async ({ input, foundComponents, notFoundIds }) => {
+				await collectTelemetry({
+					event: "tool:getComponentDocumentation",
+					server,
+					inputComponentCount: input.componentIds.length,
+					foundCount: foundComponents.length,
+					notFoundCount: notFoundIds.length
+				});
+			}
+		}
 	};
 	const response = await transport.respond(webRequest, addonContext);
 	if (response) await webResponseToServerResponse(response, res);
@@ -281,18 +300,10 @@ async function webResponseToServerResponse(webResponse, nodeResponse) {
 
 //#endregion
 //#region src/preset.ts
-const viteFinal = async (config, options) => {
-	const mcpHandlerPlugin = {
-		name: "storybook:mcp-server",
-		configureServer(server) {
-			server.middlewares.use("/mcp", (req, res, next) => mcpServerHandler(req, res, next, options));
-		}
-	};
-	return {
-		...config,
-		plugins: config.plugins.concat(mcpHandlerPlugin)
-	};
+const experimental_devServer = (app, options) => {
+	app.use("/mcp", (req, res, next) => mcpServerHandler(req, res, next, options));
+	return app;
 };
 
 //#endregion
-export { viteFinal };
+export { experimental_devServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -30,20 +30,20 @@
     "@tmcp/transport-http": "^0.7.0",
     "tmcp": "^1.15.2",
     "valibot": "^1.1.0",
-    "@storybook/mcp": "0.0.3"
+    "@storybook/mcp": "0.0.5"
   },
   "devDependencies": {
     "@types/node": "20.19.0",
     "@vitest/coverage-v8": "3.2.4",
-    "storybook": "^10.0.0-0",
+    "storybook": "0.0.0-pr-32810-sha-6e759c7e",
     "ts-dedent": "^2.2.0",
     "tsdown": "^0.15.9",
     "typescript": "^5.9.3",
     "vite": "^7.0.5",
-    "vitest": "^3.2.4"
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
-    "storybook": ">=9.0.0"
+    "storybook": "^9.1.16 || ^10.0.0"
   },
   "publishConfig": {
     "access": "public"