Storybook MCP: компоненты и пропсы дизайн-системы для агента

mcpland/storybook-mcp· Проверено 12.11.2026· 46на GitHub

Открывает агенту ваш Storybook: список компонентов, их пропсы с типами и значениями по умолчанию, истории и документацию с примерами кода. Пропсы storybook-mcp читает со страниц документации через headless-браузер.

2 реализации:

Читает index.json любого опубликованного Storybook и вытаскивает таблицы пропсов через headless-браузер; свои инструменты добавляются на JavaScript.

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

Что сделать до подключения

Node.js 18 или новее

Chromium для Playwright: сервер скачивает его сам при первом запуске, заранее — командой npx -y storybook-mcp@latest install-browser

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env 'STORYBOOK_URL=<адрес Storybook>/index.json' --transport stdio storybook \
  -- npx -y storybook-mcp@latest

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.storybook]
command = "npx"
args = ["-y", "storybook-mcp@latest"]

[mcp_servers.storybook.env]
STORYBOOK_URL = "<адрес Storybook>/index.json"

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "storybook": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "storybook": {
        "type": "local",
        "command": ["npx", "-y", "storybook-mcp@latest"],
        "environment": {
          "STORYBOOK_URL": "<адрес Storybook>/index.json"
        }
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<адрес Storybook>/index.json"
      }
    }
  }
}

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Инструменты сервера

getComponentListперечисляет компоненты

getComponentsPropsчитает пропсы компонентов

Запускается в папке проекта и поднимает на одном порту Storybook, REST API и MCP по HTTP; поддерживает Storybook 8, 9 и 10.

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

Что сделать до подключения

Node.js и проект со Storybook 8, 9 или 10 на Angular, React, Vue, Svelte или Web Components

В папке проекта запустить npx storybook-mcp-api и держать его открытым: Storybook, REST API и MCP поднимутся на порту 6006

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport http storybook-mcp-api http://localhost:6006/mcp

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.storybook-mcp-api]
url = "http://localhost:6006/mcp"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "storybook-mcp-api": {
      "url": "http://localhost:6006/mcp"
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "storybook-mcp-api": {
      "type": "http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "storybook-mcp-api": {
      "httpUrl": "http://localhost:6006/mcp"
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "storybook-mcp-api": {
      "httpUrl": "http://localhost:6006/mcp"
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "storybook-mcp-api": {
        "type": "remote",
        "url": "http://localhost:6006/mcp"
      }
    }
  }
}

Customize → Connectors → добавить свой коннектор.
Адрес сервера: http://localhost:6006/mcp

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "storybook-mcp-api": {
      "url": "http://localhost:6006/mcp"
    }
  }
}

Инструменты сервера

list_storiesперечисляет истории

get_storyчитает историю

get_story_docsчитает документацию с кодом

Что попросить агента

«Какие компоненты есть в нашем Storybook?»Агент вызовет getComponentList

«Покажи пропсы Button, Input и Avatar и сверстай форму входа из них»Агент вызовет getComponentsProps с componentNames ["Button", "Input", "Avatar"] и напишет форму по этим пропсам

«Найди в Storybook истории кнопок и покажи пример кода для primary»Агент вызовет list_stories, затем get_story_docs

«Собери все иконки со страницы Icon»Агент вызовет ваш инструмент getIconList из CUSTOM_TOOLS

Для каких задач

Получить список компонентов дизайн-системы из Storybook

Узнать пропсы компонентов: типы, значения по умолчанию, обязательные поля

Достать из Storybook иконки или палитру своим инструментом на JavaScript

Прочитать истории и документацию компонента с примерами кода

Отдать истории по REST API своим скриптам и дашбордам

Ограничения

storybook-mcp видит только компоненты с документацией (тип docs) из index.json, а пропсы берёт со страниц через headless Chromium: первый вызов после установки может идти долго

Код handler в CUSTOM_TOOLS выполняется на странице Storybook как есть: подключайте только свой Storybook и свои инструменты

У storybook-mcp-api 2 звезды и последнее обновление в январе 2026, у storybook-mcp 46 звёзд и обновление в апреле 2026

Статическая выгрузка storybook-mcp-api через --generate-api отдаёт только REST, для MCP нужен запущенный Node.js-сервер

Если не работает

Первый вызов getComponentsProps идёт очень долго

Сервер в это время скачивает Chromium. Поставьте браузер заранее командой npx -y storybook-mcp@latest install-browser.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
Storybook MCP Server	mcpland	46	локально	не нужен	2	1 апреля 2026
storybook-mcp-api	benamaraissam	2	HTTP	не нужен	3	7 января 2026

Частые вопросы

Какой адрес указывать в STORYBOOK_URL?

Адрес файла index.json вашего Storybook, например https://your-storybook-domain.com/index.json или …/storybook/index.json. Для Storybook 3 сервер читает stories.json.

Как добавить свой инструмент, например список иконок?

Опишите его в переменной CUSTOM_TOOLS массивом JSON: name, description, page — адрес страницы Storybook и handler — код на JavaScript, который соберёт данные со страницы.

Что делать, если Storybook уже запущен?

Запустите storybook-mcp-api без прокси: npx storybook-mcp-api --no-proxy --storybook-url http://localhost:6006 --port 3000. MCP тогда будет на порту 3000.

Какой транспорт выбрать для storybook-mcp-api?

Есть два адреса: /mcp для Streamable HTTP и /sse. Автор советует /mcp: он надёжнее и не хранит состояние.

Как подключить Storybook MCP к Cursor?

Для storybook-mcp-api добавьте в ~/.cursor/mcp.json сервер storybook с url http://localhost:6006/mcp. storybook-mcp прописывается командой npx -y storybook-mcp@latest с переменной STORYBOOK_URL, готовый блок есть во вкладке Cursor.

Работает ли Storybook MCP с Angular и Vue?

storybook-mcp-api поддерживает Angular, React, Vue, Svelte и Web Components в Storybook 8, 9 и 10. storybook-mcp работает с любым Storybook, который отдаёт index.json.

Работает ли сервер из России?

Оба сервера работают на вашем компьютере с вашим Storybook, ключи и аккаунты не нужны.

Storybook MCP: компоненты и пропсы дизайн-системы для агента

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

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

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

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы