@storybook/addon-mcp 0.2.3 → 0.3.1

package/README.md

@@ -50,7 +50,6 @@ export default {
 					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 👇)
 				},
-				experimentalFormat: 'markdown', // Output format: 'markdown' (default) or 'xml'
 			},
 		},
 	],

package/dist/preset.js

@@ -3,18 +3,19 @@ import { ValibotJsonSchemaAdapter } from "@tmcp/adapter-valibot";
 import { HttpTransport } from "@tmcp/transport-http";
 import path from "node:path";
 import url from "node:url";
+import { normalizeStoryPath } from "storybook/internal/common";
 import { storyNameFromExport } from "storybook/internal/csf";
 import { logger } from "storybook/internal/node-logger";
 import * as v from "valibot";
 import { telemetry } from "storybook/internal/telemetry";
 import { stringify } from "picoquery";
 import fs from "node:fs/promises";
-import { addGetDocumentationTool, addListAllDocumentationTool } from "@storybook/mcp";
+import { ComponentManifestMap, DocsManifestMap, addGetDocumentationTool, addListAllDocumentationTool } from "@storybook/mcp";
 import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.2.3";
+var version = "0.3.1";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -195,16 +196,13 @@ const frameworkToRendererMap = {
 
 //#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
-	}),
-	experimentalFormat: v.optional(v.picklist(["xml", "markdown"]), "markdown")
-});
+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
+}) });
 /**
 * Schema for a single story input when requesting story URLs.
 */
