Layro MCP

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

Pare de pedir para a IA reconstruir sua interface.

Dê ao Claude Code, Cursor e outras ferramentas de codificação com IA acesso a componentes de UI React reutilizáveis através do Layro MCP. Gaste menos tempo recriando padrões de UI comuns e corrigindo detalhes repetitivos de interface, e mais tempo construindo seu produto.

Componentes gratuitos com código-fonte completo. Uma conta gratuita, sem cartão.

Aguardando sua ferramenta de IA

Aguardando sua ferramenta de IA

Aguardando sua ferramenta 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

Pronto. Ambos os componentes estão em components/ui, integrados à página, claro e escuro.

1 prompt · 0 rodadas de correçãoPronto para enviar

Aguardando sua ferramenta de IA

Aguardando sua ferramenta de IA

Aguardando sua ferramenta de IA

Por que Layro

Pare de pagar créditos para corrigir UI.

Construindo um produto com Claude Code, Cursor ou Codex? Cada tela normalmente custa de 1 a 2 horas de prompts, ajustes e reconstruções, e até 6× os créditos que deveria. Com o Layro MCP, seu agente chama um componente pronto e bem projetado e o coloca diretamente no seu produto.

Calculadora de créditos

Calcule o que você economiza.

Cada "corrija o espaçamento", "cor errada", "título menor" é outra rodada do agente, e outra rodada de créditos. Com o Layro MCP, seu agente começa a partir de um componente finalizado.

30

5150

6 rodadas

Espaçamento, cor, tipografia, estados, modo escuro…

2 rodadas15 rodadas

Nível do modelo

Modelos de codificação mais comuns · $3 / $15 por milhão de tokens

O que você gasta em 30 dias

Sem Layro180 rodadas$25,65 · 12 h

Com Layro MCP30 rodadas$4,28 · 2,0 h

Você economiza em 30 dias

$21,37

Tempo economizado

10 h

Tokens economizados em 30 dias

5,6M

Layro Lifetime

$149 pagamento único

Estimativa apenas. Assume cerca de 35K tokens de entrada e 2,5K de saída por rodada do agente, com tarifas típicas de API para o nível, e 4 minutos por rodada. No Cursor, Copilot ou em um plano Claude, os mesmos tokens saem dos seus limites de uso.

Criando UI do zero com prompts

1. 1Crie a tela com prompt
2. 2Corrija o espaçamento
3. 3Corrija as cores e a tipografia
4. 4Adicione estados de hover, foco e carregamento
5. 5Faça o modo escuro funcionar
6. 6Corrija o que isso quebrou

Cerca de 6 rodadas e 1 a 2 horas por tela

Com Layro MCP

1. 1Peça a tela
2. 2Seu agente chama o Layro MCP
3. 3Um componente finalizado chega ao seu código

1 rodada, o componente chega finalizado

Layro MCP

Como o Layro funciona com sua ferramenta de IA Novo

Conecte uma vez. Claude Code, Cursor, VS Code, Codex e outras ferramentas MCP podem então pesquisar cada componente do Layro, ler suas props e instalar o certo no seu projeto, em vez de escrevê-lo do zero.

1 · Conecte uma vez

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

2 · Peça o que você precisa

Build a billing page with Layro components.

Claude CodeCursorVS CodeCodexWindsurfGemini CLIAntigravity

Conectar MCP

Na sua ferramenta de IA

Novo

1. VocêAdicione um seletor de intervalo de datas à página de configurações.
2. MCPsearch_components("date range picker") → date-picker
3. MCPget_installation(date-picker) → npx shadcn@latest add …/r/date-picker
4. IAInstalou o Date Picker do Layro em components/ui e o integrou ao seu formulário, com modo de intervalo ativado.

Todos os 112 componentes, com props, pacotes e uso. Os gratuitos precisam do token de uma conta gratuita; os Pro precisam de acesso vitalício.

Componentes

Cada tela de produto, já construída.

Componentes de UI React e Tailwind prontos para produção para chat de IA, agentes, painéis, tabelas, cobrança, permissões e muito mais. Acessíveis, claro e escuro, e prontos para colar.

