https://flowbite.com" >



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.

MCP Features

$3

- 🎨 [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

$3

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

$3

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

Quickstart

$3

The simplest way to use Flowbite MCP Server:

``bash
npx flowbite-mcp
`

$3

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

`bash
// 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.

$3

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

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

$3

![Install MCP Server](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)

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

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

$3

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

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

$3





Local Transport Modes

$3

The default mode for local development and CLI integrations:

`bash


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.

$3

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

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

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

$3

`bash


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
`

$3

For production servers with multiple clients:

`bash


Using npx

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

Using Docker Compose

docker-compose up -d

Health check

curl http://localhost:3000/health
`

$3

Configure the server behavior with these environment variables:

`bash


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.

$3

`bash


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
`

$3

Use the MCP Inspector for interactive debugging:

`bash
npm run inspector
`

$3

Check server logs for detailed information:

`bash


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.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)
5. 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

- 🎨 Flowbite Documentation
- 📦 Flowbite Components
- 🌐 Model Context Protocol
- 🚀 Tailwind CSS v4 Docs
- 💬 GitHub Issues

Roadmap

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