Shadcn Ui MCP Unofficial

🚀 Shadcn UI MCP サーバー

TypeScript で実装された Model Context Protocol (MCP) サーバーです。このサーバーは、AI アシスタントが shadcn/ui コンポーネントにアクセスし操作するのを支援します。AI モデル（Claude など）と shadcn/ui の間の橋渡し役となり、アシスタントがコンポーネントのソースコード、デモコード、インストールガイドを取得できるようにします。

🚀 クイックスタート

この MCP サーバーは、AI アシスタントが shadcn/ui コンポーネントを操作するためのツールとリソースを提供します。以下の手順でサーバーを起動し、AI アシスタントと連携できます。

✨ 主な機能

• shadcn/ui コンポーネントのソースコードを取得する機能
• コンポーネントのデモコードと使用例を取得する機能
• コンポーネントのインストールガイドを取得する機能

📦 インストール

依存関係のインストール

まず、プロジェクトに必要な依存関係をインストールします。

npm install

サーバーの起動

MCP サーバーを起動します。

npm run start

起動後、コンソールに以下のような出力が表示されます。

MCP サーバーが起動し、ポート 3001 を監視しています
SSE エンドポイントは http://localhost:3001/sse でアクセスできます
メッセージエンドポイントは http://localhost:3001/messages でアクセスできます

VS Code への統合

VS Code でこのサーバーを使用するには、以下の手順で設定します。

1. VS Code の settings.json ファイルを開きます。
2. MCP サーバーの設定を追加します。

{
  "mcp.servers": [
    {
      "id": "shadcnui-server",
      "url": "http://localhost:3001"
    }
  ]
}

💻 使用例

基本的な使用法

コンポーネントのソースコードを取得する

get_component ツールを呼び出します。

const result = await mcp.execute({
  tool_id: "get_component",
  params: {
    component_name: "Button"
  }
});

console.log(result);
// 出力: 
// import { Button } from 'shadcn-ui'
// export default function Button({ class, children }) {
//   return <button className={class}>{children}</button>
// }

デモコードを取得する

get_demo ツールを呼び出します。

const result = await mcp.execute({
  tool_id: "get_demo",
  params: {
    component_name: "Button"
  }
});

console.log(result);
// 出力: 
// import Button from './Button'
// export default function Demo() {
//   return (
//     <div className="container mx-auto p-4">
//       <Button>これは Button コンポーネントです</Button>
//     </div>
//   )
// }

📚 ドキュメント

プロジェクト構造

ディレクトリ構造

shadcnui-mcp-server/
├── src/
│   ├── tools.ts          # 利用可能なツールを定義
│   ├── resources.ts      # 利用可能なリソースを定義
│   └── resource-templates.ts    # リソーステンプレートを定義
├── package.json         # プロジェクトの依存関係管理
└── README.md            # プロジェクトのドキュメント

ツールの定義

tools.ts ファイルでは、様々なツールを定義できます。

export const tools = [
  {
    id: "get_component",
    name: "コンポーネントのソースコードを取得",
    description: "指定された shadcn/ui コンポーネントのソースコードを返します",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "コンポーネント名" }
      }
    }
  },
  {
    id: "get_demo",
    name: "コンポーネントのデモコードを取得",
    description: "指定された shadcn/ui コンポーネントのデモコードを返します",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "コンポーネント名" }
      }
    }
  },
  {
    id: "get_install",
    name: "コンポーネントのインストールガイドを取得",
    description: "指定された shadcn/ui コンポーネントのインストールガイドを返します",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "コンポーネント名" }
      }
    }
  }
];

リソースの定義

resources.ts ファイルでは、様々なリソースを定義できます。

export const resources = [
  {
    id: "component_code",
    name: "コンポーネントのソースコード",
    description: "shadcn/ui コンポーネントのソースコード",
    content: {
      type: "string"
    }
  },
  {
    id: "demo_code",
    name: "デモコード",
    description: "shadcn/ui コンポーネントのデモコード",
    content: {
      type: "string"
    }
  },
  {
    id: "install_guide",
    name: "インストールガイド",
    description: "shadcn/ui コンポーネントのインストールガイド",
    content: {
      type: "string"
    }
  }
];

リソーステンプレート

resource-templates.ts ファイルでは、リソーステンプレートを定義できます。

export const resourceTemplates = [
  {
    id: "component_code_template",
    name: "コンポーネントのソースコードテンプレート",
    description: "shadcn/ui コンポーネントのソースコードを生成するためのテンプレート",
    template: `
      import { type Component } from 'shadcn-ui'

      export const {{name}}: Component = ({ class, children }) => {
        return (
          <div className={{class}}>
            {children}
          </div>
        )
      }
    `
  },
  {
    id: "demo_code_template",
    name: "デモコードテンプレート",
    description: "shadcn/ui コンポーネントのデモコードを生成するためのテンプレート",
    template: `
      import {{name}} from './{{name}}'

      export default function Demo() {
        return (
          <div className="container mx-auto p-4">
            <{{name}}>これは {{name}} コンポーネントです</{{name}}>
          </div>
        )
      }
    `
  },
  {
    id: "install_guide_template",
    name: "インストールガイドテンプレート",
    description: "shadcn/ui コンポーネントのインストールガイドを生成するためのテンプレート",
    template: `
      {{name}} コンポーネントを使用するには、以下の手順に従ってください。

      1. 依存関係をインストールする：
         npm install shadcn-ui-components

      2. コンポーネントをインポートする：
         import {{name}} from 'shadcn-ui'

      3. コンポーネント内で使用する：
         <{{name}}>あなたのコンテンツ</{{name}}>
    `
  }
];