@storybook/addon-mcp 0.0.5 → 0.0.7
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/README.md +31 -9
- package/dist/preset.js +269 -4313
- package/package.json +19 -37
- package/preset.js +1 -1
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
|
|
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.
|
|
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).
|
|
@@ -84,6 +84,8 @@ For clients not listed above, consult their documentation for MCP server configu
|
|
|
84
84
|
|
|
85
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.
|
|
86
86
|
|
|
87
|
+
**If you are prompting from an IDE like VSCode or Cursor, be sure to use `Agent` mode and `sonnet-4.5` or better.**
|
|
88
|
+
|
|
87
89
|
### 1. UI Building Instructions (`get_ui_building_instructions`)
|
|
88
90
|
|
|
89
91
|
Provides agents with standardized instructions for UI component development within your project. This tool returns guidelines for:
|
|
@@ -115,26 +117,46 @@ http://localhost:6006/?path=/story/example-button--primary
|
|
|
115
117
|
|
|
116
118
|
We welcome contributions to improve Storybook's agent integration, within or outside of this addon! Here's how you can help:
|
|
117
119
|
|
|
118
|
-
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/
|
|
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.
|
|
119
121
|
|
|
120
|
-
2. **Report Issues**: If you find bugs, please open an issue on our [GitHub repository](https://github.com/storybookjs/
|
|
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.
|
|
121
123
|
|
|
122
124
|
3. **Development Setup**:
|
|
123
125
|
|
|
126
|
+
This repository uses a monorepo structure with [pnpm workspaces](https://pnpm.io/workspaces) and [Turborepo](https://turborepo.com) for task orchestration.
|
|
127
|
+
|
|
124
128
|
```bash
|
|
125
129
|
# Clone the repository
|
|
126
|
-
git clone https://github.com/storybookjs/
|
|
130
|
+
git clone https://github.com/storybookjs/mcp.git
|
|
127
131
|
cd addon-mcp
|
|
128
132
|
|
|
129
|
-
# Install dependencies
|
|
133
|
+
# Install dependencies (installs for all packages in the workspace)
|
|
130
134
|
pnpm install
|
|
131
135
|
|
|
132
|
-
#
|
|
136
|
+
# Build all packages
|
|
137
|
+
pnpm build
|
|
138
|
+
|
|
139
|
+
# Start development (runs the addon-mcp package)
|
|
133
140
|
pnpm start
|
|
134
141
|
```
|
|
135
142
|
|
|
143
|
+
The main addon package is located in `packages/addon-mcp`.
|
|
144
|
+
|
|
136
145
|
4. **Testing**: Run the MCP inspector to test the server functionality (requires that the Storybook dev server is running):
|
|
137
146
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
147
|
+
```bash
|
|
148
|
+
pnpm run inspect
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Run the unit test suite:
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
# Run tests in watch mode
|
|
155
|
+
pnpm test
|
|
156
|
+
|
|
157
|
+
# Run tests once
|
|
158
|
+
pnpm test run
|
|
159
|
+
|
|
160
|
+
# Run tests with coverage
|
|
161
|
+
pnpm test run --coverage
|
|
162
|
+
```
|