How to add Flowbite MCP to Cursor

Official Flowbite MCP server: access 60+ Tailwind CSS components, generate branded themes, and convert Figma to code. Paste the config into ~/.cursor/mcp.json and restart Cursor.

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

Cursor 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

1Open Cursor → Settings → MCP → Add new MCP server (or edit ~/.cursor/mcp.json directly).
2Paste the Flowbite MCP config below into the "mcpServers" object.
3Fill in placeholder secrets, then save.
4Cursor reloads MCP servers automatically — check Settings → MCP for a green status dot.
5Ask Cursor to use one of Flowbite MCP's tools to confirm it's connected.

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 Cursor

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 + Cursor FAQ

Where is the Cursor config file?

Cursor reads MCP servers from ~/.cursor/mcp.json. Paste the Flowbite MCP config there under the "mcpServers" key and restart the client.

Is Flowbite MCP safe to use with Cursor?

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