メニュー
Official Storybook AI workflow — MCP server, manifests, MCP toolsets (development, docs, testing), and documentation best practices. Use when writing or fixing stories, connecting agents to Storybook, using design-system components without guessing props, or running Storybook tests from an agent. Sources are linked inline.
| name | storybook-ai |
| description | Official Storybook AI workflow — MCP server, manifests, MCP toolsets (development, docs, testing), and documentation best practices. Use when writing or fixing stories, connecting agents to Storybook, using design-system components without guessing props, or running Storybook tests from an agent. Sources are linked inline. |
Storybook’s AI features (manifests + MCP) are documented as preview and may change. Docs and manifests for MCP are currently oriented to React; other renderers are planned.
Primary sources (read for details and updates):
From the package that runs Storybook:
npx storybook add @storybook/addon-mcp
With the dev server running, the MCP endpoint is typically http://localhost:6006/mcp (port may differ). Opening that URL in a browser lists available tools and links to the manifest debugger.
Version note: @storybook/addon-mcp expects Storybook ^9.1.16 or ^10.x (see package peers). This monorepo no longer ships a Storybook app in-repo; add Storybook to @afenda/ui-core (or an app) and register @storybook/addon-mcp in that package’s .storybook/main.ts when needed.
Official docs suggest:
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project
(mcp-add — CLI to register HTTP MCP servers.)
Alternatively, configure your editor or agent’s MCP config manually (see agent docs).
Replace your-project-sb-mcp with the MCP server name you registered.
When working on UI components, use the your-project-sb-mcp MCP tools for Storybook knowledge before acting.
list-all-documentation for the component index.get-documentation for props, examples (first three stories), and remaining story index.get-storybook-story-instructions before creating or updating stories so conventions stay current.run-story-tests when tests are set up.Story names may not match prop names — always verify via docs or stories.
| Tool | Purpose |
|---|---|
get-storybook-story-instructions | How to write useful stories, props to capture, interaction tests |
preview-stories | Previews in chat (if client supports MCP Apps) or links to Storybook |
| Tool | Purpose |
|---|---|
get-documentation | Full component doc: props, first three stories, index of rest |
get-documentation-for-story | Full story + doc when get-documentation is not enough |
list-all-documentation | Index of components and unattached docs |
| Tool | Purpose |
|---|---|
run-story-tests | Run tests for stories; includes a11y results if configured; use for fix/retest loops |
Composition: with Storybook composition, composed Storybooks that expose manifests are merged into MCP responses.
Stories
Component docs
@summary (agents get summary or truncated description).@summary for when to use that example.react-docgen-typescript for prop extraction (reactDocgen in TypeScript config) for richer prop info; use react-docgen if manifests are too slow.MDX docs
summary in Meta so the manifest includes a useful blurb.Manifest curation
tags: ['!manifest'] on stories, meta, or MDX Meta when content is not for agents (anti-patterns, human-only docs, deprecated components).Accessibility for React UIs in AFENDA-HYBRID: semantic HTML, ARIA, keyboard support, focus management, and testing. Use for grids, dialogs, bulk selection, notifications, and command surfaces.
React and Next.js App Router architecture for AFENDA-HYBRID: Server vs Client Components, composition, state placement, package layering (ui-core → view-engine → erp-view-pack → apps/web). Use when designing components, fixing import/layer violations, or RSC boundaries.
Implementation patterns for AFENDA-HYBRID React code: custom hooks, compound components, error boundaries / error.tsx, forms, server actions, and optimistic updates.
React performance for AFENDA-HYBRID: runtime rendering (re-renders, keys, virtualization) and build-time delivery (bundles, tree-shaking, code splitting, compiler directives). Use when fixing slow lists, grids, or large client bundles.
Meta-skill: React Quality Orchestrator for AFENDA-HYBRID. Coordinates architecture, performance, accessibility, and design-pattern skills for audits, scoring (Component Quality Index), and confidence-tiered refactors. Use for full-route reviews, legacy refactors, and governance checks.
Vitest (Vite-powered) testing — Jest-compatible API, vi mocks, coverage, environments, projects/workspaces. Use when writing or fixing tests, vitest.config.ts, coverage, or monorepo test commands in AFENDA-HYBRID (@afenda/db, @afenda/ui-core, view-engine, erp-view-pack). Prefer https://vitest.dev for Vitest 4.x when reference snippets disagree.