StorybookをChatGPT、Claude、Geminiに接続

• 01 / 03UIコンポーネントを検索する
• 02 / 03コンポーネントのプレビュー方法
• 03 / 03Propsの検証方法

最速日

750ms

最遅日

1013ms

14日間の傾向

遅延傾向+8%

Storybook Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — Storybook capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

各クライアントの手順ガイドはこちらです。 接続方法

Claude向けのガイド付きセットアップ？ StorybookをClaudeや他のAIに設定する

このConnectorが対応するすべてのAIクライアントを見る ↑

• 01

  フロントエンドエンジニア

  コーディング環境を離れることなく、既存のUI要素やそのプロパティを迅速に特定できます。

• 02

  UI/UXデザイナー

  デプロイされたコンポーネント構造をプログラム的に検証し、デザイントークンとの整合性を確認できます。

• 03

  テクニカルライター

  Storybookのドキュメントパスを自動的に抽出して、常に最新のデザインシステムガイドラインを維持できます。

• 01

  How does the MCP get my component data?

  The MCP reads the static index.json file that Storybook generates, which contains the full hierarchy of your components.

• 02

  Do I need to change my Storybook setup?

  No, you just need to provide the URL of your already deployed Storybook instance.

• 03

  Can I see what the components look like?

  Yes, you can ask your agent to generate a preview URL, which provides an isolated iframe sandbox for the component.

• 04

  Which AI clients can use this?

  This MCP works with any MCP-compatible client, including Claude, Cursor, Windsurf, and VS Code.

• 05

  Can it help me write code?

  Yes, by retrieving prop signatures and local source paths, it gives your agent the context needed to write accurate implementation code.

• 06

  Does it require API keys or OAuth?

  No. The MCP reads the static index.json file generated by your Storybook build. As long as the agent can reach the STORYBOOK_URL over the network, no additional authentication is needed.

• 07

  Is the integration read-only?

  Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

• 08

  Which UI frameworks are supported?

  Any framework supported by Storybook. React, Vue, Angular, Svelte, Web Components, and more. The MCP reads the universal index.json format, which is framework-agnostic.

• 

  Katalon TestOps (AI Test Management) AIコネクタ

  Manage test orchestration via Katalon TestOps — rerun test runs, monitor execution results, and audit software

  表示
• 

  TestRail AIコネクタ

  Browse TestRail suites, parse manual test specs, and monitor active runs seamlessly native within your convers

  表示
• 

  TestLink AIコネクタ

  Navigate your self-hosted TestLink instance to inspect test plans, suites, cases, and builds natively via your

  表示
• 

  Testim AIコネクタ

  Trigger automated AI tests, inspect execution logs, and manage branches natively via your AI agent.

  表示

おすすめ

• 

  Wine Label Design Testing AIコネクタ

  Design valid A/B testing protocols for wine labels using statistical experimental design.

  表示
• 

  ReadMe AIコネクタ

  Equip your AI to directly search, read, and manage developer documentation stored in your ReadMe project.

  表示
• 

  Pixso AIコネクタ

  Collaborative design platform and UI/UX tool — manage design files, nodes, and teams via AI.

  表示
• 

  Zephyr Scale (SmartBear) AIコネクタ

  Manage test cases, cycles, and executions on Zephyr Scale — the high-performance test management tool for Jira

  表示