Flowbite MCP Server

Official MCP server for Flowbite to leverage AI for UI creation and theme generation

An MCP server that enables AI assistants to access the Flowbite library of Tailwind CSS components—including UI elements, forms, typography, and plugins—while offering an intelligent theme generator for creating custom branded designs within AI-driven development environments.

MCP Features

Tools:

• 🎨 [NEW] Figma to code - Copy the Figma node url and generate code (video demo)
• 🎯 Theme file generator - Create custom branded themes from any branded hex color

Resources:

• 📦 60+ UI components - Complete access to the Flowbite UI components

Server:

• 🌐 Dual transport support - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments
• ⚡ Production ready - Docker support with health checks and monitoring

Quickstart

Using NPX

The simplest way to use Flowbite MCP Server:

npx flowbite-mcp

Environment variables

Currently you only need the Figma personal access token if you want to enable the Figma to code generation tool.

// other options
"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

You set this variable in your MCP client configuration file.

Integration examples

Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.

Claude desktop

Update the claude_desktop_config.json file and add the following configuration:

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

Cursor editor

Update the mcp.json file and add the following configuration:

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

Windsurf editor

Update the mcp_config.json file and add the following configuration:

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

... [View full README on GitHub](https://github.com/themesberg/flowbite-mcp#readme)