@storybook/addon-mcp 0.1.4 → 0.1.6

package/README.md

@@ -48,12 +48,15 @@ export default {
 			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)
+					docs: true, // Tools for component manifest and documentation (default: true, requires experimental feature flag below 👇)
 				},
 				experimentalFormat: 'markdown', // Output format: 'markdown' (default) or 'xml'
 			},
 		},
 	],
+	features: {
+		experimentalComponentsManifest: true, // Enable manifest generation for the docs toolset, only supported in React-based setups.
+	},
 };
 ```
 

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.4";
+var version = "0.1.6";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -26,7 +26,7 @@ async function collectTelemetry({ event, server, ...payload }) {
 			...payload
 		});
 	} catch (error) {
-		logger.debug("Error collecting telemetry:", error);
+		logger.debug(`Error collecting telemetry: ${error}`);
 	}
 }
 
@@ -41,11 +41,11 @@ async function collectTelemetry({ event, server, ...payload }) {
 */
 async function fetchStoryIndex(origin$1) {
 	const indexUrl = `${origin$1}/index.json`;
-	logger.debug("Fetching story index from:", indexUrl);
+	logger.debug(`Fetching story index from: ${indexUrl}`);
 	const response = await fetch(indexUrl);
 	if (!response.ok) throw new Error(`Failed to fetch story index: ${response.status} ${response.statusText}`);
 	const index = await response.json();
-	logger.debug("Story index entries found:", Object.keys(index.entries).length);
+	logger.debug(`Story index entries found: ${Object.keys(index.entries).length}`);
 	return index;
 }
 
@@ -126,7 +126,7 @@ async function addGetStoryUrlsTool(server) {
 				});
 				const foundStoryId = entriesList.find((entry) => entry.importPath === relativePath && [explicitStoryName, storyNameFromExport(exportName)].includes(entry.name))?.id;
 				if (foundStoryId) {
-					logger.debug("Found story ID:", foundStoryId);
+					logger.debug(`Found story ID: ${foundStoryId}`);
 					result.push(`${origin$1}/?path=/story/${foundStoryId}`);
 					foundStoryCount++;
 				} else {
@@ -208,9 +208,15 @@ const frameworkToRendererMap = {
 
 //#endregion
 //#region src/tools/is-manifest-available.ts
-const isManifestAvailable = async (options) => {
+const getManifestStatus = async (options) => {
 	const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
-	return features.experimentalComponentsManifest && componentManifestGenerator;
+	const hasGenerator = !!componentManifestGenerator;
+	const hasFeatureFlag = !!features?.experimentalComponentsManifest;
+	return {
+		available: hasFeatureFlag && hasGenerator,
+		hasGenerator,
+		hasFeatureFlag
+	};
 };
 
 //#endregion
@@ -237,7 +243,7 @@ const initializeMCPServer = async (options) => {
 	});
 	await addGetStoryUrlsTool(server);
 	await addGetUIBuildingInstructionsTool(server);
-	if (await isManifestAvailable(options)) {
+	if ((await getManifestStatus(options)).available) {
 		logger.info("Experimental components manifest feature detected - registering component tools");
 		const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
 		await addListAllComponentsTool(server, contextAwareEnabled);
@@ -245,7 +251,7 @@ const initializeMCPServer = async (options) => {
 	}
 	transport = new HttpTransport(server, { path: null });
 	origin = `http://localhost:${options.port}`;
