MCP VSCode Cline

Una guía para usar la extensión Cline de VSCode para interactuar con servidores del Protocolo de Contexto de Modelo (MCP).

GitHub
27
Prueba este MCPPatrocinado

Documentación

Jugando con Model Context Protocol (MCP) en VSCode o Claude con Cline 🚀

¿Qué es exactamente MCP? 🤔

MCP significa Model Context Protocol. En pocas palabras, es como el USB Type-C del mundo de la IA 🔌 ✨

Piensa en antes: teléfonos, computadoras, tabletas, cada uno necesitaba diferentes cables de carga y enchufes, muy molesto, ¿verdad? 😩

Después de que salió el USB Type-C, un solo cable resuelve muchas cosas.

MCP es un concepto similar: quiere darle a la IA una forma universal de comunicarse, para que pueda descubrir, entender y usar fácilmente herramientas o servicios externos.

¿Qué beneficios tiene? 💡

Los desarrolladores ya no tienen que investigar constantemente los parámetros de las API para conectar diferentes IAs o herramientas.

Además, la IA misma puede ser más inteligente, decidiendo según la situación qué herramienta usar para ayudar.

¿Cuál es la diferencia entre MCP y Function Calling?

Puede que hayas oído hablar de Function Calling (el AI Agent de N8N es más similar a esto), que también permite que la IA llame funciones externas.

¡Pero MCP es aún más flexible!

Function Calling generalmente requiere que primero le digas a la IA qué funciones están disponibles, como un menú.

Pero MCP es más como dejar que la IA explore activamente su entorno (Context) para ver qué herramientas hay disponibles y luego decida cómo usarlas.

Diagrama de flujo

La siguiente imagen muestra aproximadamente lo que MCP está haciendo en segundo plano cuando usas Cline en VSCode para chatear con la IA:

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

A través de Cline, que en realidad es una extensión de VSCode

Actualmente ya hay muchos awesome-mcp-servers

Muchas herramientas o servidores MCP están escritos en Python o Node.js, así que se recomienda instalarlos primero.

MCP Server es ejecutar algunos programas en tu máquina local,

alt tag

Después de que Cline obtiene la "decisión del modelo de lenguaje grande", usa esa decisión como base para llamar al MCP Server.

Resumiendo,

MCP Host es VSCode

MCP Client es Cline

MCP Server es el programa que se ejecuta en la máquina local

Si quieres agregar un servidor remoto con sse, simplemente pega la URL en Remote Servers.

alt tag

Instalar Node.js

Descargar 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 tablón comunitario ya no se mantiene

Linux actualmente solo tiene una versión mantenida por la comunidad claude-desktop-debian

Si quieres usarlo para conectar tu MCP Server remoto,

ve a la configuración de ~/.config/Claude/claude_desktop_config.json

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

El concepto utilizado es supergateway - sse--stdio

Luego reinicia Claude, si todo está configurado correctamente

alt tag

MCP Server

Context7

¡Adiós a las suposiciones de la IA! Context7 MCP junto con .clinerules optimizan el Prompt, generando con precisión el Addon de Odoo 18 en la práctica

Puedes usar el sitio web oficial en context7

Context7 MCP: proporciona la documentación de código más reciente para tu Prompt de IA

【Problema: sin Context7 ❌】

Los modelos de lenguaje grandes (LLM) a menudo dependen de datos de entrenamiento desactualizados o genéricos al responder preguntas relacionadas con código, lo que lleva a:

❌ Ejemplos de código desactualizados, basados en datos de hace un año. ❌ Generar APIs fantasma que no existen en absoluto. ❌ Dar respuestas genéricas o inaplicables para versiones antiguas de paquetes de software.

【Solución: usando Context7 ✅】

Context7 MCP puede obtener directamente la documentación y ejemplos de código más recientes y específicos de la versión desde la fuente original, y colocar esta información actualizada directamente en el contexto del Prompt que le das a la IA.

Configuración de MCP en VS Code Context7 MCP

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

Usemos Cline + Odoo 18 + gemini-2.0-flash-001 para practicar,

Aquí, además de usar Context7, también usaremos Filesystem MCP Server.

Darle todos nuestros requisitos directamente a Cline no es práctico y el resultado no es bueno; a través de .clinerules mejoramos este problema

La ubicación de la configuración está aquí

img

Puedes consultar los ejemplos en la carpeta .clinerules

.clinerules/00-doc.md - Pídele que lea los documentos con Context7 primero, para evitar alucinaciones.

.clinerules/01-logic.md - Define su lógica.

Luego dale directamente el Prompt a Cline

先閱讀文件 再開發 addons

Si durante la ejecución quieres que Cline continúe automáticamente sin pedirte permiso cada vez,

haz clic en el icono de la marca de verificación, y el autoApprove de la derecha completará el tipo de evento correspondiente; a partir de entonces, los eventos similares se omitirán

img

Augment Code

Presentamos augmentcode

Prueba de 14 días, 300 usos gratuitos (definitivamente suficiente para ti, en mis pruebas me resultó muy económico)

No hay modelos para elegir (ni se pueden cambiar), solo uno.

Usa el modelo Claude 3.7 Sonnet (si hay picos de uso, podría degradarse a 3.5)

Donación

Los artículos son originales creados después de mi propia investigación e internalización. Si te han sido útiles y quieres animarme, ¡invítame un café! :laughing:

ECPAY de Green World Technology (no requiere registro de miembro)

alt tag

Pago del patrocinador

O'Pay (requiere registro de miembro)

alt tag

Pago del patrocinador

Lista de patrocinadores

Lista de patrocinadores

Licencia

Licencia MIT