@storybook/addon-mcp 0.3.4 → 0.4.0

package/dist/preset.js

@@ -9,13 +9,13 @@ import { stringify } from "picoquery";
 import path from "node:path";
 import { normalizeStoryPath } from "storybook/internal/common";
 import { storyNameFromExport } from "storybook/internal/csf";
-import { ComponentManifestMap, DocsManifestMap, GET_TOOL_NAME, LIST_TOOL_NAME, addGetDocumentationTool, addGetStoryDocumentationTool, addListAllDocumentationTool } from "@storybook/mcp";
+import { ComponentManifestMap, DocsManifestMap, GET_TOOL_NAME, LIST_TOOL_NAME, STORYBOOK_MCP_INSTRUCTIONS, addGetDocumentationTool, addGetStoryDocumentationTool, addListAllDocumentationTool } from "@storybook/mcp";
 import fs from "node:fs/promises";
 import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.3.4";
+var version = "0.4.0";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -768,7 +768,7 @@ const getManifestStatus = async (options) => {
 		options.presets.apply("experimental_manifests", void 0, { manifestEntries: [] }),
 		options.presets.apply("experimental_componentManifestGenerator")
 	]);
-	const hasManifests = !!manifests || !!legacyComponentManifestGenerator;
+	const hasManifests = manifests && "components" in manifests || !!legacyComponentManifestGenerator;
 	const hasFeatureFlag = !!(features?.componentsManifest ?? features?.experimentalComponentsManifest);
 	return {
 		available: hasFeatureFlag && hasManifests,
@@ -831,6 +831,25 @@ function estimateTokens(text) {
 	return tokenCount;
 }
 
+//#endregion
+//#region src/instructions/dev-instructions.md
+var dev_instructions_default = "## UI Building and Story Writing Workflow\n\n- Before creating or editing components or stories, call **get-storybook-story-instructions**.\n- Treat that tool's output as the source of truth for framework-specific imports, story patterns, and testing conventions.\n- After changing any component or story, call **preview-stories**.\n- Always include every returned preview URL in your user-facing response so the user can verify the visual result.\n";
+
+//#endregion
+//#region src/instructions/test-instructions.md
+var test_instructions_default = "## Validation Workflow\n\n- After each component or story change, run **run-story-tests**.\n- Use focused runs while iterating, then run a broad pass before final handoff when scope is unclear or wide.\n- Fix failing tests before reporting success. Do not report completion while story tests are failing.\n";
+
+//#endregion
+//#region src/instructions/build-server-instructions.ts
+function buildServerInstructions(options) {
+	const sections = ["Follow these workflows when working with UI and/or Storybook."];
+	if (options.devEnabled) sections.push(dev_instructions_default.trim());
+	if (options.testEnabled) sections.push(test_instructions_default.trim());
+	if (options.docsEnabled) sections.push(STORYBOOK_MCP_INSTRUCTIONS.trim());
+	if (sections.length === 1) return "";
+	return sections.join("\n\n");
+}
+
 //#endregion
 //#region src/mcp-handler.ts
 let transport;
@@ -840,17 +859,29 @@ let disableTelemetry;
 let a11yEnabled;
 const initializeMCPServer = async (options, multiSource) => {
 	disableTelemetry = (await options.presets.apply("core", {}))?.disableTelemetry ?? false;
-	const server = new McpServer({
-		name,
-		version,
-		description
-	}, {
+	const addonVitestConstants = await getAddonVitestConstants();
+	const manifestStatus = await getManifestStatus(options);
+	a11yEnabled = await isAddonA11yEnabled(options);
+	let server;
+	const serverOptions = {
 		adapter: new ValibotJsonSchemaAdapter(),
+		get instructions() {
+			return buildServerInstructions({
+				devEnabled: server?.ctx.custom?.toolsets?.dev ?? true,
+				testEnabled: (server?.ctx.custom?.toolsets?.test ?? true) && !!addonVitestConstants,
+				docsEnabled: (server?.ctx.custom?.toolsets?.docs ?? true) && manifestStatus.available
+			});
+		},
 		capabilities: {
 			tools: { listChanged: true },
 			resources: { listChanged: true }
 		}
-	}).withContext();
+	};
+	server = new McpServer({
+		name,
+		version,
+		description
+	}, serverOptions).withContext();
 	if (!disableTelemetry) server.on("initialize", async () => {
 		await collectTelemetry({
 			event: "session:initialized",
@@ -859,9 +890,8 @@ const initializeMCPServer = async (options, multiSource) => {
 	});
 	await addPreviewStoriesTool(server);
 	await addGetUIBuildingInstructionsTool(server);
-	a11yEnabled = await isAddonA11yEnabled(options);
 	await addRunStoryTestsTool(server, { a11yEnabled });
-	if ((await getManifestStatus(options)).available) {
+	if (manifestStatus.available) {
 		logger.info("Experimental components manifest feature detected - registering component tools");
 		const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
 		await addListAllDocumentationTool(server, contextAwareEnabled);
@@ -1298,7 +1328,7 @@ const experimental_devServer = async (app, options) => {
 				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.
+				This toolset requires enabling the 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 testNoticeLines = [!addonVitestConstants && `This toolset requires Storybook 10.3.0+ with <code>@storybook/addon-vitest</code>. <a target="_blank" href="https://storybook.js.org/docs/writing-tests/test-addon">Learn how to set it up</a>`, !a11yEnabled && `Add <code>@storybook/addon-a11y</code> for accessibility testing. <a target="_blank" href="https://storybook.js.org/docs/writing-tests/accessibility-testing">Learn more</a>`].filter(Boolean);

package/dist/preview-stories-app-script.js

@@ -4,7 +4,7 @@ const MCP_APP_SIZE_CHANGED_EVENT = "storybook-mcp:size-changed";
 
 //#endregion
 //#region package.json
-var version = "0.3.4";
+var version = "0.4.0";
 
 //#endregion
 //#region src/tools/preview-stories/preview-stories-app-script.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "ai",
@@ -34,12 +34,12 @@
     "picoquery": "^2.5.0",
     "tmcp": "^1.16.0",
     "valibot": "1.2.0",
-    "@storybook/mcp": "0.5.1"
+    "@storybook/mcp": "0.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "10.3.0-alpha.12",
-    "@storybook/addon-vitest": "10.3.0-alpha.12",
-    "storybook": "10.3.0-alpha.12"
+    "@storybook/addon-a11y": "10.3.0-alpha.16",
+    "@storybook/addon-vitest": "10.3.0-alpha.16",
+    "storybook": "10.3.0-alpha.16"
   },
   "peerDependencies": {
     "@storybook/addon-vitest": "^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0",