Petal ComponentsでPhoenixの画面部品を揃える

Phoenix LiveView向けshadcnスタイルのコンポーネントセット

Petal Componentsは、Phoenix LiveViewアプリケーション向けのHEExコンポーネント（ボタン、フォーム、モーダル、テーブル、カードなど）を提供するElixirのHexパッケージです。コンポーネントはTailwind v4で構築され、ライブビューとデッドビューの両方で動作します。READMEでは、この設計をReact向けのshadcnと同じアイデア、つまり構成可能なプリミティブであり、モノリシックなテーマシステムを持たないものと説明しています。また、mcp.petal.buildにあるホスト型MCPサーバーが各コンポーネントのスキーマをAIコーディングツールに公開し、Claude Code、Cursor、Codex、Windsurfなどのツールが正しい属性でコンポーネントを呼び出せるようにします。トレーニングデータから生のTailwindマークアップを生成する代わりに。READMEにはパッケージに含まれるコンポーネントの数は明記されておらず、カタログセクションで30以上と述べるだけです。

MCPサーバーによるインストールと手動インストール

推奨されるインストール手順は2段階です。まず、`claude mcp add petal --transport http https://mcp.petal.build/mcp`コマンドでMCPサーバーを一度追加します。次に、任意のPhoenixプロジェクトでAIにpetal_componentsのインストールを指示します。エージェントはMCPのget_install_instructionsを呼び出し、mix.exsへの変更を適用し、mix deps.getを実行し、assets/css/app.cssにパッチを当て、webモジュールにuse PetalComponentsを追加します。READMEでは、これはumbrellaアプリと標準的なPhoenixプロジェクトで動作すると述べられています。手動の方法では、mix.exsに{:petal_components, "~> 4.0"}を追加し、チャットのmarkdownコンポーネント用にオプションで{:mdex, "~> 0.12"}を追加し、app.cssでTailwindとデフォルトCSSをインポートし、webモジュールにuse PetalComponentsを追加し、app.jsでバンドルされたJSフックをパスワード、コピー可能、クリア可能な入力およびチャットコンポーネント用に登録します。READMEは、ライブラリの残りはCSSとLiveView.JSのみであると述べています。その後、mix deps.getとmix compileを実行します。

MCPサーバーがAIツールのために機能する仕組み

mcp.petal.buildにある関連MCPサーバーは、コンポーネントスキーマの標準的な情報源です。READMEはAIツールに対して、詳細が必要な場合はlist_componentsを呼び出し、次にget_componentを呼び出すよう指示しています。rules.mdファイルがあり、コンポーネント命名マップ、form-in-cardやmodal-with-formなどの一般的なパターン、手書きのHEExを書く前に既存のpetal_componentsタグを常に使用するというルールをカバーする標準的な指示セットとして機能します。READMEには、MCPサーバーが認証を必要とするか、レート制限があるかは記載されていません。また、スキーマ形式自体も文書化されていません。ライブドキュメントとrules.mdが最も近い参照です。Cursor、Windsurf、Continue、Codex、Clineについては、READMEはhttps://petal.build/petal-componentsにあるツールごとのインストールコマンドを指しています。

コンポーネントカタログと例

READMEには、レイアウトとコンテンツ（container、card、見出し、accordion、tabs、stepper、skeleton）、フォーム（field、text_input、select、checkbox、radio_group、switch、textarea、date_input、file_input）、アクション（button、button_group、dropdown、menu、user_dropdown_menu）、フィードバック（alert、modal、slide_over、popover、tooltip、progress、spinner、rating）、データ表示（table、pagination、breadcrumbs、badge、avatar、marquee、icon、link）など、30以上のコンポーネントがカテゴリ別にリストされています。MCPサーバーはライブインベントリとして説明されており、現在のセットについてはlist_componentsを呼び出します。READMEにはいくつかのコード例が含まれています：カード内のフォーム、フォーム付きモーダル、行アクション付きテーブル、ローディングボタン。テーブルの例では、:colスロットを使用してsizeとvariantを持つボタンをレンダリングします。ビジュアルグリッドはpetal.build/componentsにあり、ライブプレイグラウンドはpetal-components-demo.fly.devにあります。

shadcnとの関係とより広いエコシステム

READMEは、このプロジェクトをReactコンポーネントライブラリのshadcnと直接比較しています。共有される哲学は、構成可能なプリミティブとモノリシックなテーマシステムの不在です。違いは、ランタイム（JSXではなくHEEx）と配布方法（ファイルをコピーするCLIではなくHexパッケージ）です。petal_proはpetal_components上に構築された有料のSaaSボイラープレートであり、READMEはそれを実際の構成のための最良のリファレンスと呼んでいます。関連プロジェクトには、petal-components-mcp（MCPサーバーのソース）、petal_boilerplate（コンポーネントが配線された新しいPhoenixインストール）、公式Figmaキット、65以上のスニペットを含むVSCode拡張機能が含まれます。謝辞には、phoenix_playground、PhoenixとLiveView、Tailwind CSS、Apache ECharts（chartコンポーネント用）、Heroicons（iconコンポーネント用）がリストされています。

ローカル開発、テスト、ライセンス

このリポジトリは、アンブレラなしでスタンドアロンの開発サーバーをサポートしています。クローン後、mix deps.get、mix tailwind.install、次にiex -S mix run dev.exsを実行すると、localhost:4000でプレイグラウンドが起動し、すべてのコンポーネントがレンダリングされ、lib/の編集でライブリロードされます。テストはmix testで実行します。貢献については、READMEはコンポーネントを提案するための公開ロードマップを指しており、プルリクエストを受け付けています。また、petal_componentsをサブモジュールとして含むpetal_developmentという別のPhoenixアンブレラアプリがあり、統合テストに使用できます。ライセンスはMITで、著作権はMatthew Plattsが保持しています。ライセンステキストは、ソフトウェアのコピーの使用、コピー、変更、マージ、公開、配布、再ライセンス、販売の権利を許可し、ソフトウェアは「現状のまま」提供され、いかなる種類の保証もないと述べていますが、セキュリティ体制やサポートについては何も述べていません。

編集部の結論

このライブラリはMITライセンスで、READMEには公開ロードマップ、デモプレイグラウンド、ボイラープレートやFigmaキットなどの関連プロジェクトへのリンクがあります。現在のコンポーネント一覧を確認する最も確実な方法は、MCPサーバーのlist_componentsを呼び出すことです。READMEでは一部のハイライトしか紹介されていないためです。 Petal ComponentsのHEEx部品群、MCPによるスキーマ参照、手動導入、サンプル、ローカル開発をPhoenix開発者向けに整理します。 採用前にはREADMEに示された導入コマンドを隔離した検証環境で実行し、対象バージョン、生成ログ、依存関係、権限の変化を記録してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes