Storybook MCP Server

आधिकारिक

एजेंटों को आपके UI घटकों के लिए स्वचालित रूप से स्टोरीज़ लिखने और परीक्षण करने में सहायता करें।

GitHub
259

दस्तावेज़

Storybook MCP - योगदानकर्ता गाइड

Storybook MCP Addon मोनोरेपो में आपका स्वागत है! यह प्रोजेक्ट AI एजेंटों को Storybook के साथ अधिक कुशलता से काम करने में सक्षम बनाता है, एक MCP (मॉडल कॉन्टेक्स्ट प्रोटोकॉल) सर्वर प्रदान करके जो UI कंपोनेंट जानकारी और डेवलपमेंट वर्कफ़्लो को उजागर करता है।

📦 पैकेज

इस मोनोरेपो में चार मुख्य पैकेज हैं:

  • @storybook/mcp - Storybook कंपोनेंट ज्ञान प्रस्तुत करने के लिए स्टैंडअलोन MCP लाइब्रेरी (स्वतंत्र रूप से उपयोग की जा सकती है)
  • @storybook/addon-mcp - Storybook ऐडऑन जो आपके Storybook डेव सर्वर के भीतर एक MCP सर्वर चलाता है, और आपके स्थानीय Storybook से @storybook/mcp की कार्यक्षमता शामिल करता है
  • @storybook/claude-code-plugin - Storybook सेटअप कौशल और MCP कॉन्फ़िगरेशन के साथ Claude Code प्लगइन
  • @storybook/codex-plugin - Storybook सेटअप कौशल और MCP कॉन्फ़िगरेशन के साथ Codex प्लगइन

प्रत्येक पैकेज का अपना README है जिसमें उपयोगकर्ता-सामना दस्तावेज़ीकरण है। यह दस्तावेज़ उन योगदानकर्ताओं के लिए है जो इन पैकेजों को विकसित, परीक्षण या योगदान करना चाहते हैं।

🚀 त्वरित शुरुआत

GitHub से Claude और Codex प्लगइन का परीक्षण

बाहरी परीक्षक इस रिपॉजिटरी की main शाखा से सीधे प्लगइन मार्केटप्लेस इंस्टॉल कर सकते हैं। किसी स्थानीय क्लोन की आवश्यकता नहीं है।

Codex

codex plugin marketplace add storybookjs/mcp --ref main
codex plugin add storybook@storybook

मार्केटप्लेस और प्लगइन सत्यापित करें:

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code

claude plugin marketplace add storybookjs/mcp@main --scope user
claude plugin install storybook@storybook --scope user

प्लगइन और MCP सर्वर सत्यापित करें:

claude plugin list --json
claude mcp list

रिपॉजिटरी जानबूझकर मार्केटप्लेस कैटलॉग को दो स्थानों पर रखती है। रूट कैटलॉग storybookjs/mcp से GitHub इंस्टॉल का समर्थन करते हैं; पैकेज-स्थानीय कैटलॉग स्थानीय पैकेज डेवलपमेंट स्क्रिप्ट का समर्थन करते हैं। उन्हें सापेक्ष प्लगइन स्रोत पथ को छोड़कर समान रहना चाहिए, और पैकेज सत्यापन जाँचता है कि वे हैं।

पूर्वापेक्षाएँ

  • Node.js 24+ - प्रोजेक्ट के लिए Node.js 24 या उच्चतर आवश्यक है (.nvmrc देखें)
  • pnpm 10.19.0+ - सख्त पैकेज प्रबंधक आवश्यकता (package.json में लागू)
# Use the correct Node version
nvm use

# Install pnpm if you don't have it
npm install -g [email protected]

इंस्टॉलेशन

# Clone the repository
git clone https://github.com/storybookjs/mcp.git
cd addon-mcp

# Install all dependencies (for all packages in the monorepo)
pnpm install

डेवलपमेंट वर्कफ़्लो

# Build all packages
pnpm build

