Storybook MCP
Аддон для Storybook, запускающий MCP-сервер для автоматизированной разработки UI-компонентов с ИИ-агентами.
Описание
Storybook MCP Addon — плагин для Storybook, интегрирующий MCP-сервер (Model Context Protocol) для эффективной UI-разработки. Позволяет ИИ-агентам генерировать и связывать историй для визуальной проверки, документации и тестов компонентов. Поддерживает Vite-based фреймворки (React Vite, Next.js Vite, SvelteKit). Ключевые инструменты: инструкции по UI-разработке и получение URL историй. Идеален для интеграции с Claude Code и другими MCP-клиентами в frontend-проектах, ускоряя workflow с агентами.
Возможности
MCP-сервер
Запускает сервер для интеграции ИИ-агентов в процесс разработки UI-компонентов в Storybook.
get_ui_building_instructions
Предоставляет стандартизированные инструкции по созданию компонентов, историй в формате CSF3 и соблюдению конвенций проекта.
get_story_urls
Получает прямые URL к конкретным историям по пути файла, имени экспорта или имени истории для визуальной верификации.
Автоматическая генерация историй
Автоматически создаёт и связывает примеры историй для новых UI-компонентов, обеспечивая документацию и тесты.
Установка
Установка:
npx storybook add @storybook/addon-mcp
Это автоматически установит и настроит аддон.
Запуск Storybook:
npm run storybook
MCP-сервер будет доступен по адресу <your_storybook_dev_server_origin>/mcp.
Для Claude Code:
claude mcp add storybook-mcp –transport http http://localhost:6006/mcp –scope project
Убедитесь, что Storybook запущен перед подключением агента.