home / mcp / flowbite mcp server

Flowbite MCP Server

Provides AI-assisted access to Flowbite UI components and an AI-driven theme generator for branded designs.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "themesberg-flowbite-mcp": {
      "url": "http://localhost:3000/mcp",
      "headers": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

You run Flowbite MCP Server to give AI assistants access to Flowbite’s Flowbite UI components and an intelligent theme generator, enabling AI-driven UI creation and branded design workflows.

How to use

Run the server locally or in production and connect your MCP clients to access Flowbite components and the theme generator. You can use the standard CLI mode with npx for quick experiments, or run a persistent HTTP server for production and multi-client setups. The server can operate in two transports: standard I/O (stdio) for CLI integrations and HTTP Streamable for web deployments.

How to install

Prerequisites you need before starting: install Node.js and npm on your machine. Node provides the runtime for stdio mode, while npm/yarn lets you pull in dependencies and run the MCP server in your environment.

Option A: Quick start with NPX for a disposable run

# Run directly with npx (no installation needed)
npx flowbite-mcp

# Show help and options
npx flowbite-mcp --help

# Run in HTTP server mode for production
npx flowbite-mcp --mode http --port 3000

Basic usage with stdio (local run)

Start the MCP server in stdio mode for local development and CLI integrations. This runs the server as a local process that your MCP clients can connect to through standard input/output.

# Start in stdio mode (default)
node build/index.js

# Configure in MCP client (e.g., Cursor, Windsurf, Claude)
{
  "mcpServers": {
    "flowbite": {
      "command": "node",
      "args": ["/path/to/flowbite-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

HTTP server mode for production

Run an HTTP-based MCP server to serve multiple clients. This mode exposes the MCP endpoint over HTTP.

node build/index.js --mode http --port 3000
```
This will make the MCP server available at http://localhost:3000/mcp. Use this for production deployments or multi-client setups.

Environment and hosting configuration

If you want to enable the Figma to code generation tool, provide your Figma personal access token in the client configuration as shown below.

"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

Transport and hosting variables

Configure how the MCP server runs and where it is reachable using these hosting variables.

# Transport mode: stdio (default) or http
MCP_TRANSPORT_MODE=http

# Server port for HTTP mode
MCP_PORT=3000

# Host binding for HTTP mode
MCP_HOST=0.0.0.0

# CORS origins (comma-separated)
MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com

Integration with MCP clients

Connect your MCP-enabled clients by configuring a flowbite server entry in the client’s MCP configuration. You can use either the stdio setup for local tooling or the HTTP endpoint for production clients.

Notes on for production and development

For development, use stdio mode to keep everything local. For production and multi-client scenarios, run in HTTP mode and expose the endpoint on a stable host with proper CORS settings.

Available tools

Figma to code

New tool that copies a Figma node URL and generates corresponding code, enabling rapid translation of designs into UI code.

Theme file generator

Tool to create custom branded themes from any branded hex color, enabling consistent theming across components and apps.