@storybook/addon-mcp 0.1.4-next.2 → 0.1.5

package/README.md

@@ -7,7 +7,7 @@ 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.
 
 <div align="center">
-   <img src="https://storybook.js.org/embed/addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
+   <img src="./addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
 </div>
 
 ## Getting Started
@@ -48,11 +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.
+	},
 };
 ```
 
@@ -193,12 +197,12 @@ Returns a list of all available UI components in your component library. Useful
 
 #### 4. Get Component Documentation (`get-component-documentation`)
 
-Retrieves detailed documentation for specific components, including:
+Retrieves detailed documentation for a specific component, including:
 
 - Component documentation
 - Usage examples
 
-The agent provides component IDs to retrieve their documentation.
+The agent provides a component ID to retrieve its documentation. To get documentation for multiple components, call this tool multiple times.
 
 ## Contributing
 

package/dist/preset.js

@@ -11,12 +11,12 @@ import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.1.4-next.2";
+var version = "0.1.5";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
 //#region src/telemetry.ts
-async function collectTelemetry({ event, server,...payload }) {
+async function collectTelemetry({ event, server, ...payload }) {
 	try {
 		return await telemetry("addon-mcp", {
 			event,
@@ -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;
 }
 
@@ -69,13 +69,16 @@ 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
-}) });
+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
+	}),
+	experimentalFormat: v.optional(v.picklist(["xml", "markdown"]), "markdown")
+});
 /**
 * Schema for a single story input when requesting story URLs.
 */
@@ -106,7 +109,7 @@ async function addGetStoryUrlsTool(server) {
 		enabled: () => server.ctx.custom?.toolsets?.dev ?? true
 	}, async (input) => {
 		try {
-			const { origin: origin$1, disableTelemetry } = server.ctx.custom ?? {};
+			const { origin: origin$1, disableTelemetry: disableTelemetry$1 } = server.ctx.custom ?? {};
 			if (!origin$1) throw new Error("Origin is required in addon context");
 			const index = await fetchStoryIndex(origin$1);
 			const entriesList = Object.values(index.entries);
@@ -123,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 {
@@ -133,9 +136,10 @@ async function addGetStoryUrlsTool(server) {
 					result.push(errorMessage);
 				}
 			}
-			if (!disableTelemetry) await collectTelemetry({
+			if (!disableTelemetry$1) await collectTelemetry({
 				event: "tool:getStoryUrls",
 				server,
+				toolset: "dev",
 				inputStoryCount: input.stories.length,
 				outputStoryCount: foundStoryCount
 			});
@@ -151,7 +155,7 @@ async function addGetStoryUrlsTool(server) {
 
 //#endregion
 //#region src/ui-building-instructions.md
-var ui_building_instructions_default = "# Writing User Interfaces\n\nWhen writing UI, prefer breaking larger components up into smaller parts.\n\nALWAYS write a Storybook story for any component written. If editing a component, ensure appropriate changes have been made to stories for that component.\n\n## Storybook 9 Essential Changes for Story Writing\n\n### Package Consolidation\n\n#### `Meta` and `StoryObj` imports\n\nUpdate story imports to use the framework package:\n\n```diff\n- import { Meta, StoryObj } from '{{RENDERER}}';\n+ import { Meta, StoryObj } from '{{FRAMEWORK}}';\n```\n\n#### Test utility imports\n\nUpdate test imports to use `storybook/test` instead of `@storybook/test`\n\n```diff\n- import { fn } from '@storybook/test';\n+ import { fn } from 'storybook/test';\n```\n\n### Global State Changes\n\nThe `globals` annotation has be renamed to `initialGlobals`:\n\n```diff\n// .storybook/preview.js\nexport default {\n- globals: { theme: 'light' }\n+ initialGlobals: { theme: 'light' }\n};\n```\n\n### Autodocs Configuration\n\nInstead of `parameters.docs.autodocs` in main.js, use tags:\n\n```js\n// .storybook/preview.js or in individual stories\nexport default {\n	tags: ['autodocs'], // generates autodocs for all stories\n};\n```\n\n### Mocking imports in Storybook\n\nTo mock imports in Storybook, use Storybook's mocking features. ALWAYS mock external dependencies to ensure stories render consistently.\n\n1. **Register in the mock in Storybook's preview file**:\n   To mock dependendencies, you MUST register a module mock in `.storybook/preview.ts` (or equivalent):\n\n```js\nimport { sb } from 'storybook/test';\n\n// Full mock (replaces with empty fn functions)\nsb.mock(import('some-library'));\n```\n\n2. **Specify mock values in stories**:\n   You can override the behaviour of the mocks per-story using `beforeEach` and the `mocked()` type function:\n\n```js\nimport { expect, mocked, fn } from 'storybook/test';\nimport { library } from 'some-library';\n\nconst meta = {\n  component: AuthButton,\n  beforeEach: async () => {\n    mocked(library).mockResolvedValue({  user: 'data' });\n  },\n};\n\nexport const LoggedIn: Story = {\n  play: async ({ canvas }) => {\n    await expect(library).toHaveBeenCalled();\n  },\n};\n```\n\nBefore doing this ensure you have mocked the import in the preview file.\n\n### Key Requirements\n\n- **Node.js 20+**, **TypeScript 4.9+**, **Vite 5+**\n- React Native uses `.rnstorybook` directory\n- `afterEach` hook is now stable (was `experimental_afterEach`)\n\n## Story Linking Agent Behavior\n\n- ALWAYS provide story links after any changes to stories files, including changes to existing stories.\n- After changing any UI components, ALWAYS search for related stories that might cover the changes you've made. If you find any, provide the story links to the user. THIS IS VERY IMPORTANT, as it allows the user to visually inspect the changes you've made. Even later in a session when changing UI components or stories that have already been linked to previously, YOU MUST PROVIDE THE LINKS AGAIN.\n- Use the {{GET_STORY_URLS_TOOL_NAME}} tool to get the correct URLs for links to stories.\n";
+var ui_building_instructions_default = "# Writing User Interfaces\n\nWhen writing UI, prefer breaking larger components up into smaller parts.\n\nALWAYS write a Storybook story for any component written. If editing a component, ensure appropriate changes have been made to stories for that component.\n\n## Storybook 9 Essential Changes for Story Writing\n\n### Package Consolidation\n\n#### `Meta` and `StoryObj` imports\n\nUpdate story imports to use the framework package:\n\n```diff\n- import { Meta, StoryObj } from '{{RENDERER}}';\n+ import { Meta, StoryObj } from '{{FRAMEWORK}}';\n```\n\n#### Test utility imports\n\nUpdate test imports to use `storybook/test` instead of `@storybook/test`\n\n```diff\n- import { fn } from '@storybook/test';\n+ import { fn } from 'storybook/test';\n```\n\n### Global State Changes\n\nThe `globals` annotation has be renamed to `initialGlobals`:\n\n```diff\n// .storybook/preview.js\nexport default {\n- globals: { theme: 'light' }\n+ initialGlobals: { theme: 'light' }\n};\n```\n\n### Autodocs Configuration\n\nInstead of `parameters.docs.autodocs` in main.js, use tags:\n\n```js\n// .storybook/preview.js or in individual stories\nexport default {\n	tags: ['autodocs'], // generates autodocs for all stories\n};\n```\n\n### Mocking imports in Storybook\n\nTo mock imports in Storybook, use Storybook's mocking features. ALWAYS mock external dependencies to ensure stories render consistently.\n\n1. **Register in the mock in Storybook's preview file**:\n   To mock dependendencies, you MUST register a module mock in `.storybook/preview.ts` (or equivalent):\n\n```js\nimport { sb } from 'storybook/test';\n\n// Prefer spy mocks (keeps functions, but allows to override them and spy on them)\nsb.mock(import('some-library'), { spy: true });\n```\n\n2. **Specify mock values in stories**:\n   You can override the behaviour of the mocks per-story using `beforeEach` and the `mocked()` type function:\n\n```js\nimport { expect, mocked, fn } from 'storybook/test';\nimport { library } from 'some-library';\n\nconst meta = {\n  component: AuthButton,\n  beforeEach: async () => {\n    mocked(library).mockResolvedValue({  user: 'data' });\n  },\n};\n\nexport const LoggedIn: Story = {\n  play: async ({ canvas }) => {\n    await expect(library).toHaveBeenCalled();\n  },\n};\n```\n\nBefore doing this ensure you have mocked the import in the preview file.\n\n### Key Requirements\n\n- **Node.js 20+**, **TypeScript 4.9+**, **Vite 5+**\n- React Native uses `.rnstorybook` directory\n\n## Story Linking Agent Behavior\n\n- ALWAYS provide story links after any changes to stories files, including changes to existing stories.\n- After changing any UI components, ALWAYS search for related stories that might cover the changes you've made. If you find any, provide the story links to the user. THIS IS VERY IMPORTANT, as it allows the user to visually inspect the changes you've made. Even later in a session when changing UI components or stories that have already been linked to previously, YOU MUST PROVIDE THE LINKS AGAIN.\n- Use the {{GET_STORY_URLS_TOOL_NAME}} tool to get the correct URLs for links to stories.\n";
 
 //#endregion
 //#region src/tools/get-ui-building-instructions.ts
