What can you do with this server?

The Flowbite MCP server enables AI assistants to access Flowbite's Tailwind CSS component library and provides AI-driven tools for UI creation and theme customization. Core Capabilities: * Convert Figma designs to code - Transform Figma layers into code blocks by providing a Figma node URL (requires Figma personal access token) * Generate custom branded themes - Create tailored Flowbite theme CSS files from a brand color (hex format) and natural language instructions, with intelligent customization of colors, spacing, typography, border radius, and other theme variables * Access 60+ UI components - Browse and utilize Flowbite's complete component library including accordions, buttons, cards, modals, forms, typography elements, plugins, and theme documentation * Session management - Retrieve current session ID and context information Deployment & Integration: * Dual transport modes - Run via stdio for CLI/desktop integration or HTTP server mode for production deployments * Production-ready - Docker support with health checks, monitoring, and configurable environment variables (Figma tokens, server port, host binding, CORS origins) * MCP-compatible - Integrates with Claude Desktop, Cursor, Windsurf, and other MCP-enabled clients

Which integrations are available for this server?

Planned integration for Figma to code conversion tool (currently on roadmap). Provides access to the Flowbite library of 60+ Tailwind CSS UI components, forms, typography elements, and plugins, along with an AI-powered theme generator for creating custom branded designs from hex colors.

How do I use flowbite-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@flowbite-mcp generate a responsive navbar component with a dark theme" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

flowbite-mcp

by themesberg

Overview Schema Related Servers Score Discussions

JavaScript

Install MCP Server

An MCP server that enables AI assistants to access the Flowbite library of Tailwind CSS components—including UI elements, forms, typography, and plugins—while offering an intelligent theme generator for creating custom branded designs within AI-driven development environments.

MCP Features

Tools:

🎨 [NEW] Figma to code - Copy the Figma node url and generate code (video demo)
🎯 Theme file generator - Create custom branded themes from any branded hex color

Resources:

📦 60+ UI components - Complete access to the Flowbite UI components

Server:

🌐 Dual transport support - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments
⚡ Production ready - Docker support with health checks and monitoring

Related MCP server: GitHub MCP Server

Quickstart

Using NPX

The simplest way to use Flowbite MCP Server:

npx flowbite-mcp

Environment variables

Currently you only need the Figma personal access token if you want to enable the Figma to code generation tool.

// other options
"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

You set this variable in your MCP client configuration file.

Integration examples

Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.

Claude desktop

Update the claude_desktop_config.json file and add the following configuration:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Cursor editor

Install MCP Server

Update the mcp.json file and add the following configuration:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Windsurf editor

Update the mcp_config.json file and add the following configuration:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Glama.ai

Local Transport Modes

Standard I/O (stdio)

The default mode for local development and CLI integrations:

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

