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
1<p>2 <a href="[https://flowbite.com](https://flowbite.com/docs/getting-started/mcp/)" >3 <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/flowbite-mcp-github-2.png">4 </a><br>5 Official MCP server for Flowbite to leverage AI for UI creation and theme generation6</p>78<p>9 <a href="https://discord.com/invite/4eeurUVvTy"><img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord"></a>10 <a href="https://www.npmjs.com/package/flowbite-mcp"><img src="https://img.shields.io/npm/dt/flowbite-mcp.svg" alt="Total Downloads"></a>11 <a href="https://github.com/themesberg/flowbite-mcp/releases"><img src="https://img.shields.io/npm/v/flowbite-mcp.svg" alt="Latest Release"></a>12 <a href="https://flowbite.com/docs/getting-started/license/"><img src="https://img.shields.io/badge/license-MIT-blue" alt="License"></a>13</p>1415[](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)1617An [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.1819## MCP Features2021### Tools:2223- **🎨 [NEW] Figma to code** - Copy the Figma node url and generate code ([video demo](https://x.com/zoltanszogyenyi/status/1996953610966405547))24- **🎯 Theme file generator** - Create custom branded themes from any branded hex color2526### Resources:2728- **📦 60+ UI components** - Complete access to the [Flowbite UI components](https://flowbite.com/docs/getting-started/introduction/)29### Server:3031- **🌐 Dual transport support** - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments32- **⚡ Production ready** - Docker support with health checks and monitoring3334## Quickstart3536### Using NPX3738The simplest way to use Flowbite MCP Server:3940```bash41npx flowbite-mcp42```4344### Environment variables4546Currently 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.4748```bash49// other options50"env": {51 "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"52}53```5455You set this variable in your MCP client configuration file.5657## Integration examples5859Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.6061### Claude desktop6263Update the `claude_desktop_config.json` file and add the following configuration:6465```json66{67 "mcpServers": {68 "flowbite": {69 "command": "npx",70 "args": ["-y", "flowbite-mcp"],71 "env": {72 "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"73 }74 }75 }76}77```7879### Cursor editor8081[](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)8283Update the `mcp.json` file and add the following configuration:8485```json86{87 "mcpServers": {88 "flowbite": {89 "command": "npx",90 "args": ["-y", "flowbite-mcp"],91 "env": {92 "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"93 }94 }95 }96}97```9899### Windsurf editor100101Update the `mcp_config.json` file and add the following configuration:102103```json104{105 "mcpServers": {106 "flowbite": {107 "command": "npx",108 "args": ["-y", "flowbite-mcp"],109 "env": {110 "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"111 }112 }113 }114}115```116117### Glama.ai118119<a href="https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp">120 <img width="380" height="200" src="https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp/badge" />121</a>122123## Local Transport Modes124125### Standard I/O (stdio)126127The default mode for local development and CLI integrations:128129```bash130# Start in stdio mode (default)131node build/index.js132133{134 "mcpServers": {135 "flowbite": {136 "command": "node",137 "args": ["/path/to/flowbite-mcp/build/index.js"],138 "env": {139 "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"140 }141 }142 }143}144```145146Learn 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.147148### HTTP server149150HTTP-based transport for production and multi-client scenarios:151152```bash153node build/index.js --mode http --port 3000154```155156This will make the MCP server available at 'http://localhost:3000/mcp'.157158### Local development159160```bash161# Clone the repository162git clone https://github.com/themesberg/flowbite-mcp.git163cd flowbite-mcp164165# Install dependencies166npm install167168# Build the project169npm run build170171# Run in stdio mode (for Claude Desktop, Cursor)172npm start173174# Run inspector175npm run start inspector176177# Run in HTTP server mode (for production/multi-client)178MCP_TRANSPORT_MODE=http npm start179```180181### Production deployment (HTTP Mode)182183For production servers with multiple clients:184185```bash186# Using npx187npx flowbite-mcp --mode http --port 3000188189# Using Docker Compose190docker-compose up -d191192# Health check193curl http://localhost:3000/health194```195196### Hosting variables197198Configure the server behavior with these environment variables:199200```bash201# Transport mode: stdio (default) or http202MCP_TRANSPORT_MODE=http203204# Server port for HTTP mode205MCP_PORT=3000206207# Host binding for HTTP mode208MCP_HOST=0.0.0.0209210# CORS origins (comma-separated)211MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com212```213214## Docker Configuration215216The project includes a production-ready Docker setup with multi-stage builds for optimal performance.217218### Quickstart with Docker219220```bash221# Build and run with Docker Compose (recommended)222docker-compose up -d223224# Check health225curl http://localhost:3000/health226227# View logs228docker-compose logs -f229230# Stop231docker-compose down232```233234### MCP inspector235236Use the MCP Inspector for interactive debugging:237238```bash239npm run inspector240```241242### Logging243244Check server logs for detailed information:245246```bash247# stdio mode logs to console248node build/index.js249250# HTTP mode includes HTTP request logs251MCP_TRANSPORT_MODE=http node build/index.js252```253254## File structure255256```257flowbite-mcp/258├── src/259│ ├── index.ts # Main server entry point260│ └── server-runner.ts # Express HTTP Streamable transport261├── data/262│ ├── components/ # 60+ component markdown files263│ ├── forms/ # Form component documentation264│ ├── typography/ # Typography elements265│ ├── plugins/ # Plugin documentation266│ ├── theme.md # Theme variable reference267│ └── quickstart.md # Getting started guide268├── build/ # Compiled JavaScript output269├── package.json270├── tsconfig.json271└── README.md272```273274## Contributing275276Contributions are welcome! Please feel free to submit a Pull Request.2772781. Fork the repository2792. Create your feature branch (`git checkout -b feature/AmazingFeature`)2803. Commit your changes (`git commit -m 'Add some AmazingFeature'`)2814. Push to the branch (`git push origin feature/AmazingFeature`)2825. Open a Pull Request283284## License285286This project is licensed under the MIT License License - see the [LICENSE](LICENSE) file for details.287288## Credits289290- **[Flowbite](https://flowbite.com/)** - For the amazing Tailwind CSS component library291- **[Anthropic](https://anthropic.com)** - For the Model Context Protocol specification292- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework293294## Resources295296- 🎨 [Flowbite Documentation](https://flowbite.com/docs/getting-started/introduction/)297- 📦 [Flowbite Components](https://flowbite.com/docs/components/accordion/)298- 🌐 [Model Context Protocol](https://modelcontextprotocol.io/)299- 🚀 [Tailwind CSS v4 Docs](https://tailwindcss.com/docs)300- 💬 [GitHub Issues](https://github.com/themesberg/flowbite-mcp/issues)301302## Roadmap303304- [x] Complete component resource access305- [x] AI-powered theme generator306- [x] Dual transport support (stdio + HTTP)307- [ ] Flowbite Pro blocks integration (with license authentication)308- [x] Figma to code conversion tool309- [ ] Enhanced theme customization options310- [ ] Component search and filtering311- [ ] Real-time component preview generation312
Full transparency — inspect the skill content before installing.