Storybook MCP を試してみた

npm install @storybook/addon-mcp

  export default {
    "stories": [
      "../src/**/*.stories.mdx",
      "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
     "@chromatic-com/storybook",
     "@storybook/addon-vitest",
     "@storybook/addon-a11y",
-    "@storybook/addon-docs"
+    "@storybook/addon-docs",
+    "@storybook/addon-mcp"
   ],
   "framework": "@storybook/react-vite"
 };

npm run storybook

claude mcp add --transport http storybook http://localhost:6006/mcp --scope project

{
  "mcpServers": {
    "storybook": {
      "type": "http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

When working on UI components, always use the `your-project-sb-mcp` MCP tools to access Storybook's component and documentation knowledge before answering or taking any action.
 
- **CRITICAL: Never hallucinate component properties!** Before using ANY property on a component from a design system (including common-sounding ones like `shadow`, etc.), you MUST use the MCP tools to check if the property is actually documented for that component.
- Query `list-all-documentation` to get a list of all components
- Query `get-documentation` for that component to see all available properties and examples
- Only use properties that are explicitly documented or shown in example stories
- If a property isn't documented, do not assume properties based on naming conventions or common patterns from other libraries. Check back with the user in these cases.
- Use the `get-storybook-story-instructions` tool to fetch the latest instructions for creating or updating stories. This will ensure you follow current conventions and recommendations.
- Check your work by running `run-story-tests`.
 
Remember: A story name might not reflect the property name correctly, so always verify properties through documentation or example stories before using them.

import type { Meta, StoryObj } from "@storybook/react-vite";
import { expect, fn, userEvent } from "storybook/test";
import { LoginForm } from "./LoginForm";
 
const meta: Meta<typeof LoginForm> = {
  component: LoginForm,
  title: "Components/LoginForm",
  tags: ["autodocs"],
};
 
export default meta;
type Story = StoryObj<typeof LoginForm>;
 
export const Default: Story = {
  name: "Default",
  args: {
    onSubmit: fn(),
  },
};
 
export const Loading: Story = {
  name: "Loading",
  args: {
    isLoading: true,
    onSubmit: fn(),
  },
};
 
export const WithError: Story = {
  name: "With Error",
  args: {
    error: "メールアドレスまたはパスワードが正しくありません",
    onSubmit: fn(),
  },
};
 
export const SuccessfulSubmit: Story = {
  name: "Successful Submit",
  args: {
    onSubmit: fn(),
  },
  play: async ({ canvas, args }) => {
    await userEvent.type(
      canvas.getByLabelText("メールアドレス"),
      "[email protected]",
    );
    await userEvent.type(canvas.getByLabelText("パスワード"), "password123");
    await userEvent.click(canvas.getByRole("button", { name: "ログイン" }));
    await expect(args.onSubmit).toHaveBeenCalledWith(
      "[email protected]",
      "password123",
    );
  },
};
 
export const ValidationError: Story = {
  name: "Validation Error",
  args: {
    onSubmit: fn(),
  },
  play: async ({ canvas, args }) => {
    await userEvent.click(canvas.getByRole("button", { name: "ログイン" }));
    await expect(
      canvas.getByText("メールアドレスを入力してください"),
    ).toBeVisible();
    await expect(
      canvas.getByText("パスワードを入力してください"),
    ).toBeVisible();
    await expect(args.onSubmit).not.toHaveBeenCalled();
  },
};