@storybook/addon-mcp 0.1.2 → 0.1.3
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.
- package/dist/preset.js +113 -5
- package/package.json +1 -1
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.
|
|
14
|
+
var version = "0.1.3";
|
|
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
|
-
|
|
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);
|
|
@@ -321,15 +327,117 @@ function getToolsets(request, addonOptions) {
|
|
|
321
327
|
|
|
322
328
|
//#endregion
|
|
323
329
|
//#region src/preset.ts
|
|
324
|
-
const experimental_devServer = (app, options) => {
|
|
330
|
+
const experimental_devServer = async (app, options) => {
|
|
325
331
|
const addonOptions = v.parse(AddonOptions, { toolsets: options.toolsets ?? {} });
|
|
326
|
-
app.
|
|
332
|
+
app.post("/mcp", (req, res, next) => mcpServerHandler({
|
|
327
333
|
req,
|
|
328
334
|
res,
|
|
329
335
|
next,
|
|
330
336
|
options,
|
|
331
337
|
addonOptions
|
|
332
338
|
}));
|
|
339
|
+
const shouldRedirect = await isManifestAvailable(options);
|
|
340
|
+
app.get("/mcp", async (req, res) => {
|
|
341
|
+
if ((req.headers["accept"] || "").includes("text/html")) {
|
|
342
|
+
res.writeHead(200, { "Content-Type": "text/html" });
|
|
343
|
+
res.end(`
|
|
344
|
+
<!DOCTYPE html>
|
|
345
|
+
<html>
|
|
346
|
+
<head>
|
|
347
|
+
${shouldRedirect ? "<meta http-equiv=\"refresh\" content=\"10;url=/manifests/components.html\" />" : ""}
|
|
348
|
+
<style>
|
|
349
|
+
@font-face {
|
|
350
|
+
font-family: 'Nunito Sans';
|
|
351
|
+
font-style: normal;
|
|
352
|
+
font-weight: 400;
|
|
353
|
+
font-display: swap;
|
|
354
|
+
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
* {
|
|
358
|
+
margin: 0;
|
|
359
|
+
padding: 0;
|
|
360
|
+
box-sizing: border-box;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
html, body {
|
|
364
|
+
height: 100%;
|
|
365
|
+
font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
body {
|
|
369
|
+
display: flex;
|
|
370
|
+
flex-direction: column;
|
|
371
|
+
justify-content: center;
|
|
372
|
+
align-items: center;
|
|
373
|
+
text-align: center;
|
|
374
|
+
padding: 2rem;
|
|
375
|
+
background-color: #ffffff;
|
|
376
|
+
color: rgb(46, 52, 56);
|
|
377
|
+
line-height: 1.6;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
p {
|
|
381
|
+
margin-bottom: 1rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
code {
|
|
385
|
+
font-family: 'Monaco', 'Courier New', monospace;
|
|
386
|
+
background: #f5f5f5;
|
|
387
|
+
padding: 0.2em 0.4em;
|
|
388
|
+
border-radius: 3px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
a {
|
|
392
|
+
color: #1ea7fd;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
@media (prefers-color-scheme: dark) {
|
|
396
|
+
body {
|
|
397
|
+
background-color: rgb(34, 36, 37);
|
|
398
|
+
color: rgb(201, 205, 207);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
code {
|
|
402
|
+
background: rgba(255, 255, 255, 0.1);
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
</style>
|
|
406
|
+
</head>
|
|
407
|
+
<body>
|
|
408
|
+
<div>
|
|
409
|
+
<p>
|
|
410
|
+
Storybook MCP server successfully running via
|
|
411
|
+
<code>@storybook/addon-mcp</code>.
|
|
412
|
+
</p>
|
|
413
|
+
<p>
|
|
414
|
+
See how to connect to it from your coding agent in <a target="_blank" href="https://github.com/storybookjs/mcp/tree/main/packages/addon-mcp#configuring-your-agent">the addon's README</a>.
|
|
415
|
+
</p>
|
|
416
|
+
${shouldRedirect ? `
|
|
417
|
+
<p>
|
|
418
|
+
Automatically redirecting to
|
|
419
|
+
<a href="/manifests/components.html">component manifest</a>
|
|
420
|
+
in <span id="countdown">10</span> seconds...
|
|
421
|
+
</p>` : ""}
|
|
422
|
+
</div>
|
|
423
|
+
${shouldRedirect ? `
|
|
424
|
+
<script>
|
|
425
|
+
let countdown = 10;
|
|
426
|
+
const countdownElement = document.getElementById('countdown');
|
|
427
|
+
setInterval(() => {
|
|
428
|
+
countdown -= 1;
|
|
429
|
+
countdownElement.textContent = countdown.toString();
|
|
430
|
+
}, 1000);
|
|
431
|
+
<\/script>
|
|
432
|
+
` : ""}
|
|
433
|
+
</body>
|
|
434
|
+
</html>
|
|
435
|
+
`);
|
|
436
|
+
} else {
|
|
437
|
+
res.writeHead(200, { "Content-Type": "text/plain" });
|
|
438
|
+
res.end("Storybook MCP server successfully running via @storybook/addon-mcp");
|
|
439
|
+
}
|
|
440
|
+
});
|
|
333
441
|
return app;
|
|
334
442
|
};
|
|
335
443
|
|