@storybook/addon-mcp 0.0.8 → 0.1.0

package/README.md

@@ -4,10 +4,7 @@ This Storybook addon runs an MCP (Model Context Protocol) server to help develop
 
 It enables a workflow where for each UI component created, the agent will automatically generate and link to example stories. These stories let you visually verify the new UI in each of its key states, and provide documentation and component tests.
 
-The server currently exposes two tools: one to provide UI development instructions to the agent, and the other to retrieve story URLs directly from your running Storybook.
-
-> [!IMPORTANT]
-> This addon currently only supports Vite-based Storybook setups, such as [`@storybook/react-vite`](https://storybook.js.org/docs/get-started/frameworks/react-vite), [`@storybook/nextjs-vite`](https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite), and [`@storybook/sveltekit`](https://storybook.js.org/docs/get-started/frameworks/sveltekit).
+The addon provides tools to improve agents' UI development capabilities, retrieve story URLs, and access component documentation.
 
 <div align="center">
    <img src="https://storybook.js.org/embed/addon-mcp-claude-code-showcase.gif" alt="Storybook MCP Addon Demo" />
@@ -17,6 +14,9 @@ The server currently exposes two tools: one to provide UI development instructio
 
 ### Installation and Setup
 
+> [!NOTE]
+> This addon requires Storybook 10.1 or higher, currently only available as the canary version `0.0.0-pr-32810-sha-6e759c7e`.
+
 Use Storybook's CLI to automatically install and configure the addon:
 
 ```bash
@@ -36,7 +36,7 @@ The MCP server will be available at `<your_storybook_dev_server_origin>/mcp` whe
 ### Configuring Your Agent
 
 > [!NOTE]
-> This addon is primarily tested with Claude Code. While it should work with other MCP clients, Claude Code is our main target for compatibility and testing.
+> This addon is primarily tested with Claude Code and GitHub Copilot. While it should work with other MCP clients, Claude Code is our main target for compatibility and testing.
 
 #### Claude Code Setup
 
@@ -64,6 +64,8 @@ Before doing any UI, frontend or React development, ALWAYS call the storybook MC
 
 #### Other MCP Clients
 
+[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=storybook-mcp&config=eyJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjYwMDYvbWNwIn0%3D)
+
 This addon should work with any MCP-compatible client that supports the `tool` capability and the `streamable-http` transport. Here are setup guides for other popular clients:
 
 - [GitHub Copilot](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/extend-copilot-chat-with-mcp)
@@ -82,11 +84,15 @@ For clients not listed above, consult their documentation for MCP server configu
 
 ## Usage
 
-This addon provides two main MCP tools that your agent can use. The goal is that the agent uses these tools automatically when doing UI development, but agents are unreliable and unpredictable, so sometimes you might need to explicitly tell it to use the tools.
+This addon provides MCP tools that your agent can use. The goal is that the agent uses these tools automatically when doing UI development, but agents are unreliable and unpredictable, so sometimes you might need to explicitly tell it to use the tools.
 
 **If you are prompting from an IDE like VSCode or Cursor, be sure to use `Agent` mode and `sonnet-4.5` or better.**
 
-### 1. UI Building Instructions (`get_ui_building_instructions`)
+### Core Tools
+
+These tools are always available when the addon is installed:
+
+#### 1. UI Building Instructions (`get_ui_building_instructions`)
 
 Provides agents with standardized instructions for UI component development within your project. This tool returns guidelines for:
 
@@ -96,7 +102,7 @@ Provides agents with standardized instructions for UI component development with
 
 The instructions ensure agents follow your project's conventions when creating or modifying UI components and their corresponding stories.
 
-### 2. Get Story URLs (`get_story_urls`)
+#### 2. Get Story URLs (`get_story_urls`)
 
 Allows agents to retrieve direct URLs to specific stories in your Storybook. The agent can request URLs for multiple stories by providing:
 
@@ -113,50 +119,48 @@ Agent calls tool, gets response:
 http://localhost:6006/?path=/story/example-button--primary
 ```
 
-## Contributing
+### Component Documentation Tools (Experimental)
 
-We welcome contributions to improve Storybook's agent integration, within or outside of this addon! Here's how you can help:
+These additional tools are available when the **experimental** component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
 
-1. **Ideas and feature requests**: If you have ideas for what else we could do to improve the Storybook experience when using agents, please [start a discussion](https://github.com/storybookjs/mcp/discussions/new?category=ideas) in this repository.
+**Requirements:**
 
-2. **Report Issues**: If you find bugs, please open an issue on our [GitHub repository](https://github.com/storybookjs/mcp), but keep in mind that this is currently highly experimental, explorative and probably filled with bugs.
+- React-based framework (`react-vite`, `nextjs-vite`, `nextjs`, `react-webpack5`)
+- Feature flag `features.experimentalComponentsManifest` set to `true` in `.storybook/main.js`
+
+**To enable:**
 
-3. **Development Setup**:
+```javascript
+// .storybook/main.js
+export default {
+	// ... other config
+	features: {
+		experimentalComponentsManifest: true,
+	},
+};
+```
 
-   This repository uses a monorepo structure with [pnpm workspaces](https://pnpm.io/workspaces) and [Turborepo](https://turborepo.com) for task orchestration.
+#### 3. List All Components (`list-all-components`)
 
-   ```bash
-   # Clone the repository
-   git clone https://github.com/storybookjs/mcp.git
-   cd addon-mcp
+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.
 
-   # Install dependencies (installs for all packages in the workspace)
-   pnpm install
+#### 4. Get Component Documentation (`get-component-documentation`)
 
-   # Build all packages
-   pnpm build
+Retrieves detailed documentation for specific components, including:
 
-   # Start development (runs the addon-mcp package)
-   pnpm start
-   ```
+- Component documentation
+- Usage examples
 
-   The main addon package is located in `packages/addon-mcp`.
+The agent provides component IDs to retrieve their documentation.
 
-4. **Testing**: Run the MCP inspector to test the server functionality (requires that the Storybook dev server is running):
+## Contributing
 
-```bash
-pnpm run inspect
-```
+We welcome contributions to improve Storybook's agent integration, within or outside of this addon! Here's how you can help:
 
-Run the unit test suite:
+1. **Ideas and feature requests**: If you have ideas for what else we could do to improve the Storybook experience when using agents, please [start a discussion](https://github.com/storybookjs/mcp/discussions/new?category=ideas) in this repository.
 
-```bash
-# Run tests in watch mode
-pnpm test
+2. **Report Issues**: If you find bugs, please open an issue on our [GitHub repository](https://github.com/storybookjs/mcp), but keep in mind that this is currently highly experimental, explorative and probably filled with bugs.
 
-# Run tests once
-pnpm test run
+3. **Development**:
 
-# Run tests with coverage
-pnpm test run --coverage
-```
+See [the monorepo readme](https://github.com/storybookjs/mcp#-quick-start).

package/dist/preset.js

@@ -11,7 +11,7 @@ import { buffer } from "node:stream/consumers";
 
 //#region package.json
 var name = "@storybook/addon-mcp";
-var version = "0.0.8";
+var version = "0.1.0";
 var description = "Help agents automatically write and test stories for your UI components";
 
 //#endregion
@@ -281,18 +281,10 @@ async function webResponseToServerResponse(webResponse, nodeResponse) {
 
 //#endregion
 //#region src/preset.ts
-const viteFinal = async (config, options) => {
-	const mcpHandlerPlugin = {
-		name: "storybook:mcp-server",
-		configureServer(server) {
-			server.middlewares.use("/mcp", (req, res, next) => mcpServerHandler(req, res, next, options));
-		}
-	};
-	return {
-		...config,
-		plugins: config.plugins.concat(mcpHandlerPlugin)
-	};
+const experimental_devServer = (app, options) => {
+	app.use("/mcp", (req, res, next) => mcpServerHandler(req, res, next, options));
+	return app;
 };
 
 //#endregion
-export { viteFinal };
+export { experimental_devServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mcp",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Help agents automatically write and test stories for your UI components",
   "keywords": [
     "storybook-addon",
@@ -30,12 +30,12 @@
     "@tmcp/transport-http": "^0.7.0",
     "tmcp": "^1.15.2",
     "valibot": "^1.1.0",
-    "@storybook/mcp": "0.0.3"
+    "@storybook/mcp": "0.0.4"
   },
   "devDependencies": {
     "@types/node": "20.19.0",
     "@vitest/coverage-v8": "3.2.4",
-    "storybook": "^10.0.0-0",
+    "storybook": "0.0.0-pr-32810-sha-6e759c7e",
     "ts-dedent": "^2.2.0",
     "tsdown": "^0.15.9",
     "typescript": "^5.9.3",
@@ -43,7 +43,7 @@
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "storybook": "*"
+    "storybook": "0.0.0-pr-32810-sha-6e759c7e"
   },
   "publishConfig": {
     "access": "public"