-	logger.debug("MCP server origin:", origin);
+	logger.debug(`MCP server origin: ${origin}`);
 	return server;
 };
 const mcpServerHandler = async ({ req, res, options, addonOptions }) => {
@@ -335,7 +341,7 @@ function getToolsets(request, addonOptions) {
 
 //#endregion
 //#region src/template.html
-var template_default = "<!doctype html>\n<html>\n	<head>\n		{{REDIRECT_META}}\n		<style>\n			@font-face {\n				font-family: 'Nunito Sans';\n				font-style: normal;\n				font-weight: 400;\n				font-display: swap;\n				src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');\n			}\n\n			* {\n				margin: 0;\n				padding: 0;\n				box-sizing: border-box;\n			}\n\n			html,\n			body {\n				height: 100%;\n				font-family:\n					'Nunito Sans',\n					-apple-system,\n					BlinkMacSystemFont,\n					'Segoe UI',\n					Roboto,\n					Oxygen,\n					Ubuntu,\n					Cantarell,\n					sans-serif;\n			}\n\n			body {\n				display: flex;\n				flex-direction: column;\n				justify-content: center;\n				align-items: center;\n				text-align: center;\n				padding: 2rem;\n				background-color: #ffffff;\n				color: rgb(46, 52, 56);\n				line-height: 1.6;\n			}\n\n			p {\n				margin-bottom: 1rem;\n			}\n\n			code {\n				font-family: 'Monaco', 'Courier New', monospace;\n				background: #f5f5f5;\n				padding: 0.2em 0.4em;\n				border-radius: 3px;\n			}\n\n			a {\n				color: #1ea7fd;\n			}\n\n			@media (prefers-color-scheme: dark) {\n				body {\n					background-color: rgb(34, 36, 37);\n					color: rgb(201, 205, 207);\n				}\n\n				code {\n					background: rgba(255, 255, 255, 0.1);\n				}\n			}\n		</style>\n	</head>\n	<body>\n		<div>\n			<p>\n				Storybook MCP server successfully running via\n				<code>@storybook/addon-mcp</code>.\n			</p>\n			<p>\n				See how to connect to it from your coding agent in\n				<a\n					target=\"_blank\"\n					href=\"https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#configuring-your-agent\"\n					>the addon's README</a\n				>.\n			</p>\n			<p id=\"redirect-message\">\n				Automatically redirecting to\n				<a href=\"/manifests/components.html\">component manifest</a>\n				in <span id=\"countdown\">10</span> seconds...\n			</p>\n		</div>\n		<script>\n			let countdown = 10;\n			const countdownElement = document.getElementById('countdown');\n			if (countdownElement) {\n				setInterval(() => {\n					countdown -= 1;\n					countdownElement.textContent = countdown.toString();\n				}, 1000);\n			}\n		<\/script>\n	</body>\n</html>\n";
+var template_default = "<!doctype html>\n<html>\n	<head>\n		{{REDIRECT_META}}\n		<style>\n			@font-face {\n				font-family: 'Nunito Sans';\n				font-style: normal;\n				font-weight: 400;\n				font-display: swap;\n				src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');\n			}\n\n			* {\n				margin: 0;\n				padding: 0;\n				box-sizing: border-box;\n			}\n\n			html,\n			body {\n				height: 100%;\n				font-family:\n					'Nunito Sans',\n					-apple-system,\n					BlinkMacSystemFont,\n					'Segoe UI',\n					Roboto,\n					Oxygen,\n					Ubuntu,\n					Cantarell,\n					sans-serif;\n			}\n\n			body {\n				display: flex;\n				flex-direction: column;\n				justify-content: center;\n				align-items: center;\n				text-align: center;\n				padding: 2rem;\n				background-color: #ffffff;\n				color: rgb(46, 52, 56);\n				line-height: 1.6;\n			}\n\n			p {\n				margin-bottom: 1rem;\n			}\n\n			code {\n				font-family: 'Monaco', 'Courier New', monospace;\n				background: #f5f5f5;\n				padding: 0.2em 0.4em;\n				border-radius: 3px;\n			}\n\n			a {\n				color: #1ea7fd;\n			}\n\n			.container {\n				display: flex;\n				flex-direction: column;\n				align-items: center;\n			}\n\n			.toolsets {\n				margin: 1.5rem 0;\n				text-align: left;\n				max-width: 500px;\n			}\n\n			.toolsets h3 {\n				font-size: 1rem;\n				margin-bottom: 0.75rem;\n				text-align: center;\n			}\n\n			.toolset {\n				margin-bottom: 1rem;\n				padding: 0.75rem 1rem;\n				border-radius: 6px;\n				background: #f8f9fa;\n				border: 1px solid #e9ecef;\n			}\n\n			.toolset-header {\n				display: flex;\n				align-items: center;\n				gap: 0.5rem;\n				font-weight: 600;\n				margin-bottom: 0.5rem;\n			}\n\n			.toolset-status {\n				display: inline-block;\n				padding: 0.15em 0.5em;\n				border-radius: 3px;\n				font-size: 0.75rem;\n				font-weight: 500;\n				text-transform: uppercase;\n			}\n\n			.toolset-status.enabled {\n				background: #d4edda;\n				color: #155724;\n			}\n\n			.toolset-status.disabled {\n				background: #f8d7da;\n				color: #721c24;\n			}\n\n			.toolset-tools {\n				font-size: 0.875rem;\n				color: #6c757d;\n				padding-left: 1.5rem;\n				margin: 0;\n			}\n\n			.toolset-tools li {\n				margin-bottom: 0.25rem;\n			}\n\n			.toolset-tools code {\n				font-size: 0.8rem;\n			}\n\n			.toolset-notice {\n				font-size: 0.8rem;\n				color: #856404;\n				background: #fff3cd;\n				padding: 0.5rem;\n				border-radius: 4px;\n				margin-top: 0.5rem;\n			}\n\n			.toolset-notice a {\n				color: #533f03;\n			}\n\n			@media (prefers-color-scheme: dark) {\n				body {\n					background-color: rgb(34, 36, 37);\n					color: rgb(201, 205, 207);\n				}\n\n				code {\n					background: rgba(255, 255, 255, 0.1);\n				}\n\n				.toolset {\n					background: rgba(255, 255, 255, 0.05);\n					border-color: rgba(255, 255, 255, 0.1);\n				}\n\n				.toolset-tools {\n					color: #adb5bd;\n				}\n\n				.toolset-status.enabled {\n					background: rgba(40, 167, 69, 0.2);\n					color: #75d67e;\n				}\n\n				.toolset-status.disabled {\n					background: rgba(220, 53, 69, 0.2);\n					color: #f5a6ad;\n				}\n\n				.toolset-notice {\n					background: rgba(255, 193, 7, 0.15);\n					color: #ffc107;\n				}\n\n				.toolset-notice a {\n					color: #ffe066;\n				}\n			}\n		</style>\n	</head>\n	<body>\n		<div class=\"container\">\n			<p>\n				Storybook MCP server successfully running via\n				<code>@storybook/addon-mcp</code>.\n			</p>\n			<p>\n				See how to connect to it from your coding agent in\n				<a\n					target=\"_blank\"\n					href=\"https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#configuring-your-agent\"\n					>the addon's README</a\n				>.\n			</p>\n\n			<div class=\"toolsets\">\n				<h3>Available Toolsets</h3>\n\n				<div class=\"toolset\">\n					<div class=\"toolset-header\">\n						<span>dev</span>\n						<span class=\"toolset-status {{DEV_STATUS}}\">{{DEV_STATUS}}</span>\n					</div>\n					<ul class=\"toolset-tools\">\n						<li><code>get-story-urls</code></li>\n						<li><code>get-ui-building-instructions</code></li>\n					</ul>\n				</div>\n\n				<div class=\"toolset\">\n					<div class=\"toolset-header\">\n						<span>docs</span>\n						<span class=\"toolset-status {{DOCS_STATUS}}\">{{DOCS_STATUS}}</span>\n					</div>\n					<ul class=\"toolset-tools\">\n						<li><code>list-all-components</code></li>\n						<li><code>get-component-documentation</code></li>\n					</ul>\n					{{DOCS_NOTICE}}\n				</div>\n			</div>\n\n			<p id=\"redirect-message\">\n				Automatically redirecting to\n				<a href=\"/manifests/components.html\">component manifest</a>\n				in <span id=\"countdown\">10</span> seconds...\n			</p>\n		</div>\n		<script>\n			let countdown = 10;\n			const countdownElement = document.getElementById('countdown');\n			if (countdownElement) {\n				setInterval(() => {\n					countdown -= 1;\n					countdownElement.textContent = countdown.toString();\n				}, 1000);\n			}\n		<\/script>\n	</body>\n</html>\n";
 
 //#endregion
 //#region src/preset.ts
@@ -350,7 +356,9 @@ const experimental_devServer = async (app, options) => {
 		options,
 		addonOptions
 	}));
-	const shouldRedirect = await isManifestAvailable(options);
+	const manifestStatus = await getManifestStatus(options);
+	const isDevEnabled = addonOptions.toolsets?.dev ?? true;
+	const isDocsEnabled = manifestStatus.available && (addonOptions.toolsets?.docs ?? true);
 	app.get("/mcp", (req, res) => {
 		if (!req.headers["accept"]?.includes("text/html")) return mcpServerHandler({
 			req,
@@ -359,7 +367,15 @@ const experimental_devServer = async (app, options) => {
 			addonOptions
 		});
 		res.writeHead(200, { "Content-Type": "text/html" });
-		const html = template_default.replace("{{REDIRECT_META}}", shouldRedirect ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : "<style>#redirect-message { display: none; }</style>");
+		let docsNotice = "";
+		if (!manifestStatus.hasGenerator) docsNotice = `<div class="toolset-notice">
+				This toolset is only supported in React-based setups.
+			</div>`;
+		else if (!manifestStatus.hasFeatureFlag) docsNotice = `<div class="toolset-notice">
+				This toolset requires enabling the experimental component manifest feature.
+				<a target="_blank" href="https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#docs-tools-experimental">Learn how to enable it</a>
+			</div>`;
+		const html = template_default.replace("{{REDIRECT_META}}", manifestStatus.available ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : "<style>#redirect-message { display: none; }</style>").replaceAll("{{DEV_STATUS}}", isDevEnabled ? "enabled" : "disabled").replaceAll("{{DOCS_STATUS}}", isDocsEnabled ? "enabled" : "disabled").replace("{{DOCS_NOTICE}}", docsNotice);
 		res.end(html);
 	});
 	return app;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -28,11 +28,11 @@
     "@tmcp/adapter-valibot": "^0.1.4",
     "@tmcp/transport-http": "^0.8.0",
     "tmcp": "^1.16.0",
-    "valibot": "1.1.0",
-    "@storybook/mcp": "0.1.0"
+    "valibot": "1.2.0",
+    "@storybook/mcp": "0.1.1"
   },
   "devDependencies": {
-    "storybook": "10.1.0-alpha.11"
+    "storybook": "10.1.2"
   },
   "peerDependencies": {
     "storybook": "^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0"