{"id":34281159,"url":"https://github.com/themesberg/flowbite-mcp","last_synced_at":"2026-02-06T05:06:35.144Z","repository":{"id":327249172,"uuid":"1103268227","full_name":"themesberg/flowbite-mcp","owner":"themesberg","description":"Official MCP server for Flowbite to generate themes and UI components based on Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-12-05T13:21:56.000Z","size":501,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-05T13:34:41.193Z","etag":null,"topics":["css-mcp","flowbite","flowbite-mcp","html-mcp","mcp","mcp-components","mcp-docker","mcp-server","mcp-stdio","ui-mcp"],"latest_commit_sha":null,"homepage":"https://flowbite.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-24T16:40:35.000Z","updated_at":"2025-12-05T13:22:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/themesberg/flowbite-mcp","commit_stats":null,"previous_names":["themesberg/flowbite-mcp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/themesberg/flowbite-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/flowbite-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29151730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-mcp","flowbite","flowbite-mcp","html-mcp","mcp","mcp-components","mcp-docker","mcp-server","mcp-stdio","ui-mcp"],"created_at":"2025-12-16T23:00:37.557Z","updated_at":"2026-02-06T05:06:35.132Z","avatar_url":"https://github.com/themesberg.png","language":"JavaScript","funding_links":[],"categories":["Developer Tools","MCP Servers Directory","📦 Other"],"sub_categories":["Design \u0026 UI","Quick Submission"],"readme":"\u003cp\u003e\n    \u003ca href=\"[https://flowbite.com](https://flowbite.com/docs/getting-started/mcp/)\" \u003e\n      \u003cimg alt=\"Flowbite - Tailwind CSS components\" width=\"350\" src=\"https://flowbite.s3.amazonaws.com/github/flowbite-mcp-github-2.png\"\u003e\n    \u003c/a\u003e\u003cbr\u003e\n    Official MCP server for Flowbite to leverage AI for UI creation and theme generation\n\u003c/p\u003e\n\n\u003cp\u003e\n    \u003ca href=\"https://discord.com/invite/4eeurUVvTy\"\u003e\u003cimg src=\"https://img.shields.io/discord/902911619032576090?color=%237289da\u0026label=Discord\" alt=\"Discord\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/flowbite-mcp\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/flowbite-mcp.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/themesberg/flowbite-mcp/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/flowbite-mcp.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://flowbite.com/docs/getting-started/license/\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=flowbite\u0026config=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\u0026config=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\u003ca href=\"https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp\"\u003e\n  \u003cimg width=\"380\" height=\"200\" src=\"https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp/badge\" /\u003e\n\u003c/a\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Fflowbite-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite-mcp/lists"}