ShadCN com MCP: agente que respeita o design system

O que o material de origem realmente diz

Neste vídeo, você terá um workflow completo sobre como usar esta atualização para converter seu agente em um sistema de design do ShadCN. Apenas tivemos uma atualização oficial do ShadCN que vai ser seriamente upgradear seus workflows agentes. Que deu à sua agente de AI todas as informações importantes sobre o ShadCN para que ela pudesse usar esses componentes melhor.

Por que isso importa na operação

Agora eu tenho este tema em mas antes disso, eu tinha implementado o tema do Claude e há muitos e muitos temas disponíveis, então se você está trabalhando com o ShadCN, você definitivamente precisa saber sobre este site. Mesmo se você é um coder de vibe e não é um desenvolvedor adequado, você deve saber sobre as componentes do ShadCN.

Como estruturar o método

Eu vou usar o comando MCP e você pode ver que o MCP ShadCN está conectado junto com todas as ferramentas disponíveis. O que isso faz é examinar todos os componentes do ShadCN e criar um fio de pesquisa de componentes. Eu anteriormente lançei um vídeo onde eu mostrei um server de MCP de open source para o ShadCN. Com esse MCP, que entende múltiplas bibliotecas ShadCN, você pode tomar uma abordagem estratégica e construir interfaces incríveis.

Erros que drenam o resultado

Se você queria construir algo, você estava limitado a apenas os componentes ShadCN oficiais e nada mais. Bem, o ShadCN anunciou oficialmente no X que estão lançando o seu servidor de registro MCP. Shad Siena, em si, é um registro onde todos os componentes do ShadCN são unidos. Antes, o server MCP que mostrei só oferecia dados para componentes ShadCN.

Aplicação em uma semana

Inclui quatro subagentes que você pode acessar através do código de cláudio. Você não precisa mais procurar por efeitos manualmente, pastear comandos repetidamente ou dar as mesmas instruções ao seu agente de vez em quando. It also set up a design docs folder with a new task in my case, the GitHub Cloud app. Seu agente de AI tem sido seriamente upgrade com o contexto de todas essas novas componentes.

Sinais de que está funcionando

I checked it using Cloud's context command and it wasn't using much space at all, so I ran agent2 lhe disse para continuar com a tarefa do Cloude GitHub e ele completou a pesquisa. Para prever o estilo de registro, busque algo como Origin UI, busque suas componentes, avalie se isso se encaixa com a sua estética de UI desejada, e então decide se implementar.

Próximo passo concreto

E a coisa principal agora é que você pode usar componentes de qualquer biblioteca, como a Asceternity UI ou os outros que eu compartilhei, e fazer linhas muito boas com eles. After that, I considered creating a new chat, but since this project wasn't very large and the UI wasn't heavy, I decided to continue in the same context. Para esta demo, eu vou usar o código de cláudio para te passar pelo fluxo de trabalho, mas se inscreva para integrá-lo para o que você quiser.

Você pode ver aqui que estou dando o mensagem para adquirir todos os componentes no registro de UI da Asceternity usando o MCP que acabei de adicionar. Mas às vezes você terá tarefas maiores onde você não precisa do processo completo, como quando você só quer adicionar uma carta ou fazer uma pequena mudança. Se você quiser apoiar o canal e nos ajudar a continuar a fazer vídeos como este, você pode fazer isso usando o botão de super obrigado abaixo.

Eu noto que usando a flagra de permissão de escapamento perigosa prevene a mcp de ser detectada no primeiro try, então você precisa correr sem ela. Se você abrir o código cláudio com a flagra de escapamento perigosa, este prompt não aparecerá, o que significa que a mcp não foi adicionada corretamente. A coisa é que há um site chamado TweakCN e ele te permite adicionar temas incríveis em cima da sua já construída linha ou estrutura.

Agora, o problema é que, mesmo que essas sejam componentes animadas e elas se vejam muito boas, não há nenhuma estrutura para o site. Eu busquei listas de registros curados e encontrei uma, mas a maioria das entradas não eram registros de verdade ou simplesmente não funcionavam. Eles pegam toda a informação sobre esses registros, para que eles saibam tudo o que está disponível para instalar e como usá-los.

O problema era que o formato deles não correspondia aos requisitos de registro público, então a MCP não conseguia adotar suas componentes. Tudo o que você tem que fazer é copiar o código de lá, dar-lhe ao Claude e ele implementará-lo, é tão simples. O que faz esse server MCP diferente é que permite você procurar, instalar e receber informações sobre componentes de registros públicos.

Eu continuarei procurando por outros e listando-os nos recursos abaixo no formato correto, para que você possa simplesmente copiar e pastar. No meu caso, eu brainstormei algumas ideias e decidi construir uma plataforma de PR com GitHub e um solvador de questões. This way, you can have multiple tasks in the same repository and each one keeps its requirements and component research separate.

O comando configurará o MCP instale todas as dependências e salve a configuração para um fio mcp.json para código cláudio. Você pode instalar eles através do tool de linha de comandos e usá-los diretamente no seu código sem criar-os manualmente. Eu lhe disse que queria construir essa aplicação, providiu a estrutura e o fluxo da página e criou um .requirements.