@@ -254,6 +252,9 @@ const PreviewStoriesOutput = v.object({ stories: v.array(v.union([v.object({
 async function addPreviewStoriesTool(server) {
 	const previewStoryAppScript = await fs.readFile(url.fileURLToPath(import.meta.resolve("@storybook/addon-mcp/internal/preview-stories-app-script")), "utf-8");
 	const appHtml = preview_stories_app_template_default.replace("// APP_SCRIPT_PLACEHOLDER", previewStoryAppScript);
+	const normalizeImportPath = (importPath) => {
+		return slash(normalizeStoryPath(path.posix.normalize(slash(importPath))));
+	};
 	server.resource({
 		name: PREVIEW_STORIES_RESOURCE_URI,
 		description: "App resource for the Preview Stories tool",
@@ -297,7 +298,7 @@ async function addPreviewStoriesTool(server) {
 				const { exportName, explicitStoryName, absoluteStoryPath } = inputParams;
 				const normalizedCwd = slash(process.cwd());
 				const normalizedAbsolutePath = slash(absoluteStoryPath);
-				const relativePath = `./${path.posix.relative(normalizedCwd, normalizedAbsolutePath)}`;
+				const relativePath = normalizeImportPath(path.posix.relative(normalizedCwd, normalizedAbsolutePath));
 				logger.debug("Searching for:");
 				logger.debug({
 					exportName,
@@ -305,7 +306,7 @@ async function addPreviewStoriesTool(server) {
 					absoluteStoryPath,
 					relativePath
 				});
-				const foundStory = entriesList.find((entry) => entry.importPath === relativePath && [explicitStoryName, storyNameFromExport(exportName)].includes(entry.name));
+				const foundStory = entriesList.find((entry) => normalizeImportPath(entry.importPath) === relativePath && [explicitStoryName, storyNameFromExport(exportName)].includes(entry.name));
 				if (foundStory) {
 					logger.debug(`Found story ID: ${foundStory.id}`);
 					let previewUrl = `${origin$1}/?path=/story/${foundStory.id}`;
@@ -427,7 +428,7 @@ let transport;
 let origin;
 let initialize;
 let disableTelemetry;
-const initializeMCPServer = async (options) => {
+const initializeMCPServer = async (options, multiSource) => {
 	disableTelemetry = (await options.presets.apply("core", {}))?.disableTelemetry ?? false;
 	const server = new McpServer({
 		name,
@@ -452,33 +453,35 @@ const initializeMCPServer = async (options) => {
 		logger.info("Experimental components manifest feature detected - registering component tools");
 		const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
 		await addListAllDocumentationTool(server, contextAwareEnabled);
-		await addGetDocumentationTool(server, contextAwareEnabled);
+		await addGetDocumentationTool(server, contextAwareEnabled, { multiSource });
 	}
 	transport = new HttpTransport(server, { path: null });
 	origin = `http://localhost:${options.port}`;
 	logger.debug(`MCP server origin: ${origin}`);
 	return server;
 };
-const mcpServerHandler = async ({ req, res, options, addonOptions }) => {
-	if (!initialize) initialize = initializeMCPServer(options);
+const mcpServerHandler = async ({ req, res, options, addonOptions, sources, manifestProvider, compositionAuth }) => {
+	if (!initialize) initialize = initializeMCPServer(options, sources?.some((s) => s.url));
 	const server = await initialize;
 	const webRequest = await incomingMessageToWebRequest(req);
 	const addonContext = {
 		options,
 		toolsets: getToolsets(webRequest, addonOptions),
-		format: addonOptions.experimentalFormat,
 		origin,
 		disableTelemetry,
 		request: webRequest,
+		sources,
+		manifestProvider,
 		...!disableTelemetry && {
-			onListAllDocumentation: async ({ manifests, resultText }) => {
+			onListAllDocumentation: async ({ manifests, resultText, sources: sourceManifests }) => {
 				await collectTelemetry({
 					event: "tool:listAllDocumentation",
 					server,
 					toolset: "docs",
 					componentCount: Object.keys(manifests.componentManifest.components).length,
 					docsCount: Object.keys(manifests.docsManifest?.docs || {}).length,
-					resultTokenCount: estimateTokens(resultText)
+					resultTokenCount: estimateTokens(resultText),
+					sourceCount: sourceManifests?.length
 				});
 			},
 			onGetDocumentation: async ({ input, foundDocumentation, resultText }) => {
@@ -494,7 +497,19 @@ const mcpServerHandler = async ({ req, res, options, addonOptions }) => {
 		}
 	};
 	const response = await transport.respond(webRequest, addonContext);
-	if (response) await webResponseToServerResponse(response, res);
+	if (response) {
+		const body = await response.arrayBuffer();
+		await webResponseToServerResponse(compositionAuth.hadAuthError(webRequest) ? new Response("401 - Unauthorized", {
+			status: 401,
+			headers: {
+				"Content-Type": "text/plain",
+				"WWW-Authenticate": compositionAuth.buildWwwAuthenticate(origin)
+			}
+		}) : new Response(body, {
+			status: response.status,
+			headers: response.headers
+		}), res);
+	}
 };
 /**
 * Converts a Node.js IncomingMessage to a Web Request.
@@ -551,32 +566,314 @@ function getToolsets(request, addonOptions) {
 //#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			.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>preview-stories</code></li>\n						<li><code>get-storybook-story-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-documentation</code></li>\n						<li><code>get-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/auth/composition-auth.ts
+/**
+* Composition authentication for fetching manifests from private Storybooks.
+*
+* This class handles OAuth discovery and token-based manifest fetching for
+* composed Storybooks (refs). It acts as a proxy for OAuth metadata, allowing
+* MCP clients like VS Code to handle the OAuth flow with Chromatic.
+*/
+const OAuthResourceMetadata = v.object({
+	resource: v.optional(v.string()),
+	authorization_servers: v.pipe(v.array(v.string()), v.minLength(1)),
+	scopes_supported: v.optional(v.array(v.string()))
+});
+const OAuthServerMetadata = v.object({
+	issuer: v.string(),
+	authorization_endpoint: v.string(),
+	token_endpoint: v.string(),
+	scopes_supported: v.optional(v.array(v.string()))
+});
+const MANIFEST_CACHE_TTL = 3600 * 1e3;
+const REVALIDATION_TTL = 60 * 1e3;
+var AuthenticationError = class extends Error {
+	constructor(url$1) {
+		super(`Authentication failed for ${url$1}. Your token may be invalid or expired.`);
+		this.name = "AuthenticationError";
+	}
+};
+var CompositionAuth = class {
+	#authRequirement = null;
+	#authRequiredUrls = [];
+	#refsWithManifests = [];
+	#manifestCache = /* @__PURE__ */ new Map();
+	#lastToken = null;
+	#authErrors = /* @__PURE__ */ new WeakMap();
+	/** Initialize by checking which refs require authentication and have manifests. */
+	async initialize(refs) {
+		for (const ref of refs) try {
+			const result = await this.#checkRef(ref.url);
+			if (result === "no-manifest") continue;
+			this.#refsWithManifests.push(ref);
+			if (result === "public") continue;
+			this.#authRequiredUrls.push(ref.url);
+			if (!this.#authRequirement) this.#authRequirement = result;
+			else {
+				const existingServer = this.#authRequirement.resourceMetadata.authorization_servers[0];
+				const newServer = result.resourceMetadata.authorization_servers[0];
+				if (existingServer !== newServer) console.warn(`[addon-mcp] Composed ref "${ref.title}" uses a different OAuth server (${newServer}) than the first authenticated ref (${existingServer}). Only the first OAuth server will be used for authentication.`);
+			}
+		} catch (error) {
+			console.warn(`[addon-mcp] Failed to check auth for composed ref "${ref.title}" (${ref.url}): ${error instanceof Error ? error.message : String(error)}. Skipping this ref.`);
+		}
+	}
+	get requiresAuth() {
+		return this.#authRequiredUrls.length > 0;
+	}
+	get authUrls() {
+		return this.#authRequiredUrls;
+	}
+	/** Check if a request encountered an auth error during manifest fetching. */
+	hadAuthError(request) {
+		return this.#authErrors.has(request);
+	}
+	/** Check if a URL requires authentication based on discovered auth requirements. */
+	#isAuthRequiredUrl(url$1) {
+		return this.#authRequiredUrls.some((authUrl) => url$1.startsWith(authUrl));
+	}
+	/** Build .well-known/oauth-protected-resource response. */
+	buildWellKnown(origin$1) {
+		if (!this.#authRequirement) return null;
+		return {
+			resource: `${origin$1}/mcp`,
+			authorization_servers: this.#authRequirement.resourceMetadata.authorization_servers,
+			scopes_supported: this.#authRequirement.resourceMetadata.scopes_supported
+		};
+	}
+	/** Build WWW-Authenticate header for 401 responses */
+	buildWwwAuthenticate(origin$1) {
+		return `Bearer error="unauthorized", error_description="Authorization needed for composed Storybooks", resource_metadata="${origin$1}/.well-known/oauth-protected-resource"`;
+	}
+	/** Build sources configuration: local first, then refs that have manifests. */
+	buildSources() {
+		return [{
+			id: "local",
+			title: "Local"
+		}, ...this.#refsWithManifests.map((ref) => ({
+			id: ref.id,
+			title: ref.title,
+			url: ref.url
+		}))];
+	}
+	/** Create a manifest provider for multi-source mode. */
+	createManifestProvider(localOrigin) {
+		return async (request, path$1, source) => {
+			const token = extractBearerToken(request?.headers.get("Authorization"));
+			const baseUrl = source?.url ?? localOrigin;
+			const manifestUrl = `${baseUrl}${path$1.replace("./", "/")}`;
+			const isRemote = !!source?.url;
+			const tokenForRequest = isRemote && this.#isAuthRequiredUrl(baseUrl) ? token : null;
+			if (token && token !== this.#lastToken) {
+				this.#manifestCache.clear();
+				this.#lastToken = token;
+			}
+			if (isRemote) {
+				const cached = this.#manifestCache.get(manifestUrl);
+				if (cached) if (Date.now() - cached.timestamp > MANIFEST_CACHE_TTL) this.#manifestCache.delete(manifestUrl);
+				else {
+					if (!cached.lastRevalidatedAt || Date.now() - cached.lastRevalidatedAt > REVALIDATION_TTL) {
+						cached.lastRevalidatedAt = Date.now();
+						this.#fetchManifest(manifestUrl, tokenForRequest).then((text) => this.#manifestCache.set(manifestUrl, {
+							text,
+							timestamp: Date.now(),
+							lastRevalidatedAt: Date.now()
+						})).catch(() => {});
+					}
+					return cached.text;
+				}
+			}
+			try {
+				const text = await this.#fetchManifest(manifestUrl, tokenForRequest);
+				if (isRemote) this.#manifestCache.set(manifestUrl, {
+					text,
+					timestamp: Date.now()
+				});
+				return text;
+			} catch (error) {
+				if (error instanceof AuthenticationError && request) this.#authErrors.set(request, error);
+				throw error;
+			}
+		};
+	}
+	/**
+	* Fetch a manifest with optional auth token.
+	* If the response is 200 but not a valid manifest, checks /mcp for auth issues.
+	*/
+	async #fetchManifest(url$1, token) {
+		const headers = { Accept: "application/json" };
+		if (token) headers["Authorization"] = `Bearer ${token}`;
+		const response = await fetch(url$1, { headers });
+		if (response.status === 401) throw new AuthenticationError(url$1);
+		if (!response.ok) throw new Error(`Failed to fetch ${url$1}: ${response.status}`);
+		const text = await response.text();
+		const schema = url$1.includes("docs.json") ? DocsManifestMap : ComponentManifestMap;
+		if (v.safeParse(v.pipe(v.string(), v.parseJson(), schema), text).success) return text;
+		if (await this.#isMcpUnauthorized(new URL(url$1).origin)) throw new AuthenticationError(url$1);
+		throw new Error(`Invalid manifest response from ${url$1}: expected valid JSON manifest but got unexpected content.`);
+	}
+	/**
+	* Check a ref to determine if it has a manifest and whether it requires auth.
+	* Returns 'public' if the ref has a valid manifest without auth,
+	* 'no-manifest' if no manifest is available, or an AuthRequirement if auth is needed.
+	*/
+	async #checkRef(refUrl) {
+		const response = await fetch(`${refUrl}/manifests/components.json`, { headers: { Accept: "application/json" } });
+		const authReq = await this.#parseAuthFromResponse(response);
+		if (authReq) return authReq;
+		if (response.ok) {
+			const text = await response.text();
+			if (v.safeParse(v.pipe(v.string(), v.parseJson(), ComponentManifestMap), text).success) return "public";
+		}
+		const mcpAuth = await this.#checkMcpAuth(refUrl);
+		if (mcpAuth) return mcpAuth;
+		return "no-manifest";
+	}
+	/** Check /mcp endpoint for 401 auth requirement. */
+	async #checkMcpAuth(refUrl) {
+		const response = await fetch(`${refUrl}/mcp`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				jsonrpc: "2.0",
+				id: 1,
+				method: "tools/list"
+			})
+		});
+		return this.#parseAuthFromResponse(response);
+	}
+	/** Quick check: does the remote /mcp return 401? */
+	async #isMcpUnauthorized(origin$1) {
+		try {
+			return (await fetch(`${origin$1}/mcp`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					jsonrpc: "2.0",
+					id: 1,
+					method: "tools/list"
+				})
+			})).status === 401;
+		} catch {
+			return false;
+		}
+	}
+	/** Extract auth requirement from a 401 response's WWW-Authenticate header. */
+	async #parseAuthFromResponse(response) {
+		if (response.status !== 401) return null;
+		const wwwAuth = response.headers.get("WWW-Authenticate");
+		if (!wwwAuth) return null;
+		const match = wwwAuth.match(/resource_metadata="([^"]+)"/);
+		if (!match?.[1]) return null;
+		const resourceMetadataUrl = match[1];
+		const resourceResponse = await fetch(resourceMetadataUrl);
+		if (!resourceResponse.ok) {
+			console.warn(`[addon-mcp] Failed to fetch OAuth resource metadata from ${resourceMetadataUrl}: ${resourceResponse.status}`);
+			return null;
+		}
+		const resourceResult = v.safeParse(OAuthResourceMetadata, await resourceResponse.json());
+		if (!resourceResult.success) {
+			console.warn(`[addon-mcp] Invalid OAuth resource metadata from ${resourceMetadataUrl}: ${resourceResult.issues.map((i) => i.message).join(", ")}`);
+			return null;
+		}
+		const serverMetadataUrl = `${resourceResult.output.authorization_servers[0]}/.well-known/oauth-authorization-server`;
+		const serverResponse = await fetch(serverMetadataUrl);
+		if (!serverResponse.ok) {
+			console.warn(`[addon-mcp] Failed to fetch OAuth server metadata from ${serverMetadataUrl}: ${serverResponse.status}`);
+			return null;
+		}
+		const serverResult = v.safeParse(OAuthServerMetadata, await serverResponse.json());
+		if (!serverResult.success) {
+			console.warn(`[addon-mcp] Invalid OAuth server metadata from ${serverMetadataUrl}: ${serverResult.issues.map((i) => i.message).join(", ")}`);
+			return null;
+		}
+		return {
+			resourceMetadataUrl,
+			resourceMetadata: resourceResult.output,
+			serverMetadata: serverResult.output
+		};
+	}
+};
+/**
+* Extract Bearer token from Authorization header.
+* Handles both Node.js (string | string[] | undefined) and Web API (string | null) headers.
+*/
+function extractBearerToken(authHeader) {
+	const bearer = (Array.isArray(authHeader) ? authHeader : [authHeader]).find((value) => typeof value === "string" && value.startsWith("Bearer "));
+	return bearer ? bearer.slice(7) : null;
+}
+
 //#endregion
 //#region src/preset.ts
 const previewAnnotations = async (existingAnnotations = []) => {
 	return [...existingAnnotations, path.join(import.meta.dirname, "preview.js")];
 };
 const experimental_devServer = async (app, options) => {
-	const addonOptions = v.parse(AddonOptions, {
-		toolsets: "toolsets" in options ? options.toolsets : {},
-		experimentalFormat: "experimentalFormat" in options ? options.experimentalFormat : "markdown"
+	const addonOptions = v.parse(AddonOptions, { toolsets: "toolsets" in options ? options.toolsets : {} });
+	const origin$1 = `http://localhost:${options.port}`;
+	const refs = await getRefsFromConfig(options);
+	const compositionAuth = new CompositionAuth();
+	let sources;
+	let manifestProvider;
+	if (refs.length > 0) {
+		logger.info(`Initializing composition with ${refs.length} remote Storybook(s)`);
+		await compositionAuth.initialize(refs);
+		if (compositionAuth.requiresAuth) logger.info(`Auth required for: ${compositionAuth.authUrls.join(", ")}`);
+		sources = compositionAuth.buildSources();
+		logger.info(`Sources: ${sources.map((s) => s.id).join(", ")}`);
+		manifestProvider = compositionAuth.createManifestProvider(origin$1);
+	}
+	app.get("/.well-known/oauth-protected-resource", (_req, res) => {
+		const wellKnown = compositionAuth.buildWellKnown(origin$1);
+		if (!wellKnown) {
+			res.writeHead(404);
+			res.end("Not found");
+			return;
+		}
+		res.writeHead(200, { "Content-Type": "application/json" });
+		res.end(JSON.stringify(wellKnown));
 	});
-	app.post("/mcp", (req, res) => mcpServerHandler({
-		req,
-		res,
-		options,
-		addonOptions
-	}));
-	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({
+	const requireAuth = (req, res) => {
+		const token = extractBearerToken(req.headers["authorization"]);
+		if (compositionAuth.requiresAuth && !token) {
+			res.writeHead(401, {
+				"Content-Type": "text/plain",
+				"WWW-Authenticate": compositionAuth.buildWwwAuthenticate(origin$1)
+			});
+			res.end("401 - Unauthorized");
+			return true;
+		}
+		return false;
+	};
+	app.post("/mcp", (req, res) => {
+		if (requireAuth(req, res)) return;
+		return mcpServerHandler({
 			req,
 			res,
 			options,
-			addonOptions
+			addonOptions,
+			sources,
+			manifestProvider,
+			compositionAuth
 		});
+	});
+	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")) {
+			if (requireAuth(req, res)) return;
+			return mcpServerHandler({
+				req,
+				res,
+				options,
+				addonOptions,
+				sources,
+				manifestProvider,
+				compositionAuth
+			});
+		}
 		res.writeHead(200, { "Content-Type": "text/html" });
 		let docsNotice = "";
 		if (!manifestStatus.hasManifests) docsNotice = `<div class="toolset-notice">
@@ -591,6 +888,23 @@ const experimental_devServer = async (app, options) => {
 	});
 	return app;
 };
+/**
+* Get composed Storybook refs from Storybook config.
+* See: https://storybook.js.org/docs/sharing/storybook-composition
+*/
+async function getRefsFromConfig(options) {
+	try {
+		const refs = await options.presets.apply("refs", {});
+		if (!refs || typeof refs !== "object") return [];
+		return Object.entries(refs).map(([key, value]) => ({
+			id: key,
+			title: value.title || key,
+			url: value.url
+		})).filter((ref) => ref.url);
+	} catch {
+		return [];
+	}
+}
 
 //#endregion
 export { experimental_devServer, previewAnnotations };

package/dist/preview-stories-app-script.js

@@ -4,7 +4,7 @@ const MCP_APP_SIZE_CHANGED_EVENT = "storybook-mcp:size-changed";
 
 //#endregion
 //#region package.json
-var version = "0.2.3";
+var version = "0.3.1";
 
 //#endregion
 //#region src/tools/preview-stories/preview-stories-app-script.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "ai",
@@ -34,10 +34,10 @@
     "picoquery": "^2.5.0",
     "tmcp": "^1.16.0",
     "valibot": "1.2.0",
-    "@storybook/mcp": "0.2.2"
+    "@storybook/mcp": "0.4.0"
   },
   "devDependencies": {
-    "storybook": "10.3.0-alpha.4"
+    "storybook": "10.3.0-alpha.7"
   },
   "peerDependencies": {
     "storybook": "^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0"