Merge pull request #36 from storybookjs/support-webpack

Support Webpack-based frameworks, require Storybook 10.1

Author: JReinhold

.changeset/dark-eagles-argue.md

@@ -0,0 +1,9 @@
+---
+'@storybook/addon-mcp': minor
+---
+
+Add support for Webpack (including Webpack-based frameworks like Next.js)
+
+# Breaking Change
+
+This requires version 10.1 of Storybook, currently only available as the canary version `0.0.0-pr-32810-sha-6e759c7e`. If you want to continue to use the addon with Storybook 9 or 10.0 (and Vite), stick to [version `0.0.9` of this package](https://github.com/storybookjs/mcp/tree/%40storybook/addon-mcp%400.0.9).

apps/internal-storybook/.storybook/main.ts

@@ -6,7 +6,7 @@ const config = defineMain({
 		'../stories/components/**/*.stories.@(js|jsx|ts|tsx)',
 		{
 			titlePrefix: 'Other UI',
-			directory: '../src/stories/other',
+			directory: '../stories/other',
 			files: '**/*.stories.@(js|jsx|ts|tsx)',
 		},
 	],

apps/internal-storybook/package.json

@@ -9,14 +9,14 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "0.0.0-pr-32810-sha-af0645cd",
+		"@storybook/addon-docs": "catalog:",
 		"@storybook/addon-mcp": "workspace:*",
-		"@storybook/react-vite": "0.0.0-pr-32810-sha-af0645cd",
+		"@storybook/react-vite": "catalog:",
 		"@types/react": "^18.2.65",
 		"@types/react-dom": "^18.2.21",
 		"@vitejs/plugin-react": "^4.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"storybook": "0.0.0-pr-32810-sha-af0645cd"
+		"storybook": "catalog:"
 	}
 }

packages/addon-mcp/README.md

@@ -6,9 +6,6 @@ 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.
 
-> [!IMPORTANT]
-> This addon currently only supports Vite-based Storybook setups, such as [`@storybook/react-vite`](https://storybook.js.org/docs/get-started/frameworks/react-vite), [`@storybook/nextjs-vite`](https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite), and [`@storybook/sveltekit`](https://storybook.js.org/docs/get-started/frameworks/sveltekit).
-
 <div align="center">
    <img src="https://storybook.js.org/embed/addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
 </div>
@@ -18,7 +15,7 @@ The addon provides tools to improve agents' UI development capabilities, retriev
 ### Installation and Setup
 
 > [!NOTE]
-> This addon requires Storybook 9.0 or higher.
+> This addon requires Storybook 10.1 or higher, currently only available as the canary version `0.0.0-pr-32810-sha-6e759c7e`.
 
 Use Storybook's CLI to automatically install and configure the addon:
 
@@ -128,8 +125,7 @@ These additional tools are available when the **experimental** component manifes
 
 **Requirements:**
 
-- Storybook v10.1 or later (prereleases), currently available as [canary version `0.0.0-pr-32810-sha-af0645cd`](https://www.npmjs.com/package/storybook/v/0.0.0-pr-32810-sha-af0645cd)
-- React-based framework (`react-vite`, `nextjs-vite`)
+- React-based framework (`react-vite`, `nextjs-vite`, `nextjs`, `react-webpack5`)
 - Feature flag `features.experimentalComponentsManifest` set to `true` in `.storybook/main.js`
 
 **To enable:**

packages/addon-mcp/package.json

@@ -43,15 +43,15 @@
 	"devDependencies": {
 		"@types/node": "catalog:",
 		"@vitest/coverage-v8": "catalog:",
-		"storybook": "^10.0.0-0",
+		"storybook": "catalog:",
 		"ts-dedent": "^2.2.0",
 		"tsdown": "catalog:",
 		"typescript": "catalog:",
 		"vite": "^7.0.5",
 		"vitest": "catalog:"
 	},
 	"peerDependencies": {
-		"storybook": ">=9.0.0"
+		"storybook": "catalog:"
 	},
 	"publishConfig": {
 		"access": "public"

packages/addon-mcp/src/preset.ts

@@ -1,20 +1,11 @@
-import type { Plugin } from 'vite';
 import { mcpServerHandler } from './mcp-handler.ts';
-import type { Options } from 'storybook/internal/types';
+import type { PresetProperty } from 'storybook/internal/types';
 
-// This is a workaround for Storybook not having an API for addons to register server middlewares/handlers
-// We can do it through Vite's plugin API instead, which gets added to Storybook's dev server in the end. 😈
-export const viteFinal = async (config: any, options: Options) => {
-	const mcpHandlerPlugin: Plugin = {
-		name: 'storybook:mcp-server',
-		configureServer(server) {
-			server.middlewares.use('/mcp', (req, res, next) =>
-				mcpServerHandler(req, res, next, options),
-			);
-		},
-	};
-	return {
-		...config,
-		plugins: config.plugins.concat(mcpHandlerPlugin),
-	};
+export const experimental_devServer: PresetProperty<
+	'experimental_devServer'
+> = (app, options) => {
+	app!.use('/mcp', (req, res, next) =>
+		mcpServerHandler(req, res, next, options),
+	);
+	return app;
 };