{
  "mcpServers": {
    "flowbite": {
      "command": "node",
      "args": ["/path/to/flowbite-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Learn how to get the Figma personal access token to enable the Figma to code generation tool.

HTTP server

HTTP-based transport for production and multi-client scenarios:

node build/index.js --mode http --port 3000

This will make the MCP server available at 'http://localhost:3000/mcp'.

Local development

# Clone the repository
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in stdio mode (for Claude Desktop, Cursor)
npm start

# Run inspector
npm run start inspector

# Run in HTTP server mode (for production/multi-client)
MCP_TRANSPORT_MODE=http npm start

Production deployment (HTTP Mode)

For production servers with multiple clients:

# Using npx
npx flowbite-mcp --mode http --port 3000

# Using Docker Compose
docker-compose up -d

# Health check
curl http://localhost:3000/health

Hosting variables

Configure the server behavior with these environment 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

Docker Configuration

The project includes a production-ready Docker setup with multi-stage builds for optimal performance.

Quickstart with Docker

# Build and run with Docker Compose (recommended)
docker-compose up -d

# Check health
curl http://localhost:3000/health

# View logs
docker-compose logs -f

# Stop
docker-compose down

MCP inspector

Use the MCP Inspector for interactive debugging:

npm run inspector

Logging

Check server logs for detailed information:

# stdio mode logs to console
node build/index.js

# HTTP mode includes HTTP request logs
MCP_TRANSPORT_MODE=http node build/index.js

File structure

flowbite-mcp/
├── src/
│   ├── index.ts              # Main server entry point
│   └── server-runner.ts      # Express HTTP Streamable transport
├── data/
│   ├── components/           # 60+ component markdown files
│   ├── forms/                # Form component documentation
│   ├── typography/           # Typography elements
│   ├── plugins/              # Plugin documentation
│   ├── theme.md              # Theme variable reference
│   └── quickstart.md         # Getting started guide
├── build/                    # Compiled JavaScript output
├── package.json
├── tsconfig.json
└── README.md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

This project is licensed under the MIT License License - see the LICENSE file for details.

Credits

Flowbite - For the amazing Tailwind CSS component library
Anthropic - For the Model Context Protocol specification
Tailwind CSS - For the utility-first CSS framework

Resources

Roadmap

Complete component resource access
AI-powered theme generator
Dual transport support (stdio + HTTP)
Flowbite Pro blocks integration (with license authentication)
Figma to code conversion tool
Enhanced theme customization options
Component search and filtering
Real-time component preview generation

Available Tools

2 tools

convert-figma-to-codeA

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.

ParametersJSON Schema

Name	Required	Description	Default
`figmaNodeUrl`	Yes	The URL of the Figma node (e.g., https://www.figma.com/design/fileKey/fileName?node-id=123-456)

TDQS

A3.9/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses the authentication requirement (FIGMA_ACCESS_TOKEN) and implies a read-only operation by stating 'fetches' and 'converts'. It does not mention rate limits or mutability, but the behavioral transparency is adequate for the tool's simplicity.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences long, with the first sentence stating purpose and the second stating a prerequisite. No unnecessary words. Efficiently conveys essential information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers the basic purpose and prerequisite, but lacks details about the output format (e.g., what type of code block). Since there is no output schema, the description should provide more completeness about the return value. It is somewhat incomplete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents the single parameter fully. The description adds no additional meaning beyond what the schema provides, earning a baseline score of 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'fetches' and 'converts', and the resource 'Figma node and its rendered image'. It distinguishes the tool from the sibling 'generate-theme' by its specific action. Purpose is unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description mentions the prerequisite FIGMA_ACCESS_TOKEN, providing essential context. However, it does not specify when to use this tool over alternatives or when not to use it. No explicit usage guidelines beyond the token requirement.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate-themeA

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.

ParametersJSON Schema

Name	Required	Description
`brandColor`	Yes	The primary brand color in hex format (e.g., #3B82F6, #FF5733). This will be used as the base for generating all brand color variations.
`instructions`	Yes	Natural language instructions describing the desired theme aesthetic and customizations. The AI will interpret these instructions to modify all relevant theme variables. Examples: "Make it modern and minimalist with soft rounded corners", "Create a luxury feel with gold accents and elegant spacing", "Design for a playful children's app with bright colors", "Professional corporate style with subtle borders", etc.
`fileName`	No	Optional filename for the generated theme (e.g., "my-brand-theme.css"). Defaults to "custom-theme.css"

TDQS

A3.8/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must convey behavioral traits. It states that the tool generates a CSS file and modifies theme variables intelligently, but lacks details on side effects (e.g., file overwriting, permissions, reversibility). It does not contradict annotations as none exist.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is relatively concise with two sentences that front-load the purpose. The second sentence expands on the AI behavior and scope without unnecessary words. It could be slightly more concise, but overall it is efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers the tool's purpose and inputs adequately but lacks detail on the output format (e.g., whether the CSS content is returned directly or saved to a file). Given no output schema and no annotations, additional context about the return value or side effects would improve completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema provides 100% coverage with descriptions. The description adds value by explaining that the AI analyzes instructions holistically to customize all theme variables, and that brandColor is used as a base for all color variations. This goes beyond the schema's parameter-level descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states that the tool generates a custom Flowbite theme CSS file based on brand color and instructions. It specifies the output (CSS file) and the key inputs. The sibling tool 'convert-figma-to-code' is unrelated, so differentiation is clear.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context by describing the AI's role in analyzing instructions and customizing all theme variables. However, it does not explicitly state when to use this tool versus alternatives, nor does it mention when not to use it or any prerequisites.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

3 tool updatesv1.1.5May 3, 2026

Changedconvert-figma-to-code3 fields changed

addedInput schema / $schema

Added value: +"http://json-schema.org/draft-07/schema#"

addedInput schema / additionalProperties
```
Added value: +false
```

changedInput schema / properties / figmaNodeUrl / description

Previous value: -"The URL of the Figma node to convert"New value: +"The URL of the Figma node (e.g., https://www.figma.com/design/fileKey/fileName?node-id=123-456)"

Changedgenerate-theme2 fields changed
- addedInput schema / $schema
```
Added value: +"http://json-schema.org/draft-07/schema#"
```
- addedInput schema / additionalProperties
```
Added value: +false
```
Removedget_session

3 tool updatesv1.0.0Dec 3, 2025
- First observedconvert-figma-to-code
- First observedgenerate-theme
- First observedget_session

Install Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.9/5.0

Disambiguation5/5

The two tools have completely different purposes: one converts Figma designs to code, the other generates a theme from a brand color. There is no overlap or ambiguity.

Naming Consistency4/5

Both tools use snake_case and follow a verb-object pattern, though 'convert-figma-to-code' is more detailed than 'generate-theme'. The inconsistency is minor.

Tool Count3/5

With only two tools, the surface feels thin for a design-to-code and theme generation server. However, the scope is narrow enough that the count is borderline acceptable.

Completeness4/5

The tools cover the core workflows of converting a design and generating a theme. Missing features like theme validation or export are minor gaps for the stated purpose.

Maintenance

ActivityInactive

ResponsivenessSyncing

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

LovableOAuth
dev.lovable
Official MCP server for Lovable, the AI-powered full-stack app builder.
Developer Tools AI & Machine Learning
23
Certifier MCP BOAuth
io.certifier
Official MCP server for Certifier to issue, manage, and track certificates and badges.
Education & Learning Tools
2
agentwork-mcp A
io.github.ferm-ai
Official MCP server for Agentwork — delegate tasks to AI agents with human-in-the-loop
Agent Orchestration Autonomous Agents App Automation
2
mcpOAuth
com.gitlab
Official GitLab MCP Server
Version Control CI/CD & DevOps Developer Tools
2

Related MCP Servers

figma-mcp
Coding Agents Developer Tools
JayZeeDesign
A
license
A
quality
D
maintenance
Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows
Updated a year ago (2025-04-03 23:53 UTC)
5
3
67
MIT
GitHub MCP Serverofficial
Version Control Developer Tools
github
A
license
Not graded
quality
A
maintenance
GitHub's official MCP Server
Updated a day ago (2026-09-05 05:18 UTC)
32,723
MIT
shadcn-ui MCP Server
Documentation Access Developer Tools
totodev999
A
license
A
quality
D
maintenance
Provides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.
Updated a year ago (2025-06-09 01:00 UTC)
4
617
MIT
Hugeicons
Entertainment & Media
xiaobenyang-com
A
license
B
quality
D
maintenance
Hugeicons MCP Server is a TypeScript based server that provides integrated tools and resources for the Hugeicons icon library, supporting icon search, retrieval, and usage guides for multiple platforms.
Updated 8 months ago (2026-01-09 07:05 UTC)
5
2
Apache 2.0

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/themesberg/flowbite-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

MCP Features

Tools:

Resources:

Server:

Quickstart

Using NPX

Environment variables

Integration examples

Claude desktop

Cursor editor

Windsurf editor

Glama.ai

Local Transport Modes

Standard I/O (stdio)

HTTP server

Local development

Production deployment (HTTP Mode)

Hosting variables

Docker Configuration

Quickstart with Docker

MCP inspector

Logging

File structure

Contributing

License

Credits

Resources

Roadmap

Available Tools

TDQS

TDQS

Tool Schema Changelog

TDQS

Maintenance

Resources

Looking for Admin?

Related MCP Connectors

Related MCP Servers

figma-mcp

GitHub MCP Serverofficial

shadcn-ui MCP Server

Hugeicons

Latest Blog Posts

MCP directory API