# themesberg/flowbite-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/themesberg/flowbite-mcp  
**GitHub Stars:** 42  
**npm Downloads (last month):** 1671  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/themesberg-flowbite-mcp

## Description
MCP server that provides AI assistance for an open-source UI framework based on Tailwind CSS

## Tools
Capabilities this server exposes over MCP:

- **convert-figma-to-code** — Fetches a Figma node and its rendered image from the Figma API and converts it to a code block. Requires FIGMA_ACCESS_TOKEN environment variable to be set.
- **generate-theme** — Generates a custom Flowbite theme CSS file based on a brand color (hex format) and user instructions. The AI will intelligently analyze the instructions and customize ALL theme variables (border radius, spacing, colors, typography, etc.) to match the desired aesthetic. This tool creates color shades and variations, adapting the entire theme system to match your brand identity.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "flowbite-mcp": {
    "command": "npx",
    "args": ["-y","flowbite-mcp"],
    "env": {
      "FIGMA_ACCESS_TOKEN": "",
      "MCP_TRANSPORT_MODE": "",
      "MCP_PORT": "",
      "MCP_HOST": "",
      "MCP_CORS_ORIGINS": ""
    }
  }
}
```

**Requires environment variables:** `FIGMA_ACCESS_TOKEN`, `MCP_TRANSPORT_MODE`, `MCP_PORT`, `MCP_HOST`, `MCP_CORS_ORIGINS` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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:

```bash
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.

_Full upstream README: https://allmcps.com/mcp/themesberg-flowbite-mcp/readme_