feat: add screenshot-story MCP tool for visual verification

Adds a new `screenshot-story` tool that renders a Storybook story in a
headless browser (via Playwright) and returns a PNG screenshot as MCP
image content. This closes the visual feedback loop so AI agents can
verify rendered components without manual inspection.

Author: Larkooo

packages/addon-mcp/package.json

@@ -47,15 +47,20 @@
 	"devDependencies": {
 		"@storybook/addon-a11y": "catalog:",
 		"@storybook/addon-vitest": "catalog:",
+		"playwright": "^1.50.0",
 		"storybook": "catalog:"
 	},
 	"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",
+		"playwright": "^1.50.0",
 		"storybook": "^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0"
 	},
 	"peerDependenciesMeta": {
 		"@storybook/addon-vitest": {
 			"optional": true
+		},
+		"playwright": {
+			"optional": true
 		}
 	},
 	"storybook": {

packages/addon-mcp/pnpm-lock.yaml

@@ -18,6 +18,7 @@ import type { AddonContext, AddonOptionsOutput } from './types.ts';
 import { logger } from 'storybook/internal/node-logger';
 import { getManifestStatus } from './tools/is-manifest-available.ts';
 import { addRunStoryTestsTool } from './tools/run-story-tests.ts';
+import { addScreenshotStoryTool } from './tools/screenshot-story.ts';
 import { estimateTokens } from './utils/estimate-tokens.ts';
 import { isAddonA11yEnabled } from './utils/is-addon-a11y-enabled.ts';
 import type { CompositionAuth } from './auth/index.ts';
@@ -57,6 +58,7 @@ const initializeMCPServer = async (options: Options, multiSource?: boolean) => {
 	// Register dev addon tools
 	await addPreviewStoriesTool(server);
 	await addGetUIBuildingInstructionsTool(server);
+	await addScreenshotStoryTool(server);
 
 	// Register test addon tools
 	a11yEnabled = await isAddonA11yEnabled(options);