Merge branch 'main' into copilot/implement-mcp-server-instructions

Author: JReinhold

.github/copilot-instructions.md

@@ -253,7 +253,7 @@ export { addMyTool, MY_TOOL_NAME } from './tools/my-tool.ts';
 - `addon-mcp` depends on `@storybook/mcp` (workspace dependency)
 - `AddonContext` extends `StorybookContext` to ensure type compatibility
 - Component manifest tools are conditionally registered based on feature flags:
-  - Checks `features.experimentalComponentsManifest` flag
+  - Checks `features.componentsManifest` flag (or `features.experimentalComponentsManifest` for backwards compatibility)
   - Checks for `experimental_manifests` preset
   - Only registers `addListAllDocumentationTool` and `addGetDocumentationTool` when enabled
 - Context includes `request` (HTTP Request object) which tools use to determine manifest location

.github/instructions/addon-mcp.instructions.md

@@ -31,7 +31,6 @@ The addon supports two toolsets that can be enabled/disabled:
 2. **`docs`** (default: true)
    - `list-all-documentation`: List all available components from manifest
    - `get-documentation`: Get detailed component documentation
-   - Requires experimental feature flag `features.experimentalComponentsManifest`
 
 **Configuration Methods:**
 

eval/templates/grading/.storybook/main.ts

@@ -9,8 +9,5 @@ const config: StorybookConfig = {
 		'@storybook/addon-mcp',
 	],
 	framework: '@storybook/react-vite',
-	features: {
-		experimentalComponentsManifest: true,
-	},
 };
 export default config;

packages/addon-mcp/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @storybook/addon-mcp
 
+## 0.3.4
+
+### Patch Changes
+
+- [#179](https://github.com/storybookjs/mcp/pull/179) [`ec300bd`](https://github.com/storybookjs/mcp/commit/ec300bd9bf76169f537ae3358418db8973628bcf) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Improve `/mcp` HTML response
+
+- [#181](https://github.com/storybookjs/mcp/pull/181) [`ff217d8`](https://github.com/storybookjs/mcp/commit/ff217d8d901b3b6ec932613792df17118b452fe3) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Rename feature flag `experimentalComponentsManifest` → `componentsManifest`
+
+  The Storybook feature flag has been renamed from `experimentalComponentsManifest` to `componentsManifest` and now defaults to `true` in Storybook core.
+
+- Updated dependencies [[`ff217d8`](https://github.com/storybookjs/mcp/commit/ff217d8d901b3b6ec932613792df17118b452fe3)]:
+  - @storybook/mcp@0.5.1
+
 ## 0.3.3
 
 ### Patch Changes

packages/addon-mcp/README.md

@@ -48,21 +48,19 @@ 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 flag below 👇)
+					docs: true, // Tools for component manifest and documentation (default: true)
 				},
 			},
 		},
 	],
-	features: {
-		experimentalComponentsManifest: true, // Enable manifest generation for the docs toolset, only supported in React-based setups.
-	},
+	// componentsManifest is enabled by default in recent Storybook versions, no need to set it
 };
 ```
 
 **Available Toolsets:**
 
 - `dev`: Enables [Dev Tools](#dev-tools)
-- `docs`: Enables [Documentation Tools](#docs-tools-experimental)
+- `docs`: Enables [Documentation Tools](#docs-tools)
 
 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.
 
@@ -172,24 +170,31 @@ Agent calls tool, gets response:
 http://localhost:6006/?path=/story/example-button--primary
 ```
 
-### Docs Tools (Experimental)
+### Docs Tools
 
