{
  "markdown": "<p>\n    <a href=\"[https://flowbite.com](https://flowbite.com/docs/getting-started/mcp/)\" >\n      <img alt=\"Flowbite - Tailwind CSS components\" width=\"350\" src=\"https://flowbite.s3.amazonaws.com/github/flowbite-mcp-github-2.png\">\n    </a><br>\n    Official MCP server for Flowbite to leverage AI for UI creation and theme generation\n</p>\n\n<p>\n    <a href=\"https://discord.com/invite/4eeurUVvTy\"><img src=\"https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord\" alt=\"Discord\"></a>\n    <a href=\"https://www.npmjs.com/package/flowbite-mcp\"><img src=\"https://img.shields.io/npm/dt/flowbite-mcp.svg\" alt=\"Total Downloads\"></a>\n    <a href=\"https://github.com/themesberg/flowbite-mcp/releases\"><img src=\"https://img.shields.io/npm/v/flowbite-mcp.svg\" alt=\"Latest Release\"></a>\n    <a href=\"https://flowbite.com/docs/getting-started/license/\"><img src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"License\"></a>\n</p>\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)\n\nAn [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.\n\n## MCP Features\n\n### Tools:\n\n- **🎨 [NEW] Figma to code** - Copy the Figma node url and generate code ([video demo](https://x.com/zoltanszogyenyi/status/1996953610966405547))\n- **🎯 Theme file generator** - Create custom branded themes from any branded hex color\n\n### Resources:\n\n- **📦 60+ UI components** - Complete access to the [Flowbite UI components](https://flowbite.com/docs/getting-started/introduction/)\n### Server:\n\n- **🌐 Dual transport support** - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments\n- **⚡ Production ready** - Docker support with health checks and monitoring\n\n## Quickstart\n\n### Using NPX\n\nThe simplest way to use Flowbite MCP Server:\n\n```bash\nnpx flowbite-mcp\n```\n\n### Environment variables\n\nCurrently 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. \n\n```bash\n// other options\n\"env\": {\n  \"FIGMA_ACCESS_TOKEN\": \"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"\n}\n```\n\nYou set this variable in your MCP client configuration file.\n\n## Integration examples\n\nUse the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.\n\n### Claude desktop\n\nUpdate the `claude_desktop_config.json` file and add the following configuration:\n\n```json\n{\n  \"mcpServers\": {\n    \"flowbite\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"flowbite-mcp\"],\n      \"env\": {\n        \"FIGMA_ACCESS_TOKEN\": \"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"\n      }\n    }\n  }\n}\n```\n\n### Cursor editor\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)\n\nUpdate the `mcp.json` file and add the following configuration:\n\n```json\n{\n  \"mcpServers\": {\n    \"flowbite\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"flowbite-mcp\"],\n      \"env\": {\n        \"FIGMA_ACCESS_TOKEN\": \"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"\n      }\n    }\n  }\n}\n```\n\n### Windsurf editor\n\nUpdate the `mcp_config.json` file and add the following configuration:\n\n```json\n{\n  \"mcpServers\": {\n    \"flowbite\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"flowbite-mcp\"],\n      \"env\": {\n        \"FIGMA_ACCESS_TOKEN\": \"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"\n      }\n    }\n  }\n}\n```\n\n### Glama.ai\n\n<a href=\"https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp\">\n  <img width=\"380\" height=\"200\" src=\"https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp/badge\" />\n</a>\n\n## Local Transport Modes\n\n### Standard I/O (stdio)\n\nThe default mode for local development and CLI integrations:\n\n```bash\n# Start in stdio mode (default)\nnode build/index.js\n\n{\n  \"mcpServers\": {\n    \"flowbite\": {\n      \"command\": \"node\",\n      \"args\": [\"/path/to/flowbite-mcp/build/index.js\"],\n      \"env\": {\n        \"FIGMA_ACCESS_TOKEN\": \"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"\n      }\n    }\n  }\n}\n```\n\nLearn 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.\n\n### HTTP server\n\nHTTP-based transport for production and multi-client scenarios:\n\n```bash\nnode build/index.js --mode http --port 3000\n```\n\nThis will make the MCP server available at 'http://localhost:3000/mcp'.\n\n### Local development\n\n```bash\n# Clone the repository\ngit clone https://github.com/themesberg/flowbite-mcp.git\ncd flowbite-mcp\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run in stdio mode (for Claude Desktop, Cursor)\nnpm start\n\n# Run inspector\nnpm run start inspector\n\n# Run in HTTP server mode (for production/multi-client)\nMCP_TRANSPORT_MODE=http npm start\n```\n\n### Production deployment (HTTP Mode)\n\nFor production servers with multiple clients:\n\n```bash\n# Using npx\nnpx flowbite-mcp --mode http --port 3000\n\n# Using Docker Compose\ndocker-compose up -d\n\n# Health check\ncurl http://localhost:3000/health\n```\n\n### Hosting variables\n\nConfigure the server behavior with these environment variables:\n\n```bash\n# Transport mode: stdio (default) or http\nMCP_TRANSPORT_MODE=http\n\n# Server port for HTTP mode\nMCP_PORT=3000\n\n# Host binding for HTTP mode\nMCP_HOST=0.0.0.0\n\n# CORS origins (comma-separated)\nMCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com\n```\n\n## Docker Configuration\n\nThe project includes a production-ready Docker setup with multi-stage builds for optimal performance.\n\n### Quickstart with Docker\n\n```bash\n# Build and run with Docker Compose (recommended)\ndocker-compose up -d\n\n# Check health\ncurl http://localhost:3000/health\n\n# View logs\ndocker-compose logs -f\n\n# Stop\ndocker-compose down\n```\n\n### MCP inspector\n\nUse the MCP Inspector for interactive debugging:\n\n```bash\nnpm run inspector\n```\n\n### Logging\n\nCheck server logs for detailed information:\n\n```bash\n# stdio mode logs to console\nnode build/index.js\n\n# HTTP mode includes HTTP request logs\nMCP_TRANSPORT_MODE=http node build/index.js\n```\n\n## File structure\n\n```\nflowbite-mcp/\n├── src/\n│   ├── index.ts              # Main server entry point\n│   └── server-runner.ts      # Express HTTP Streamable transport\n├── data/\n│   ├── components/           # 60+ component markdown files\n│   ├── forms/                # Form component documentation\n│   ├── typography/           # Typography elements\n│   ├── plugins/              # Plugin documentation\n│   ├── theme.md              # Theme variable reference\n│   └── quickstart.md         # Getting started guide\n├── build/                    # Compiled JavaScript output\n├── package.json\n├── tsconfig.json\n└── README.md\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License License - see the [LICENSE](LICENSE) file for details.\n\n## Credits\n\n- **[Flowbite](https://flowbite.com/)** - For the amazing Tailwind CSS component library\n- **[Anthropic](https://anthropic.com)** - For the Model Context Protocol specification\n- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework\n\n## Resources\n\n- 🎨 [Flowbite Documentation](https://flowbite.com/docs/getting-started/introduction/)\n- 📦 [Flowbite Components](https://flowbite.com/docs/components/accordion/)\n- 🌐 [Model Context Protocol](https://modelcontextprotocol.io/)\n- 🚀 [Tailwind CSS v4 Docs](https://tailwindcss.com/docs)\n- 💬 [GitHub Issues](https://github.com/themesberg/flowbite-mcp/issues)\n\n## Roadmap\n\n- [x] Complete component resource access\n- [x] AI-powered theme generator\n- [x] Dual transport support (stdio + HTTP)\n- [ ] Flowbite Pro blocks integration (with license authentication)\n- [x] Figma to code conversion tool\n- [ ] Enhanced theme customization options\n- [ ] Component search and filtering\n- [ ] Real-time component preview generation\n",
  "bytes": 8758,
  "sha": "4bf40564d7c5cceb3ae0b8ed6e97880212c755e7d054622d9768e98f7ef719b2",
  "repo_slug": "themesberg/flowbite-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_themesberg_flowbite_mcp_8aee038c/readme"
}