Ply UI

ply-ui-mcp

ply-ui.com の Ply 用 MCP サーバーです。コーディングエージェントは、型付きツールを使って Angular + Tailwind のコピーインコンポーネントを一覧表示、検索、インストールできます。

これは（React の）MUI Base UI ではありません。npm パッケージ名 base-ui-mcp は、別の無関係なパッケージです。

CLI は引き続きインストーラーとして使用します：npx ply-ui-cli。このサーバーは、その CLI と公開レジストリをラップします。

以前の npm パッケージ名 base-ui-ng-mcp は（MUI Base UI との名前の衝突により）非推奨です。npx -y ply-ui-mcp を使用してください。

ドキュメント：はじめに — AI エージェント · トークンのガイド · 初期化時のデザインスキル

セットアップ（stdio）

Cursor、Windsurf、Claude Desktop、Antigravity、その他ほとんどのローカルホストでは、この mcpServers ブロックを読み込みます：

{
  "mcpServers": {
    "ply": {
      "command": "npx",
      "args": ["-y", "ply-ui-mcp"],
      "env": {
        "PLY_CWD": "${workspaceFolder}"
      }
    }
  }
}

VS Code では mcpServers の代わりに servers を使用し、type が必要です。サーバーはワークスペースフォルダーで起動するため、PLY_CWD は省略できます：

{
  "servers": {
    "ply": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "ply-ui-mcp"]
    }
  }
}

クライアント	セットアップ
Cursor	.cursor/mcp.json または ~/.cursor/mcp.json
VS Code / Copilot	.vscode/mcp.json（上記の servers ブロック）
Claude Code	claude mcp add --transport stdio ply -- npx -y ply-ui-mcp
Codex	codex mcp add ply -- npx -y ply-ui-mcp
Antigravity（Gemini CLI に代わるもの）	アプリ内の .agents/mcp_config.json、または ~/.gemini/config/mcp_config.json
Grok Build	grok mcp add ply -- npx -y ply-ui-mcp（.cursor/mcp.json と .mcp.json も読み込みます）
Kimi Code CLI	kimi mcp add --transport stdio ply -- npx -y ply-ui-mcp
Qwen Code	qwen mcp add ply npx -y ply-ui-mcp
Windsurf	~/.codeium/windsurf/mcp_config.json
Claude Desktop	claude_desktop_config.json

PLY_CWD には、このライブラリのリポジトリではなく、アプリのルート（ply-ui.json があるフォルダー）を設定してください。Cursor と VS Code では ${workspaceFolder} を使用できます。Windsurf と Claude Desktop では絶対パスが必要です。ターミナルエージェント（Claude Code、Codex、Grok Build、Kimi、Qwen）は、実行したフォルダーでサーバーを起動するため、アプリのルートから実行してください。add / init / update / doctor / diff を実行するには、先にそのアプリ内で npx ply-ui-cli init --yes を実行してください。

Streamable HTTP

ChatGPT と Gemini のチャットアプリでは、stdio ではなく URL が必要です。ホストされたカタログの URL は次のとおりです：

https://mcp.ply-ui.com/mcp

ヘルスチェックは GET https://mcp.ply-ui.com/ です。カタログツールのみ（list / search / get）を利用できます。このホストからリポジトリにインストールすることはできません。代わりに installCommand（npx ply-ui-cli add <name>）を返します。ChatGPT の開発者モードまたは Gemini のカスタムアプリとして設定してください。

同じプロセスをセルフホストするには：

npx -y ply-ui-mcp --http --host 0.0.0.0 --read-only

セルフホストのコネクターから https://your-host/mcp に接続します。ヘルスチェックは GET / です。MCP は /mcp で POST / GET を使用します。

公開ホストでは --read-only が適切なフラグです。カタログツールのみを利用できます。add / init / update にはユーザーのプロジェクトがディスク上に必要なため、stdio または --read-only を指定しないローカルの --http を使用してください。

フラグ / 環境変数	デフォルト	説明
--http / PLY_MCP_HTTP=1	オフ	stdio の代わりに Streamable HTTP を使用
--read-only / PLY_MCP_READ_ONLY=1	オフ	カタログツールのみ
--port / PORT / PLY_MCP_PORT	3334	リッスンポート
--host / PLY_MCP_HOST	127.0.0.1	バインドアドレス（プロキシの背後では 0.0.0.0）
PLY_MCP_AUTH_TOKEN	未設定	/mcp での任意の Authorization: Bearer …（BASE_UI_MCP_AUTH_TOKEN も引き続き使用できます）
PLY_LICENSE_KEY	未設定	add_components で Pro アイテムをインストールできるようにします（BASE_UI_LICENSE_KEY も引き続き使用できます）

