@storybook/addon-mcp 0.1.0 → 0.1.2

package/README.md

@@ -15,7 +15,7 @@ The addon provides tools to improve agents' UI development capabilities, retriev
 ### Installation and Setup
 
 > [!NOTE]
-> This addon requires Storybook 10.1 or higher, currently only available as the canary version `0.0.0-pr-32810-sha-6e759c7e`.
+> This addon requires Storybook version 9.1.16 or higher.
 
 Use Storybook's CLI to automatically install and configure the addon:
 
@@ -33,6 +33,52 @@ npm run storybook
 
 The MCP server will be available at `<your_storybook_dev_server_origin>/mcp` when Storybook is running.
 
+### Configuration
+
+#### Addon Options
+
+You can configure which toolsets are enabled by default in your `.storybook/main.js`:
+
+```javascript
+// .storybook/main.js
+export default {
+	addons: [
+		{
+			name: '@storybook/addon-mcp',
+			options: {
+				toolsets: {
+					dev: true, // Tools for story URL retrieval and UI building instructions (default: true)
+					docs: true, // Tools for component manifest and documentation (default: true, requires experimental feature)
+				},
+			},
+		},
+	],
+};
+```
+
+**Available Toolsets:**
+
+- `dev`: Enables [Dev Tools](#dev-tools)
+- `docs`: Enables [Documentation Tools](#docs-tools-experimental)
+
+Disabling the Dev Tools is useful when you want to try out the same experience that your external component consumers will get, because they only get the Component Documentation Tools.
+
+#### Configuring toolsets with headers
+
+You can also configure the available toolsets when setting up the MCP Server in your MCP Client by setting the `X-MCP-Toolsets` header. The header is a comma-separated list of toolset names, `X-MCP-Toolsets: dev,docs`. Eg. to configure your client to only have the Component Documentation Tools, the `.mcp.json`-file could look like this (format depends on the exact client you're using):
+
+```json
+{
+	"storybook-mcp": {
+		"url": "http://localhost:6006/mcp",
+		"type": "http",
+		"headers": {
+			"X-MCP-Toolsets": "docs"
+		}
+	}
+}
+```
+
 ### Configuring Your Agent
 
 > [!NOTE]
@@ -88,7 +134,7 @@ This addon provides MCP tools that your agent can use. The goal is that the agen
 
 **If you are prompting from an IDE like VSCode or Cursor, be sure to use `Agent` mode and `sonnet-4.5` or better.**
 
-### Core Tools
+### Dev Tools
 
 These tools are always available when the addon is installed:
 
@@ -119,12 +165,13 @@ Agent calls tool, gets response:
 http://localhost:6006/?path=/story/example-button--primary
 ```
 
-### Component Documentation Tools (Experimental)
+### Docs Tools (Experimental)
 
 These additional tools are available when the **experimental** component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
 
 **Requirements:**
 
+- 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`
 

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.1.0";
+var version = "0.1.2";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -69,6 +69,13 @@ const errorToMCPContent = (error) => {
 
 //#endregion
 //#region src/types.ts
+const AddonOptions = v.object({ toolsets: v.optional(v.object({
+	dev: v.exactOptional(v.boolean(), true),
+	docs: v.exactOptional(v.boolean(), true)
+}), {
+	dev: true,
+	docs: true
+}) });
 /**
 * Schema for a single story input when requesting story URLs.
 */
@@ -95,7 +102,8 @@ async function addGetStoryUrlsTool(server) {
 		name: GET_STORY_URLS_TOOL_NAME,
 		title: "Get stories' URLs",
 		description: `Get the URL for one or more stories.`,
-		schema: GetStoryUrlsInput
+		schema: GetStoryUrlsInput,
+		enabled: () => server.ctx.custom?.toolsets?.dev ?? true
 	}, async (input) => {
 		try {
 			const { origin: origin$1, disableTelemetry } = server.ctx.custom ?? {};
@@ -155,7 +163,8 @@ async function addGetUIBuildingInstructionsTool(server) {
 		description: `Instructions on how to do UI component development. 
       
       ALWAYS call this tool before doing any UI/frontend/React/component development, including but not
-      limited to adding or updating new components, pages, screens or layouts.`
+      limited to adding or updating new components, pages, screens or layouts.`,
+		enabled: () => server.ctx.custom?.toolsets?.dev ?? true
 	}, async () => {
 		try {
 			const { options, disableTelemetry } = server.ctx.custom ?? {};
@@ -217,27 +226,44 @@ const initializeMCPServer = async (options) => {
 	const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
 	if (features.experimentalComponentsManifest && componentManifestGenerator) {
 		logger.info("Experimental components manifest feature detected - registering component tools");
-		await addListAllComponentsTool(server);
-		await addGetComponentDocumentationTool(server);
+		const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
+		await addListAllComponentsTool(server, contextAwareEnabled);
+		await addGetComponentDocumentationTool(server, contextAwareEnabled);
 	}
 	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 mcpServerHandler = async ({ req, res, next, options, addonOptions }) => {
+	const disableTelemetry = options.disableTelemetry ?? false;
 	if (!initialize) initialize = initializeMCPServer(options);
-	await initialize;
+	const server = await initialize;
 	const webRequest = await incomingMessageToWebRequest(req);
 	const addonContext = {
 		options,
+		toolsets: getToolsets(webRequest, addonOptions),
 		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);
@@ -278,11 +304,32 @@ async function webResponseToServerResponse(webResponse, nodeResponse) {
 	}
 	nodeResponse.end();
 }
+function getToolsets(request, addonOptions) {
+	const toolsetHeader = request.headers.get("X-MCP-Toolsets");
+	if (!toolsetHeader || toolsetHeader.trim() === "") return addonOptions.toolsets;
+	const toolsets = {
+		dev: false,
+		docs: false
+	};
+	const enabledToolsets = toolsetHeader.split(",");
+	for (const enabledToolset of enabledToolsets) {
+		const trimmedToolset = enabledToolset.trim();
+		if (trimmedToolset in toolsets) toolsets[trimmedToolset] = true;
+	}
+	return toolsets;
+}
 
 //#endregion
 //#region src/preset.ts
 const experimental_devServer = (app, options) => {
-	app.use("/mcp", (req, res, next) => mcpServerHandler(req, res, next, options));
+	const addonOptions = v.parse(AddonOptions, { toolsets: options.toolsets ?? {} });
+	app.use("/mcp", (req, res, next) => mcpServerHandler({
+		req,
+		res,
+		next,
+		options,
+		addonOptions
+	}));
 	return app;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -27,10 +27,10 @@
   ],
   "dependencies": {
     "@tmcp/adapter-valibot": "^0.1.4",
-    "@tmcp/transport-http": "^0.7.0",
-    "tmcp": "^1.15.2",
+    "@tmcp/transport-http": "^0.8.0",
+    "tmcp": "^1.16.0",
     "valibot": "^1.1.0",
-    "@storybook/mcp": "0.0.4"
+    "@storybook/mcp": "0.0.6"
   },
   "devDependencies": {
     "@types/node": "20.19.0",
@@ -40,10 +40,10 @@
     "tsdown": "^0.15.9",
     "typescript": "^5.9.3",
     "vite": "^7.0.5",
-    "vitest": "^3.2.4"
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
-    "storybook": "0.0.0-pr-32810-sha-6e759c7e"
+    "storybook": "^9.1.16 || ^10.0.0"
   },
   "publishConfig": {
     "access": "public"