@storybook/addon-mcp 0.1.2 → 0.1.4-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/preset.js +26 -5
  2. package/package.json +2 -2
package/dist/preset.js CHANGED
@@ -11,7 +11,7 @@ import { buffer } from "node:stream/consumers";
11
11
 
12
12
  //#region package.json
13
13
  var name = "@storybook/addon-mcp";
14
- var version = "0.1.2";
14
+ var version = "0.1.4-next.0";
15
15
  var description = "Help agents automatically write and test stories for your UI components";
16
16
 
17
17
  //#endregion
@@ -201,6 +201,13 @@ const frameworkToRendererMap = {
201
201
  "@storybook/html-vite": "@storybook/html"
202
202
  };
203
203
 
204
+ //#endregion
205
+ //#region src/tools/is-manifest-available.ts
206
+ const isManifestAvailable = async (options) => {
207
+ const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
208
+ return features.experimentalComponentsManifest && componentManifestGenerator;
209
+ };
210
+
204
211
  //#endregion
205
212
  //#region src/mcp-handler.ts
206
213
  let transport;
@@ -223,8 +230,7 @@ const initializeMCPServer = async (options) => {
223
230
  });
224
231
  await addGetStoryUrlsTool(server);
225
232
  await addGetUIBuildingInstructionsTool(server);
226
- const [features, componentManifestGenerator] = await Promise.all([options.presets.apply("features"), options.presets.apply("experimental_componentManifestGenerator")]);
227
- if (features.experimentalComponentsManifest && componentManifestGenerator) {
233
+ if (await isManifestAvailable(options)) {
228
234
  logger.info("Experimental components manifest feature detected - registering component tools");
229
235
  const contextAwareEnabled = () => server.ctx.custom?.toolsets?.docs ?? true;
230
236
  await addListAllComponentsTool(server, contextAwareEnabled);
@@ -319,17 +325,32 @@ function getToolsets(request, addonOptions) {
319
325
  return toolsets;
320
326
  }
321
327
 
328
+ //#endregion
329
+ //#region src/template.html
330
+ 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 @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 </style>\n </head>\n <body>\n <div>\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 <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";
331
+
322
332
  //#endregion
323
333
  //#region src/preset.ts
324
- const experimental_devServer = (app, options) => {
334
+ const experimental_devServer = async (app, options) => {
325
335
  const addonOptions = v.parse(AddonOptions, { toolsets: options.toolsets ?? {} });
326
- app.use("/mcp", (req, res, next) => mcpServerHandler({
336
+ app.post("/mcp", (req, res, next) => mcpServerHandler({
327
337
  req,
328
338
  res,
329
339
  next,
330
340
  options,
331
341
  addonOptions
332
342
  }));
343
+ const shouldRedirect = await isManifestAvailable(options);
344
+ app.get("/mcp", async (req, res) => {
345
+ if ((req.headers["accept"] || "").includes("text/html")) {
346
+ res.writeHead(200, { "Content-Type": "text/html" });
347
+ const html = template_default.replace("{{REDIRECT_META}}", shouldRedirect ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : "<style>#redirect-message { display: none; }</style>");
348
+ res.end(html);
349
+ } else {
350
+ res.writeHead(200, { "Content-Type": "text/plain" });
351
+ res.end("Storybook MCP server successfully running via @storybook/addon-mcp");
352
+ }
353
+ });
333
354
  return app;
334
355
  };
335
356
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-mcp",
3
- "version": "0.1.2",
3
+ "version": "0.1.4-next.0",
4
4
  "description": "Help agents automatically write and test stories for your UI components",
5
5
  "keywords": [
6
6
  "storybook-addon",
@@ -37,7 +37,7 @@
37
37
  "@vitest/coverage-v8": "3.2.4",
38
38
  "storybook": "0.0.0-pr-32810-sha-6e759c7e",
39
39
  "ts-dedent": "^2.2.0",
40
- "tsdown": "^0.15.9",
40
+ "tsdown": "^0.15.12",
41
41
  "typescript": "^5.9.3",
42
42
  "vite": "^7.0.5",
43
43
  "vitest": "3.2.4"