Flowbite MCP

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

The simplest way to use Flowbite MCP Server:

// 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 theclaude_desktop_config.jsonfile and add the following configuration:

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

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

# 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:

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.
- Fork the repository
- Create your feature branch (git checkout -b feature/AmazingFeature)
- Commit your changes (git commit -m 'Add some AmazingFeature')
- Push to the branch (git push origin feature/AmazingFeature)
- Open a Pull Request

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

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.