Storybook MCP Server

resmi

Membantu agen secara otomatis menulis dan menguji cerita untuk komponen UI Anda.

GitHub
258

Dokumentasi

Storybook MCP - Panduan Kontributor

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 pengembangan Storybook Anda, dan mencakup fungsionalitas @storybook/mcp dari Storybook lokal Anda
  • @storybook/claude-code-plugin - Plugin Claude Code dengan keterampilan penyiapan Storybook dan konfigurasi MCP
  • @storybook/codex-plugin - Plugin Codex dengan keterampilan penyiapan Storybook dan konfigurasi MCP

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

🚀 Mulai Cepat

Menguji plugin Claude dan Codex dari GitHub

Penguji eksternal dapat memasang marketplace plugin langsung dari cabang main repositori ini. Tidak diperlukan klon lokal.

Codex

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

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 sengaja menyimpan katalog marketplace di dua tempat. Katalog root mendukung pemasangan GitHub dari storybookjs/mcp; katalog lokal paket mendukung skrip pengembangan paket lokal. Keduanya harus tetap identik kecuali untuk jalur sumber plugin relatif, dan validasi paket memeriksa bahwa memang demikian.

Prasyarat

  • Node.js 24+ - Proyek ini memerlukan Node.js 24 atau lebih tinggi (lihat .nvmrc)
  • pnpm 10.19.0+ - Persyaratan manajer paket yang ketat (ditegakkan di package.json)
# Use the correct Node version
nvm use

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

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

  • Instance Storybook pengujian internal di http://localhost:6006
  • Addon dalam mode pantau, 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 pantau, membangun ulang secara otomatis 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 root 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 Inspektur MCP 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.

Atau, Anda juga dapat menggunakan perintah curl ini untuk memeriksa apakah 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 titik akhir addon yang Anda konfigurasi) dan mencobanya.

Bekerja dengan Aplikasi MCP

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

  1. Gunakan build Insiders VSCode
  2. Pastikan pengaturan chat.mcp.apps.enabled diaktifkan
  3. Mulai Storybook repositori dalam mode pantau dengan menjalankan pnpm storybook di root
  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 bagaimana semua cerita tombol terlihat, menggunakan Storybook MCP

  1. Setelah prompt pertama ini, setiap kali Anda membuat perubahan, Storybook otomatis memulai ulang. Tunggu hingga benar-benar siap, lalu Anda dapat meminta "Jalankan alat lagi".

Anda juga dapat menggunakan inspektur dari MCPJam untuk memiliki kontrol tingkat 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)
  • Pengujian lulus (pnpm test:run)
  • Kode diformat (pnpm format)
  • Kode dilint (pnpm lint)
  • Pemeriksaan tipe lulus (pnpm typecheck)
  • Perubahan diuji dengan inspektur MCP atau Storybook internal
  • Changeset dibuat jika perlu (pnpm changeset)

Mendapatkan Bantuan

📄 Lisensi

MIT - Lihat LICENSE untuk detail

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