Flowbite MCP

Este servidor MCP é a ferramenta oficial que permite trabalhar com o framework UI Flowbite e gerar sites, layouts e temas usando IA.

GitHub
42
Experimente este MCPPatrocinado

Documentação

Flowbite - Tailwind CSS components
Servidor MCP oficial para Flowbite para aproveitar IA na criação de UI e geração de temas

Discord Total Downloads Latest Release License

Install MCP Server

Um servidor MCP que permite que assistentes de IA acessem a biblioteca Flowbite de componentes Tailwind CSS—incluindo elementos de UI, formulários, tipografia e plugins—enquanto oferece um gerador de temas inteligente para criar designs personalizados com marca em ambientes de desenvolvimento orientados por IA.

Recursos do MCP

Ferramentas:

  • 🎨 [NOVO] Figma to code - Copie a URL do nó do Figma e gere código (demonstração em vídeo)
  • 🎯 Gerador de arquivo de tema - Crie temas personalizados com marca a partir de qualquer cor hexadecimal de marca

Recursos:

Servidor:

  • 🌐 Suporte a transporte duplo - I/O padrão (stdio) para CLI ou HTTP Streamable para implantações de servidor
  • ⚡ Pronto para produção - Suporte a Docker com verificações de saúde e monitoramento

Início rápido

Usando NPX

A maneira mais simples de usar o Flowbite MCP Server:

npx flowbite-mcp

Variáveis de ambiente

Atualmente, você só precisa do token de acesso pessoal do Figma se quiser habilitar a ferramenta de geração de código do Figma.

// other options
"env": {
  "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}

Você define essa variável no arquivo de configuração do seu cliente MCP.

Exemplos de integração

Use os seguintes exemplos de configuração para instalar o servidor Flowbite MCP em clientes populares como Cursor, Claude, Windsurf e outros.

Claude desktop

Atualize o arquivo claude_desktop_config.json e adicione a seguinte configuração:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Editor Cursor

Install MCP Server

Atualize o arquivo mcp.json e adicione a seguinte configuração:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Editor Windsurf

Atualize o arquivo mcp_config.json e adicione a seguinte configuração:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Glama.ai

Modos de transporte local

I/O padrão (stdio)

O modo padrão para desenvolvimento local e integrações CLI:

# Start in stdio mode (default)
node build/index.js

{
  "mcpServers": {
    "flowbite": {
      "command": "node",
      "args": ["/path/to/flowbite-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Aprenda como obter o token de acesso pessoal do Figma para habilitar a ferramenta de geração de código do Figma.

Servidor HTTP

Transporte baseado em HTTP para cenários de produção e múltiplos clientes:

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

Isso tornará o servidor MCP disponível em 'http://localhost:3000/mcp'.

Desenvolvimento local

# 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

Implantação em produção (modo HTTP)

# Using npx
npx flowbite-mcp --mode http --port 3000

# Using Docker Compose
docker-compose up -d

# Health check
curl http://localhost:3000/health

Variáveis de hospedagem

Configure o comportamento do servidor com estas variáveis de ambiente:

# 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

Configuração do Docker

O projeto inclui uma configuração Docker pronta para produção com builds em múltiplos estágios para desempenho ideal.

Início rápido com Docker

# 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

Inspetor MCP

Use o Inspetor MCP para depuração interativa:

npm run inspector

Registro de logs

Verifique os logs do servidor para obter informações detalhadas:

# stdio mode logs to console
node build/index.js

# HTTP mode includes HTTP request logs
MCP_TRANSPORT_MODE=http node build/index.js

Estrutura de arquivos

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

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.

  1. Faça um fork do repositório
  2. Crie sua branch de recurso (git checkout -b feature/AmazingFeature)
  3. Faça commit das suas alterações (git commit -m 'Add some AmazingFeature')
  4. Envie para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

Créditos

  • Flowbite - Pela incrível biblioteca de componentes Tailwind CSS
  • Anthropic - Pela especificação do Model Context Protocol
  • Tailwind CSS - Pelo framework CSS utilitário-first

Recursos

Roteiro

  • Acesso completo aos recursos de componentes
  • Gerador de temas com IA
  • Suporte a transporte duplo (stdio + HTTP)
  • Integração com blocos Flowbite Pro (com autenticação de licença)
  • Ferramenta de conversão de Figma para código
  • Opções aprimoradas de personalização de temas
  • Pesquisa e filtragem de componentes
  • Geração de pré-visualização de componentes em tempo real