Storybook MCP

[!TIP] ที่เก็บนี้ได้ย้ายไปที่ storybookjs/storybook ตั้งแต่ Storybook v10.6.0 เป็นต้นไป กรุณาตรวจสอบเอกสารที่อัปเดตที่นั่น

---

Storybook MCP

ยินดีต้อนรับสู่ monorepo ของ Storybook MCP Addon! โปรเจกต์นี้ช่วยให้ AI agents ทำงานกับ Storybook ได้อย่างมีประสิทธิภาพมากขึ้น โดยให้ MCP (Model Context Protocol) server ที่เปิดเผยข้อมูลส่วนประกอบ UI และขั้นตอนการทำงานสำหรับการพัฒนา

📦 แพ็กเกจ

monorepo นี้ประกอบด้วยสี่แพ็กเกจหลัก:

• @storybook/mcp - ไลบรารี MCP แบบสแตนด์อโลนสำหรับให้บริการความรู้เกี่ยวกับคอมโพเนนต์ของ Storybook (สามารถใช้ได้อย่างอิสระ)
• @storybook/addon-mcp - Storybook addon ที่รัน MCP server ภายใน dev server ของ Storybook และรวมฟังก์ชันการทำงานของ @storybook/mcp จาก Storybook ในเครื่องของคุณ
• @storybook/claude-code-plugin - ปลั๊กอิน Claude Code พร้อมทักษะการตั้งค่า Storybook และการกำหนดค่า MCP
• @storybook/codex-plugin - ปลั๊กอิน Codex พร้อมทักษะการตั้งค่า Storybook และการกำหนดค่า MCP

แต่ละแพ็กเกจมี README ของตัวเองพร้อมเอกสารสำหรับผู้ใช้ เอกสารนี้มีไว้สำหรับ ผู้มีส่วนร่วม ที่ต้องการพัฒนา ทดสอบ หรือมีส่วนร่วมในแพ็กเกจเหล่านี้

🚀 เริ่มต้นอย่างรวดเร็ว

การทดสอบปลั๊กอิน Claude และ Codex จาก GitHub

ผู้ทดสอบภายนอกสามารถติดตั้ง marketplace ของปลั๊กอินได้โดยตรงจากสาขา main ของที่เก็บนี้ ไม่จำเป็นต้อง clone ในเครื่อง

Codex (รายละเอียดเพิ่มเติม)

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

ตรวจสอบ marketplace และปลั๊กอิน:

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 server:

claude plugin list --json
claude mcp list

ที่เก็บนี้ตั้งใจเก็บแคตตาล็อก marketplace ไว้ในสองที่ แคตตาล็อกที่รากรองรับการติดตั้งจาก GitHub จาก storybookjs/mcp; แคตตาล็อกเฉพาะแพ็กเกจรองรับสคริปต์การพัฒนาแพ็กเกจในเครื่อง ควรคงเหมือนกันยกเว้นเส้นทางแหล่งที่มาของปลั๊กอินที่สัมพันธ์กัน และการตรวจสอบแพ็กเกจจะตรวจสอบว่าสอดคล้องกัน

ข้อกำหนดเบื้องต้น

• 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 เริ่มต้น:

• อินสแตนซ์ Storybook สำหรับทดสอบภายในบน http://localhost:6006
• addon ในโหมด watch เพื่อให้การเปลี่ยนแปลงสะท้อนโดยอัตโนมัติ
• MCP server พร้อมใช้งานที่ http://localhost:6006/mcp

🛠️ งานทั่วไป

การพัฒนา

คำสั่ง turbo watch build รันทุกแพ็กเกจในโหมด watch โดยสร้างใหม่โดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลง:

# 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

การทดสอบ

monorepo ใช้การกำหนดค่า 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 Servers

ใช้ MCP Inspector เพื่อดีบักและทดสอบฟังก์ชันการทำงานของ MCP server:

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

สิ่งนี้ใช้การกำหนดค่าใน .mcp.inspect.json เพื่อเชื่อมต่อกับ MCP servers ในเครื่องของคุณ

หรือคุณสามารถใช้คำสั่ง 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

สิ่งนี้จะสร้างทุกอย่างและเริ่ม Storybook พร้อม addon-mcp จากนั้นคุณสามารถเชื่อมต่อ coding agent ของคุณกับมันที่ http://localhost:6006/mcp (หรือ endpoint addon ที่คุณกำหนดค่า) และลองใช้งาน