# Start development mode (watches for changes in all packages)
pnpm dev

# Run unit tests in watch mode
pnpm test

# Run unit tests once
pnpm test:run

# Run Storybook with the addon for testing
pnpm --filter internal-storybook storybook

Storybook कमांड शुरू होता है:

  • http://localhost:6006 पर आंतरिक परीक्षण Storybook इंस्टेंस
  • वॉच मोड में ऐडऑन, ताकि परिवर्तन स्वचालित रूप से दिखाई दें
  • http://localhost:6006/mcp पर MCP सर्वर उपलब्ध

🛠️ सामान्य कार्य

डेवलपमेंट

turbo watch build कमांड सभी पैकेजों को वॉच मोड में चलाता है, जब आप परिवर्तन करते हैं तो स्वचालित रूप से पुनर्निर्माण करता है:

# Start development mode for all packages
pnpm turbo watch build

# This is usually all you need - starts Storybook AND watches addon for changes
pnpm storybook

बिल्डिंग

# Build all packages
pnpm build

परीक्षण

मोनोरेपो प्रत्येक पैकेज के लिए कॉन्फ़िगर किए गए प्रोजेक्ट के साथ रूट स्तर पर एक केंद्रीकृत Vitest कॉन्फ़िगरेशन का उपयोग करता है:

# Watch tests across all packages
pnpm test

# Run tests once across all packages
pnpm test:run

# Run tests with coverage and CI reporters
pnpm test:ci

MCP सर्वर डीबग करना

MCP सर्वर कार्यक्षमता को डीबग और परीक्षण करने के लिए MCP इंस्पेक्टर का उपयोग करें:

# Launches the MCP inspector (requires Storybook to be running)
pnpm inspect

यह आपके स्थानीय MCP सर्वर से कनेक्ट करने के लिए .mcp.inspect.json में कॉन्फ़िगरेशन का उपयोग करता है।

वैकल्पिक रूप से, आप यह जाँचने के लिए इन curl कमांड का भी उपयोग कर सकते हैं कि सब कुछ काम करता है:

# test that the mcp server is running
# use port 6006 to test the addon-mcp server instead
curl -X POST \
  http://localhost:13316/mcp      \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'

# test a specific tool call
curl -X POST http://localhost:13316/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "list-all-documentation",
      "arguments": {}
    }
  }'

Storybook के साथ डीबगिंग

आप Storybook को इसके साथ शुरू कर सकते हैं:

pnpm storybook

यह सब कुछ बनाएगा और addon-mcp के साथ Storybook शुरू करेगा, और फिर आप अपने कोडिंग एजेंट को http://localhost:6006/mcp (या आपके कॉन्फ़िगर किए गए ऐडऑन एंडपॉइंट) पर कनेक्ट कर सकते हैं और इसे आज़मा सकते हैं।

MCP ऐप के साथ काम करना

preview-stories टूल के हिस्से के रूप में रेंडर किए गए MCP ऐप के साथ काम करने और डीबग करने के लिए, आप यह कर सकते हैं:

  1. VSCode के इनसाइडर्स बिल्ड का उपयोग करें
  2. सुनिश्चित करें कि chat.mcp.apps.enabled सेटिंग सक्षम है
  3. रूट में pnpm storybook चलाकर रेपो के Storybook को वॉच मोड में शुरू करें
  4. VSCode को पुनरारंभ करें और, .vscode/mcp.json फ़ाइल खोलें और सुनिश्चित करें कि Storybook MCP चल रहा है के रूप में चिह्नित है, अन्यथा प्रारंभ करें पर क्लिक करें।
  5. VSCode में एक चैट खोलें और इस तरह का एक प्रॉम्प्ट लिखें:

