How to add Flowbite MCP to Windsurf

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

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

Windsurf 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 Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the Flowbite MCP config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5Flowbite MCP's tools become available to Cascade.

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 Windsurf

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

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the Flowbite MCP config there under the "mcpServers" key and restart the client.

Is Flowbite MCP safe to use with Windsurf?

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