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 转代码转换工具
• [ ] 增强主题自定义选项
• [ ] 组件搜索和过滤
• [ ] 实时组件预览生成