MCP server próprio: Hello World às tools | guia prático
Como criar seu próprio MCP server: primeiro um Hello World para entender o protocolo, depois tools reais. Passo a passo sem mistério de hype
Resposta direta
MCP parece magia até você escrever um server mínimo; Hello World ensina o contrato antes das tools de produção. Como em cursor ou windsurf ou qualquer outro código clave, bem, então você pode criar isso então, então você pode criar um monte de componentes que são estilosos, as pessoas amam, eles querem usá-lo, eu vou mostrar como criar esse server mcp, pelo menos em um ambiente local, tudo bem, todos, você está pronto para.
Por que todo mundo fala de MCP agora
E o primeiro ferramenta será Hello World, para que você possa entender, em um nível muito básico, como você os cria e como eles funcionam. E depois, vamos criar um tipo de replica ShadCN, onde, digamos, se você é um designer e um desenvolvedor, e você quer criar sua própria biblioteca de UI que outras pessoas podem usar. Como em cursor ou windsurf ou qualquer outro código clave, bem, então você pode criar isso então, então você pode criar um monte de componentes que são estilosos, as pessoas amam, eles querem usá-lo, eu vou mostrar como criar esse server mcp, pelo menos em um ambiente local, tudo bem, todos, você está pronto para tocar, vamos abrir um novo terminal aqui em cursor, você pode usar qualquer outro código id não importa, como você pode ver, eu tenho um folga branca aberto aqui, não tem filhos nela Então, nós estamos começando de fora. Então, a primeira coisa que queremos fazer é que queremos fazer um MPM e isso significa que você tem que ter o package manager do Node instalado no seu sistema.
Hyphen-y simplesmente significa que vamos dizer sim a todos os prompções de default e vai gerar o que se chama um um arquivo .json que basicamente permite que você, ou não você, mas você sabe o sistema em si, mantendo controle sobre quais tipos de paquetes serão instalados que são necessários para que este projeto funcione. Você pode ignorar o pacote, fechar o JSON, e também temos o pacote do Node, ou o folder de módulos do Node, que vai guardar tudo isto que não temos que nos preocupar. Então, toda vez que você instala, você usa o NPM para instalar algo, vai entrar no folder de módulos do Node e uma referência será criada no Package.json, como você pode ver como uma dependência, o protocolo de contexto de modelo está aqui. Ok, então isso vai ser onde nós vamos armazenar a informação principal do MCP para o nosso server custom do MCP que vai funcionar localmente.
Obviamente, neste dia e época de Coding de AI, realmente não temos que codar necessariamente, em muitos aspectos, mas vai ajudar você a entender em um nível alto, uma visão sob o olho do fio, de como o server do MCP funciona. E eu acho que isso vai ajudar você a decidir que tipo de server do MCP você pode criar. Então, as primeiras duas linhas, e isso é instalado em quatro diferentes passos, e não há muito código. O primeiro passo é que você precisa importar um par de paquetes do Node Package Manager que instalamos, que aqui, o que se chamava?
Hello World: o menor server que ensina
Então importar mcp server do protocolo de contexto modelo, blá, blá, blá. Mas novamente, no contexto de criar um server mcp este é set e esqueça tudo bem agora o próximo passo é criar o próprio server então isso parece assim é simplesmente uma linha constr server é um novo server mcp e novamente isso vem daqui sendo importado e então é aqui que você especifica o nome então vou chamar este curso de design apenas não vou adicionar o mcp isso vai ser chamado o server de MCP do Design Course. Então é assim que você referência na LLM, é assim que você diz a outras pessoas que querem usá-la, é assim que você chama, certo? Você pode criar múltiplos tools dentro de um server MCP que fazem coisas diferentes.
Então, para o primeiro exemplo simples, o Olá, mundo, como esse call tool iria se ver? Bem, como ele se ver, se eu zoomar, simplesmente dizemos server, lembrem-se que criamos uma constante ou variável chamada server, então chamamos server e vamos dizer register tool. Isso é o que aparece quando vamos para as funções de chat e olhamos para os servers do MCP e você. Você olha todos os seus diferentes servidores mcp e você pode olhar para o ferramenta especificamente este é o nome então vou apenas escrever isso em quotes hello world que vai ser o nome do nosso primeiro ferramenta e então vamos colocar uma comma e então abrir em caixas ou braços de barriga como esse agora isso aceitará alguns valores de propriedade então temos um título como hello world uma descrição e novamente isso é importante aqui.
Paste this information right here so right here we have async return content type is text and the text is going to be hello world alright so that's all this tool does is so simple it just returns hello world of course we're going to be doing the more you know elaborate example here just after we get this working so this is like one of the most simple tools that you could call and then E o passo 4 é esse um propósito de se colocar e esquecer que você verá, essas duas linhas. Então agora, se você vir aqui, clique no CTRL L, se estiver trabalhando no cursor pelo menos, e isso vai afinar esta área de contato. Clicar em Settings E aí você vai ver Tools and Integration E se você clicar nisso Você vai ver Todos os seus MCP MPC MPC Tools Certo? Para conseguir Isso Integrado Nós queremos clicar No novo Server MCP Agora eu tenho Isso aberto Mas eu tenho Todas as minhas chaves Visíveis Então eu não vou Até Olha, mostrou parte Daquilo ali E aí Eu não vou mostrar para vocês lá em cima, eu vou só pastear o que vocês veriam, ou o que vocês usam se vocês não tiverem servidores do MCP.
Leitura útil
MCP parece magia até você escrever um server mínimo; Hello World ensina o contrato antes das tools de produção. Use o trecho acima como restrição, não como citação ornamental.
Segunda tool: saindo do eco para ação útil
Vai parecer assim, então você tem um objeto de servidores do MCP, e então você tem todos os servidores do MCP individualmente dentro disso. E então para este exemplo, nós queremos saber exatamente de onde nosso server.js está sendo servido, então se eu só clicar em certo e revelar em file explorer, Eu vou ver aqui que eu tenho esta URL aqui. Então é isso que você faria, e se você tem servidores do MCP, você copia essa parte Então aqui em cima, eu colocaria uma coma depois do meu último server do MCP E então eu só pastaria isso aqui Então agora nós vamos voltar e você verá o curso de design Um tool disponível, clique nele, hello world Isso vem do nosso server.js aqui Ok. Agora, nós deveríamos poder usar o nosso chat de IDE, você pode usar código de clã, o que quer, para agora referenciar isso como você normalmente faz em qualquer outro server MCP.
Então, o que eu poderia dizer é criar um fio de texto de resposta no caminho do projeto e usar o server MCP do curso de design para chamar o tool Hello World. Deve dar uma resposta inicial aqui, olhe para o mundo clique nela, sem parâmetros, resposta é olhe para o mundo resposta texto que já foi criado e olhe para o mundo ok esse é o exemplo mais aborrecido e simples de um server mcp com uma ferramenta que definimos que nos dá uma resposta agora vamos fazer algo que é mais rural world worthy, right? Então, todos sabemos, bem, não todos sabemos, mas o ShadCN é uma biblioteca de componentes para designers e front-end developers integrar coisas legais e eles têm o seu próprio server MCP também e você pode literalmente chamá-lo para integrar um componente de header em sua página ou algo parecido. O que se nós criamos algo parecido como nosso próprio server MCP para nossa própria biblioteca de UI customizada que estamos criando porque somos um desenvolvedor e um designer ou algo assim, certo?
O que é legal sobre essa parte é que podemos pedir à AI para gerar o tool para nós, baseado nas nossas requerências. Então, talvez nós tenhamos uma direção separada de componentes que são baseadas em arquivos HTML, talvez um para uma barra nav, um para um botão, algo assim, um para um efeito como um efeito confetti, e depois nós o teremos criar um único tool, talvez seja chamado de componentes, que eu então, baseado na input do usuário, input Ele vai queryar o tool, o tool saberá qual componente correta escolher e então retornará esse código para que a AI possa integrá-lo baseado na especificação do usuário no prompt. Agora, antes de chegarmos a essa parte, quando você tiver qualquer tipo de input especificado, como no schema de input, você quer importar ou instalar o MPMI, é chamado Zod. Agora, se você não entende isso ou o que quer, isso é a coisa do boilerplate que a AI te daria de qualquer jeito.
Erros típicos ao registrar tools
Agora, eu vou fazer esse código disponível, esse JavaScript, aqui na descrição, então você pode ir para CodePen e pegar isso, se você quiser a mesma ferramenta, basicamente. Vou chamá-lo de componentes, tudo bem e então dentro disso teremos nosso individual um botão component como você pode ver aqui um component navbar e um component confetti tudo bem então vamos ter ai gerar isso para nós ok e então tudo isso tudo que está fazendo é basicamente Olhando para os inputs, como se eles especificassem botão, navbar ou confetti dentro do seu prompt, então ele vai saber qual arquivo HTML para usar que está dentro de componentes. E se voltarmos aos nossos setores de contato e nossos ferramentas e integrações, nós reiniciamos isso, podemos ver que agora temos ambos os nossos elementos, então estamos onde diz componentes aqui, esta é a descrição no topo e então há parâmetros aqui no fundo ok então agora que está pronto para sobrar, podemos dizer que nossa a.i para construir Essas três coisas para nós. Agora, obviamente, se isso é um projeto sério, você provavelmente vai tentar fazer isso de mão, garantindo que tudo para a biblioteca de componentes seja muito consistente.
Certo, então, criar três arquivos HTML que sejam consistentes com os referidos nos tool de componentes e os tool de componentes e os servidores JS. E o arquivo HTML confetti deve incluir qualquer HTML necessário, CSS e JavaScript que resulte em uma animação confetti. O que eu vou dizer é usando o server design course mcp, se eu puder escrever, criar um, não, não criar, implementar o componente navbar e um componente de botão em um arquivo index.html Use o tool hello world para criar uma headline com a resposta também Agora vamos ter que integrar a confeta depois Então, vamos dizer também Sete esta informação do template, assumindo que somos uma empresa chamado quick snacks in the food industry all right let's hit send again make sure you routinely go back to your chat settings make sure the mcp server isn't it doesn't have the red status because it means it won't work so calling mcp please work all right so it got them if it didn't propriamente capturá-los, você pode clicar no resultado real e ele dirá que você errou ou algo assim e geralmente o LLM também dirá que errou também você quer ter certeza de que ele não apenas não agarrou a HTML manualmente de si mesmo porque vai te enganar a pensar que funcionou através do server mcp tudo bem, está pronto, clique em certo, abri com o server vivo, oh, escolhas interessantes, podemos ver nosso botão de ordem azul agora, esse é o componente que usamos, isso é muito legal, então agora, por exemplo, uh, nós queríamos integrar a animação confetti de alguma forma, agora eu não sei como ele setou isso aqui, não é visível aqui, mas eu tenho certeza que está no HTML que ele poderia funcionar porque também há javascript aqui também e css, então agora o que vamos dizer é, por exemplo, Nós queremos uma animação de confetti que ocorra quando alguém clica no ordem agora, mas nós queremos, você sabe, o design course MCP's confetti animação, porque nós realmente gostamos dessa, essa é a utilidade em ter o server MCP. Sim, nós poderíamos ter que criar sua própria, você sabe, animação de confetti através da AI em si, mas o que se nós realmente gostarmos, você sabe, que o que é baseado nesta biblioteca UI, bem, é por isso que usamos o server MCP.
Então, o que nós vamos dizer é Use the design course MCP server to integrate a confetti animation when someone clicks on the order button in the hero section of index.html. Abrir um novo mundo de oportunidades para ideias diferentes que você pode criar apenas para seu próprio uso pessoal, como um server local MCP, ou algo que você também pode extender para outras pessoas usar também. Estou certo que você poderia promover a AI para ser como, ok, ajustar meu server MCP para que outras pessoas possam usá-lo e me dar instruções e tudo isso sobre como deployá-lo. Vai ter um monte de servers de MCP muito legais aparecendo quando as pessoas começarem a perceber que podem construir seus próprios servers de MCP.
Quando NÃO criar MCP e só usar HTTP
Eu vou mostrar como criar o seu próprio. Então, vamos criar o nosso próprio curso de design MCP. E o primeiro ferramenta será Hello World, para que você possa entender, em um nível muito básico, como você os cria e como eles funcionam. E depois, vamos criar um tipo de replica ShadCN, onde, digamos, se você é um designer e um desenvolvedor, e você quer criar sua própria biblioteca de UI que outras pessoas podem usar.
Como em cursor ou windsurf ou qualquer outro código clave, bem, então você pode criar isso então, então você pode criar um monte de componentes que são estilosos, as pessoas amam, eles querem usá-lo, eu vou mostrar como criar esse server mcp, pelo menos em um ambiente local, tudo bem, todos, você está pronto para tocar, vamos abrir um novo terminal aqui em cursor, você pode usar qualquer outro código id não importa, como você pode ver, eu tenho um folga branca aberto aqui, não tem filhos nela Então, nós estamos começando de fora. Então, a primeira coisa que queremos fazer é que queremos fazer um MPM e isso significa que você tem que ter o package manager do Node instalado no seu sistema. Se você não sabe como fazer isso, apenas chatee-te, o que quer que seja. Hyphen-y simplesmente significa que vamos dizer sim a todos os prompções de default e vai gerar o que se chama um um arquivo .json que basicamente permite que você, ou não você, mas você sabe o sistema em si, mantendo controle sobre quais tipos de paquetes serão instalados que são necessários para que este projeto funcione.
Então, como você pode ver, ele apenas encheu todas essas informações para nós e criou esse paquete no JSON. Agora, a próxima coisa que vamos fazer é instalar uma biblioteca de server de MCP específica. Então, o código para isso vai parecer assim. Esta é a linha aqui, MPMI para instalar, at model context protocol SDK.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.