@storybook/addon-mcp 0.1.1 → 0.1.3

package/README.md

@@ -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,7 +165,7 @@ 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.
 

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.1";
+var version = "0.1.3";
 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 ?? {};
@@ -192,6 +201,13 @@ const frameworkToRendererMap = {
 	"@storybook/html-vite": "@storybook/html"
 };
 
+//#endregion
+//#region src/tools/is-manifest-available.ts
+const isManifestAvailable = async (options) => {
+	const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
+	return features.experimentalComponentsManifest && componentManifestGenerator;
+};
+
 //#endregion
 //#region src/mcp-handler.ts
 let transport;
@@ -214,28 +230,25 @@ const initializeMCPServer = async (options) => {
 	});
 	await addGetStoryUrlsTool(server);
 	await addGetUIBuildingInstructionsTool(server);
-	const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
-	if (features.experimentalComponentsManifest && componentManifestGenerator) {
+	if (await isManifestAvailable(options)) {
 		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 mcpServerHandler = async ({ req, res, next, options, addonOptions }) => {
 	const disableTelemetry = options.disableTelemetry ?? false;
 	if (!initialize) initialize = initializeMCPServer(options);
 	const server = await initialize;
 	const webRequest = await incomingMessageToWebRequest(req);
 	const addonContext = {
 		options,
+		toolsets: getToolsets(webRequest, addonOptions),
 		origin,
 		disableTelemetry,
 		source: `${origin}/manifests/components.json`,
@@ -297,11 +310,134 @@ 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 experimental_devServer = async (app, options) => {
+	const addonOptions = v.parse(AddonOptions, { toolsets: options.toolsets ?? {} });
+	app.post("/mcp", (req, res, next) => mcpServerHandler({
+		req,
+		res,
+		next,
+		options,
+		addonOptions
+	}));
+	const shouldRedirect = await isManifestAvailable(options);
+	app.get("/mcp", async (req, res) => {
+		if ((req.headers["accept"] || "").includes("text/html")) {
+			res.writeHead(200, { "Content-Type": "text/html" });
+			res.end(`
+        <!DOCTYPE html>
+        <html>
+					<head>
+						${shouldRedirect ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : ""}
+						<style>
+							@font-face {
+								font-family: 'Nunito Sans';
+								font-style: normal;
+								font-weight: 400;
+								font-display: swap;
+								src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+							}
+							
+							* {
+								margin: 0;
+								padding: 0;
+								box-sizing: border-box;
+							}
+							
+							html, body {
+								height: 100%;
+								font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+							}
+							
+							body {
+								display: flex;
+								flex-direction: column;
+								justify-content: center;
+								align-items: center;
+								text-align: center;
+								padding: 2rem;
+								background-color: #ffffff;
+								color: rgb(46, 52, 56);
+								line-height: 1.6;
+							}
+							
+							p {
+								margin-bottom: 1rem;
+							}
+							
+							code {
+								font-family: 'Monaco', 'Courier New', monospace;
+								background: #f5f5f5;
+								padding: 0.2em 0.4em;
+								border-radius: 3px;
+							}
+							
+							a {
+								color: #1ea7fd;
+							}
+							
+							@media (prefers-color-scheme: dark) {
+								body {
+									background-color: rgb(34, 36, 37);
+									color: rgb(201, 205, 207);
+								}
+								
+								code {
+									background: rgba(255, 255, 255, 0.1);
+								}
+							}
+						</style>
+					</head>
+					<body>
+						<div>
+							<p>
+								Storybook MCP server successfully running via
+								<code>@storybook/addon-mcp</code>.
+							</p>
+							<p>
+								See how to connect to it from your coding agent in <a target="_blank" href="https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#configuring-your-agent">the addon's README</a>.
+							</p>
+							${shouldRedirect ? `
+									<p>
+										Automatically redirecting to
+										<a href="/manifests/components.html">component manifest</a>
+										in <span id="countdown">10</span> seconds...
+									</p>` : ""}
+						</div>
+						${shouldRedirect ? `
+							<script>
+								let countdown = 10;
+								const countdownElement = document.getElementById('countdown');
+								setInterval(() => {
+									countdown -= 1;
+									countdownElement.textContent = countdown.toString();
+								}, 1000);
+							<\/script>
+							` : ""}
+					</body>
+        </html>
+      `);
+		} else {
+			res.writeHead(200, { "Content-Type": "text/plain" });
+			res.end("Storybook MCP server successfully running via @storybook/addon-mcp");
+		}
+	});
 	return app;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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.5"
+    "@storybook/mcp": "0.0.6"
   },
   "devDependencies": {
     "@types/node": "20.19.0",