Merge pull request #3 from storybookjs/story-link-tool

Add Get Story URLs tool

Author: JReinhold

.claude/settings.local.json

@@ -4,7 +4,9 @@
       "Bash(git merge:*)",
       "Bash(git checkout:*)",
       "Bash(git add:*)",
-      "mcp__storyboook-mcp__add"
+      "mcp__storyboook-mcp__add",
+      "mcp__storyboook-mcp__get_story_urls",
+      "mcp__storyboook-mcp__get_ui_building_instructions"
     ],
     "deny": [],
     "ask": []

.storybook/main.ts

@@ -1,9 +1,18 @@
 import { defineMain } from "@storybook/react-vite/node";
 
 const config = defineMain({
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../src/**/*.mdx",
+    "../src/stories/components/**/*.stories.@(js|jsx|ts|tsx)",
+    {
+      titlePrefix: "Other UI",
+      directory: "../src/stories/other",
+      files: "**/*.stories.@(js|jsx|ts|tsx)",
+    },
+  ],
   addons: ["@storybook/addon-docs", import.meta.resolve("../dist/preset.js")],
   framework: "@storybook/react-vite",
+  logLevel: "debug",
 });
 
 export default config;

package.json

@@ -38,7 +38,7 @@
     "prerelease": "zx scripts/prepublish-checks.js",
     "release": "npm run build && auto shipit",
     "start": "run-p build:watch \"storybook --quiet\"",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev --port 6006 --loglevel debug",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {

src/mcp-handler.ts

@@ -4,10 +4,12 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
 import pkgJson from "../package.json" with { type: "json" };
-import { registerAdditionTool } from "./tools/addition";
-import { registerUIBuildingTool } from "./tools/getUIBuildingInstructions";
+import { registerStoryUrlsTool } from "./tools/get-story-urls";
+import { registerUIBuildingTool } from "./tools/get-ui-building-instructions";
+import type { Options } from "storybook/internal/types";
+import type { IncomingMessage, ServerResponse } from "node:http";
 
-function createMcpServer() {
+function createMcpServer(options: Options) {
   // New initialization request
   const transport = new StreamableHTTPServerTransport({
     sessionIdGenerator: () => randomUUID(),
@@ -27,7 +29,8 @@ function createMcpServer() {
     name: pkgJson.name,
     version: pkgJson.version,
   });
-  registerAdditionTool(server);
+
+  registerStoryUrlsTool({ server, options });
   registerUIBuildingTool(server);
 
   server.connect(transport);
@@ -44,7 +47,11 @@ async function getJson(req: Connect.IncomingMessage) {
 }
 
 // Handle POST requests for client-to-server communication
-const handlePostRequest: Connect.SimpleHandleFunction = async (req, res) => {
+const handlePostRequest = async (
+  req: IncomingMessage,
+  res: ServerResponse,
+  options: Options,
+) => {
   const sessionId = req.headers["mcp-session-id"] as string | undefined;
   let transport: StreamableHTTPServerTransport;
 
@@ -54,7 +61,7 @@ const handlePostRequest: Connect.SimpleHandleFunction = async (req, res) => {
     // Reuse existing transport
     transport = transports[sessionId];
   } else if (!sessionId && isInitializeRequest(body)) {
-    transport = await createMcpServer();
+    transport = await createMcpServer(options);
   } else {
     // Invalid request
     res.statusCode = 400;
@@ -93,14 +100,15 @@ const handleSessionRequest: Connect.SimpleHandleFunction = async (req, res) => {
   return await transport.handleRequest(req, res);
 };
 
-export const mcpServerHandler: Connect.NextHandleFunction = async (
-  req,
-  res,
-  next,
+export const mcpServerHandler = async (
+  req: IncomingMessage,
+  res: ServerResponse,
+  next: Connect.NextFunction,
+  options: Options,
 ) => {
   switch (req.method) {
     case "POST":
-      return await handlePostRequest(req, res);
+      return await handlePostRequest(req, res, options);
     case "GET":
     case "DELETE":
       return await handleSessionRequest(req, res);

src/preset.ts

@@ -1,13 +1,16 @@
 import type { Plugin } from "vite";
 import { mcpServerHandler } from "./mcp-handler";
+import type { Options } from "storybook/internal/types";
 
 // This is a workaround for Storybook not having an API for addons to register server middlewares/handlers
 // We can do it through Vite's plugin API instead, which gets added to Storybook's dev server in the end. 😈
-export const viteFinal = async (config: any) => {
+export const viteFinal = async (config: any, options: Options) => {
   const mcpHandlerPlugin: Plugin = {
     name: "storybook:mcp-server",
     configureServer(server) {
-      server.middlewares.use("/mcp", mcpServerHandler);
+      server.middlewares.use("/mcp", (req, res, next) =>
+        mcpServerHandler(req, res, next, options),
+      );
     },
   };
   return {

src/stories/Button.stories.ts src/stories/components/Button.stories.tssrc/stories/Button.stories.ts renamed to src/stories/components/Button.stories.ts

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Header } from "./Header";
 
 const meta: Meta<typeof Header> = {
-  title: "Example/Header",
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout

src/stories/Button.tsx src/stories/components/Button.tsxsrc/stories/Button.tsx renamed to src/stories/components/Button.tsx

@@ -4,7 +4,6 @@ import { within, userEvent } from "storybook/test";
 import { Page } from "./Page";
 
 const meta: Meta<typeof Page> = {
-  title: "Example/Page",
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout