flowbite-mcp

AI を活用した UI 作成とテーマ生成を可能にする、Flowbite 公式 MCP サーバー

AI アシスタントが、UI 要素、フォーム、タイポグラフィ、プラグインを含む Flowbite の Tailwind CSS コンポーネントライブラリにアクセスできる MCP サーバーです。また、AI を活用した開発環境で、ブランドに合わせたカスタムデザインを作成するためのインテリジェントなテーマジェネレーターも提供します。

MCP の機能

ツール：

• 🎨 [新機能] Figma からコードを生成 - Figma のノード URL をコピーしてコードを生成します（動画デモ）
• 🎯 テーマファイルジェネレーター - ブランドカラーの HEX 値から、ブランドに合わせたカスタムテーマを作成します

リソース：

• 📦 60 以上の UI コンポーネント - Flowbite UI コンポーネントにすべてアクセスできます

サーバー：

• 🌐 2 種類のトランスポートに対応 - CLI 向けの標準入出力（stdio）またはサーバーへのデプロイ向けの HTTP Streamable
• ⚡ 本番環境対応 - ヘルスチェックとモニタリングを備えた Docker サポート

クイックスタート

NPX を使用する

Flowbite MCP サーバーを最も簡単に使用する方法：

npx flowbite-mcp

環境変数

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

// other options
"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 統合のデフォルトモード：

# Start in stdio mode (default)
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 からコードを生成するツールを有効にするために、Figma の個人用アクセストークンの取得方法をご確認ください。

HTTP サーバー

本番環境や複数クライアントのシナリオ向けの HTTP ベースのトランスポート：

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

これにより、MCP サーバーを 'http://localhost:3000/mcp' で利用できるようになります。

ローカル開発

# Clone the repository
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in stdio mode (for Claude Desktop, Cursor)
npm start

# Run inspector
npm run start inspector

# Run in HTTP server mode (for production/multi-client)
MCP_TRANSPORT_MODE=http npm start

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

複数のクライアントを使用する本番サーバーの場合：

# Using npx
npx flowbite-mcp --mode http --port 3000

# Using Docker Compose
docker-compose up -d

# Health check
curl http://localhost:3000/health

ホスティング変数

以下の環境変数を使用して、サーバーの動作を設定します：

# Transport mode: stdio (default) or http
MCP_TRANSPORT_MODE=http

# Server port for HTTP mode
MCP_PORT=3000

# Host binding for HTTP mode
MCP_HOST=0.0.0.0

# CORS origins (comma-separated)
MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com

Docker の設定

このプロジェクトには、パフォーマンスを最適化するためのマルチステージビルドを備えた、本番環境対応の Docker セットアップが含まれています。

Docker でのクイックスタート

# Build and run with Docker Compose (recommended)
docker-compose up -d

# Check health
curl http://localhost:3000/health

# View logs
docker-compose logs -f

# Stop
docker-compose down

MCP Inspector

対話型デバッグには MCP Inspector を使用してください：

npm run inspector

ログ

詳細を確認するには、サーバーのログをチェックしてください：

# stdio mode logs to console
node build/index.js

# HTTP mode includes HTTP request logs
MCP_TRANSPORT_MODE=http node build/index.js

ファイル構成

flowbite-mcp/
├── src/
│   ├── index.ts              # Main server entry point
│   └── server-runner.ts      # Express HTTP Streamable transport
├── data/
│   ├── components/           # 60+ component markdown files
│   ├── forms/                # Form component documentation
│   ├── typography/           # Typography elements
│   ├── plugins/              # Plugin documentation
│   ├── theme.md              # Theme variable reference
│   └── quickstart.md         # Getting started guide
├── build/                    # Compiled JavaScript output
├── 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 License のもとでライセンスされています。詳細は LICENSE ファイルをご覧ください。

クレジット

• Flowbite - 素晴らしい Tailwind CSS コンポーネントライブラリをご提供いただきました
• Anthropic - Model Context Protocol の仕様をご提供いただきました
• Tailwind CSS - ユーティリティファーストの CSS フレームワークをご提供いただきました

リソース

• 🎨 Flowbite ドキュメント
• 📦 Flowbite コンポーネント
• 🌐 Model Context Protocol
• 🚀 Tailwind CSS v4 ドキュメント
• 💬 GitHub の課題

ロードマップ

• コンポーネントのリソースアクセスを完了
• AI 搭載テーマジェネレーター
• デュアルトランスポート対応（stdio + HTTP）
• Flowbite Pro ブロックの統合（ライセンス認証あり）
• Figma からコードへの変換ツール
• テーマのカスタマイズオプションを強化
• コンポーネントの検索とフィルタリング
• コンポーネントのリアルタイムプレビュー生成