WunderUI

WunderUI MCP

AI コーディングエージェントに WunderUI のデザインシステムを提供する MCP サーバーです。デザイントークン、実際の prop シグネチャを含むコンポーネント一覧、ページテンプレート、スタータースニペットを利用できます。エージェントは生の div からデータグリッドを作り直すのではなく、ライブラリを 使って 構築できます。

claude mcp add wunderui -- npx -y wunderui-mcp

Claude Code、Cursor、Windsurf、Cline、Codex、VS Code、および stdio 経由で MCP に対応するその他すべてのクライアントで動作します。キーもアカウントも不要です。

ツール

ツール	エージェントが取得できる内容
list_components	カテゴリー、プラン（Free または Pro）、またはフリーテキストで絞り込み可能な一覧
get_component	エクスポート、TypeScript の prop シグネチャ、インポート行、サンプル、ドキュメント URL
get_tokens	ライトおよびダークのトークンを JSON、CSS ブロック、または Tailwind @theme マッピングとして取得
get_design_md	DESIGN.md 全体、または特定のセクション（rules、donts、tasks、tokens、inventory、reference、templates、starters）
list_templates	ページ全体のテンプレートと、それぞれの構成要素
get_starter	コピーして使える TSX：アプリシェル、ダッシュボード、データグリッド、AI チャット、テーマ設定
get_library_info	パッケージ名、バージョン、インストールコマンド、スタック、件数、データソース
get_instructions	CLAUDE.md / AGENTS.md 向けの、常時適用される簡潔なルール（コンポーネント、トークン、モーション、コピー）
list_skills	WunderUI のエージェントスキル。Free と Pro
get_skill	1 つのスキルの手順（SKILL.md）。インストールせずにエージェントが従えるようにします。Pro スキルには WUNDERUI_LICENSE_KEY が必要です
get_block_source	UI ブロックと共有ヘルパーの React ソース。WUNDERUI_LICENSE_KEY に Pro キーが必要です

各コンポーネントにはプランが設定されています。Free プランでは、エージェントは free とマークされたコンポーネントのみを使用してください。それ以外のコンポーネントには WunderUI Core または Pro が必要です。

リソース

MCP リソースに対応するクライアントは、ツールを呼び出さずにデザインコンテキストを添付できます。読み取り専用で、上記のツールと同じデータを提供します。

リソース URI	含まれる内容
wunderui://design-md	DESIGN.md 全体（Markdown）
wunderui://design-json	機械可読なデザインデータ（トークン、一覧、テンプレート、スキル）
wunderui://tokens	ライトおよびダークのトークン値
wunderui://instructions	CLAUDE.md / AGENTS.md 向けの簡潔なルール
wunderui://components	コンポーネント一覧：名前、カテゴリー、プラン、説明
wunderui://components/{slug}	1 つのコンポーネントの詳細（サーバーが一覧表示する、コンポーネントごとのリソース）

リソースに対応していないクライアント向けに、ツールも引き続き利用できます。

インストール

Claude Code

claude mcp add wunderui -- npx -y wunderui-mcp

Cursor：.cursor/mcp.json

{
  "mcpServers": {
    "wunderui": { "command": "npx", "args": ["-y", "wunderui-mcp"] }
  }
}

Windsurf、Cline、Codex、VS Code：各エディターの MCP 設定で、同じ形式を使用します。

WunderUI 自体のインストール

サーバーはライブラリについて説明するものであり、ライブラリ自体は同梱していません。npm の @wunderui/react は WunderUI Free（無料コンポーネントのみ）です。Core および Pro のライセンス所有者は、wunderui-core のダウンロードからフルライブラリをインストールします（wunderui-setup エージェントスキルが代わりに実行します）。サーバーはエージェントにその手順を正確に伝えます。

データの取得元

data/design.json と data/DESIGN.md は、各リリースで WunderUI のソースから生成されます。スタイルシートからトークンを、ビルド済みの型定義から props を、ドキュメントから名前と説明を取得します。

サーバーは同梱されたコピーを使って起動し、すぐに応答します。バックグラウンドで wunderui.com から最新の design.json と DESIGN.md を取得し、同等以上に新しい場合はそちらに切り替えるため、パッケージを更新しなくてもエージェントは新しいコンポーネントを利用できます。get_library_info は使用中のデータソースを報告します。

変数	効果
WUNDERUI_OFFLINE=1	ネットワークに接続せず、同梱されたコピーを使用します
WUNDERUI_SITE=<url>	別のオリジンからライブデータを取得します
WUNDERUI_LICENSE_KEY=<key>	WunderUI Pro キーです。Pro スキル（get_skill）とブロックのソース（get_block_source）を利用できます。wunderui.com にのみ送信されます

MCP を使わない場合

MCP に対応していないエージェントやエディター向けに、同じデータを静的ファイルとして提供しています。

• https://wunderui.com/DESIGN.md：プロンプトの先頭に貼り付けます
• https://wunderui.com/llms.txt：llms.txt の慣例に準拠しています
• https://wunderui.com/design.json：同じ構造化インデックスです

検証

npm install
npm run smoke

実際の MCP クライアントでサーバーを起動し、すべてのツールを 1 回ずつ呼び出します。

ライセンス

サーバーコードは MIT ライセンスです。説明対象の WunderUI コンポーネントのライセンスはプランごとに異なります。wunderui.com/pricing をご覧ください。