Log inSubmit server
Flowbite MCP logo

Flowbite MCP

by themesberg

Adds Flowbite component resources, Figma-to-code conversion, and branded theme generation to MCP-compatible AI clients.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Flowbite MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "themesberg-flowbite-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_VALUE_HERE",
        "MCP_TRANSPORT_MODE": "YOUR_VALUE_HERE",
        "MCP_PORT": "YOUR_VALUE_HERE",
        "MCP_HOST": "YOUR_VALUE_HERE",
        "MCP_CORS_ORIGINS": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

Automated check passed— started and listed 2 tools correctly (23d ago).

Overview

themesberg/flowbite-mcp MCP server gives AI assistants access to Flowbite resources for Tailwind CSS UI development, including 60+ components, forms, typography, plugins, and theme guidance. It provides tools for converting a Figma node into a code block and generating a custom theme CSS file from a brand hex color and instructions. Run it locally over stdio or deploy it as a streamable HTTP service for multiple clients. Reach for it when an AI coding workflow needs Flowbite references, Figma-based UI translation, or branded theme output.

Use cases

  • Convert Figma nodes into Tailwind-oriented code blocks
  • Generate branded Flowbite theme CSS files
  • Give AI assistants access to Flowbite component documentation
  • Run Flowbite assistance locally through stdio
  • Expose Flowbite tools to multiple clients over HTTP

Key features

  • Figma node and image to code conversion
  • Brand-color-based theme CSS generation
  • 60+ Flowbite component resources
  • Stdio and HTTP Streamable transports
  • Docker deployment with health checks

Tools2

What Flowbite MCP lets your agent do. Expand a tool for its parameters.

Verified live~455 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

18/19 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 9d ago via OSV.dev · flowbite-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars42Stargazers on the source repository.
npm downloads1.7kPackage downloads in the last 30 days.
Last commit9mo agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed2Callable tools this server registers over MCP.
Directory activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Flowbite MCP works

What themesberg/flowbite-mcp MCP server does

themesberg/flowbite-mcp MCP server connects MCP-compatible AI assistants with the Flowbite library, an open-source collection of Tailwind CSS components and related documentation. Its bundled resources cover more than 60 UI components, along with forms, typography, plugins, theme variables, and quickstart material.

The server is listed in the 💻 Developer Tools category and is intended for AI-assisted interface development. It does not replace the Flowbite library or a Figma project; instead, it gives an assistant structured access to Flowbite material and two task-oriented tools.

How it works

The themesberg/flowbite-mcp MCP server exposes convert-figma-to-code and generate-theme over MCP. The Figma tool accepts a Figma node URL, retrieves the node and its rendered image through the Figma API, and returns a code block. Using that tool requires a Figma personal access token in FIGMA_ACCESS_TOKEN.

The theme tool accepts a brand color in hexadecimal form and instructions describing the desired style. It produces a custom Flowbite theme CSS file and adjusts theme variables such as colors, typography, spacing, and border radius. The tool also creates color shades and variations from the supplied brand color.

Transport can use standard input/output, which is the default for local command-line and desktop integrations, or HTTP Streamable mode for server deployments and multiple clients. HTTP mode exposes the MCP endpoint at /mcp and includes a health endpoint at /health.

Setup and configuration

The simplest local launch uses:

Terminal
npx flowbite-mcp

For a source checkout, install dependencies, build the project, and start the compiled server with npm. MCP client configurations can invoke the package with npx -y flowbite-mcp.

HTTP mode can be started with npx flowbite-mcp --mode http --port 3000 or by setting MCP_TRANSPORT_MODE=http. MCP_PORT, MCP_HOST, and MCP_CORS_ORIGINS control the HTTP port, host binding, and comma-separated CORS origins. Docker Compose configuration is included for deployment, and the project supports health checks and log inspection.

Tools and capabilities

  • Read Flowbite resources covering 60+ components, forms, typography, plugins, theme variables, and quickstart guidance.
  • Convert a Figma node and its rendered image into a code block through the Figma API.
  • Generate a branded Flowbite CSS theme from a hexadecimal brand color and written design instructions.
  • Run through stdio for local clients or HTTP Streamable transport for hosted and multi-client use.
  • Inspect the running server with the MCP Inspector during development.

Limitations and notes

The documented Figma operation depends on access to the Figma API and a valid personal access token.

The roadmap identifies Flowbite Pro blocks integration, expanded theme customization, component search and filtering, and real-time component preview generation as unfinished items.

The themesberg/flowbite-mcp MCP server is released under the MIT License. Its repository includes Docker support, but deployment still requires configuring the selected transport and any HTTP hosting variables for the target environment.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Flowbite MCP

themesberg/flowbite-mcp is an MCP server that connects AI assistants to Flowbite resources for Tailwind CSS development. It provides access to 60+ UI components and related documentation, plus tools for converting Figma nodes into code and generating branded Flowbite theme CSS files. Figma conversion requires a personal access token.

Install it with `npx flowbite-mcp`, or configure an MCP client to run `npx -y flowbite-mcp`. For local development from source, clone the repository, run `npm install`, build with `npm run build`, and start the server with npm.

Yes, themesberg/flowbite-mcp works with Cursor through an stdio MCP configuration. Add a server entry that runs `npx -y flowbite-mcp`; add `FIGMA_ACCESS_TOKEN` if you want to use the Figma-to-code tool.

Set `FIGMA_ACCESS_TOKEN` in the MCP client configuration before starting the server. The token is needed by `convert-figma-to-code`, which retrieves a Figma node and its rendered image through the Figma API.

Yes, run it in HTTP mode with `npx flowbite-mcp --mode http --port 3000` or set `MCP_TRANSPORT_MODE=http`. The MCP endpoint is available at `/mcp`, and the server provides `/health` for checks.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFlowbite MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/themesberg-flowbite-mcp?style=directory)](https://allmcps.com/mcp/themesberg-flowbite-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/themesberg-flowbite-mcp"><img src="https://allmcps.com/api/badge/themesberg-flowbite-mcp?style=directory" alt="Flowbite MCP on AllMCPs" /></a>