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
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.
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: shadcn-ui MCP Server
Quickstart
Using NPX
The simplest way to use Flowbite MCP Server:
Environment variables
Currently you only need the Figma personal access token if you want to enable the Figma to code generation tool.
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:
Cursor editor
Update the mcp.json file and add the following configuration:
Windsurf editor
Update the mcp_config.json file and add the following configuration:
Glama.ai
Local Transport Modes
Standard I/O (stdio)
The default mode for local development and CLI integrations:
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:
This will make the MCP server available at 'http://localhost:3000/mcp'.
Local development
Production deployment (HTTP Mode)
For production servers with multiple clients:
Hosting variables
Configure the server behavior with these environment variables:
Docker Configuration
The project includes a production-ready Docker setup with multi-stage builds for optimal performance.
Quickstart with Docker
MCP inspector
Use the MCP Inspector for interactive debugging:
Logging
Check server logs for detailed information:
File structure
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