UICapsule について
UICapsule は、独特のモーションを備えた React コンポーネントを厳選したコレクションで、shadcn CLI からインストールします。モーション表現のあるコンポーネントを求めるフロントエンド開発者向けで、検索とインストールを MCP クライアントに提供します。
主な機能
- 01用途による コンポーネント検索
- 02shadcn CLI によるインストール
- 03独特のモーションを持つ React コンポーネント
- 04MCP クライアント向け Streamable HTTP エンドポイント
活用シーン
- 01コーディングエージェントによる用途ベースのコンポーネント検索と導入
- 02UI へのモーション表現の追加
MCP 対応
UICapsule はリモート MCP サーバーとして動作し、クライアントは単一の HTTP URL からコンポーネントの検索とインストールを行えます。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
エンドポイント
https://www.uicapsule.com/mcpインストールコマンドをコピー
Claude CodeTerminal
claude mcp add --transport http com-uicapsule-components https://www.uicapsule.com/mcpCursor.cursor/mcp.json
{"mcpServers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}Cursor で開くVS Code.vscode/mcp.json
{"servers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}VS Code で開くClaude Desktopclaude_desktop_config.json
{"mcpServers":{"com-uicapsule-components":{"type":"http","url":"https://www.uicapsule.com/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"com-uicapsule-components":{"serverUrl":"https://www.uicapsule.com/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
2| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| tags | array | いいえ | これらすべてのタグが付いたコンポーネントのみ |
| limit | integer | いいえ | |
| query | string | いいえ | 自由入力テキスト。例：「rotary dial」または「ios volume slider」 |
詳細
UICapsule
喜びを呼び起こすコンポーネントの厳選コレクション
コンポーネントをインストールする
npx shadcn@latest add @uicapsule/<slug>
スラッグは www.uicapsule.com で確認できます。
MCP
エージェントに、コンポーネントの機能に基づいて検索とインストールを行わせることができます:
claude mcp add --transport http uicapsule https://www.uicapsule.com/mcp
Streamable HTTP に対応しているクライアントであれば、同じ URL で動作します。
MCP Registry にも com.uicapsule/components として掲載されています。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。