Flowbite MCP

Este servidor MCP es la herramienta oficial que te permite trabajar con el framework Flowbite UI y generar sitios web, diseños y temas usando IA.

GitHub
42
Prueba este MCPPatrocinado

Documentación

Flowbite - Tailwind CSS components
Servidor MCP oficial de Flowbite para aprovechar la IA en la creación de interfaces de usuario y generación de temas

Discord Total Downloads Latest Release License

Install MCP Server

Un servidor MCP que permite a los asistentes de IA acceder a la biblioteca Flowbite de componentes Tailwind CSS (incluidos elementos de interfaz, formularios, tipografía y plugins), al tiempo que ofrece un generador de temas inteligente para crear diseños personalizados con marca en entornos de desarrollo impulsados por IA.

Características de MCP

Herramientas:

  • 🎨 [NUEVO] Figma a código - Copia la URL del nodo de Figma y genera código (demo en video)
  • 🎯 Generador de archivos de tema - Crea temas personalizados con marca a partir de cualquier color hexadecimal de marca

Recursos:

Servidor:

  • 🌐 Soporte de transporte dual - I/O estándar (stdio) para CLI o HTTP Streamable para despliegues de servidor
  • ⚡ Listo para producción - Soporte de Docker con comprobaciones de salud y monitoreo

Inicio rápido

Usando NPX

La forma más sencilla de usar Flowbite MCP Server:

npx flowbite-mcp

Variables de entorno

Actualmente solo necesitas el token de acceso personal de Figma si quieres habilitar la herramienta de generación de código desde Figma.

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

Configuras esta variable en tu archivo de configuración del cliente MCP.

Ejemplos de integración

Usa los siguientes ejemplos de configuración para instalar el servidor Flowbite MCP en clientes populares como Cursor, Claude, Windsurf y otros.

Claude desktop

Actualiza el archivo claude_desktop_config.json y añade la siguiente configuración:

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

Editor Cursor

Install MCP Server

Actualiza el archivo mcp.json y añade la siguiente configuración:

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

Editor Windsurf

Actualiza el archivo mcp_config.json y añade la siguiente configuración:

{
  "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 estándar (stdio)

El modo predeterminado para desarrollo local e integraciones 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"
      }
    }
  }
}

Aprende cómo obtener el token de acceso personal de Figma para habilitar la herramienta de generación de código desde Figma.

Servidor HTTP

Transporte basado en HTTP para escenarios de producción y múltiples clientes:

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

Esto hará que el servidor MCP esté disponible en 'http://localhost:3000/mcp'.

Desarrollo 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

Despliegue en producción (modo HTTP)

Para servidores de producción con múltiples clientes:

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

# Using Docker Compose
docker-compose up -d

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

Variables de alojamiento

Configura el comportamiento del servidor con estas variables de entorno:

# 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

Configuración de Docker

El proyecto incluye una configuración de Docker lista para producción con compilaciones de múltiples etapas para un rendimiento óptimo.

Inicio rápido con 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

Inspector MCP

Usa el Inspector MCP para depuración interactiva:

npm run inspector

Registro

Consulta los registros del servidor para obtener información detallada:

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

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

Estructura de archivos

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

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar un Pull Request.

  1. Haz un fork del repositorio
  2. Crea tu rama de características (git checkout -b feature/AmazingFeature)
  3. Haz commit de tus cambios (git commit -m 'Add some AmazingFeature')
  4. Haz push a la rama (git push origin feature/AmazingFeature)
  5. Abre un Pull Request

Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.

Créditos

  • Flowbite - Por la increíble biblioteca de componentes Tailwind CSS
  • Anthropic - Por la especificación del Model Context Protocol
  • Tailwind CSS - Por el framework CSS de utilidades primero

Recursos

Hoja de ruta

  • Acceso completo a los recursos de componentes
  • Generador de temas impulsado por IA
  • Soporte de transporte dual (stdio + HTTP)
  • Integración de bloques Flowbite Pro (con autenticación de licencia)
  • Herramienta de conversión de Figma a código
  • Opciones mejoradas de personalización de temas
  • Búsqueda y filtrado de componentes
  • Generación de vista previa de componentes en tiempo real