Best Storybook MCP Servers
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
Why this server?
Allows scaffolding Storybook documentation alongside React components.
AlicenseAqualityAmaintenanceLets AI agents scaffold modern npm packages, CLIs, HTTP services, and apps as a native tool. Three tools: inspect the full option/preset schema, preview the generated file tree for a config, and write the project to disk.3179 npm1MITWhy this server?
Generates Storybook stories alongside React components for component documentation, testing, and development workflow integration.
AlicenseAqualityCmaintenanceDesign system MCP server. 20 tools: extract design tokens from any URL, pull from Figma or Penpot, generate React + shadcn/ui components from specs, run WCAG audits, sync tokens bidirectionally.50235 npm49MITWhy this server?
Extracts component information from Storybook design systems, including HTML, styles, component metadata, props documentation, theme information, and relationships between components.
AlicenseAqualityBmaintenanceServer that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.9254 npm72MITWhy this server?
Provides an MCP server that integrates with Storybook, allowing AI tools to query available UI components, retrieve component information and usage examples to help implement UI from design specifications.
AlicenseBqualityDmaintenanceA Model Context Protocol server that integrates with Storybook to help AI tools query UI components and retrieve usage examples from static Storybook files.21,216 npm21MITWhy this server?
Provides tools for extracting component lists, props information, and custom data from Storybook documentation, enabling AI to understand and reference UI component libraries.
AlicenseBqualityCmaintenanceA Model Context Protocol (MCP) server for Storybook.21,216 npm46MITWhy this server?
Enables management and testing of Storybook stories, including visual regression testing, accessibility testing, and component documentation
AlicenseBqualityDmaintenanceEnables comprehensive UI/UX development workflows through integrated tools for component development with Storybook, Tailwind CSS styling, Framer Motion/GSAP animations, Playwright testing, and automated design system generation. Provides end-to-end automation for visual regression testing, accessibility compliance, and UX optimization analysis.122MITWhy this server?
Identifies components that should be added to your Storybook based on your documentation patterns
AlicenseBqualityCmaintenanceProvides AI assistants with persistent memory of your project architecture, development history, and technical decisions, allowing them to give context-aware coding help without needing repeated explanations.1661 npm2MITWhy this server?
Uses Storybook documentation as a primary data source for component metadata, usage examples, and technical constraints.
AlicenseAqualityDmaintenanceAn MCP server that enables AI to interact with the private 'my-design' React component library and design tokens for UI generation and technical support. It provides tools for component searching, API documentation retrieval, and migration guidance based on specific internal design specifications.6MITWhy this server?
Provides access to Storybook example code for Salt Design System components to help agents generate accurate UI code.
AlicenseAqualityDmaintenanceEnables AI agents to build React applications using JP Morgan Chase's Salt Design System by providing real-time access to component APIs, documentation, and accessibility guidelines. It supports tasks such as scaffolding new projects, building UI patterns, and converting Figma designs into Salt code via the Model Context Protocol.684 npm1MIT