Storybook MCP

[!TIP] Repositori ini telah dipindahkan ke storybookjs/storybook sejak Storybook v10.6.0. Silakan periksa di sana untuk dokumentasi terbaru.

---

Storybook MCP

Selamat datang di monorepo Addon Storybook MCP! Proyek ini memungkinkan agen AI bekerja lebih efisien dengan Storybook dengan menyediakan server MCP (Model Context Protocol) yang mengekspos informasi komponen UI dan alur kerja pengembangan.

📦 Paket

Monorepo ini berisi empat paket utama:

• @storybook/mcp - Pustaka MCP mandiri untuk menyajikan pengetahuan komponen Storybook (dapat digunakan secara independen)
• @storybook/addon-mcp - Addon Storybook yang menjalankan server MCP di dalam server dev Storybook Anda, dan mencakup fungsionalitas @storybook/mcp dari Storybook lokal Anda
• @storybook/claude-code-plugin - Plugin Claude Code dengan keterampilan pengaturan Storybook dan konfigurasi MCP
• @storybook/codex-plugin - Plugin Codex dengan keterampilan pengaturan Storybook dan konfigurasi MCP

Setiap paket memiliki README sendiri dengan dokumentasi untuk pengguna. Dokumen ini ditujukan untuk kontributor yang ingin mengembangkan, menguji, atau berkontribusi pada paket-paket ini.

🚀 Memulai dengan Cepat

Menguji plugin Claude dan Codex dari GitHub

Penguji eksternal dapat menginstal marketplace plugin langsung dari cabang main repositori ini. Tidak perlu melakukan kloning lokal.

Codex (detail lebih lanjut)

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

Verifikasi marketplace dan plugin:

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (detail lebih lanjut)

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

Verifikasi plugin dan server MCP:

claude plugin list --json
claude mcp list

Repositori ini sengaja menyimpan katalog marketplace di dua tempat. Katalog akar mendukung instalasi GitHub dari storybookjs/mcp; katalog lokal paket mendukung skrip pengembangan paket lokal. Keduanya harus tetap identik kecuali pada jalur sumber plugin relatif, dan validasi paket memeriksa hal tersebut.

Prasyarat

• Node.js 24+ - Proyek ini memerlukan Node.js 24 atau lebih tinggi (lihat .nvmrc)
• pnpm 10.19.0+ - Persyaratan manajer paket yang ketat (diberlakukan di package.json)

# Use the correct Node version
nvm use

# Install pnpm if you don't have it
npm install -g pnpm@10.19.0

Instalasi

# 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

Alur Kerja Pengembangan

# 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

Perintah Storybook dimulai:

• Instance Storybook pengujian internal di http://localhost:6006
• Addon dalam mode watch, sehingga perubahan tercermin secara otomatis
• Server MCP tersedia di http://localhost:6006/mcp

🛠️ Tugas Umum

Pengembangan

Perintah turbo watch build menjalankan semua paket dalam mode watch, secara otomatis membangun ulang saat Anda membuat perubahan:

# 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

Membangun

# Build all packages
pnpm build

Pengujian

Monorepo menggunakan konfigurasi Vitest terpusat di tingkat akar dengan proyek yang dikonfigurasi untuk setiap paket:

# 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

Men-debug Server MCP

Gunakan MCP Inspector untuk men-debug dan menguji fungsionalitas server MCP:

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

Ini menggunakan konfigurasi di .mcp.inspect.json untuk terhubung ke server MCP lokal Anda.

Alternatifnya, Anda juga dapat menggunakan perintah curl ini untuk memeriksa bahwa semuanya berfungsi:

# 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": {}
    }
  }'

Men-debug dengan Storybook

Anda dapat memulai Storybook dengan:

pnpm storybook

Ini akan membangun semuanya dan memulai Storybook dengan addon-mcp, dan Anda kemudian dapat menghubungkan agen pengkodean Anda ke sana di http://localhost:6006/mcp (atau endpoint addon yang Anda konfigurasi) dan mencobanya.

Bekerja dengan Aplikasi MCP

Untuk bekerja dengan dan men-debug aplikasi MCP yang dirender sebagai bagian dari alat preview-stories, Anda dapat:

1. Menggunakan build Insiders dari VSCode
2. Pastikan pengaturan chat.mcp.apps.enabled diaktifkan
3. Mulai Storybook repositori dalam mode watch dengan menjalankan pnpm storybook di akar
4. Mulai ulang VSCode dan, buka file .vscode/mcp.json dan pastikan Storybook MCP ditandai sebagai Berjalan, jika tidak klik Mulai.
5. Buka obrolan di VSCode dan tulis prompt seperti ini:

Tunjukkan kepada saya bagaimana semua cerita tombol terlihat, menggunakan Storybook MCP

6. Setelah prompt pertama ini, setiap kali Anda membuat perubahan, Storybook secara otomatis dimulai ulang. Tunggu hingga sepenuhnya siap, lalu Anda dapat meminta "Jalankan alat lagi".

Anda juga dapat menggunakan inspector dari MCPJam untuk memiliki kontrol tingkat lebih rendah atas panggilan alat.

Pemformatan & Linting

# 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

🔍 Pemeriksaan Kualitas

Monorepo mencakup beberapa pemeriksaan kualitas yang berjalan di 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

📝 Konvensi Kode

TypeScript & Impor

Selalu sertakan ekstensi file dalam impor relatif:

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

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

• Impor JSON menggunakan sintaks atribut impor:

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

🚢 Proses Rilis

Proyek ini menggunakan Changesets untuk manajemen versi:

# 1. Create a changeset describing your changes
pnpm changeset

Saat Anda membuat PR, tambahkan changeset jika perubahan Anda harus memicu rilis:

• Patch: Perbaikan bug, pembaruan dokumentasi
• Minor: Fitur baru, perubahan yang kompatibel mundur
• Major: Perubahan yang merusak

🤝 Berkontribusi

Kami menyambut kontribusi! Berikut cara memulai:

1. Fork repositori dan buat cabang fitur
2. Buat perubahan Anda mengikuti konvensi kode di atas
3. Uji perubahan Anda menggunakan instance Storybook internal
4. Buat changeset jika perubahan Anda memerlukan rilis
5. Kirim pull request dengan deskripsi yang jelas

Sebelum Mengirim

• Kode dibangun tanpa kesalahan (pnpm build)
• Tes lulus (pnpm test:run)
• Kode diformat (pnpm format)
• Kode di-lint (pnpm lint)
• Pemeriksaan tipe lulus (pnpm typecheck)
• Perubahan diuji dengan inspector MCP atau Storybook internal
• Changeset dibuat jika diperlukan (pnpm changeset)

Mendapatkan Bantuan

• Ide & Permintaan Fitur: Mulai diskusi
• Laporan Bug: Buka masalah
• Pertanyaan: Tanyakan di Diskusi GitHub

📄 Lisensi

MIT - Lihat LICENSE untuk detail

---

Catatan: Proyek ini bersifat eksperimental dan sedang dalam pengembangan aktif. API dan arsitektur dapat berubah saat kami mengeksplorasi cara terbaik untuk mengintegrasikan agen AI dengan Storybook.