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.
- Passo 1: Abra seu terminal e navegue até uma pasta vazia.
- Passo 2: Execute
npm init -y - Passo 3: Instale o SDK MCP:
npm i @modelcontext/protocol-sdk
Configurando o Server.js
Crie um arquivo novo server.js e importe os módulos necessários do SDK
MCP, tipo createServer e studioServerTransport . 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 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
Pra integrar, use a ferramenta da sua IDE (tipo 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 esquece 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 direto em prompts tipo: "Use o Design Course Server pra 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: construir uma ferramenta chamada Components , que entrega
snippets de código HTML com base no input do usuário. Exemplo: "navbar", "botão",
"confetti".
- Importe o Zod:
npm i zod— usado para validar
inputs no schema - Prepare a pasta: Crie uma pasta
componentscom
arquivos HTML:button.html,navbar.html,confetti.html - Registre o tool: Nome: Components , título:
Design Course Components, com input type string
Estrutura 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 components .
Exemplo de prompt e utilização em AI
O usuário pode escrever: "Insira uma navbar navegável pra 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 uso repetido em múltiplos projetos, além de permitir futuras
aplicações multi-plataforma.
Explorando mais ferramentas que ajudam
Zod
Validação de inputs de forma segura em ferramentas MCP
fs/promises
Leitura assíncrona de arquivos HTML no Node.js
Cursor IDE
Ambiente de desenvolvimento com suporte MCP nativo
Model Context SDK
Protocolo para construção de servidores MCP personalizados
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
- Inicializou projeto com npm init -y
- Instalou o SDK do Protocolo MCP
- Criou o server.js com estrutura base
- Registrou a ferramenta Hello World
- Criou a pasta de componentes com arquivos HTML
- Implementou validação com Zod
- Conectou o server MCP na IDE corretamente
- Testou tool Components a partir de diferentes inputs
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.