flowbite

Flowbite MCP Server exposes Flowbite's UI component library to AI-assisted development and includes an integrated theme generator. It offers tools like a Figma-to-code generator (converts a Figma node URL into React-ready code for Flowbite components) and a Theme file generator for creating custom branded themes from hex colors. The server also provides access to Flowbite's 60+ UI components and supports dual transport modes (stdio for CLI usage and an HTTP streamable option for server deployments), making it suitable for local development, editor integrations, and production deployments via Docker. To get started, run the MCP server with npx flowbite-mcp and optionally configure the FIGMA_ACCESS_TOKEN if you plan to use the Figma-to-code tool. You can then connect clients (Cursor, Claude, Windsurf, Glama.ai, etc.) using the standard MCP config format, providing the command, arguments, and any required environment variables. Accessing the HTTP mode will expose an endpoint like http://localhost:3000/mcp for multi-client usage.

Prerequisites:

• Node.js (recommended recent LTS) and npm
• Optional: Docker and Docker Compose for production deployment

Step 1: Install prerequisites

# Ensure Node.js and npm are installed
node -v
npm -v

Step 2: Run the MCP server directly with NPX

# Quick start (no local install required)
npx flowbite-mcp

Step 3: Use environment variables (optional)

# To enable Figma to code generation, set the Figma access token
export FIGMA_ACCESS_TOKEN=YOUR_PERSONAL_FIGMA_ACCESS_TOKEN
npx flowbite-mcp

Step 4: Production deployment (HTTP mode) with Docker Compose (optional)

# Build and run Docker Compose (recommended for production)
docker-compose up -d
# Health check
curl http://localhost:3000/health

Step 5: Verify usage

• In stdio mode, run: npm start (configured in package.json) or node build/index.js
• In HTTP mode, run: MCP_TRANSPORT_MODE=http npm start or use the provided Docker setup

Notes:

• The MCP server can be integrated with various MCP clients by updating their configuration to point to the flowbite.mcp server and providing any required env vars (e.g., FIGMA_ACCESS_TOKEN).

Tips and considerations:

• FIGMA_ACCESS_TOKEN is required only if you plan to use the Figma-to-code tool. Keep tokens secure and do not expose them in public configs.
• In HTTP mode, ensure MCP_PORT and MCP_HOST are set appropriately for your deployment (default port is 3000).
• For production, monitor health via /health endpoint and use docker-compose logs to diagnose issues.
• If you’re using Docker, you can rely on the Dockerfile and multi-stage builds mentioned in the Docker configuration section for optimized performance.
• The server supports two transports: stdio (for CLI and editors) and HTTP streamable transport (for multi-client deployments).
• You can customize CORS origins with MCP_CORS_ORIGINS to allow specific frontends to access the MCP server.