Como criar seu próprio Server MCP do zero
Construa seu próprio server MCP com múltiplas ferramentas, incluindo uma biblioteca de UI personalizada como a ShadCN
Por que isso é importante
Como criar seu próprio Server MCP do zero. Construa seu próprio server MCP com múltiplas ferramentas, incluindo uma biblioteca de UI personalizada como a ShadCN
Inicializando o ambiente
Pra começar a construir um server MCP, você precisa ter Node.js instalado. Com isso, use o comando npm init -y pra criar o arquivo base package.json que vai controlar suas dependências.
npm init -ynpm i @modelcontext/protocol-sdkConfigurando o Server.js
Crie um arquivo novo server.js e importe os módulos necessários do SDK MCP, tipo <code>createServer</code> e <code>studioServerTransport</code> . Depois, instancie o servidor e registre sua primeira ferramenta.
Atenção
Sempre defina um nome único pro seu Server MCP. É assim que 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 <code>registerTool</code> 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
Pra integrar, use a ferramenta da sua IDE (tipo Cursor) e selecione Integrar novo MCP Server . Cole o path do seu <code>server.js</code> e aguarde ele ser listado como fonte de ferramentas.
Erro comum
Não esquece de adicionar a extensão <code>server.js</code> 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 direto em prompts tipo: <em>"Use o Design Course Server pra chamar o hello world."</em> A IA vai buscar o name da tool e executar.
Criando ferramentas de UI como o ShadCN
Agora vamos além: construir uma ferramenta chamada Components , que entrega snippets de código HTML com base no input 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 ter estrutura completa com style inline e JS se necessário. Por exemplo, o botão azul deve ter bordas arredondadas e disparar 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 arquivo correspondente na pasta <code>components</code> .
Exemplo de prompt e utilização em AI
O usuário pode escrever: <em>"Insira uma navbar navegável pra desktop e mobile usando os componentes do Design Course MCP."</em> 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 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.
Continue lendo
Como criar seu primeiro servidor HTTP com Node.js do zero
Como iniciar seu primeiro projeto em Node.js, entender os principais módulos e aprender os fundamentos para...
Aprender Node.js: Guia Completo para Iniciantes em 2026
Guia completo para aprender Node.js do zero em 2026. Entenda o que é, configure seu ambiente, e crie sua primeira...
A Função Mais Poderosa do JavaScript que Muda Tudo
Generator Functions e Iterator Helpers - as propostas mais importantes para processamento sob demanda que...
Como criar múltiplas rotas em APIs Node com Fastify — Guia prático
Construa sua primeira API Node moderna e aprenda o segredo das rotas separadas — adeus à bagunça do Node clássico.