@@ -167,11 +171,12 @@ async function addGetUIBuildingInstructionsTool(server) {
 		enabled: () => server.ctx.custom?.toolsets?.dev ?? true
 	}, async () => {
 		try {
-			const { options, disableTelemetry } = server.ctx.custom ?? {};
+			const { options, disableTelemetry: disableTelemetry$1 } = server.ctx.custom ?? {};
 			if (!options) throw new Error("Options are required in addon context");
-			if (!disableTelemetry) await collectTelemetry({
+			if (!disableTelemetry$1) await collectTelemetry({
 				event: "tool:getUIBuildingInstructions",
-				server
+				server,
+				toolset: "dev"
 			});
 			const frameworkPreset = await options.presets.apply("framework");
 			const framework = typeof frameworkPreset === "string" ? frameworkPreset : frameworkPreset?.name;
@@ -203,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
@@ -213,7 +224,9 @@ const isManifestAvailable = async (options) => {
 let transport;
 let origin;
 let initialize;
+let disableTelemetry;
 const initializeMCPServer = async (options) => {
+	disableTelemetry = (await options.presets.apply("core", {}))?.disableTelemetry ?? false;
 	const server = new McpServer({
 		name,
 		version,
@@ -222,15 +235,15 @@ const initializeMCPServer = async (options) => {
 		adapter: new ValibotJsonSchemaAdapter(),
 		capabilities: { tools: { listChanged: true } }
 	}).withContext();
-	server.on("initialize", async () => {
-		if (!options.disableTelemetry) await collectTelemetry({
+	if (!disableTelemetry) server.on("initialize", async () => {
+		await collectTelemetry({
 			event: "session:initialized",
 			server
 		});
 	});
 	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);
@@ -238,35 +251,36 @@ 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 }) => {
-	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),
+		format: addonOptions.experimentalFormat,
 		origin,
 		disableTelemetry,
-		source: `${origin}/manifests/components.json`,
+		request: webRequest,
 		...!disableTelemetry && {
 			onListAllComponents: async ({ manifest }) => {
 				await collectTelemetry({
 					event: "tool:listAllComponents",
 					server,
+					toolset: "docs",
 					componentCount: Object.keys(manifest.components).length
 				});
 			},
-			onGetComponentDocumentation: async ({ input, foundComponents, notFoundIds }) => {
+			onGetComponentDocumentation: async ({ input, foundComponent }) => {
 				await collectTelemetry({
 					event: "tool:getComponentDocumentation",
 					server,
-					inputComponentCount: input.componentIds.length,
-					foundCount: foundComponents.length,
-					notFoundCount: notFoundIds.length
+					toolset: "docs",
+					componentId: input.componentId,
+					found: !!foundComponent
 				});
 			}
 		}
@@ -327,28 +341,42 @@ 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
 const experimental_devServer = async (app, options) => {
-	const addonOptions = v.parse(AddonOptions, { toolsets: options.toolsets ?? {} });
+	const addonOptions = v.parse(AddonOptions, {
+		toolsets: "toolsets" in options ? options.toolsets : {},
+		experimentalFormat: "experimentalFormat" in options ? options.experimentalFormat : "markdown"
+	});
 	app.post("/mcp", (req, res) => mcpServerHandler({
 		req,
 		res,
 		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" });
-			const html = template_default.replace("{{REDIRECT_META}}", shouldRedirect ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : "<style>#redirect-message { display: none; }</style>");
-			res.end(html);
-		} else {
-			res.writeHead(200, { "Content-Type": "text/plain" });
-			res.end("Storybook MCP server successfully running via @storybook/addon-mcp");
-		}
+	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,
+			res,
+			options,
+			addonOptions
+		});
+		res.writeHead(200, { "Content-Type": "text/html" });
+		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-next.2",
+  "version": "0.1.5",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -28,19 +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.0.7-next.0"
+    "valibot": "1.1.0",
+    "@storybook/mcp": "0.1.0"
   },
   "devDependencies": {
-    "@types/node": "20.19.0",
-    "@vitest/coverage-v8": "3.2.4",
-    "publint": "0.3.15",
-    "storybook": "^10.1.0-alpha.2",
-    "ts-dedent": "^2.2.0",
-    "tsdown": "^0.15.12",
-    "typescript": "^5.9.3",
-    "vite": "^7.0.5",
-    "vitest": "3.2.4"
+    "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"
@@ -69,11 +61,10 @@
   },
   "scripts": {
     "prebuild": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"",
-    "build": "tsdown --config ../../tsdown.config.ts",
-    "dev": "pnpm run build -- --watch",
+    "build": "tsdown",
     "inspect": "mcp-inspector --config ../../.mcp.inspect.json --server storybook-addon-mcp",
     "publint": "publint",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit"
+    "test": "cd ../.. && pnpm vitest --project=@storybook/addon-mcp",
+    "typecheck": "tsc"
   }
 }