🔰 Introdução

Nota: Uma rápida observação antes de mergulharmos: a implementação descrita neste artigo foi realizada na primavera de 2025, quase um ano antes de eu me sentar para escrever sobre isso. O ecossistema de IA se move em um ritmo impressionante, então alguns detalhes podem parecer um pouco datados agora. Dito isso, acredito que as ideias e a abordagem central ainda têm valor, e espero que este artigo prove ser útil para pelo menos alguns de vocês.

Recentemente, publiquei o seguinte artigo, que introduz um projeto no qual venho trabalhando desde março de 2023 chamado "Blazing Story", um clone do Storybook totalmente reimplementado em Blazor (licenciado sob a Mozilla Public License 2.0). O Storybook não suporta Blazor, então eu o reimplementei em C#.

🤔 O que é MCP?

Se você está lendo isso, provavelmente já está familiarizado com MCP. Mas, só para garantir, aqui está uma visão geral rápida. MCP significa Model Context Protocol. É uma interface padrão que permite que a IA generativa interaja com o mundo exterior. Em uma configuração típica, a IA generativa atua como o "cliente" MCP, enquanto os sistemas que fornecem informações para a IA (ou recebem instruções dela) são chamados de "servidores" MCP. Quando ambos os lados seguem a especificação MCP, eles podem se comunicar entre si de forma contínua.

Antes do MCP, conectar IA generativa a sistemas externos ainda era possível, mas cada plataforma de IA tinha sua própria maneira proprietária de fazer isso. Quando o MCP surgiu como um padrão compartilhado, uma enxurrada de servidores MCP foi lançada em um curto espaço de tempo, e as plataformas de IA rapidamente adotaram suporte para isso. Trabalhar com IA generativa em aplicações do mundo real se tornou dramaticamente mais fácil como resultado.

💡 A Ideia: Expondo um Sistema de Design Interno via MCP

Na primavera de 2025, o seguinte artigo fez bastante sucesso na comunidade de desenvolvedores japonesa: 社内デザインシステムをMCPサーバー化したらUI実装が爆速になった. Ele descreve como uma equipe construiu um servidor MCP que escaneia o código-fonte de seus componentes de UI internos (escritos em JavaScript/TypeScript) e retorna informações sobre eles. Ao conectar este servidor MCP a uma IA generativa, quando pediam à IA para gerar UI através de um prompt de texto, a IA usava corretamente aqueles componentes internos em vez de criar algo do zero. Isso resolve um verdadeiro ponto de dor. Sem essa configuração, quando você pede à IA generativa para escrever código de UI, ela tende a construir tudo do zero usando algo como Tailwind CSS diretamente, criando seus próprios componentes ad-hoc. Ter um servidor MCP que informa à IA sobre sua biblioteca de componentes de UI existentes é uma verdadeira mudança de jogo para o desenvolvimento de UI assistido por IA.

Mas você sempre precisa construir esse tipo de servidor MCP do zero? Existe uma maneira de reutilizar algo que você já tem?

🤩 Espera, o Storybook Já Não Sabe de Tudo?

É aí que uma ideia me atingiu. Em muitas equipes de desenvolvimento frontend, o Storybook já está em uso, e o Storybook realmente "sabe muito" sobre os componentes em um projeto: Quais componentes existem, com exemplos de uso (das definições de história) O propósito e a visão geral de cada componente (a partir do JSDoc) Exemplos reais de marcação (das definições de história) Quais parâmetros um componente aceita, incluindo seus tipos e descrições (a partir das definições de tipo e JSDoc).