Storybook MCP Addon

Storybook MCP Addon

storybookjsMIT
248 звёзд34 форков
Storybook MCP Addon — это набор инструментов для подключения AI-агентов к Storybook через Model Context Protocol (MCP). Сервер передаёт агентам детальную информацию о UI-компонентах: пропсы, состояния, варианты оформления. Разработчики могут поручить AI создание сторисов для компонентов и проверку их корректности. Проект включает несколько пакетов: автономный MCP-сервер (@storybook/mcp), аддон для встраивания в Storybook (@storybook/addon-mcp), прокси для стабильного соединения (@storybook/mcp-proxy) и плагины для Claude Code и Codex. Это покрывает разные сценарии — от простого подключения к уже работающему Storybook до полной автоматизации рабочих процессов с дизайн-системами. Агенты получают актуальную документацию компонентов прямо из Storybook и могут генерировать сторисы на основе реальных пропсов и состояний.
Design
Открыть на GitHubОфициальный сайт

Установка

npx -y @storybook/addon-mcp

Характеристики

Общее

  • СтатусСообщество
  • Разработчикstorybookjs
  • ЛицензияMIT

Технологии

  • Языки
    TypeScript
  • Транспорт
    streamable-http

Описание

Возможности

  • Даёт AI-агентам полную спецификацию компонентов: список пропсов с типами, значения по умолчанию, состояния (disabled, active, error и т.д.)
  • Автоматически генерирует сторисы для компонентов на основе их метаданных из Storybook
  • Работает как встроенный аддон внутри Storybook Dev Server — запускает MCP-сервер без отдельной настройки
  • Доступен как автономный сервер (@storybook/mcp) для использования без Storybook
  • Включает прокси-пакет (@storybook/mcp-proxy) для обеспечения стабильного соединения между AI-клиентом и Storybook
  • Поставляется с плагинами для Claude Code и Codex, которые автоматически настраивают Storybook и MCP-соединение
  • Использует транспорт streamable-http для эффективной потоковой передачи данных без блокировок
  • Поддерживает кастомные команды и расширение функциональности через монорепозиторий пакетов

Как подключить

Установите сервер с помощью npx:

npx -y @storybook/addon-mcp

Добавьте конфигурацию в ваш MCP-клиент. Например, для Claude Desktop отредактируйте файл mcp_servers.json:

{ "mcpServers": { "storybook": { "command": "npx", "args": ["-y", "@storybook/addon-mcp"] } } }

Перезапустите клиент. Сервер появится в списке доступных инструментов. Для более глубокой интеграции используйте плагин для Claude Code или Codex — они сами настраивают MCP и добавляют навыки работы со Storybook. Плагины устанавливаются командами из маркетплейса.

Примеры запросов

  • «Напиши story для компонента Button с вариантами primary, secondary и disabled. Используй пропсы из Storybook»
  • «Покажи все пропсы компонента Header с типами и значениями по умолчанию»
  • «Создай тестовую историю для компонента Modal в состоянии открыт. Добавь проверку на наличие заголовка»
  • «Добавь story для компонента Icon с размерами small, medium, large. Учитывай текущую цветовую схему»

Технические детали

Язык реализации: TypeScript

Транспорт: streamable-http (потоковая передача через HTTP)

Лицензия: MIT

Совместимые клиенты: Claude Desktop, Claude Code, Codex, любые MCP-совместимые приложения

Разработчик: storybookjs

Категория: design

Поделиться