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
✅Transforme sua carreira
Você acabou de aprender a construir servidores MCP personalizados - é como ser um arquiteto que não apenas projeta casas, mas cria as ferramentas que outros arquitetos vão usar para construir cidades inteiras. Mas aqui está a realidade: saber criar ferramentas customizadas para IA é uma habilidade rara, porém muitos desenvolvedores ficam presos apenas na teoria, sem projetos que demonstrem essa capacidade de integração avançada.
Dominar MCP servers é como ter uma chave mestra que abre qualquer porta no mundo da automação - você pode criar pontes entre IA e qualquer sistema, transformar processos manuais em fluxos inteligentes e construir ferramentas que fazem outros desenvolvedores parecerem magos. Mas assim como um mestre construtor precisa de obras que comprovem sua maestria, você precisa de projetos onde essas integrações ganham vida e resolvem problemas reais.
O CrazyStack foi criado para transformar esse conhecimento em experiência tangível - através de projetos que implementam integrações complexas, automações inteligentes e ferramentas customizadas desde o primeiro dia. Enquanto você constrói aplicações que conversam com IA, automatizam workflows e criam experiências que parecem mágica, está desenvolvendo um portfólio que demonstra não apenas que você entende tecnologia, mas que consegue orquestrar soluções que transformam como as pessoas trabalham.
Checklist de Implementação
✅Transforme sua carreira
E foi EXATAMENTE por isso que eu criei um curso de Node.js e React chamado CrazyStack. A minha maior necessidade no início da carreira era alguém que me ensinasse um projeto prático onde eu pudesse não só desenvolver minhas habilidades de dev como também lançar algo pronto para entrar no ar no dia seguinte.
Sabe qual era minha maior frustração? Aplicar conhecimentos teóricos em projetos práticos e reais, mas não encontrar ninguém que me ensinasse COMO fazer isso na prática! Era exatamente a mesma frustração que você deve sentir: acumular informação sem saber como implementar na prática.
Assim como você precisa de estratégias claras e implementação prática para ter sucesso, todo desenvolvedor precisa de um projeto estruturado para sair do teórico e partir para a execução. É como ter todas as peças do quebra-cabeça mas não saber como montá-las - você pode ter conhecimento técnico, mas sem um projeto completo, fica difícil transformar esse conhecimento em resultados concretos.
No CrazyStack, você constrói um SaaS completo do zero - backend robusto em Node.js, frontend moderno em React, autenticação, pagamentos, deploy, tudo funcionando. É o projeto que eu queria ter quando comecei: algo que você termina e pode colocar no ar no mesmo dia, começar a validar com usuários reais e até monetizar.