Merge pull request #179 from storybookjs/copilot/fix-mcp-addon-vitest-detection

Clarify `/mcp` test-toolset requirements and replace auto-redirect with manual manifest link

Author: JReinhold

.changeset/clean-bears-brush.md

@@ -0,0 +1,5 @@
+---
+'@storybook/addon-mcp': patch
+---
+
+Improve `/mcp` HTML response

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;
@@ -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);
 

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>