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 и могут генерировать сторисы на основе реальных пропсов и состояний.
Дизайн
Подключить MCPОткрыть на GitHubОфициальный сайт
Подключение

Подключить Storybook MCP Addon

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

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

3

Скопируйте и проверьте

Claude

Клиент подключается к уже работающему MCP endpoint.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "addon-mcp": {
      "url": "https://storybook.js.org/docs/ai/mcp/overview",
      "transport": "streamable-http"
    }
  }
}

Сгенерировано из transportTypes и URL, похожего на MCP endpoint. Нужно проверить авторизацию.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Storybook MCP Addon

Storybook MCP Addon относится к Дизайн. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
TypeScript
Транспорт
streamable-http

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 2.

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

Общее

  • СтатусСообщество
  • Разработчик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

Поделиться