Repolode
投稿する
Jpisnice

Jpisnice/shadcn-ui-mcp-server

React、Svelte、Vue、React Nativeのshadcn/uiコンポーネントのソース、デモ、ブロック、インストール情報をAIアシスタントに提供するMCPサーバー。

GitHub で見る
スター
3,065
フォーク
315
未解決の Issue
7
最終コミット
19 日前

これは何？

このプロジェクトは、AIコーディングアシスタントがshadcn/uiのコンポーネントを検索できるModel Context Protocol（MCP）サーバーです。TypeScriptのソースコードやデモ、ダッシュボードやフォームなどのブロックに加え、依存関係や設定に関するメタデータも参照できます。コンポーネントAPIを推測するのではなく、コードを生成する前に実際の実装を確認できます。

React版の本家、shadcn-svelte、shadcn-vue、React Native向けのreact-native-reusablesという4つのshadcn系ライブラリに対応しています。フレームワークはコマンドラインフラグで選択でき、Reactでは基盤となるプリミティブライブラリをRadix UIとBase UIの間で切り替えられます。サーバーはClaude Desktop、Claude Code、Cursorなどのローカルクライアント向けにstdioで動作するほか、ステートレスな/mcpエンドポイントでStreamable HTTPを利用でき、Docker Composeにも対応しています。GitHub APIへのアクセスはキャッシュされ、Personal Access Tokenを使ってレート制限を緩和できます。

主な機能

  • 01React、Svelte、Vue、React Native向けのコンポーネントソースコード、デモ、ブロックを返します。
  • 02各コンポーネントの依存関係、説明、設定に関するメタデータを提供します。
  • 03リポジトリのディレクトリ構造を閲覧できます。
  • 04stdio、Streamable HTTP、デュアルトランスポートモードに対応しています。
  • 05プロンプトとリソーステンプレート向けの引数補完機能を備えています。
  • 06DockerとDocker Composeの設定が含まれています。

ユースケース

  • Claude CodeやCursorに、実際のコンポーネントAPIに沿ったshadcn/uiベースのインターフェースを生成させる。
  • React、Svelte、Vue、React Nativeで同じコンポーネントがどのように実装されているかを比較する。
  • チームの開発者向けに、HTTP経由で共有MCPエンドポイントを運用する。

クイックスタート

  1. 1

    npx でサーバーを実行する（トークンなしの場合、1時間あたり60リクエスト）

    npx @jpisnice/shadcn-ui-mcp-server
  2. 2

    GitHub token を指定して実行し、より高いレート制限を利用する（1時間あたり5,000リクエスト）

    npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
  3. 3

    Svelte、Vue、React Native など、別のフレームワークに切り替える

    npx @jpisnice/shadcn-ui-mcp-server --framework svelte

使う前に知っておきたいこと

  • GitHub token がない場合、GitHub API のレート制限は低く、1時間あたり60リクエストです。
  • UI ライブラリの選択肢である Base UI は、React のみで利用できます。

収録されている特集

MCP サーバー

トピック

#mcp#ai#shadcn-ui#react#vue#svelte#react-native#typescript#expo#modelcontextprotocol

よくある質問

shadcn-ui-mcp-server とは？
React、Svelte、Vue、React Nativeのshadcn/uiコンポーネントのソース、デモ、ブロック、インストール情報をAIアシスタントに提供するMCPサーバー。 このプロジェクトは、AIコーディングアシスタントがshadcn/uiのコンポーネントを検索できるModel Context Protocol（MCP）サーバーです。TypeScriptのソースコードやデモ、ダッシュボードやフォームなどのブロックに加え、依存関係や設定に関するメタデータも参照できます。コンポーネントAPIを推測するのではなく、コードを生成する前に実際の実装を確認できます。
shadcn-ui-mcp-server は無料で使えますか？ライセンスは？
shadcn-ui-mcp-server は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
shadcn-ui-mcp-server は今もメンテナンスされていますか？
活発にメンテナンス中。shadcn-ui-mcp-server の最終コミットは 2026年10月3日 です。
shadcn-ui-mcp-server は何に使えますか？
Claude CodeやCursorに、実際のコンポーネントAPIに沿ったshadcn/uiベースのインターフェースを生成させる。 React、Svelte、Vue、React Nativeで同じコンポーネントがどのように実装されているかを比較する。 チームの開発者向けに、HTTP経由で共有MCPエンドポイントを運用する。
shadcn-ui-mcp-server のインストール方法は？
npx でサーバーを実行する（トークンなしの場合、1時間あたり60リクエスト）: npx @jpisnice/shadcn-ui-mcp-server GitHub token を指定して実行し、より高いレート制限を利用する（1時間あたり5,000リクエスト）: npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here Svelte、Vue、React Native など、別のフレームワークに切り替える: npx @jpisnice/shadcn-ui-mcp-server --framework svelte
shadcn-ui-mcp-server はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/Jpisnice/shadcn-ui-mcp-server

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト