flowbite-mcp

Flowbite 官方 MCP 服务，可利用 AI 创建 UI 和生成主题

一个 MCP 服务，可让 AI 助手访问 Flowbite 的 Tailwind CSS 组件库，包括 UI 元素、表单、排版和插件；同时提供智能主题生成器，可在 AI 驱动的开发环境中创建自定义品牌设计。

MCP 功能

工具：

• 🎨 [新功能] Figma 转代码 - 复制 Figma 节点 URL 并生成代码（视频演示）
• 🎯 主题文件生成器 - 根据任意品牌十六进制颜色创建自定义品牌主题

资源：

• 📦 60 多个 UI 组件 - 完整访问 Flowbite UI 组件

服务：

• 🌐 支持双传输模式 - 面向 CLI 的标准 I/O（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

本地传输模式

标准 I/O（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

这将在 'http://localhost:3000/mcp' 提供 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 检查器

使用 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

贡献

欢迎贡献！欢迎提交 Pull Request。

1. Fork 此仓库
2. 创建功能分支（git checkout -b feature/AmazingFeature）
3. 提交更改（git commit -m 'Add some AmazingFeature'）
4. 推送到分支（git push origin feature/AmazingFeature）
5. 创建 Pull Request

许可证

此项目基于 MIT License 许可证授权，详情请参阅 LICENSE 文件。

致谢

• Flowbite - 感谢其出色的 Tailwind CSS 组件库
• Anthropic - 感谢其制定 Model Context Protocol 规范
• Tailwind CSS - 感谢其提供实用工具优先的 CSS 框架

资源

• 🎨 Flowbite 文档
• 📦 Flowbite 组件
• 🌐 Model Context Protocol
• 🚀 Tailwind CSS v4 文档
• 💬 GitHub Issues

路线图

• 完成组件资源访问
• AI 驱动的主题生成器
• 支持双传输方式（stdio + HTTP）
• 集成 Flowbite Pro 区块（支持许可证验证）
• Figma 到代码的转换工具
• 增强主题自定义选项
• 组件搜索和筛选
• 实时生成组件预览