AIを活用してStorybook内の既存UIコンポーネントを検索する方法

AIがStorybook MCPを使用してコンポーネントライブラリとカテゴリをスキャンします。あなたの説明に基づいて一致するものを特定するため、すでに存在するものをわざわざ作り直す必要がなくなります。

1. 01

   システムの把握

   AIはコンポーネントのグループ化状況を確認し、ライブラリの構造を理解します。

   list_categories
2. 02

   利用可能なパーツのリストアップ

   特定のカテゴリからコンポーネントの全リストを取得し、何が利用可能かを確認します。

   list_components
3. 03

   ターゲット検索

   特定のUI要素について説明すると、AIはライブラリの中から最も近い一致物を検索します。

   search_components
4. 04

   一致の検証

   AIは、選択したコンポーネントのプロパティとあなたのニーズを照らし合わせ、それが最適かどうかを確認します。

   search_components

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

StorybookのインスタンスをVinkiusにリンクさせるだけです。認証情報は暗号化されて保持されるため、すぐにAIへコンポーネントについて質問できるようになります。

• 01

  AIがコンポーネントのコードを書き換えることはありますか？

  いいえ。AIはStorybookのデータを読み取り、検索することしかできません。ソースコードやファイルを直接修正することはありません。

• 02

  AIはプライベートなコンポーネントのロジックまで閲覧しますか？

  AIが閲覧できるのは、Storybookを通じて公開されているコンポーネントのメタデータと構造のみです。ローカルファイルシステム全体にアクセスすることはありません。

• 03

  AIが新しいコンポーネントを作成することはできますか？

  いいえ。提供されているツールは、既存のコンポーネントのリストアップ、カテゴリ分け、検索のみを許可しています。

• 04

  どのコンポーネントが存在するか、AIはどうやって知るのですか？

  検索およびリストアップツールを使用して、Storybookのインスタンスから現在のコンポーネントレジストリを直接取得します。

• 05

  どのようなStorybookの設定でも動作しますか？

  はい。Vinkiusを通じて設定した接続経由でStorybookのインスタンスにアクセスできれば、問題なく動作します。

• Storybookについて他に質問がありますか？ Connectorのページで確認できます。 Storybook Connectorの全機能を見る