MCP VSCode Cline

Um guia para usar a extensão Cline VSCode para interagir com servidores do Model Context Protocol (MCP).

GitHub
27
Experimente este MCPPatrocinado

Documentação

Dominando o Model Context Protocol (MCP) com Cline no VSCode ou Claude 🚀

O que é MCP, afinal? 🤔

O nome completo de MCP é Model Context Protocol. Em termos simples, é como um USB Type-C do mundo da IA 🔌 ✨

Pense em como era antes: celulares, computadores e tablets, cada um precisava de um cabo e plugue diferentes, que chato, né? 😩

Depois que o USB Type-C surgiu, um único cabo resolve muitas coisas.

MCP é um conceito semelhante: ele quer dar à IA uma forma universal de comunicação, permitindo que a IA descubra, entenda e use ferramentas ou serviços externos com facilidade.

Quais são os benefícios? 💡

Os desenvolvedores não precisam mais ficar estudando os parâmetros de API para integrar diferentes IAs ou ferramentas.

Além disso, a própria IA fica mais inteligente, decidindo qual ferramenta usar conforme a situação.

Qual é a diferença entre MCP e Function Calling?

Você já deve ter ouvido falar de Function Calling (o AI Agent do N8N é mais parecido com isso), que também permite que a IA chame funções externas.

Mas o MCP é ainda mais flexível!

Com Function Calling, normalmente você precisa informar à IA quais funções estão disponíveis, como um menu.

Já o MCP é mais como deixar a IA explorar proativamente o contexto ao redor para ver quais ferramentas estão disponíveis e decidir como usá-las.

Fluxograma

O diagrama abaixo mostra, aproximadamente, o que o MCP faz nos bastidores quando você conversa com a IA usando o Cline no VSCode:

graph LR
    A[使用者在 VSCode 中 <br> 透過 Cline 輸入指令] --> B[大型語言模型<br>接收指令]
    B --> C{AI 需要外部工具<br>或資訊？}
    C -- 是 --> D["AI 透過 MCP<br>找可用的工具"]
    D --> E[AI 選擇合適的工具<br>並透過 MCP 呼叫]
    E --> F[外部工具/伺服器<br>執行任務]
    F --> G[AI 接收工具<br>回傳的結果]
    C -- 否 --> G
    G --> H[AI 整合資訊<br>產生最終回覆]
    H --> I[結果顯示在<br>VSCode Cline 介面中]
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style I fill:#ccf,stroke:#333,stroke-width:2px
    style C fill:#f9d,stroke:#333,stroke-width:2px,shape:diamond
    style D fill:#9cf,stroke:#333,stroke-width:2px
    style E fill:#9cf,stroke:#333,stroke-width:2px
    style F fill:#9cf,stroke:#333,stroke-width:2px

Cline

O Cline é, na verdade, uma extensão do VSCode

Já existem muitos awesome-mcp-servers

Muitas ferramentas ou servidores MCP são escritos em Python ou Node.js, então é recomendável instalá-los primeiro.

O MCP Server executa alguns programas na sua máquina local,

alt tag

Depois que o Cline obtém a «decisão do modelo de linguagem grande», ele usa essa decisão como base para chamar o MCP Server.

Resumindo,

O MCP Host é o VSCode

O MCP Client é o Cline

O MCP Server é o programa executado localmente

Se quiser adicionar um servidor remoto SSE, basta colar a URL em Remote Servers.

alt tag

Instalando o Node.js

Baixar Node.js

# 下載並安裝 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# 下載並安裝 Node.js:
nvm install 22

# 核對 Node.js 版本:
node -v # 應會印出 "v22.14.0"。
nvm current # 應會印出 "v22.14.0"。

# 核對 npm 版本：
npm -v # 應會印出 "10.9.2"。

Claude

Este quadro da comunidade não é mais mantido

Linux atualmente só tem a versão mantida pela comunidade claude-desktop-debian

Se você quiser usá-lo para conectar seu MCP Server remoto,

vá até ~/.config/Claude/claude_desktop_config.json para configurar

{
  "mcpServers": {
    "n8n mcp": {
      "command": "npx",
      "args": [
        "-y",
        "supergateway",
        "--sse",
        "https://xxxxxxx/mcp/xxxxxxxxx/sse"
      ]
    }
  }
}

O conceito usado é supergateway - sse--stdio

Em seguida, reinicie o Claude. Se tudo estiver configurado corretamente,

alt tag

MCP Server

Context7

Adeus aos chutes da IA! Context7 MCP combinado com .clinerules otimiza o Prompt para gerar Addon Odoo 18 com precisão na prática

Você pode usar o site oficial em context7

Context7 MCP: fornece a documentação de código mais recente para o seu Prompt de IA

【Problema: sem Context7 ❌】

Ao responder perguntas relacionadas a código, os modelos de linguagem grandes (LLM) geralmente dependem de dados de treinamento desatualizados ou genéricos, resultando em:

❌ Exemplos de código desatualizados, baseados em dados antigos de um ano atrás. ❌ Geração de APIs fictícias que nem existem. ❌ Respostas genéricas ou inadequadas para versões antigas de pacotes de software.

【Solução: com Context7 ✅】

O Context7 MCP pode buscar diretamente da fonte original a documentação e exemplos de código mais recentes e específicos para a versão, colocando essas informações atualizadas diretamente no contexto do Prompt que você fornece à IA.

Configuração do MCP no VS Code Context7 MCP

{
  "servers": {
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Vamos colocar em prática com Cline + Odoo 18 + gemini-2.0-flash-001,

Aqui, além de usar o Context7, também usaremos o Filesystem MCP Server.

Passar todos os nossos requisitos diretamente para o Cline não é prático e o resultado não é bom; usamos .clinerules para melhorar esse problema

O local de configuração é aqui

img

Exemplos podem ser consultados na pasta .clinerules

.clinerules/00-doc.md - peça para ele ler a documentação com o Context7 primeiro, para evitar alucinações.

.clinerules/01-logic.md - define a lógica dele.

Em seguida, envie o Prompt diretamente para o Cline

先閱讀文件 再開發 addons

Se durante a execução você quiser que o Cline continue executando automaticamente, sem pedir permissão a cada vez,

clique no ícone de checkmark; o autoApprove à direita preencherá o tipo de evento correspondente, e daí em diante eventos semelhantes serão ignorados

img

Augment Code

Apresentando augmentcode

14 dias de teste, 300 mensagens gratuitas (com certeza é suficiente para você; nos meus testes, o uso foi bem econômico)

Não há modelos para escolher (nem é possível alternar), só existe um.

Usa o modelo Claude 3.7 Sonnet (em horários de pico, pode cair para 3.5)

Donation

Os artigos são originais, fruto da minha própria pesquisa e internalização. Se eles ajudaram você e quiser me incentivar, fique à vontade para me pagar um café :laughing:

ECPAY da Green World Technology (não precisa se registrar)

alt tag

Pagamento do patrocinador

O'Pay (precisa se registrar)

alt tag

Pagamento do patrocinador

Lista de patrocinadores

Lista de patrocinadores

License

MIT license