Tailwind CSS MCP Server - Flowbite
Get started with the official MCP server for Flowbite to integrate UI components into your AI development workflow from Cursor, Windsurf, Claude and other MCP client providers
MCP (Model-Context-Protocol) is a new way to structure a communication protocol between MCP servers (Flowbite MCP) and MCP clients (ie. Windsurf, Cursor). It enables adding additional context to your AI development workflow by integrating resources and tools specific to your project.
Flowbite MCP is an open-source server that adds the right amount of context to the LLM providers which improves the quality of UI generation in code - whether it’s HTML, React, Svelte, or other frameworks.
Additionally, we also developed tools to convert Figma layers to code relevant to your codebase using Flowbite and Tailwind CSS and also other tools such as generating theme files based on branded colors.
Install Flowbite MCP #
The easiest way to install the Flowbite MCP is using NPX:
- Terminal
# Run directly with npx (no installation needed)
npx flowbite-mcp
You can also run npx flowbite-mcp --help to show a list of helpful options.
Requirements #
If you want to use the Figma to code converter tool, you need to get a personal access token from Figma and set it as an environment variable. Otherwise, Flowbite MCP is specifically built for a project that would use Tailwind CSS, Flowbite and optionally Figma for prototyping.
Configuring MCP client #
An MCP client is a software tool such as Cursor, Windsurf or Claude Code that you use for AI development.
Most of these tools supports MCP servers out of the box and you need to update a JSON file that contains the configuration for the MCP servers.
Cursor #
Cursor is one of the most popular IDEs for AI development for software engineers and web development.
To set up Flowbite MCP with Cursor, open the mcp.json and add the following configuration:
- mcp.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": ["-y", "flowbite-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}
}
}
}
Windsurf #
Windsurf is the second most popular IDE for AI development and the configuration is similar to Cursor.
Update the mcp_config.json file with the following configuration:
- mcp_config.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": ["-y", "flowbite-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}
}
}
}
Claude Code #
To install Flowbite MCP in Claude Desktop you need to configure the claude_desktop_config.json file:
- mcp_config.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": ["-y", "flowbite-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}
}
}
}
If you’d like to request a new integration or have any questions, please open an issue on our GitHub repository.
Flowbite MCP tools #
Use the tools from Flowbite MCP to enhance your AI development workflow.
Convert Figma to code #
With Flowbite MCP you can now convert Figma layers to code by prompting any AI provider.
Currently, we recommend either Gemini 3, GPT 5 or Sonnet 4.5 for the highest quality code conversions and based on the complexity of the designs, you need to follow up with “reparation prompts”.
Here’s a prompt example that you can use to convert Figma design to code:
- Chat interface
use flowbite mcp to convert this figma <FIGMA_NODE_LINK> to code
Note: to get the node link from Figma, all you need to do is:
- Select the Figma layer in your project
- Right click and select
Copy/paste as - Select
Copy link to selection
We recommend using the offical Flowbite Design System as a solid foundation for your UI generation.
Generate theme file #
Since we released theming support for Flowbite by providing a better way to customize UI using variables we also built a tool in Flowbite MCP to generate a theme file based on a brand color and a general description of the UI that you’d like to use in your project.
Here’s a prompt example that you can use:
- Chat interface
use flowbite mcp to generate a theme file using the "#0000FF" brand color
and create a professional, enterprise, clean looking UI (ie. Jira, Facebook)
Local development #
If you’d like to extend Flowbite MCP or contribute to the project, you can run it locally as a server.
We recommend cloning the repository from GitHub, installing the dependencies, building and then running the server.
Using the native MCP inspector tool can also be a great way to debug and test the server.
- Terminal
# 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
Transport modes #
Flowbite MCP supports both stdio and http transport modes if you want to run it locally as a server.
Use the --mode option to set either http or stdio transport mode.
- Terminal
# Run in HTTP server mode for production
npx flowbite-mcp --mode http --port 3000
Additionally, you can also set the --port option to choose a different port for the HTTP server.
Docker configuration #
Flowbite MCP also has a Docker configuration file that you can use to run it as a container.
- Terminal
# 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
Contributing #
Flowbite MCP is open-source under the MIT license and contributions are more than welcome to the project.