Storybook Codex Plugin

You can use Storybook's Codex plugin 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. The agent can automatically open relevant stories in the ADE preview, so you can inspect the components and their code.

Requirements

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

Installation

[!NOTE] Because the plugin is experimental, it has not yet been added to Codex's marketplace. These instructions guide you to add the Storybook marketplace to Codex and install the plugin from there.

Run this command to add the Storybook marketplace to Codex:
bash
```
codex plugin marketplace add storybookjs/storybook
```
Then install the plugin:
bash
```
codex plugin add storybook@storybook
```

Confirm the plugin is available:

bash

codex plugin list --marketplace storybook

You're all set!

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:

Run this command to remove the plugin from Codex:
bash
```
codex plugin remove storybook@storybook
```
Then remove the Storybook marketplace:
bash
```
codex plugin marketplace remove storybook
```
Follow the installation instructions above to re-add the marketplace and install the plugin again.

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.

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.