Servidor MCP de Looba

Un servidor MCP que brinda a los asistentes de IA acceso de solo lectura a Looba, una plataforma comunitaria de fragmentos de interfaz de usuario e inspiración de diseño.

No se requiere clave de API. No se necesitan credenciales de base de datos. El servidor llama a la API pública de Looba a través de HTTPS.

Más información

Para documentación adicional de MCP, ejemplos de uso y actualizaciones, visita looba.dev/mcp.

Related MCP server: shadcndashboard-mcp

Instalación

npx (sin instalación necesaria)

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

Todos los métodos requieren Node.js 18+ instalado en tu máquina.

Herramientas

detect_frontend_context

Cuando Looba MCP está activo, la IA llama automáticamente a detect_frontend_context al inicio de una sesión. Busca señales de frontend:

• Dependencias — React, Vue, Svelte, Next.js, Angular, Astro, Remix, SolidJS, Gatsby, Lit, Preact…

• Archivos de configuración — vite.config.ts, tailwind.config.js, next.config.js, angular.json, astro.config.mjs…

• Extensiones de archivo — .jsx, .tsx, .vue, .svelte, .astro en src/, app/, pages/, components/

Si se detecta un proyecto de frontend, la IA usa Looba por defecto para cualquier solicitud de componente de interfaz de usuario, en lugar de escribir código desde cero.

Servidores locales vs remotos

La herramienta acepta dos entradas opcionales:

Esto es importante porque Looba MCP también está alojado de forma remota en mcp.looba.dev. Un servidor remoto no tiene acceso a tu sistema de archivos, por lo que directory por sí solo no le dice nada.

Cuando la herramienta no puede inspeccionar el proyecto, informa ? UNKNOWN y pide al llamante que reintente con packageJson; nunca informa con confianza "no es un proyecto de frontend", porque un falso negativo desactivaría Looba silenciosamente.

propose_snippets

Cuando el usuario solicita un elemento de interfaz de usuario, la IA llama a propose_snippets en lugar de escribir código de inmediato. Busca en Looba y devuelve 3 opciones con sus enlaces looba.dev. El usuario elige una (1, 2 o 3) y la IA la integra mediante integrate_post.

Ejemplo de flujo:

Usuario: "Añade un spinner de carga animado a mi aplicación React" → La IA llama a propose_snippets con query="loading spinner" y snippet_type="react" → Muestra 3 opciones con enlaces looba.dev → El usuario elige la opción 2 → La IA llama a integrate_post con el slug elegido y el contexto del proyecto

integrate_post

La herramienta integrate_post está diseñada para cuando quieres añadir un fragmento de Looba directamente a tu código. Obtiene el código completo y lo devuelve con una lista de verificación de adaptación detallada para que el asistente de IA pueda:

• Renombrar clases CSS para que coincidan con tu convención de nombres (BEM, camelCase, módulos CSS...)

• Reemplazar colores/espaciados codificados con tus variables CSS o tokens de diseño

• Convertir entre frameworks (HTML vanilla a JSX de React, CSS a utilidades de Tailwind...)

• Limitar los estilos para evitar conflictos con tu CSS global

• Añadir importaciones adecuadas y seguir tus patrones de componentes

Ejemplo de prompt:

"Usa integrate_post para añadir el fragmento animated-circle-loaders-html-css-10 a mi proyecto Next.js que usa Tailwind y variables CSS"

La IA obtendrá el fragmento, leerá el contexto de tu proyecto y producirá código adaptado listo para pegar.

Tipos de fragmentos admitidos

Configuración

URL remota de MCP

Si tu cliente admite servidores MCP basados en URL, usa:

• URL: https://mcp.looba.dev

• Token Bearer: no requerido

• Cabeceras personalizadas: no requeridas

Usa el endpoint raíz (https://mcp.looba.dev) a menos que tu proxy asigne explícitamente otra ruta.

Claude Code

Añade a tu .mcp.json del proyecto o a ~/.claude/settings.json:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Cursor

Ve a Settings > MCP Servers > Add Server:

• Nombre: looba

• Comando: npx -y looba-mcp

Windsurf

Añade a ~/.windsurf/mcp.json:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Usando instalación con pip o git

Si instalaste mediante pip o clonado de git, usa looba-mcp o node directamente:

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

O con clonado de git:

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

Ejemplos

Una vez conectado, pide a tu asistente de IA cosas como:

• "Añade una tarjeta de glassmorphism a mi proyecto Next.js" (la IA propone 3 opciones de Looba)

• "Necesito una barra de navegación con animaciones para mi sitio con Tailwind" (la IA propone 3 opciones de Looba)

• "Muéstrame los fragmentos CSS más populares en Looba"

• "Encuentra publicaciones de Looba etiquetadas con animation"

• "Obtén el código de la publicación animated-circle-loaders-html-css-10"

• "Lista todas las publicaciones de @Frontend-snippet-Bot"

• "Integra el fragmento focus-trapped-navigation-controller en mi proyecto React usando módulos CSS"

Cada respuesta incluye URL de origen, autor y licencia para que los asistentes de IA siempre citen correctamente.

Despliegue en Cloudflare Workers

mcp.looba.dev se ejecuta como un Cloudflare Worker. Sirve las mismas siete herramientas a través de HTTP Streamable, sin estado, y sin Durable Object — las herramientas están vinculadas a la red, por lo que esto se ajusta al plan gratuito de Workers. Anteriormente se ejecutaba como un servicio systemd detrás de nginx en un VPS; esa pila se ha eliminado.

Dos archivos lo controlan: worker.js (el punto de entrada fetch) y wrangler.jsonc. index.js es compartido por ambos transportes y no necesita bifurcación.

1. Establece el secreto — haz esto primero

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

Esto no es opcional. propose_snippets genera un token firmado con HMAC que integrate_post verifica. Sin un secreto explícito, index.js recurre a randomBytes(32) por proceso — y en un Worker sin estado, cada aislado obtiene uno diferente, por lo que las dos llamadas no coinciden cuando caen en aislados distintos. El fallo es intermitente y reporta un "token signature is invalid" falso.

Cualquier cadena aleatoria larga funciona, por ejemplo openssl rand -hex 32.

2a. Desplegar desde Git (Workers Builds)

Conecta este repositorio en el panel de Cloudflare y luego establece:

Cada push a main vuelve a desplegar.

2b. O desplegar desde tu máquina

npm install
npm run deploy

3. Adjunta el dominio

Añade mcp.looba.dev como Custom Domain en el Worker. looba.dev ya está en los servidores de nombres de Cloudflare, por lo que no se necesita ningún cambio de DNS.

El Worker responde en la ruta raíz (route: "/" en worker.js), coincidiendo con el endpoint existente. createMcpHandler usa por defecto /mcp, por lo que esa configuración no debe eliminarse o todos los clientes existentes se romperán.

4. Verifica antes de cambiar el tráfico

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

Más allá de initialize y tools/list, prueba el par que depende del secreto compartido: genera un token con propose_snippets, reinicia el Worker y luego gástalo con integrate_post. Si el token aún se verifica después de un reinicio, el secreto se está leyendo desde la configuración en lugar de regenerarse por proceso.

Licencia

MIT