@storybook/addon-mcp 0.0.8 → 0.0.9

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 (3) hide show
  1. package/README.md +44 -36
  2. package/dist/preset.js +1 -1
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -4,7 +4,7 @@ This Storybook addon runs an MCP (Model Context Protocol) server to help develop
4
4
 
5
5
  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.
6
6
 
7
- 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.
7
+ The addon provides tools to improve agents' UI development capabilities, retrieve story URLs, and access component documentation.
8
8
 
9
9
  > [!IMPORTANT]
10
10
  > 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).
@@ -17,6 +17,9 @@ The server currently exposes two tools: one to provide UI development instructio
17
17
 
18
18
  ### Installation and Setup
19
19
 
20
+ > [!NOTE]
21
+ > This addon requires Storybook 9.0 or higher.
22
+
20
23
  Use Storybook's CLI to automatically install and configure the addon:
21
24
 
22
25
  ```bash
@@ -36,7 +39,7 @@ The MCP server will be available at `<your_storybook_dev_server_origin>/mcp` whe
36
39
  ### Configuring Your Agent
37
40
 
38
41
  > [!NOTE]
39
- > 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.
42
+ > 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.
40
43
 
41
44
  #### Claude Code Setup
42
45
 
@@ -64,6 +67,8 @@ Before doing any UI, frontend or React development, ALWAYS call the storybook MC
64
67
 
65
68
  #### Other MCP Clients
66
69
 
70
+ [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=storybook-mcp&config=eyJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjYwMDYvbWNwIn0%3D)
71
+
67
72
  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:
68
73
 
69
74
  - [GitHub Copilot](https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/extend-copilot-chat-with-mcp)
@@ -82,11 +87,15 @@ For clients not listed above, consult their documentation for MCP server configu
82
87
 
83
88
  ## Usage
84
89
 
85
- 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.
90
+ 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.
86
91
 
87
92
  **If you are prompting from an IDE like VSCode or Cursor, be sure to use `Agent` mode and `sonnet-4.5` or better.**
88
93
 
89
- ### 1. UI Building Instructions (`get_ui_building_instructions`)
94
+ ### Core Tools
95
+
96
+ These tools are always available when the addon is installed:
97
+
98
+ #### 1. UI Building Instructions (`get_ui_building_instructions`)
90
99
 
91
100
  Provides agents with standardized instructions for UI component development within your project. This tool returns guidelines for:
92
101
 
@@ -96,7 +105,7 @@ Provides agents with standardized instructions for UI component development with
96
105
 
97
106
  The instructions ensure agents follow your project's conventions when creating or modifying UI components and their corresponding stories.
98
107
 
99
- ### 2. Get Story URLs (`get_story_urls`)
108
+ #### 2. Get Story URLs (`get_story_urls`)
100
109
 
101
110
  Allows agents to retrieve direct URLs to specific stories in your Storybook. The agent can request URLs for multiple stories by providing:
102
111
 
@@ -113,50 +122,49 @@ Agent calls tool, gets response:
113
122
  http://localhost:6006/?path=/story/example-button--primary
114
123
  ```
115
124
 
116
- ## Contributing
125
+ ### Component Documentation Tools (Experimental)
117
126
 
118
- We welcome contributions to improve Storybook's agent integration, within or outside of this addon! Here's how you can help:
127
+ These additional tools are available when the **experimental** component manifest feature is enabled. They provide agents with detailed documentation about your UI components.
119
128
 
120
- 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.
129
+ **Requirements:**
121
130
 
122
- 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.
131
+ - Storybook v10.1 or later (prereleases), currently available as [canary version `0.0.0-pr-32810-sha-af0645cd`](https://www.npmjs.com/package/storybook/v/0.0.0-pr-32810-sha-af0645cd)
132
+ - React-based framework (`react-vite`, `nextjs-vite`)
133
+ - Feature flag `features.experimentalComponentsManifest` set to `true` in `.storybook/main.js`
123
134
 
124
- 3. **Development Setup**:
135
+ **To enable:**
125
136
 
126
- This repository uses a monorepo structure with [pnpm workspaces](https://pnpm.io/workspaces) and [Turborepo](https://turborepo.com) for task orchestration.
137
+ ```javascript
138
+ // .storybook/main.js
139
+ export default {
140
+ // ... other config
141
+ features: {
142
+ experimentalComponentsManifest: true,
143
+ },
144
+ };
145
+ ```
127
146
 
128
- ```bash
129
- # Clone the repository
130
- git clone https://github.com/storybookjs/mcp.git
131
- cd addon-mcp
147
+ #### 3. List All Components (`list-all-components`)
132
148
 
133
- # Install dependencies (installs for all packages in the workspace)
134
- pnpm install
149
+ 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.
135
150
 
136
- # Build all packages
137
- pnpm build
151
+ #### 4. Get Component Documentation (`get-component-documentation`)
138
152
 
139
- # Start development (runs the addon-mcp package)
140
- pnpm start
141
- ```
153
+ Retrieves detailed documentation for specific components, including:
142
154
 
143
- The main addon package is located in `packages/addon-mcp`.
155
+ - Component documentation
156
+ - Usage examples
144
157
 
145
- 4. **Testing**: Run the MCP inspector to test the server functionality (requires that the Storybook dev server is running):
158
+ The agent provides component IDs to retrieve their documentation.
146
159
 
147
- ```bash
148
- pnpm run inspect
149
- ```
160
+ ## Contributing
161
+
162
+ We welcome contributions to improve Storybook's agent integration, within or outside of this addon! Here's how you can help:
150
163
 
151
- Run the unit test suite:
164
+ 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.
152
165
 
153
- ```bash
154
- # Run tests in watch mode
155
- pnpm test
166
+ 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.
156
167
 
157
- # Run tests once
158
- pnpm test run
168
+ 3. **Development**:
159
169
 
160
- # Run tests with coverage
161
- pnpm test run --coverage
162
- ```
170
+ See [the monorepo readme](https://github.com/storybookjs/mcp#-quick-start).
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.0.8";
14
+ var version = "0.0.9";
15
15
  var description = "Help agents automatically write and test stories for your UI components";
16
16
 
17
17
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-mcp",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "Help agents automatically write and test stories for your UI components",
5
5
  "keywords": [
6
6
  "storybook-addon",
@@ -43,7 +43,7 @@
43
43
  "vitest": "^3.2.4"
44
44
  },
45
45
  "peerDependencies": {
46
- "storybook": "*"
46
+ "storybook": ">=9.0.0"
47
47
  },
48
48
  "publishConfig": {
49
49
  "access": "public"