Como criar seu próprio Server MCP do zero com ferramentas personalizadas
Construa seu próprio server MCP com múltiplas ferramentas, incluindo uma biblioteca de UI personalizada como a ShadCN
Por que isso é importante
Saber criar seu próprio server MCP abre portas para automatizar tarefas com inteligência artificial através de ferramentas personalizadas, como design systems reutilizáveis e integração com modelos de linguagem.
Inicializando o ambiente
Para iniciar a construção de um server MCP, você precisa ter o Node.js instalado. Com isso, use o comando npm init -y para criar o arquivo base package.json que vai controlar suas dependências.
npm init -ynpm i @modelcontext/protocol-sdkConfigurando o Server.js
Crie um novo arquivo server.js e importe os módulos necessários do SDK MCP, como createServer e studioServerTransport. Em seguida, instancie o servidor e registre sua primeira ferramenta.
⚠️Atenção
Sempre defina um nome único para o seu Server MCP. Ele será como outras ferramentas identificam seu server dentro da IDE ou ambiente de integração
Registrando o primeiro tool: Hello World
Essa ferramenta serve de teste inicial: um simples "Hello World" retornado como text. Use registerTool e defina título, descrição e lógica de resposta assíncrona.
ℹ️Dica
Mesmo em projetos reais, criar um Hello World facilita analisar possíveis falhas de conexão ou sintaxe inicial.
Executando local e testando na IDE
Para integração, use a ferramenta da sua IDE (como o Cursor) e selecione Integrar novo MCP Server. Cole o path do seu server.js e aguarde ele ser listado como fonte de ferramentas.
❌Erro comum
Não esquecer de adicionar a extensão server.js no path. Sem isso, o MCP server não será listado corretamente.
Usando o MCP Hello World na prática
Com a estrutura montada, você pode chamar a ferramenta diretamente em prompts tipo: "Use o Design Course Server para chamar o hello world.". A IA vai buscar o name da tool e executar.
Criando ferramentas de UI como o ShadCN
Agora vamos além: construiremos uma ferramenta chamada Components, que entrega snippets de código HTML com base na entrada do usuário. Exemplo: "navbar", "botão", "confetti".
npm i zod — usado para validar inputs no schemacomponents com arquivos HTML: button.html, navbar.html, confetti.htmlEstrutura dos arquivos HTML de UI
Cada arquivo HTML deve conter estrutura completa com style inline e JS se necessário. Por exemplo, o botão azul deve ter bordas arredondadas e acionar um confetti quando clicado.
Renderizando dinamicamente com base no input
A ferramenta lê o input passado no prompt, identifica o componente requisitado (por exemplo, "navbar") e retorna o conteúdo HTML do respectivo arquivo existente na pasta components.
Exemplo de prompt e utilização em AI
O usuário pode escrever: "Insira uma navbar navegável para desktop e mobile usando os componentes do Design Course MCP." e a IA vai consultar os arquivos e integrar automaticamente a resposta com base nas instruções.
Boas práticas para criar uma biblioteca UI eficiente
Mantenha os componentes com design responsivo, nomenclatura consistente e estilos centralizados. Isso facilita o uso repetido em múltiplos projetos, além de permitir futuras aplicações multi-plataforma.
Explorando mais ferramentas que ajudam
fs/promises
Leitura assíncrona de arquivos HTML no Node.js