[

Chat de IA12 componentes

Uma janela de chat, respostas em streaming, caixa de prompt e histórico de conversa.

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

Agente de IA15 componentes

Status de execução, planos, chamadas de ferramentas, aprovações, histórico e um workspace completo de agente.

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

Tabelas de dados4 componentes

Células editáveis, construtor de filtros, visualizações salvas e importação de CSV.

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

Documentos10 componentes

Visualizadores, fluxos de assinatura, trilhas de auditoria e histórico de versões.

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

Workspace10 componentes

Membros, funções, permissões e solicitações de acesso.

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

Cobrança9 componentes

Planos, faturas, métodos de pagamento e uso.

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

Produtividade2 componentes

Um quadro kanban e um painel de notificações.

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

Dados e feedback8 componentes

Tabelas, gráficos, badges e os estados entre eles.

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

Formulários13 componentes

Campos, entradas, seletores e pickers em uma única escala de controle.

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

Overlays7 componentes

Diálogos, drawers, popovers, menus e uma paleta de comandos.

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

Autenticação3 componentes

Entrar, cadastrar, códigos de uso único e força de senha.

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

Modelos

Aplicações completas, prontas para serem suas.

Modelos React e Next.js prontos para produção para painéis, produtos SaaS e aplicações web modernas. Abra a demonstração ao vivo antes de comprar.

Abrir a demonstração

Settle — Operações de Pagamento

Modelo · 8 telas

Incluído

Oito telas para o time que fecha o dia: liquidação, conciliação, pagamentos e disputas.

Como funciona

Do prompt à produção em três etapas.

Através da sua ferramenta de IA ou manualmente. Sem wrappers e sem runtime: apenas o código-fonte no seu repositório, pronto para editar.

1. Peça ou instale

   Informe à sua ferramenta de IA qual componente você quer, ou execute um comando você mesmo. A CLI do shadcn grava o arquivo no seu projeto e instala o que for necessário.

   npx shadcn@latest add @layro/data-table
   

2. Componha

   Um arquivo, props tipadas, as cores do seu tema. Seu agente lê as props e conecta seus dados; você reestiliza com Tailwind como qualquer código que escreveu.

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

3. Envie

   Suporte a teclado, rótulos para leitores de tela, claro e escuro já estão prontos. Nada envia dados para casa.

   npm run build
   

Preços

Comece grátis. Pague uma vez por tudo.

62 componentes são gratuitos com uma conta, para você avaliar o Layro no seu próprio projeto primeiro. Pro é um único pagamento por todos os 112 componentes de uma vez, todos os modelos e cada lançamento futuro.

Grátis

$0

62 componentes, gratuitos com uma conta.

Explorar componentes gratuitos

Comece aqui:

• 62 componentes com código-fonte completo
• Copie ou instale quantos quiser
• Experimente todas as prévias, a qualquer momento
• Uma conta gratuita, sem cartão
• Instale com a CLI do shadcn, ou copie o arquivo
• A mesma qualidade de código, estados e acessibilidade do Pro

O que você recebe:

• Todos os 112 componentes: os 62 gratuitos e 50 Pro
• O modelo Settle, e todos os que vierem depois
• Tudo aberto de uma vez, sem limite diário
• Acesso vitalício a todos os componentes e atualizações futuras
• Um comando para instalar com a CLI do shadcn
• Feito para ferramentas de codificação com IA: Claude Code, Cursor, Codex e mais
• Suporte por e-mail da pessoa que escreveu o código
• Construído com React, TypeScript e Tailwind CSS v4

Sem assinatura. Pagamento e impostos são processados pela Lemon Squeezy.

FAQ

Perguntas frequentes

Tudo o que vale a pena saber antes de comprar.

(01)O que recebo quando compro?

Cada componente deste site com seu código-fonte, todos os modelos e tudo o que for lançado depois da sua compra. Você entra, paga uma vez, e sua conta é desbloqueada: copie o código de qualquer página de componente, instale com a CLI do shadcn ou baixe os arquivos.

(02)O que é gratuito e o que é Pro?

62 componentes são gratuitos, com código-fonte completo. Qualquer pessoa pode experimentar as prévias; para ver o código, copiar, baixar ou instalar um, entre com uma conta gratuita. Pro é um único pagamento por todos os 112: os outros 50 componentes (os conjuntos de agente de IA, tabela de dados, documentos, cobrança e workspace), todos os modelos e tudo o que for lançado depois.

(03)Para quem é?

Desenvolvedores que criam com ferramentas de codificação com IA como Claude Code, Cursor, Codex, Windsurf ou GitHub Copilot, e querem que cada tela produzida pela ferramenta pareça e se comporte como um único produto. Indie hackers e pequenos times que lançam um SaaS, um produto de IA ou uma ferramenta interna usam da mesma forma.

(04)Preciso de uma ferramenta de IA para usar o Layro?

Não. Cada componente é código-fonte React e TypeScript puro no seu próprio repositório. Instale com um comando ou copie o arquivo, e edite como código que você escreveu. Ele foi projetado para que uma ferramenta de IA o use bem, não para que precise de uma.

(05)Que tipo de aplicações posso criar?

Qualquer coisa em React com Tailwind CSS v4: Next.js, Vite, Remix. Use os componentes em projetos pessoais e comerciais ilimitados, incluindo trabalho para clientes. A única coisa que você não pode fazer é revender ou republicar o código-fonte em si.

(06)Isso é uma assinatura?

Não. É um único pagamento. Não há nada para renovar e nada para cancelar, e o código que você já pegou continua sendo seu.

(07)Os componentes funcionam com Claude Code, Cursor e outros agentes de IA?

Sim, é para isso que eles foram feitos. Cada componente é um arquivo autocontido com props tipadas e estados documentados, para que um agente possa lê-lo e posicioná-lo sem adivinhar. Cada página tem um botão Copiar prompt com o comando de instalação, as props e os erros que assistentes costumam cometer, e o registro instala qualquer componente pelo nome.

(08)Vocês oferecem reembolsos?

Não. Código-fonte não pode ser devolvido depois de baixado, então todas as vendas são finais. 62 componentes são gratuitos com código-fonte completo, e cada um pago tem uma prévia ao vivo, para você experimentar antes de pagar. Se você for cobrado duas vezes ou não conseguir acesso, nós corrigimos.

(09)Como obtenho ajuda?

Escreva para layropro26@gmail.com. Uma pessoa constrói o Layro e responde os e-mails, então uma resposta pode levar um dia, mas vem da pessoa que escreveu o código.