Storybook MCP

[!TIP] यह रिपॉजिटरी Storybook v10.6.0 से storybookjs/storybook पर स्थानांतरित हो गई है। अद्यतन दस्तावेज़ के लिए कृपया वहाँ देखें।

---

Storybook MCP

Storybook MCP Addon मोनोरिपो में आपका स्वागत है! यह प्रोजेक्ट AI एजेंटों को Storybook के साथ अधिक कुशलता से काम करने में सक्षम बनाता है, जो एक MCP (Model Context Protocol) सर्वर प्रदान करता है जो 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 pnpm@10.19.0

स्थापना

# 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 Inspector का उपयोग करें:

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

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

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

आप टूल कॉल के अधिक निम्न-स्तरीय नियंत्रण के लिए 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 जोड़ें यदि आपके परिवर्तनों को रिलीज़ ट्रिगर करना चाहिए:

• Patch: बग फिक्स, दस्तावेज़ अपडेट
• Minor: नई सुविधाएँ, पिछड़े-संगत परिवर्तन
• Major: ब्रेकिंग परिवर्तन

🤝 योगदान

हम योगदान का स्वागत करते हैं! यहाँ शुरू करने का तरीका है:

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

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

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

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

• विचार और सुविधा अनुरोध: चर्चा शुरू करें
• बग रिपोर्ट: एक मुद्दा खोलें
• प्रश्न: GitHub चर्चाओं में पूछें

📄 लाइसेंस

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

---

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