Layro MCP

npx add-mcp 'https://layropro.com/api/mcp'

Deja de pedirle a la IA que reconstruya tu interfaz.

Dale a Claude Code, Cursor y otras herramientas de codificación con IA acceso a componentes de interfaz de React reutilizables a través de Layro MCP. Dedica menos tiempo a recrear patrones de interfaz comunes y a corregir detalles repetitivos, y más tiempo a construir tu producto.

Componentes gratuitos con código fuente completo. Una cuenta gratuita, sin tarjeta.

Esperando a tu herramienta de IA

Esperando a tu herramienta de IA

Esperando a tu herramienta de IA

Layro MCP conectado

layro·search_components("billing")

→ 9 componentes encontrados

layro·get_component_code("plan-picker")

→ Plan Picker instalado

layro·get_component_code("invoice-history")

→ Invoice History instalado

Listo. Ambos componentes están en components/ui, integrados en la página, en modo claro y oscuro.

1 prompt · 0 rondas de correcciónListo para publicar

Esperando a tu herramienta de IA

Esperando a tu herramienta de IA

Esperando a tu herramienta de IA

Por qué Layro

Deja de pagar créditos para arreglar la interfaz.

¿Estás construyendo un producto con Claude Code, Cursor o Codex? Cada pantalla suele costar de 1 a 2 horas de prompts, ajustes y reconstrucción, y hasta 6 veces los créditos que debería. Con Layro MCP tu agente llama a un componente listo y bien diseñado y lo coloca directamente en tu producto.

Calculadora de créditos

Calcula cuánto ahorras.

Cada "arregla el espaciado", "color incorrecto", "título más pequeño" es otra ronda del agente, y otra ronda de créditos. Con Layro MCP tu agente comienza desde un componente terminado.

30

5150

6 rondas

Espaciado, color, tipografía, estados, modo oscuro…

2 rondas15 rondas

Nivel del modelo

Modelos de codificación cotidianos · $3 / $15 por millón de tokens

Lo que gastas en 30 días

Sin Layro180 rondas$25.65 · 12 h

Con Layro MCP30 rondas$4.28 · 2.0 h

Ahorras en 30 días

$21.37

Tiempo ahorrado

10 h

Tokens ahorrados en 30 días

5.6M

Layro Lifetime

$149 pago único

Estimación solamente. Asume unos 35K tokens de entrada y 2.5K de salida por ronda del agente a tarifas típicas de API para el nivel, y 4 minutos por ronda. En Cursor, Copilot o un plan de Claude, los mismos tokens salen de tus límites de uso.

Crear la interfaz desde cero

1. 1Escribe el prompt de la pantalla
2. 2Arregla el espaciado
3. 3Arregla los colores y la tipografía
4. 4Añade estados de hover, focus y carga
5. 5Haz que el modo oscuro funcione
6. 6Arregla lo que eso rompió

Unas 6 rondas y de 1 a 2 horas por pantalla

Con Layro MCP

1. 1Pide la pantalla
2. 2Tu agente llama a Layro MCP
3. 3Un componente terminado llega a tu código

1 ronda, el componente llega terminado

Layro MCP

Cómo funciona Layro con tu herramienta de IA Nuevo

Conéctate una vez. Claude Code, Cursor, VS Code, Codex y otras herramientas MCP pueden entonces buscar en cada componente de Layro, leer sus props e instalar el adecuado en tu proyecto, en lugar de escribirlo desde cero.

1 · Conéctate una vez

claude mcp add --transport http layro https://layropro.com/api/mcp

2 · Pide lo que necesitas

Build a billing page with Layro components.

Claude CodeCursorVS CodeCodexWindsurfGemini CLIAntigravity

Conectar MCP

En tu herramienta de IA

Nuevo

