mcpField
F
Flyonui Mcp

Flyonui Mcp

ローカル
github.com/themeselection開発ツール3250 週間前に更新
リポジトリ

Flyonui Mcp について

FlyonUI MCP Server は、Tailwind ベースの AI ビルダーで、UI ブロック、コンポーネント、ランディングページの作成、インスピレーション生成、リファクタリングを行います。IDE 内で画面を構築したいフロントエンド開発者向けで、React、Next.js、Vue などのフレームワークに対応しています。

主な機能

  1. 01FlyonUI ブロックをもとに UI を生成
  2. 02/cui、/iui、/rui の 3 つのコマンド
  3. 03VS Code、Cursor、Windsurf などの IDE に統合
  4. 04React、Next.js、Vue、Svelte に対応

活用シーン

  1. 01既存の FlyonUI ブロックからヒーローセクションをカスタマイズ
  2. 02説明文をもとに新しい機能紹介セクションを生成
  3. 03既存ブロックのテーマやレイアウトを変更

MCP 対応

本プロジェクトは MCP サーバーであり、MCP 対応の IDE で /cui、/iui、/rui コマンドを通じて UI の生成と編集機能を MCP クライアントに提供します。

#mcp#ai-builder#flyonui#tailwind-ai

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "flyonui": {
      "command": "npx",
      "args": [
        "-y",
        "flyonui-mcp"
      ]
    }
  }
}
起動コマンドnpx -y flyonui-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmflyonui-mcp

ツール

6

掲載時のツール一覧 · 3 週間前に更新

このツールにパラメーターはありません。

詳細

FlyonUI MCP サーバー

最新の本番環境対応 UI ブロック、コンポーネント、ランディングページを数分で作成できます。お気に入りの IDE とシームレスに連携し、React、Next.js、Nuxt、Vue、Svelte など、広く使われているフレームワークに対応しています。

🚀 FlyonUI MCP サーバーとは？

FlyonUI MCP サーバーは、FlyonUI ブロックを使用して、魅力的な本番環境対応のブロック、UI コンポーネント、ページ全体を作成、アイデア出し、リファクタリングできる Tailwind AI ビルダーです。お気に入りの IDE に直接簡単に連携できるため、すばやく効率的なワークフローを実現できます。

FlyonUI MCP サーバーを今すぐ無料でお試しください。

🛠️ インストール

インストールはとても簡単です！

  1. インストールガイドにアクセスし、IDE（VS Code、Cursor、Windsurf など）を選択します。
  2. 手順に沿って、IDE に MCP サーバーをセットアップします。
  3. FlyonUI MCP サーバーを無料で使い始めましょう。

インストール手順を紹介する動画はこちらです：FlyonUI MCP インストール。

📒 ドキュメント

FlyonUI MCP サーバーは、直感的で使いやすい設計です。シンプルでわかりやすいコマンドにより、UI ブロックをすばやく作成、アイデア出し、改善できます。

FlyonUI MCP サーバーの詳しい使い方については、FlyonUI MCP ドキュメントをご覧ください。

🔧 使用方法

FlyonUI MCP サーバーには、主に3つのコマンドがあります。

コマンド説明使用例
/cuiUI を作成既存の FlyonUI ブロックをカスタマイズ
/iuiUI のアイデア出し新しくクリエイティブな UI ブロックを生成
/ruiUI を改善既存のブロックを改善または編集

FlyonUI MCP サーバーの使い方に関するドキュメント全文はこちらをご覧ください：FlyonUI MCP ドキュメント。

動画チュートリアルはこちらです：FlyonUI MCP の使い方。

例

UI を作成（/cui）：

/cui Create a hero section for an eLearning Academy site.
/cui Create a feature section for my landing page like Features 8.

UI のアイデア出し（/iui）：

/iui Create a hero section for my AI SaaS - AI Video Generator.
/iui Create a feature section for my productivity app.

UI を改善（/rui）：

/rui Update the theme to Shadcn.
/rui Replace the “Get Started” button with Login and Register buttons.
/rui Change the Hero section layout from horizontal to vertical.

📚 ドキュメントとリソース

コミュニティ 🤝

FlyonUI コミュニティに参加して、ライブラリについて話し合ったり、質問したり、経験を共有したりしましょう。

コントリビューション 📝

バグを修正したり、新機能を追加したりできます。プルリクエストを作成すると、次のバージョンの FlyonUI MCP にコードが反映される可能性があります。

プルリクエストを作成する前に、**コントリビューションガイドライン**をご確認ください。

💬 サポート

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。