AIを使ってStorybookコンポーネントをサンドボックスでプレビューする方法

AIがStorybook MCPを使用して特定のコンポーネントを検索し、専用のiframe URLを生成します。コンポーネントが独立した環境でレンダリングされるサンドボックスへの直接リンクが提供されるため、コードの更新依頼をした直後に、視覚的な変更や動作をすぐに確認できます。

1. 01

   コンポーネントの特定

   AIがStorybookライブラリをスキャンし、表示したい特定のコンポーネントを特定します。

   search_components
2. 02

   サンドボックスURLの生成

   コンポーネントが見つかると、AIはそのコンポーネント専用の分離されたiframeを指す直接URLを作成します。

   get_preview_url
3. 03

   URLの提供

   AIがチャットウィンドウ内にクリック可能なリンクを表示し、すぐにアクセスできるようにします。

   get_preview_url
4. 04

   変更内容の検証

   見た目の調整を依頼した後、AIは再度検索とURL生成を行い、更新された状態を表示します。

   search_componentsget_preview_url

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にリンクさせるだけです。認証情報は暗号化されて保持されるため、MCP対応のあらゆるクライアントでコンポーネントのプレビューが可能になります。

• 01

  AIがコンポーネントのコードを直接変更することはできますか？

  いいえ。AIができるのはコンポーネントの検索とプレビューURLの生成のみです。コードの変更はご自身のエディタで行う必要があります。

• 02

  AIにStorybookのログイン情報は必要ですか？

  いいえ。Vinkiusを通じてMCPを接続するため、接続は安全に管理されます。AIクライアントに認証情報を渡す必要はありません。

• 03

  AIが新しいStoryを作成することはできますか？

  いいえ。このツールでは、既存のコンポーネントの検索と、既存のStoryに対するURLの取得のみが可能です。

• 04

  プレビューにはローカル環境変数が反映されますか？

  プレビューURLはStorybookインスタンスを指します。動作は、Storybookがデータを扱うように設定されている内容に基づきます。

• 05

  Cursorでも使用できますか？

  はい。接続後は、Cursor、Claude、Windsurfなど、あらゆるMCP対応クライアントで使用可能です。

• Storybookについてさらに詳しく知りたいですか？ Storybook Connectorの全機能を見る