1. TúAñade un selector de rango de fechas a la página de ajustes.
2. MCPsearch_components("date range picker") → date-picker
3. MCPget_installation(date-picker) → npx shadcn@latest add …/r/date-picker
4. IAInstaló el Date Picker de Layro en components/ui y lo conectó a tu formulario, con modo de rango activado.

Los 112 componentes, con props, paquetes y uso. Los gratuitos necesitan el token de una cuenta gratuita; los Pro necesitan acceso de por vida.

Componentes

Cada pantalla de producto, ya construida.

Componentes de interfaz de React y Tailwind listos para producción para chat de IA, agentes, paneles, tablas, facturación, permisos y más. Accesibles, en modo claro y oscuro, y listos para pegar.

[

AI Chat12 componentes

Una ventana de chat, respuestas en streaming, caja de prompts e historial de conversación.

](https://layropro.com/components/category/ai-chat)[

AI Agent15 componentes

Estado de ejecución, planes, llamadas a herramientas, aprobaciones, historial y un espacio de trabajo completo para agentes.

](https://layropro.com/components/category/ai-agent)[

Data Tables4 componentes

Celdas editables, constructor de filtros, vistas guardadas e importación de CSV.

](https://layropro.com/components/category/data-tables)[

Documents10 componentes

Visores, flujos de firma, pistas de auditoría e historial de versiones.

](https://layropro.com/components/category/documents)[

Workspace10 componentes

Miembros, roles, permisos y solicitudes de acceso.

](https://layropro.com/components/category/workspace)[

Billing9 componentes

Planes, facturas, métodos de pago y uso.

](https://layropro.com/components/category/billing)[

Productivity2 componentes

Un tablero kanban y un panel de notificaciones.

](https://layropro.com/components/category/productivity)[

Data & feedback8 componentes

Tablas, gráficos, insignias y los estados intermedios.

](https://layropro.com/components/category/data-and-feedback)[

Forms13 componentes

Campos, entradas, selectores y pickers en una misma escala de control.

](https://layropro.com/components/category/forms)[

Overlays7 componentes

Diálogos, paneles laterales, popovers, menús y una paleta de comandos.

](https://layropro.com/components/category/overlays)[

Auth3 componentes

Inicio de sesión, registro, códigos de un solo uso y fortaleza de contraseña.

](https://layropro.com/components/category/auth)

Plantillas

Aplicaciones completas, listas para hacerlas tuyas.

Plantillas de React y Next.js listas para producción para paneles, productos SaaS y aplicaciones web modernas. Abre la demo en vivo antes de comprar.

Abrir la demo

Settle — Operaciones de pago

Plantilla · 8 pantallas

Incluida

Ocho pantallas para el equipo que cierra el día: liquidación, conciliación, pagos y disputas.

Cómo funciona

Del prompt a la producción en tres pasos.

A través de tu herramienta de IA o manualmente. Sin envoltorios ni runtime: solo el código fuente en tu repositorio, listo para editar.

1. Pide o instala

   Indica a tu herramienta de IA qué componente quieres, o ejecuta un comando tú mismo. La CLI de shadcn escribe el archivo en tu proyecto e instala lo que necesita.

   npx shadcn@latest add @layro/data-table
   

2. Compón

   Un archivo, props tipadas, los colores de tu tema. Tu agente lee las props y conecta tus datos; tú lo reestilizas con Tailwind como cualquier código que escribas.

   <DataTable columns={columns} data={rows} />
   

3. Publica

   El soporte de teclado, las etiquetas para lectores de pantalla y los modos claro y oscuro ya están hechos. Nada se comunica con servidores externos.

   npm run build
   

Precios

Empieza gratis. Paga una vez por todo.

62 componentes son gratuitos con una cuenta, para que puedas evaluar Layro en tu propio proyecto primero. Pro es un solo pago por los 112 componentes a la vez, cada plantilla y cada futura versión.

Free

$0

62 componentes, gratuitos con una cuenta.

Explorar componentes gratuitos

Empieza aquí:

• 62 componentes con su código fuente completo
• Copia o instala tantos como quieras
• Prueba cada vista previa, cuando quieras
• Una cuenta gratuita, sin tarjeta
• Instala con la CLI de shadcn, o copia el archivo
• La misma calidad de código, estados y accesibilidad que Pro

Lo que obtienes:

• Los 112 componentes: los 62 gratuitos y 50 Pro
• La plantilla Settle, y todas las posteriores
• Todo abierto a la vez, sin límite diario
• Acceso de por vida a todos los componentes y futuras actualizaciones
• Un comando para instalar con la CLI de shadcn
• Diseñado para herramientas de codificación con IA: Claude Code, Cursor, Codex y más
• Soporte por correo de la persona que escribió el código
• Construido con React, TypeScript y Tailwind CSS v4

Sin suscripción. El pago y los impuestos los gestiona Lemon Squeezy.

Preguntas frecuentes

Preguntas frecuentes

Todo lo que vale la pena saber antes de comprar.

(01)¿Qué obtengo cuando compro?

Cada componente de este sitio con su código fuente, cada plantilla y todo lo que se publique después de tu compra. Inicias sesión, pagas una vez y tu cuenta queda desbloqueada: copia el código de cualquier página de componente, instálalo con la CLI de shadcn o descarga los archivos.

(02)¿Qué es gratuito y qué es Pro?

62 componentes son gratuitos, con su código fuente completo. Cualquiera puede probar las vistas previas; para ver el código, copiarlo, descargarlo o instalarlo, inicia sesión con una cuenta gratuita. Pro es un solo pago por los 112: los otros 50 componentes (los conjuntos de agente de IA, tabla de datos, documentos, facturación y espacio de trabajo), cada plantilla y todo lo que se publique después.

(03)¿Para quién es?

Para desarrolladores que construyen con herramientas de codificación con IA como Claude Code, Cursor, Codex, Windsurf o GitHub Copilot, y quieren que cada pantalla que produzca la herramienta se vea y se comporte como un solo producto. Los desarrolladores independientes y los equipos pequeños que lanzan un SaaS, un producto de IA o una herramienta interna lo usan de la misma manera.

(04)¿Necesito una herramienta de IA para usar Layro?

No. Cada componente es código fuente de React y TypeScript en tu propio repositorio. Instálalo con un comando o copia el archivo, y edítalo como código que escribiste. Está diseñado para que una herramienta de IA lo use bien, no para que lo necesite.

(05)¿Qué tipo de aplicaciones puedo construir?

Cualquier cosa en React con Tailwind CSS v4: Next.js, Vite, Remix. Usa los componentes en proyectos personales y comerciales ilimitados, incluido trabajo para clientes. Lo único que no puedes hacer es revender o republicar el código fuente en sí.

(06)¿Es una suscripción?

No. Es un solo pago. No hay nada que renovar ni que cancelar, y el código que has tomado sigue siendo tuyo.

(07)¿Los componentes funcionan con Claude Code, Cursor y otros agentes de IA?

Sí, para eso están construidos. Cada componente es un archivo autocontenido con props tipadas y estados documentados, para que un agente pueda leerlo y colocarlo sin adivinar. Cada página tiene un botón Copiar prompt con el comando de instalación, las props y los errores que suelen cometer los asistentes, y el registro instala cualquier componente por nombre.

(08)¿Ofrecéis reembolsos?

No. El código fuente no puede devolverse una vez descargado, por lo que todas las ventas son finales. 62 componentes son gratuitos con su código fuente completo, y cada uno de pago tiene una vista previa en vivo, para que puedas probar antes de pagar. Si te cobran dos veces o no puedes acceder, lo solucionamos.

(09)¿Cómo obtengo ayuda?

Escribe a layropro26@gmail.com. Una persona construye Layro y responde el correo, por lo que una respuesta puede tardar un día, pero viene de la persona que escribió el código.