ai/configuration

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Use react-docgen-typescript for prop type extraction

Use react-docgen-typescript for prop type extraction via the reactDocgen config option, as it provides more accurate and comprehensive information about component props that helps agents use them more effectively. If manifest generation is too slow, react-docgen is faster but less detailed.

MCP server sharing overview

The MCP server can be shared with teams to enable AI-assisted development. It is composed of development, docs, and testing toolsets that agents can call to interact with Storybook. The development and testing toolsets only work with locally-running Storybook instances, but the docs toolset can be published and shared so agents outside the local environment can access knowledge from the Storybook manifest to reference components and documentation when generating UI.

Automatic MCP publishing with Chromatic

Publishing a Storybook with Chromatic automatically publishes the MCP server as well. If the Storybook is private, the MCP server will be private and only accessible to invited Chromatic project members. If the Storybook is public, the MCP server will be public and accessible to anyone with the URL. The MCP server stays up-to-date with the latest Storybook, is safeguarded by UI tests, and requires no self-hosting or maintenance.

MCP server URL sharing with Chromatic

Once published with Chromatic, the MCP server URL can be shared with teams or community members, who can then configure their agents to use that URL to access the MCP server.

Self-hosting MCP with @storybook/mcp package

The @storybook/mcp package allows self-hosting an MCP server. This approach provides full control over the server's infrastructure, security, and updates. The team must ensure the MCP server is accessible and properly maintained.

@storybook/mcp prerequisites

Self-hosting an MCP server with @storybook/mcp requires Node.js 20 or higher and a manifest source containing components.json (required) and docs.json (optional).

Minimal @storybook/mcp server implementation

This example shows the minimal implementation of a server using @storybook/mcp: ```ts import { createStorybookMcpHandler } from '@storybook/mcp'; const storybookMcpHandler = await createStorybookMcpHandler(); export async function handleRequest(request: Request): Promise<Response> { if (new URL(request.url).pathname === '/mcp') { return storybookMcpHandler(request); } return new Response('Not found', { status: 404 }); } ``` The handler routes requests to the '/mcp' pathname to the Storybook MCP handler.

@storybook/mcp package reference

The @storybook/mcp package is a library that creates a tmcp-based MCP server exposing Storybook component and docs knowledge from manifests. The full API is documented in the package README at https://github.com/storybookjs/storybook/tree/next/code/lib/mcp#api-reference.

@storybook/mcp Node self-hosting example

A Node.js self-hosting example for @storybook/mcp is available in the in-repo serve.ts file at https://github.com/storybookjs/storybook/blob/next/code/lib/mcp/serve.ts.

Extensionless imports in main config: require explicit file extensions

Storybook requires explicit extensions in config imports to avoid deprecation warnings. When importing in .storybook/main.<js|ts>, change from 'import sharedMain from "../main"' to 'import sharedMain from "../main.js" (or .ts)'.

Environment variables prefixed with STORYBOOK_ are exposed to browser

Storybook supports environment variables. By default, environment variables are only available in Node.js code. To expose a variable to browser code, preface its name with STORYBOOK_, for example STORYBOOK_API_URL. Variables without the prefix (like API_KEY) remain secret and are not exposed to the browser.

Customize exposed environment variables via main.js env field

Environment variable exposure can be customized by setting the env field in the .storybook/main.js file.

Environment variables are set at JavaScript compile time

Environment variables in Storybook are set when JavaScript is compiled, either when the development server is started or when Storybook is built. Changes to environment variables require recompilation.

Environment variable files should not be committed to Git

Environment variable files (.env.*) should not be committed to Git because they often contain secrets. Add .env.* to .gitignore and set up environment variables manually on the hosting provider (e.g., GitHub Actions encrypted secrets).

Agentic setup purpose

Agentic setup analyzes your project and produces step-by-step instructions that an agent follows to add Storybook, configure the preview, write stories for your components, and verify them.

MCP server installation command

Install and register the Storybook MCP addon by running the command specified in the addon-mcp-add code snippet.

MCP server default access URL

When running Storybook's dev server, the MCP server is accessible at http://localhost:6006/mcp, though the port may be different depending on your configuration.

Adding MCP server to agent

Configure your agent to use the MCP server by running the mcp-add command. You may need to update the port number in the URL. You will be prompted for a name for your MCP server, which should be descriptive and unique.

mcp-add CLI tool

mcp-add is a CLI tool designed to simplify adding MCP servers to various agents. It can be used instead of manually following each agent's documentation.

Testing agent MCP server access

To test agent access to the MCP server, ensure Storybook is running, then run a prompt like 'List all documented components'. You should see a call to the docs-list tool with a response listing components from your Storybook.

MCP server dev toolset

The development toolset includes the stories-changed, get-storybook-story-instructions, stories-preview, stories-find-by-component, and review-create tools when their feature requirements are enabled.

MCP server docs toolset

The docs toolset includes the docs-show, docs-show-story, and docs-list tools.

MCP server test toolset

The testing toolset includes the test-run tool when @storybook/addon-vitest is installed and enabled.

Give your agent this brain