Official MCP server for Flowbite to leverage AI for UI creation and theme generation 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. - 🎨 [NEW] Figma to code - Copy the F
Add this skill
npx mdskills install themesberg/flowbite-mcpWell-documented MCP server with useful Figma-to-code and theme tools, but permissions seem overly broad
Official MCP server for Flowbite to leverage AI for UI creation and theme generation
[](https://discord.com/invite/4eeurUVvTy)
[](https://www.npmjs.com/package/flowbite-mcp)
[](https://github.com/themesberg/flowbite-mcp/releases)
[](https://flowbite.com/docs/getting-started/license/)
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.
The simplest way to use Flowbite MCP Server:
npx flowbite-mcp
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.
Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.
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"
}
}
}
}
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"
}
}
}
}
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"
}
}
}
}
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-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'.
# 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
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
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
The project includes a production-ready Docker setup with multi-stage builds for optimal performance.
# 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
Use the MCP Inspector for interactive debugging:
npm run inspector
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
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
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)This project is licensed under the MIT License License - see the LICENSE file for details.
Install via CLI
npx mdskills install themesberg/flowbite-mcpStart in stdio mode (default) is a free, open-source AI agent skill. Official MCP server for Flowbite to leverage AI for UI creation and theme generation 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. - 🎨 [NEW] Figma to code - Copy the F
Install Start in stdio mode (default) with a single command:
npx mdskills install themesberg/flowbite-mcpThis downloads the skill files into your project and your AI agent picks them up automatically.
Start in stdio mode (default) works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.