-These additional tools are available when the **experimental** component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
+These additional tools are available when the 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`
+- Feature flag `features.componentsManifest` enabled (defaults to `true` in recent Storybook versions)
 
 **To enable:**
 
+The `componentsManifest` feature is enabled by default in recent Storybook versions — no configuration needed.
+
+If you are on an older Storybook version that doesn't default to `true`, you may need to enable it explicitly. Use the flag that matches your Storybook version:
+
 ```javascript
 // .storybook/main.js
 export default {
 	// ... other config
 	features: {
-		experimentalComponentsManifest: true,
+		// For Storybook 10.3.x and later:
+		componentsManifest: true,
+		// For older Storybook versions (before the flag was renamed):
+		// experimentalComponentsManifest: true,
 	},
 };
 ```

packages/addon-mcp/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storybook/addon-mcp",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"description": "Help agents automatically write and test stories for your UI components",
 	"keywords": [
 		"ai",

packages/addon-mcp/src/mcp-handler.test.ts

@@ -398,7 +398,7 @@ describe('mcpServerHandler', () => {
 				return { disableTelemetry: false };
 			}
 			if (key === 'features') {
-				return { experimentalComponentsManifest: true };
+				return { componentsManifest: true };
 			}
 			if (key === 'experimental_manifests') {
 				return vi.fn();

packages/addon-mcp/src/preset.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import type { Options } from 'storybook/internal/types';
 import { experimental_devServer } from './preset.ts';
+import * as runStoryTests from './tools/run-story-tests.ts';
 
 describe('experimental_devServer', () => {
 	let mockApp: any;
@@ -19,7 +20,7 @@ describe('experimental_devServer', () => {
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -67,6 +68,53 @@ describe('experimental_devServer', () => {
 		expect(mockRes.end).toHaveBeenCalledWith(expect.stringContaining('<html'));
 	});
 
+	it('should show Storybook version requirement for addon-vitest and a manual manifest link', async () => {
+		vi.spyOn(runStoryTests, 'getAddonVitestConstants').mockResolvedValue(undefined);
+		const manifestEnabledOptions = {
+			presets: {
+				apply: vi.fn((key: string) => {
+					if (key === 'features') {
+						return Promise.resolve({ experimentalComponentsManifest: true });
+					}
+					if (key === 'experimental_manifests') {
+						return Promise.resolve({});
+					}
+					return Promise.resolve(undefined);
+				}),
+			},
+		} as unknown as Options;
+
+		const handlers: Record<string, any> = {};
+		mockApp.get = vi.fn((path: string, handler: any) => {
+			handlers[path] = handler;
+		});
+
+		await (experimental_devServer as any)(mockApp, manifestEnabledOptions);
+		const getMcpHandler = handlers['/mcp'];
+		expect(getMcpHandler).toBeDefined();
+
+		const mockReq = {
+			headers: {
+				accept: 'text/html',
+			},
+		} as any;
+		const mockRes = {
+			writeHead: vi.fn(),
+			end: vi.fn(),
+		} as any;
+
+		await getMcpHandler(mockReq, mockRes);
+
+		expect(mockRes.end).toHaveBeenCalledWith(
+			expect.stringContaining('This toolset requires Storybook 10.3.0+ with'),
+		);
+		expect(mockRes.end).toHaveBeenCalledWith(
+			expect.stringContaining(
+				'View the <a href="/manifests/components.html">component manifest debugger</a>.',
+			),
+		);
+	});
+
 	it('should handle POST requests as MCP protocol', async () => {
 		await (experimental_devServer as any)(mockApp, mockOptions);
 
@@ -124,7 +172,7 @@ describe('experimental_devServer', () => {
 			presets: {
 				apply: vi.fn((key: string) => {
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -217,7 +265,7 @@ describe('experimental_devServer', () => {
 						});
 					}
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -237,7 +285,7 @@ describe('experimental_devServer', () => {
 				apply: vi.fn((key: string) => {
 					if (key === 'refs') return Promise.resolve(null);
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),
@@ -256,7 +304,7 @@ describe('experimental_devServer', () => {
 				apply: vi.fn((key: string) => {
 					if (key === 'refs') return Promise.reject(new Error('Config error'));
 					if (key === 'features') {
-						return Promise.resolve({ experimentalComponentsManifest: false });
+						return Promise.resolve({ componentsManifest: false });
 					}
 					return Promise.resolve(undefined);
 				}),

packages/addon-mcp/src/preset.ts

@@ -120,7 +120,7 @@ export const experimental_devServer: PresetPropertyFn<'experimental_devServer'>
 			});
 		}
 
-		// Browser request - send HTML with redirect
+		// Browser request - send HTML
 		res.writeHead(200, { 'Content-Type': 'text/html' });
 
 		let docsNotice = '';
@@ -137,7 +137,7 @@ export const experimental_devServer: PresetPropertyFn<'experimental_devServer'>
 
 		const testNoticeLines = [
 			!addonVitestConstants &&
-				`This toolset requires <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>`,
+				`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);
@@ -150,19 +150,17 @@ export const experimental_devServer: PresetPropertyFn<'experimental_devServer'>
 			: '';
 
 		const html = htmlTemplate
-			.replace(
-				'{{REDIRECT_META}}',
-				manifestStatus.available
-					? // redirect the user to the component manifest page after 10 seconds
-						'<meta http-equiv="refresh" content="10;url=/manifests/components.html" />'
-					: // ... or hide the message about redirection
-						'<style>#redirect-message { display: none; }</style>',
-			)
 			.replaceAll('{{DEV_STATUS}}', isDevEnabled ? 'enabled' : 'disabled')
 			.replaceAll('{{DOCS_STATUS}}', isDocsEnabled ? 'enabled' : 'disabled')
 			.replace('{{DOCS_NOTICE}}', docsNotice)
 			.replaceAll('{{TEST_STATUS}}', isTestEnabled ? 'enabled' : 'disabled')
 			.replace('{{TEST_NOTICE}}', testNotice)
+			.replace(
+				'{{MANIFEST_DEBUGGER_LINK}}',
+				manifestStatus.available
+					? '<p>View the <a href="/manifests/components.html">component manifest debugger</a>.</p>'
+					: '',
+			)
 			.replace('{{A11Y_BADGE}}', a11yBadge);
 		res.end(html);
 	});

packages/addon-mcp/src/template.html

@@ -1,7 +1,6 @@
 <!doctype html>
 <html>
 	<head>
-		{{REDIRECT_META}}
 		<style>
 			@font-face {
 				font-family: 'Nunito Sans';
@@ -233,21 +232,7 @@ <h3>Available Toolsets</h3>
 				</div>
 			</div>
 
-			<p id="redirect-message">
-				Automatically redirecting to
-				<a href="/manifests/components.html">component manifest</a>
-				in <span id="countdown">10</span> seconds...
-			</p>
+			{{MANIFEST_DEBUGGER_LINK}}
 		</div>
-		<script>
-			let countdown = 10;
-			const countdownElement = document.getElementById('countdown');
-			if (countdownElement) {
-				setInterval(() => {
-					countdown -= 1;
-					countdownElement.textContent = countdown.toString();
-				}, 1000);
-			}
-		</script>
 	</body>
 </html>