flowbite-mcp — Claude Code MCP server: what it does, how to install
Connects the Flowbite library to your AI assistant to generate Tailwind CSS UI markup and turn Figma nodes into code. Helpful when assembling components from design files.
claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpWhat flowbite-mcp does
This server connects an AI assistant to more than 60 Flowbite UI components. All styling relies on Tailwind CSS. It provides two core tools: a theme palette builder from hex values and a code generator for Figma nodes.
Figma conversion requires setting FIGMA_ACCESS_TOKEN in your client configuration. Without it, generation fails. Static component references and theme generation remain usable without any API keys.
You can run the server locally with stdio via npx flowbite-mcp. For team workflows, Docker runs it in HTTP Streamable mode on port 3000.
What it helps with
- convert Figma nodes into Tailwind CSS markup
- generate branded theme configurations from a hex color
- insert Flowbite UI components and forms into project code
- host a shared interface MCP server in Docker via HTTP
Example prompts for the agent
- Convert the Figma node at
<figma-node-url>into a Tailwind CSS card component - Generate a Flowbite theme configuration using hex color
#1C64F2 - Create a login form using Flowbite UI components
How to install flowbite-mcp
Platform CLI
claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpReplace <…> with your own values
Platform CLI
codex mcp add flowbite-mcp --env FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"flowbite-mcp": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"flowbite-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> flowbite-mcp npx -y flowbite-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about flowbite-mcp
How do I install flowbite-mcp in Claude Code?
Run claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcp. Replace <FIGMA_ACCESS_TOKEN> with your personal Figma access token.
What does flowbite-mcp do?
It gives AI assistants direct access to the Flowbite component library, converting Figma node links into Tailwind CSS markup and building custom color themes.
Is the FIGMA_ACCESS_TOKEN variable required to use flowbite-mcp?
The access token is required only for turning Figma designs into code. Browsing Flowbite components and creating themes work without setting FIGMA_ACCESS_TOKEN.