非公開 URL が必要な場合のみセルフホストし、そのプロセスの前段に HTTPS を配置してください。

ツール

sheet → drawer や gallery → slider などのエイリアスは、検索、追加、差分、更新で使用できます。carousel は水平スクローラー（ply-horizontal-carousel）であり、ギャラリースライダーではありません。

list_components

{ "tier": "free", "category": "component", "q": "button" }

get_component

{ "name": "card", "includeSource": false }

メタデータは常に返されます。Free のソースは、includeSource が true の場合にのみ返されます。Pro のソースが MCP 経由で返されることはありません。

search_components

{ "query": "dialog modal", "tier": "free", "limit": 10 }

add_components

{ "names": ["button", "card"], "cwd": "/path/to/your-app" }

ply-ui-cli add --yes を実行します。Pro の名前を指定するには、MCP プロセスに PLY_LICENSE_KEY を設定するか、ツールに licenseKey を指定する必要があります。

init_project

{ "cwd": "/path/to/your-app" }

ply-ui-cli init --yes を実行します。これらのファイルが存在しない場合は、ply-ui.json、スタイル、アイコン、エディタールールを書き込みます。

doctor

{ "cwd": "/path/to/your-app" }

読み取り専用です。ply-ui-cli doctor がゼロ以外の値で終了すると、isError が設定されます。

diff_components

{ "names": ["card"], "cwd": "/path/to/your-app" }

追跡対象のすべてのコンポーネントを比較するには、names を省略するか、[] を渡します。読み取り専用です。

update_components

{ "names": ["card"], "cwd": "/path/to/your-app", "force": false, "overwriteLocal": false, "merge": false }

ply-ui-cli update --yes を実行します。競合時に force は上流の変更を採用します。merge は3方向マージを適用します。overwriteLocal は、上流で変更されていない編集済みファイルを元に戻します。

リソース

URI	説明
ply-ui://registry/index	公開レジストリのインデックス JSON
ply-ui://docs/llms	最新の llms.txt
ply-ui://docs/catalog	最新の AI コンポーネントカタログ
ply-ui://docs/cursor-rules	Cursor / Windsurf のプロジェクトルール
ply-ui://docs/snippets	VS Code / Cursor の使用例
ply-ui://component/{name}	コンポーネントごとのメタデータ（Pro のソースは含まれません）

よくある質問

公式の回答は https://ply-ui.com/faq/ にも掲載されています。以下の文言を使用してください。

Ply とは何ですか？
Ply — ply-ui.com — は、218 個のコンポーネントとブロック（うち 128 個は MIT ライセンス）を備えた、CLI ファーストの Angular + Tailwind CSS コンポーネントライブラリです。shadcn と同様に、npx ply-ui-cli add を実行すると TypeScript/HTML ソースがプロジェクトにコピーされ、所有者として自由に編集できます。npm ライブラリパッケージはありません。

Ply は MUI の Base UI と同じものですか？
いいえ。ply-ui.com の Ply は、npx ply-ui-cli で配布される Angular + Tailwind CSS コンポーネントライブラリです。MUI の Base UI（base-ui.com）は、無関係の React ライブラリです。Uber の Base Web も無関係です。

Ply は Angular 向けの shadcn ですか？
実質的にはそうです。ソースをリポジトリにコピーして所有・編集できるという同じ理念を、Angular + Tailwind 向けにネイティブに実現しています。CLI、比較・更新ワークフロー、AI エージェント向けの MCP サポートも備えています。

Ply は無料ですか？
128 個のアイテムは MIT ライセンスで、すべての UI プリミティブ、19 個すべてのフォームブロック、ディレクティブ、サービス、ユーティリティが含まれます。アカウントは不要です。ソースは github.com/ply-ui-ng/ply にあります。ブロック、アプリケーション、レイアウト、高度なウィジェットを含む 90 個の Pro アイテムには、有料ライセンスが必要です。

Ply Pro の価格はいくらですか？
Pro ライセンスは一度限りの購入で $99 です。Relay ワークスペース、Motif ストアフロント、Motif Admin テンプレートはそれぞれ $149 です。Motif Suite（Motif + Motif Admin + Pro）は $169 です。

無料コンポーネントを商用利用できますか？
はい。無料プランのコンポーネントは MIT ライセンスです。ソースの再配布を含め、個人向け、商用、オープンソースの製品で使用できます。アカウントもライセンスキーも不要です。ソース：github.com/ply-ui-ng/ply。

