Storybook Claude Code Plugin

You can use Storybook's plugin in Claude Code or Claude Desktop to connect agents to your Storybook. Agents can then use the plugin's skills and tools to generate UI, run tests, and preview their work in your Storybook. If you're using Claude Desktop, the agent can automatically open relevant stories in the Agentic Development Environment (ADE) preview, so you can review the agent's work.

Requirements

Storybook 10.6 or later (until 10.6 ships, the next prerelease or any canary build qualifies)
Claude Code or Claude Desktop

Installation

[!NOTE] Because the plugins are experimental, they have not yet been added to Claude's marketplace. These instructions guide you to add the Storybook marketplace to your harness and install the plugin from there.

<details> <summary>Claude Code</summary>

Run this command to add the Storybook marketplace to Claude Code:
bash
```
claude plugin marketplace add storybookjs/storybook --scope user
```

Then install the plugin:

bash

claude plugin install storybook@storybook --scope user

Confirm the plugin is available:
bash
```
claude plugin list
```

You're all set!

</details> <details> <summary>Claude Desktop</summary>

Run this command to add the Storybook marketplace to Claude Desktop:
bash
```
/plugin marketplace add storybookjs/storybook --scope user
```

Then install the plugin:

bash

/plugin install storybook@storybook --scope user

Confirm the plugin is available:
bash
```
/plugin
```
Then go to the Installed tab to confirm the plugin is listed.

You're all set!

</details>

Update a plugin

Until the plugins are available in the official marketplaces, you can update a plugin by removing it and following the installation instructions again.

To remove a plugin:

<details> <summary>Claude Code</summary>

Run this command to remove the Storybook marketplace, which will also uninstall the plugin:
bash
```
claude plugin marketplace remove storybook --scope user
```
Follow the installation instructions above (expand the "Claude Code" section) to re-add the marketplace and install the plugin again.

</details> <details> <summary>Claude Desktop</summary>

Run /plugin and go to the Marketplaces tab
Remove the "storybook" marketplace
Follow the installation instructions above (expand the "Claude Desktop" section) to re-add the marketplace and install the plugin again.

</details>

Usage

The plugin includes instructions to help the agent understand how and when to use the skills and tools available to it. As your agent works on UI tasks, it can use the plugin to generate stories, run tests, and preview its work in your Storybook. You can also explicitly call the plugin's skills in prompts (e.g. /upgrade) to have the agent perform specific actions.

If you're using Claude Desktop, the agent will use the plugin to automatically open relevant stories or an agentic review summary in the ADE preview, so you can review the agent's work.

Skills

These skills are available to agents that have the Storybook plugin installed. They can be referenced in prompts (e.g. /upgrade) or the agent can use them indirectly while working on a task.

`init`

Initializes Storybook in your project (i.e. runs npm create storybook@latest), installs @storybook/addon-mcp, then runs the setup skill.

`setup`

Sets up your Storybook for agentic workflows, automatically configures your project to correctly render your components, and writes story files for a variety of component types. See the agentic setup docs for more details.

`stories`

Instructs the agent to use stories for all UI work.

`upgrade`

Upgrades your Storybook to the latest version. This is the same as running npx storybook upgrade in your project.

Tools

All of Storybook MCP server's tools are available to agents that have the plugin installed.