Flowbite MCP

🚀 Flowbiteの公式MCPサーバー

Flowbiteの公式MCPサーバーは、AIを活用してUIの作成とテーマ生成を行うことができます。

MCPサーバー を使用すると、AIアシスタントが Flowbite のTailwind CSSコンポーネント（UI要素、フォーム、タイポグラフィ、プラグインなど）にアクセスできるようになります。また、AIによる開発環境でカスタムブランドデザインを作成するためのインテリジェントなテーマ生成機能も提供します。

✨ 主な機能

ツール:

• 🎨 [NEW] Figma to code - FigmaのノードURLをコピーしてコードを生成します (ビデオデモ)
• 🎯 テーマファイル生成機能 - 任意のブランドの16進数カラーからカスタムブランドテーマを作成します

リソース:

• 📦 60以上のUIコンポーネント - Flowbite UIコンポーネント への完全なアクセス権を持ちます

サーバー:

• 🌐 デュアルトランスポートサポート - CLI用の標準入出力（stdio）またはサーバーデプロイ用のHTTPストリーム可能なトランスポートをサポートします
• ⚡ 本番環境での使用に耐える - ヘルスチェックとモニタリング機能付きのDockerサポートがあります

🚀 クイックスタート

NPXを使用する

Flowbite MCPサーバーを使用する最も簡単な方法は、NPXを使用することです。

npx flowbite-mcp

環境変数

現在、Figma to code生成ツールを有効にする場合は、Figmaの個人用アクセストークン が必要です。

// その他のオプション
"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

この変数は、MCPクライアントの設定ファイルに設定します。

💻 使用例

人気のクライアントでのインストール例

Cursor、Claude、Windsurfなどの人気のクライアントでFlowbite MCPサーバーをインストールするには、以下の設定例を使用してください。

Claudeデスクトップ

claude_desktop_config.json ファイルを更新し、以下の設定を追加します。

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Cursorエディター

mcp.json ファイルを更新し、以下の設定を追加します。

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Windsurfエディター

mcp_config.json ファイルを更新し、以下の設定を追加します。

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Glama.ai

ローカルトランスポートモード

標準入出力（stdio）

ローカル開発とCLI統合のデフォルトモードです。

# stdioモードで起動（デフォルト）
node build/index.js

{
  "mcpServers": {
    "flowbite": {
      "command": "node",
      "args": ["/path/to/flowbite-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Figma to code生成ツールを有効にするために、Figmaの個人用アクセストークン の取得方法を学びましょう。

HTTPサーバー

本番環境やマルチクライアントシナリオでのHTTPベースのトランスポートです。

node build/index.js --mode http --port 3000

これにより、MCPサーバーが 'http://localhost:3000/mcp' で利用可能になります。

ローカル開発

# リポジトリをクローンする
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# 依存関係をインストールする
npm install

# プロジェクトをビルドする
npm run build

# stdioモードで実行（Claude Desktop、Cursor用）
npm start

# インスペクターを実行する
npm run start inspector

# HTTPサーバーモードで実行（本番環境/マルチクライアント用）
MCP_TRANSPORT_MODE=http npm start

本番環境デプロイ（HTTPモード）

複数のクライアントがいる本番サーバー用です。

# npxを使用する
npx flowbite-mcp --mode http --port 3000

# Docker Composeを使用する
docker-compose up -d

# ヘルスチェック
curl http://localhost:3000/health

ホスティング変数

以下の環境変数を使用してサーバーの動作を構成します。

# トランスポートモード: stdio（デフォルト）またはhttp
MCP_TRANSPORT_MODE=http

# HTTPモードのサーバーポート
MCP_PORT=3000

# HTTPモードのホストバインディング
MCP_HOST=0.0.0.0

# CORSオリジン（カンマ区切り）
MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com

📦 インストール

Dockerでのクイックスタート

# Docker Composeでビルドして実行（推奨）
docker-compose up -d

# ヘルスチェック
curl http://localhost:3000/health

# ログを表示する
docker-compose logs -f

# 停止する
docker-compose down

MCPインスペクター

対話型デバッグにはMCPインスペクターを使用します。

npm run inspector

ロギング

詳細な情報を得るには、サーバーログを確認します。

# stdioモードではコンソールにログが出力されます
node build/index.js

# HTTPモードではHTTPリクエストログが含まれます
MCP_TRANSPORT_MODE=http node build/index.js

📚 ドキュメント

ファイル構造

flowbite-mcp/
├── src/
│   ├── index.ts              # メインサーバーのエントリーポイント
│   └── server-runner.ts      # Express HTTP Streamableトランスポート
├── data/
│   ├── components/           # 60以上のコンポーネントマークダウンファイル
│   ├── forms/                # フォームコンポーネントのドキュメント
│   ├── typography/           # タイポグラフィ要素
│   ├── plugins/              # プラグインのドキュメント
│   ├── theme.md              # テーマ変数のリファレンス
│   └── quickstart.md         # 入門ガイド
├── build/                    # コンパイルされたJavaScript出力
├── package.json
├── tsconfig.json
└── README.md

🤝 コントリビューション

コントリビューションは大歓迎です！プルリクエストを送信してください。

1. リポジトリをフォークする
2. あなたの機能ブランチを作成する (git checkout -b feature/AmazingFeature)
3. 変更をコミットする (git commit -m 'Add some AmazingFeature')
4. ブランチにプッシュする (git push origin feature/AmazingFeature)
5. プルリクエストを開く

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細については LICENSE ファイルを参照してください。

👏 クレジット

• Flowbite - 素晴らしいTailwind CSSコンポーネントライブラリを提供してくれた
• Anthropic - モデルコンテキストプロトコルの仕様を提供してくれた
• Tailwind CSS - ユーティリティファーストのCSSフレームワークを提供してくれた

📚 リソース

• 🎨 Flowbiteドキュメント
• 📦 Flowbiteコンポーネント
• 🌐 モデルコンテキストプロトコル
• 🚀 Tailwind CSS v4ドキュメント
• 💬 GitHubの問題

🚧 ロードマップ

• [x] コンポーネントリソースへの完全なアクセスを実現
• [x] AIによるテーマ生成機能を実装
• [x] デュアルトランスポートサポート（stdio + HTTP）を実装
• [ ] Flowbite Proブロックの統合（ライセンス認証付き）
• [x] Figma to code変換ツールを実装
• [ ] 拡張テーマカスタマイズオプションを追加
• [ ] コンポーネントの検索とフィルタリング機能を追加
• [ ] リアルタイムコンポーネントプレビュー生成機能を追加