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.33611MITWhy this server?
Auto-syncs token and component changes to Storybook documentation, ensuring design system docs stay up-to-date without manual rebuilding.
AlicenseBqualityAmaintenanceEnables AI agents to access design system tokens and component contracts through MCP, reducing token usage and ensuring consistency.29MITWhy 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.248621MITWhy 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.6141MITWhy this server?
Allows browsing, inspecting, creating, and composing components in a running Storybook instance.
AlicenseAqualityDmaintenanceIntegrates with a running Storybook instance to let AI-powered coding tools browse, inspect, and scaffold components from natural language.4MITWhy 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.910369MITWhy this server?
Scans Storybook documentation to extract component information and props, reconciles conflicts with other sources, and includes them in the authoritative design contract.
AlicenseAqualityAmaintenanceDesign contract layer for AI agents. Scans Figma, code, Storybook, and token files, reconciles conflicts, and serves a single machine-readable source of truth so every agent gets the same authoritative design rules before it builds. Local-first.682318Apache 2.0Why this server?
Planned integration to auto-generate Storybook stories for existing components.
AlicenseAqualityBmaintenance9 MCP servers for React + TypeScript development automation — component scaffolding, dependency auditing, WCAG accessibility checking, test generation, TypeScript enforcement, and monorepo management. 134 tests, CI on Node 20+22.7653MITWhy 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.
AlicenseBqualityBmaintenanceA Model Context Protocol (MCP) server for Storybook.248646MIT