मुझे दिखाओ कि सभी बटन स्टोरीज़ कैसी दिखती हैं, Storybook MCP का उपयोग करके

  1. इस पहले प्रॉम्प्ट के बाद, जब भी आप परिवर्तन करते हैं, Storybook स्वचालित रूप से पुनरारंभ होता है। इसके पूरी तरह से तैयार होने की प्रतीक्षा करें, फिर आप प्रॉम्प्ट कर सकते हैं "टूल को फिर से चलाएं"।

आप टूल कॉल पर अधिक निम्न स्तर का नियंत्रण रखने के लिए MCPJam से इंस्पेक्टर का भी उपयोग कर सकते हैं।

फ़ॉर्मेटिंग और लिंटिंग

# Format all files with Prettier
pnpm format

# Check formatting without changing files
pnpm format:check

# Lint code with oxlint
pnpm lint

# Lint with GitHub Actions format (for CI)
pnpm lint:ci

# Check package exports with publint
pnpm publint

🔍 गुणवत्ता जाँच

मोनोरेपो में कई गुणवत्ता जाँच शामिल हैं जो CI में चलती हैं:

# Run all checks (build, test, lint, format, typecheck, publint)
pnpm check

# Run checks in watch mode (experimental)
pnpm check:watch

# Type checking (uses tsc directly, not turbo)
pnpm typecheck

# Type checking with turbo (for individual packages)
pnpm turbo:typecheck

# Testing with turbo (for individual packages)
pnpm turbo:test

📝 कोड परंपराएँ

TypeScript और आयात

हमेशा फ़ाइल एक्सटेंशन शामिल करें सापेक्ष आयात में:

// ✅ Correct
import { foo } from './bar.ts';

// ❌ Wrong
import { foo } from './bar';
  • JSON आयात आयात विशेषता सिंटैक्स का उपयोग करते हैं:
import pkg from '../package.json' with { type: 'json' };

🚢 रिलीज़ प्रक्रिया

यह प्रोजेक्ट संस्करण प्रबंधन के लिए Changesets का उपयोग करता है:

# 1. Create a changeset describing your changes
pnpm changeset

जब आप एक PR बनाते हैं, यदि आपके परिवर्तनों को रिलीज़ ट्रिगर करना चाहिए तो एक changeset जोड़ें:

  • पैच: बग फिक्स, दस्तावेज़ीकरण अपडेट
  • माइनर: नई सुविधाएँ, पश्च-संगत परिवर्तन
  • मेजर: ब्रेकिंग परिवर्तन

🤝 योगदान

हम योगदान का स्वागत करते हैं! आरंभ करने का तरीका यहां दिया गया है:

  1. रिपॉजिटरी को फोर्क करें और एक फीचर शाखा बनाएं
  2. अपने परिवर्तन करें ऊपर दी गई कोड परंपराओं का पालन करते हुए
  3. अपने परिवर्तनों का परीक्षण करें आंतरिक Storybook इंस्टेंस का उपयोग करके
  4. एक changeset बनाएं यदि आपके परिवर्तन रिलीज़ के योग्य हैं
  5. एक पुल अनुरोध सबमिट करें स्पष्ट विवरण के साथ

सबमिट करने से पहले

  • कोड बिना त्रुटियों के बिल्ड होता है (pnpm build)
  • परीक्षण पास होते हैं (pnpm test:run)
  • कोड फ़ॉर्मेटेड है (pnpm format)
  • कोड लिंटेड है (pnpm lint)
  • टाइप चेकिंग पास होती है (pnpm typecheck)
  • MCP इंस्पेक्टर या आंतरिक Storybook के साथ परिवर्तनों का परीक्षण किया गया
  • यदि आवश्यक हो तो changeset बनाया गया (pnpm changeset)

सहायता प्राप्त करना

📄 लाइसेंस

MIT - विवरण के लिए LICENSE देखें

नोट: यह प्रोजेक्ट प्रायोगिक है और सक्रिय विकास के अधीन है। API और आर्किटेक्चर बदल सकते हैं क्योंकि हम AI एजेंटों को Storybook के साथ एकीकृत करने के सर्वोत्तम तरीकों का पता लगाते हैं।