MCP Directory

How to add Flowbite MCP to Claude Desktop

Official Flowbite MCP server: access 60+ Tailwind CSS components, generate branded themes, and convert Figma to code. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 14, 2026 · 37★ · stdio · apikey

Claude Desktop config for Flowbite MCP

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

Setup steps

  1. 1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
  2. 2Paste the Flowbite MCP config below under the top-level "mcpServers" key.
  3. 3Fill in any placeholder secrets (API keys, paths) in the snippet.
  4. 4Save the file, then fully quit and reopen Claude Desktop.
  5. 5Open a chat and confirm Flowbite MCP's tools appear under the 🔌 tools menu.

Before you start

  • Node.js with npx (to run `npx flowbite-mcp`)
  • An MCP-compatible client (Claude Desktop, Cursor, Windsurf, etc.)
  • Optional: a Figma personal access token (FIGMA_ACCESS_TOKEN) to enable the Figma-to-code tool

What Flowbite MCP can do in Claude Desktop

Figma to code

Convert a Figma design into code by copying the Figma node URL and generating corresponding Flowbite component code. Requires a Figma personal access token.

Theme file generator

Create custom branded theme files from any branded hex color, producing Flowbite/Tailwind theme variables for custom designs.

Security

The Figma-to-code tool requires a Figma personal access token (FIGMA_ACCESS_TOKEN) supplied via your MCP client configuration. The token is optional and only needed to enable Figma-to-code generation; component access and theme generation work without it. Store the token securely and avoid committing it to source control.

Flowbite MCP + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the Flowbite MCP config there under the "mcpServers" key and restart the client.

Is Flowbite MCP safe to use with Claude Desktop?

The Figma-to-code tool requires a Figma personal access token (FIGMA_ACCESS_TOKEN) supplied via your MCP client configuration. The token is optional and only needed to enable Figma-to-code generation; component access and theme generation work without it. Store the token securely and avoid committing it to source control.

Do I need a Figma access token to use the server?

No. The Figma personal access token (FIGMA_ACCESS_TOKEN) is only required to enable the Figma-to-code generation tool. Accessing components and generating themes works without it.

Which transports are supported?

Two: Standard I/O (stdio), the default mode for local CLI and editor integrations, and HTTP Streamable for production and multi-client deployments (e.g. `npx flowbite-mcp --mode http --port 3000`).

Which MCP clients are supported?

The README provides ready-made configuration for Claude Desktop, Cursor, and Windsurf, plus a Cursor one-click install deeplink and Glama.ai listing.

View repo Full Flowbite MCP page