@storybook/addon-mcp 0.1.6 → 0.1.8

package/README.md

@@ -191,18 +191,15 @@ export default {
 };
 ```
 
-#### 3. List All Components (`list-all-components`)
+#### 3. List All Documentation (`list-all-documentation`)
 
-Returns a list of all available UI components in your component library. Useful for the LLM as discovery and understanding what components are available to use.
+Returns a list of all available UI components as well as standalone docs in your component library. Useful for the LLM as discovery and understanding what components are available to use.
 
-#### 4. Get Component Documentation (`get-component-documentation`)
+#### 4. Get Documentation (`get-documentation`)
 
-Retrieves detailed documentation for a specific component, including:
+Retrieves detailed documentation for a specific component or docs entry.
 
-- Component documentation
-- Usage examples
-
-The agent provides a component ID to retrieve its documentation. To get documentation for multiple components, call this tool multiple times.
+The agent provides a component/docs ID to retrieve its documentation. To get documentation for multiple entries, call this tool multiple times.
 
 ## Contributing
 

package/dist/preset.js

@@ -6,12 +6,12 @@ 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 { addGetComponentDocumentationTool, addListAllComponentsTool } from "@storybook/mcp";
+import { addGetDocumentationTool, addListAllDocumentationTool } from "@storybook/mcp";
 import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.1.6";
+var version = "0.1.8";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -209,16 +209,70 @@ const frameworkToRendererMap = {
 //#endregion
 //#region src/tools/is-manifest-available.ts
 const getManifestStatus = async (options) => {
-	const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
-	const hasGenerator = !!componentManifestGenerator;
+	const [features, manifests] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_manifests", void 0, { manifestEntries: [] })]);
+	const hasManifests = !!manifests;
 	const hasFeatureFlag = !!features?.experimentalComponentsManifest;
 	return {
-		available: hasFeatureFlag && hasGenerator,
-		hasGenerator,
+		available: hasFeatureFlag && hasManifests,
+		hasManifests,
 		hasFeatureFlag
 	};
 };
 
+//#endregion
+//#region src/utils/estimate-tokens.ts
+/**
+* Checks if a character code is whitespace (space, tab, newline, carriage return)
+*
+* Checking char codes is slightly faster than using regex or string methods.
+*/
+function isWhitespace(code) {
+	return code === 32 || code === 9 || code === 10 || code === 13;
+}
+/**
+* Checks if a character code is alphanumeric or underscore
+* 0-9 (48-57), A-Z (65-90), a-z (97-122), underscore (95)
+*
+* Checking char codes is slightly faster than using regex or string methods.
+*/
+function isAlphanumeric(code) {
+	return code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 95;
+}
+/**
+* Estimates token count from text using a fast approximation.
+* Counts:
+* - Continuous whitespace as a single token
+* - Continuous alphanumeric sequences as single tokens
+* - Each special character as an individual token
+*
+* This is a cheap approximation suitable for telemetry purposes.
+*
+* @param text - The text to estimate token count for
+* @returns Estimated token count
+*/
+function estimateTokens(text) {
+	if (!text) return 0;
+	let tokenCount = 0;
+	let i = 0;
+	const len = text.length;
+	while (i < len) {
+		const code = text.charCodeAt(i);
+		if (isWhitespace(code)) {
+			tokenCount++;
+			i++;
+			while (i < len && isWhitespace(text.charCodeAt(i))) i++;
+		} else if (isAlphanumeric(code)) {
+			tokenCount++;
+			i++;
+			while (i < len && isAlphanumeric(text.charCodeAt(i))) i++;
+		} else {
+			tokenCount++;
+			i++;
+		}
+	}
+	return tokenCount;
+}
+
 //#endregion
 //#region src/mcp-handler.ts
 let transport;
@@ -246,8 +300,8 @@ const initializeMCPServer = async (options) => {
 	if ((await getManifestStatus(options)).available) {
 		logger.info("Experimental components manifest feature detected - registering component tools");
 		const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
-		await addListAllComponentsTool(server, contextAwareEnabled);
-		await addGetComponentDocumentationTool(server, contextAwareEnabled);
+		await addListAllDocumentationTool(server, contextAwareEnabled);
+		await addGetDocumentationTool(server, contextAwareEnabled);
 	}
 	transport = new HttpTransport(server, { path: null });
 	origin = `http://localhost:${options.port}`;
@@ -266,21 +320,24 @@ const mcpServerHandler = async ({ req, res, options, addonOptions }) => {
 		disableTelemetry,
 		request: webRequest,
 		...!disableTelemetry && {
-			onListAllComponents: async ({ manifest }) => {
+			onListAllDocumentation: async ({ manifests, resultText }) => {
 				await collectTelemetry({
-					event: "tool:listAllComponents",
+					event: "tool:listAllDocumentation",
 					server,
 					toolset: "docs",
-					componentCount: Object.keys(manifest.components).length
+					componentCount: Object.keys(manifests.componentManifest.components).length,
+					docsCount: Object.keys(manifests.docsManifest?.docs || {}).length,
+					resultTokenCount: estimateTokens(resultText)
 				});
 			},
-			onGetComponentDocumentation: async ({ input, foundComponent }) => {
+			onGetDocumentation: async ({ input, foundDocumentation, resultText }) => {
 				await collectTelemetry({
-					event: "tool:getComponentDocumentation",
+					event: "tool:getDocumentation",
 					server,
 					toolset: "docs",
-					componentId: input.componentId,
-					found: !!foundComponent
+					componentId: input.id,
+					found: !!foundDocumentation,
+					resultTokenCount: estimateTokens(resultText ?? "")
 				});
 			}
 		}
@@ -341,7 +398,7 @@ function getToolsets(request, addonOptions) {
 
 //#endregion
 //#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>get-story-urls</code></li>\n						<li><code>get-ui-building-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-components</code></li>\n						<li><code>get-component-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";
+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>get-story-urls</code></li>\n						<li><code>get-ui-building-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-component-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/preset.ts
@@ -368,7 +425,7 @@ const experimental_devServer = async (app, options) => {
 		});
 		res.writeHead(200, { "Content-Type": "text/html" });
 		let docsNotice = "";
-		if (!manifestStatus.hasGenerator) docsNotice = `<div class="toolset-notice">
+		if (!manifestStatus.hasManifests) docsNotice = `<div class="toolset-notice">
 				This toolset is only supported in React-based setups.
 			</div>`;
 		else if (!manifestStatus.hasFeatureFlag) docsNotice = `<div class="toolset-notice">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -29,10 +29,10 @@
     "@tmcp/transport-http": "^0.8.0",
     "tmcp": "^1.16.0",
     "valibot": "1.2.0",
-    "@storybook/mcp": "0.1.1"
+    "@storybook/mcp": "0.2.1"
   },
   "devDependencies": {
-    "storybook": "10.1.2"
+    "storybook": "10.2.0-alpha.14"
   },
   "peerDependencies": {
     "storybook": "^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0"