Flowbite MCP

🚀 Flowbite MCP 服務器

Flowbite 的官方 MCP 服務器，藉助人工智能進行 UI 創建和主題生成。它能讓 AI 助手訪問 Tailwind CSS 組件庫，還提供智能主題生成器，可在 AI 驅動的開發環境中創建自定義品牌設計。

🚀 快速開始

使用 NPX

使用 Flowbite MCP 服務器最簡單的方法：

npx flowbite-mcp

環境變量

目前，如果你想啟用 Figma 轉代碼生成工具，只需要 Figma 個人訪問令牌。

// 其他選項
"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

你可以在 MCP 客戶端配置文件中設置此變量。

✨ 主要特性

工具：

• 🎨 [新增] Figma 轉代碼 - 複製 Figma 節點 URL 並生成代碼（視頻演示）
• 🎯 主題文件生成器 - 從任何品牌十六進制顏色創建自定義品牌主題

資源：

• 📦 60 + 個 UI 組件 - 可完全訪問 Flowbite UI 組件

服務器：

• 🌐 雙傳輸支持 - 支持 CLI 的標準輸入輸出（stdio）或服務器部署的 HTTP 流傳輸
• ⚡ 可用於生產環境 - 支持 Docker，具備健康檢查和監控功能

💻 使用示例

集成示例

使用以下配置示例，在 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 個人訪問令牌 以啟用 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 配置，採用多階段構建以實現最佳性能。

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 流傳輸
├── data/
│   ├── components/           # 60 + 個組件的 Markdown 文件
│   ├── forms/                # 表單組件文檔
│   ├── typography/           # 排版元素
│   ├── plugins/              # 插件文檔
│   ├── theme.md              # 主題變量參考
│   └── quickstart.md         # 入門指南
├── build/                    # 編譯後的 JavaScript 輸出
├── package.json
├── tsconfig.json
└── README.md

🤝 貢獻

歡迎貢獻代碼！請隨時提交拉取請求。

1. Fork 倉庫
2. 創建你的功能分支 (git checkout -b feature/AmazingFeature)
3. 提交你的更改 (git commit -m '添加一些驚人的功能')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打開拉取請求

📄 許可證

本項目採用 MIT 許可證 - 有關詳細信息，請參閱 LICENSE 文件。

👏 致謝

• Flowbite - 提供出色的 Tailwind CSS 組件庫
• Anthropic - 提供模型上下文協議規範
• Tailwind CSS - 提供實用優先的 CSS 框架

📖 資源

• 🎨 Flowbite 文檔
• 📦 Flowbite 組件
• 🌐 模型上下文協議
• 🚀 Tailwind CSS v4 文檔
• 💬 GitHub 問題

🗺️ 路線圖

• [x] 完成組件資源訪問
• [x] 人工智能驅動的主題生成器
• [x] 雙傳輸支持（stdio + HTTP）
• [ ] Flowbite Pro 塊集成（需許可證認證）
• [x] Figma 轉代碼轉換工具
• [ ] 增強主題自定義選項
• [ ] 組件搜索和過濾
• [ ] 即時組件預覽生成