การทำงานกับ MCP App

เพื่อทำงานและดีบัก MCP app ที่แสดงเป็นส่วนหนึ่งของเครื่องมือ preview-stories คุณสามารถ:

1. ใช้ Insiders build ของ VSCode
2. ตรวจสอบให้แน่ใจว่าเปิดใช้งานการตั้งค่า chat.mcp.apps.enabled แล้ว
3. เริ่ม Storybook ของที่เก็บในโหมด watch โดยรัน pnpm storybook ในราก
4. รีสตาร์ท VSCode และเปิดไฟล์ .vscode/mcp.json และตรวจสอบว่า Storybook MCP ถูกทำเครื่องหมายว่า Running มิฉะนั้นคลิก Start
5. เปิดแชทใน VSCode และเขียนพรอมต์เช่น:

แสดงให้ฉันเห็นว่าเรื่องราวของปุ่มทั้งหมดมีลักษณะอย่างไร โดยใช้ Storybook MCP

6. หลังจากพรอมต์แรกนี้ เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลง Storybook จะรีสตาร์ทโดยอัตโนมัติ รอให้พร้อมเต็มที่ จากนั้นคุณสามารถพรอมต์ "Run the tool again"

คุณยังสามารถใช้ inspector จาก 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

🔍 การตรวจสอบคุณภาพ

monorepo รวมการตรวจสอบคุณภาพหลายรายการที่รันใน 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 และ Imports

รวมนามสกุลไฟล์เสมอ ใน relative imports:

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

// ❌ Wrong
import { foo } from './bar';

• JSON imports ใช้ไวยากรณ์ import attributes:

import pkg from '../package.json' with { type: 'json' };

🚢 กระบวนการเผยแพร่

โปรเจกต์นี้ใช้ Changesets สำหรับการจัดการเวอร์ชัน:

# 1. Create a changeset describing your changes
pnpm changeset

เมื่อคุณสร้าง PR ให้เพิ่ม changeset หากการเปลี่ยนแปลงของคุณควรทริกเกอร์การเผยแพร่:

• Patch: การแก้ไขบั๊ก การอัปเดตเอกสาร
• Minor: คุณสมบัติใหม่ การเปลี่ยนแปลงที่เข้ากันได้ย้อนหลัง
• Major: การเปลี่ยนแปลงที่ทำลายความเข้ากันได้

🤝 การมีส่วนร่วม

เรายินดีต้อนรับการมีส่วนร่วม! นี่คือวิธีเริ่มต้น:

1. Fork ที่เก็บ และสร้างสาขาฟีเจอร์
2. ทำการเปลี่ยนแปลง ตามข้อกำหนดโค้ดด้านบน
3. ทดสอบการเปลี่ยนแปลง โดยใช้อินสแตนซ์ Storybook ภายใน
4. สร้าง changeset หากการเปลี่ยนแปลงของคุณสมควรได้รับการเผยแพร่
5. ส่ง pull request พร้อมคำอธิบายที่ชัดเจน

ก่อนส่ง

• โค้ดสร้างโดยไม่มีข้อผิดพลาด (pnpm build)
• การทดสอบผ่าน (pnpm test:run)
• โค้ดถูกจัดรูปแบบ (pnpm format)
• โค้ดถูกตรวจสอบ (pnpm lint)
• การตรวจสอบประเภทผ่าน (pnpm typecheck)
• การเปลี่ยนแปลงทดสอบด้วย MCP inspector หรือ Storybook ภายใน
• สร้าง changeset หากจำเป็น (pnpm changeset)

การขอความช่วยเหลือ

• แนวคิดและคำขอฟีเจอร์: เริ่มการสนทนา
• รายงานบั๊ก: เปิด issue
• คำถาม: ถามใน GitHub Discussions

📄 ใบอนุญาต

MIT - ดู LICENSE สำหรับรายละเอียด

---

หมายเหตุ: โปรเจกต์นี้เป็นเชิงทดลองและอยู่ระหว่างการพัฒนาอย่างต่อเนื่อง APIs และสถาปัตยกรรมอาจเปลี่ยนแปลงได้ในขณะที่เราสำรวจวิธีที่ดีที่สุดในการรวม AI agents เข้ากับ Storybook