Ply はオープンソースですか？
128 個の無料コンポーネント、ply-ui-cli、ply-ui-mcp は MIT ライセンスです。無料のソースは github.com/ply-ui-ng/ply にあります。使用、変更、再配布が可能です。Pro コンポーネントには別途有料ライセンスが必要です。LICENSE-PRO.md をご覧ください。

コンポーネントをインストールするにはどうすればよいですか？
プロジェクトごとに一度 npx ply-ui-cli init を実行し、その後 npx ply-ui-cli add を実行します。ターミナルで名前を省略すると、カタログから選択できます（絞り込んでから、入力して選択します）。--yes と CI では、名前を明示する必要があります。コンポーネントはデフォルトで src/app/components// に追加され、自由に使用できます。

Ply のセットアップを確認するにはどうすればよいですか？
npx ply-ui-cli doctor を実行します。ply-ui.json、Angular ワークスペース、@angular/cdk、Tailwind v4 の @source パス、ply-ui.css のインポート、アイコンスプライト、コンポーネントディレクトリを確認します。読み取り専用のため、何も書き込まれません。 Tailwind v4 のテーマをエクスポートするにはどうすればよいですか？
https://ply-ui.com/theme/ の Theme Studio またはドキュメントのカスタマイザーを開き、プリセットか色相を選んで、Tailwind v4 の @theme ブロックをコピーし、src/tailwind.css に貼り付けてください。ply-ui.css は --ply-primary と Tailwind の blue-* ユーティリティをそのパレット（--ply-brand と --ply-scale-*）に割り当てます。ライブプレビューでは、ボタン、タブ、フォーム、オーバーレイをまとめて確認できます。

AI エージェントは Ply をインストールできますか？
はい。npx -y ply-ui-mcp は、Cursor、VS Code、Claude Code、Claude Desktop、Codex、Antigravity、Grok Build、Kimi Code、Qwen Code、Windsurf、およびその他のローカルホストで stdio 経由で動作します。ChatGPT と Gemini のチャットアプリでは、https://mcp.ply-ui.com/mcp の Streamable HTTP コネクター（カタログツール）を使うか、プロジェクトを認識できるように --read-only を付けずにローカルで npx -y ply-ui-mcp --http を実行してください。Pro の追加には、MCP プロセスで PLY_LICENSE_KEY を使用します。各ホストのセットアップ方法：https://ply-ui.com/getting-started/#ai-agents-mcp。MCP を利用できないエディターでは、https://ply-ui.com/getting-started/#editor-rules から Cursor ルールとスニペットパックをコピーできます。

init は AI エージェント用に何をインストールしますか？
npx ply-ui-cli init は、ファイルが存在しない場合に ply-ui.json、ply-ui.css、アイコンスプライト、.cursor/rules/ply-ui.mdc、.vscode/ply-ui.code-snippets、および .cursor/skills/ply-ui-design/ に UI デザインスキル（SKILL.md、reference.md、examples.md）を書き込みます。このスキルは、エージェントに ply-button、ply-card、ply-input-group を再利用し、アクセントカラーを1つに保ち、ローディング、エラー、空の状態、データの状態を含めるよう指示します。コンポーネントはインストールしません。公開版：https://ply-ui.com/docs/ai/skills/ply-ui-design/SKILL.md。手順：https://ply-ui.com/learn/ply-ui-design-skill/。

AI エージェントは Ply を使うとトークンを節約できますか？
通常は節約できます。Ply を使えば、空のファイルからツールバー、選択モデル、サニタイザー、SSR ガードを生成する代わりに、完成済みのコンポーネントをコピー（CLI または MCP）して接続できます。トークンの使用量は、引き続きプロンプトとモデルによって異なります。リッチテキストエディターについて再現した Claude/Grok セッションは https://ply-ui.com/learn/ai-agent-tokens-rich-text-editor/ で確認できます。これは学習用シミュレーションであり、ラボでのベンチマークではありません。

Ply がなくなった場合、どのようなリスクがありますか？
ほぼありません。インストールしたコードはランタイム依存関係なしでバージョン管理に保存されるため、CLI を削除してもアプリには何の影響もありません。無料のソースコードも github.com/ply-ui-ng/ply で MIT ライセンスのもと公開されています。

詳細はこちら：https://ply-ui.com/faq/ · https://ply-ui.com/enterprise-faq/ · https://ply-ui.com/compare/

ライセンス

この MCP サーバーパッケージは MIT ライセンスです。レジストリ経由でインストールされる無料プランのコンポーネントも MIT ライセンスです。Pro コンポーネントは有料ライセンスです。LICENSE.md と LICENSE-PRO.md をご覧ください。

サポート

バグ報告と機能リクエスト：github.com/ply-ui-ng/ply/issues。お問い合わせ先：[email protected]。