Official MCP server for Flowbite to leverage AI for UI creation and theme generation
[](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)
An [MCP server](https://flowbite.com/docs/getting-started/mcp/) that enables AI assistants to access the [Flowbite](https://flowbite.com/) 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](https://x.com/zoltanszogyenyi/status/1996953610966405547))
- **π― Theme file generator** - Create custom branded themes from any branded hex color
### Resources:
- **π¦ 60+ UI components** - Complete access to the [Flowbite UI components](https://flowbite.com/docs/getting-started/introduction/)
### 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
## Quickstart
### Using NPX
The simplest way to use Flowbite MCP Server:
```bash
npx flowbite-mcp
```
### Environment variables
Currently you only need the [Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) 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.
### Claude desktop
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"
}
}
}
}
```
### Cursor editor
[](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"
}
}
}
}
```
### Windsurf editor
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"
}
}
}
}
```
### Glama.ai
## Local Transport Modes
### Standard I/O (stdio)
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](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to enable the Figma to code generation tool.
### HTTP server
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'.
### Local development
```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
```
### Production deployment (HTTP Mode)
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
```
### Hosting variables
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.
### Quickstart with Docker
```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
```
### MCP inspector
Use the MCP Inspector for interactive debugging:
```bash
npm run inspector
```
### Logging
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](LICENSE) file for details.
## Credits
- **[Flowbite](https://flowbite.com/)** - For the amazing Tailwind CSS component library
- **[Anthropic](https://anthropic.com)** - For the Model Context Protocol specification
- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework
## Resources
- π¨ [Flowbite Documentation](https://flowbite.com/docs/getting-started/introduction/)
- π¦ [Flowbite Components](https://flowbite.com/docs/components/accordion/)
- π [Model Context Protocol](https://modelcontextprotocol.io/)
- π [Tailwind CSS v4 Docs](https://tailwindcss.com/docs)
- π¬ [GitHub Issues](https://github.com/themesberg/flowbite-mcp/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