Hoe MCP te integreren met GitHub Copilot in VS Code

Wat is MCP?

Het Model Context Protocol (MCP)is eenopen standaard ontwikkeld door Anthropicom de manier te vereenvoudigen en te standaardiseren hoe grote taalmodellen (LLM's) integreren met externe tools, databases en API's. Beschouw MCP als de “USB-C-poort” voor AI-modellen: net zoals USB-C unified device-connectiviteit, streeft MCP ernaar een universele interface te creëren voor AI-naar-tool-interactie.

Oorspronkelijk gebouwd om te verbeterenClaude'svermogen om te communiceren met externe systemen, was MCPopen source begin 2024om de acceptatie binnen de hele sector te bevorderen. Door het protocol openbaar te maken, was het doel van Anthropic om een ​​gedeelde infrastructuur voor toolcommunicatie op te zetten die de behoefte aan aangepaste integraties minimaliseert en tegelijkertijd demodulariteit,interoperabiliteit, Enproductiviteit van ontwikkelaarsin AI-toepassingen.

Via MCP kunnen taalmodellen:

• Roep dynamisch API's aan en haal realtime gegevens op
• Communiceer met databases en tools van derden met behulp van een consistente
  formaat
• Vermijd hardgecodeerde logica, waardoor modelgedrag flexibeler wordt
  onderhoudbaar

Kortom,MCP hervormt de manier waarop AI-modellen aansluiten op de echte wereld, waarbij wordt verschoven van geïsoleerde, monolithische systemen naar flexibele, gereedschapsbewuste agenten die kunnen redeneren, ophalen en handelen met behulp van gestandaardiseerde methoden.

Vereisten

Zorg ervoor dat u over het volgende beschikt voordat u begint:

Visual Studio-code (VS-code): bijgewerkt naar de nieuwste versie.

GitHub-account: Met toegang tot GitHub Copilot (gratis, Pro, Business of Enterprise-abonnement).

GitHub Copilot-extensies: Zowel GitHub Copilot als GitHub Copilot Chat-extensies geïnstalleerd en ingeschakeld in VS Code.

Knooppunt.js: Nieuwste LTS-versie geïnstalleerd (controleer metnode -vin uw terminal). Downloaden van deofficiële Node.js-websiteindien nodig.

Python: Geïnstalleerd voor PIP-pakketten (optioneel, afhankelijk van de MCP-server). Downloaden van deofficiële Python-websiteindien nodig.

Git: Geïnstalleerd voor versiebeheer en repositorybeheer.

Stap 1: Het instellen van de
Omgeving

Update VS-code:

Open VS Code en controleer op updates via het menu Help > Controleren op updates.

Zorg ervoor dat u de nieuwste stabiele versie of Insiders-versie gebruikt om MCP-integratie te ondersteunen.

Meld u aan bij GitHub:

Ga in VS Code naar het menu Accounts in de activiteitenbalk.

Selecteer 'Aanmelden met GitHub om GitHub Copilot te gebruiken' en volg de aanwijzingen om u te verifiëren met uw GitHub-account. Als u geen Copilot-abonnement heeft, wordt u aangemeld voor het Copilot Free-abonnement met beperkte voltooiingen en chatinteracties.

Installeer Node.js en Python:

Controleer de installatie van Node.js door deze uit te voerennode -vin uw terminal. Installeer de nieuwste LTS-versie als deze niet aanwezig is.

Verifieer de Python-installatie door uit te voerenpython --versionofpython3 --version. Installeer Python indien nodig voor op PIP gebaseerde MCP-servers.

MCP ondersteunt meerdere talen en pakketten (bijvoorbeeld TypeScript, Docker, C#), maar deze handleiding richt zich op Node.js voor NPX-pakketten en Python voor PIP-pakketten.

Installeer GitHub Copilot-extensies:

Ga in VS Code naar de weergave Extensies (Ctrl+Shift+XofCmd+Shift+Xop macOS).

Zoek naar “GitHub Copilot” en installeer beideGitHub-copilootEnGitHub Copiloot-chatextensies.

Start VS Code opnieuw na installatie.

Stap 2: MCP configureren in VS Code

MCP-servers verbeteren die van GitHub CopilotAgent-modusdoor tools te bieden voor taken zoals repositorybeheer, bestandsbewerkingen of API-aanroepen. Zo configureert u een MCP-server in VS Code:

Aanbevolen lees:Integreer Zoom stap voor stap met Google Agenda

Kies een MCP-server:

Bezoek deMCP-documentatieofGitHub's MCP-serverrepositoryvoor een lijst met ondersteunde servers (bijvoorbeeld GitHub MCP-server, Microsoft Playwright MCP-server).

Voor deze handleiding gebruiken we deGitHub MCP-servervoor repositorygerelateerde acties zoals het maken van problemen of het vergelijken van bestanden.

Installeer de MCP-server:

Open een terminal in VS Code (Ctrl+`(next 1) orCmd+` op macOS).

Voor de GitHub MCP-server volgt u de installatie-instructies van de officiële repository (bijv.npm install @github/copilot-language-servervoor op Node.js gebaseerde servers).

U kunt ook de VS Code-interface gebruiken:

Open de GitHub Copilot Chat-weergave (Ctrl+Alt+IofCmd+Alt+I).

SelecteerAgent-modusuit de vervolgkeuzelijst chatmodus.

Klik op de knop “Install MCP Server” als daarom wordt gevraagd (bijvoorbeeld voor Azure MCP Server of GitHub MCP Server).

Configureer MCP in Werkruimte-instellingen:

Maak een.vscode/mcp.jsonbestand in uw werkruimtemap om MCP-serverinstellingen te definiëren. Voorbeeld:

Kopiëren

{
	"servers": [
	{
		"name": "GitHub MCP Server",
		"transport": "stdio",
		"command": ["node", "./node_modules/@github/copilot-language-server/dist/language-server.js", "--stdio", "true"]
	}
	]
}
											

U kunt ook MCP-serverinstellingen toevoegen aan uw gebruikersinstellingen(Ctrl+,ofCmd+,> Zoek naar “MCP”):

Kopiëren

{
	"mcp.servers": [
		{
		"name": "GitHub MCP Server",
		"transport": "stdio",
		"command": ["node", "./node_modules/@github/copilot-language-server/dist/language-server.js", "--stdio", "true"]
		}
	]
	}
											

Zorg ervoor dat decommandverwijst naar het juiste pad voor het uitvoerbare bestand van uw MCP-server.

Schakel MCP-tools in:

Ga in de Copilot Chat-weergave naarAgent-modus.

Klik op deHulpmiddelenen vernieuw de lijst met hulpmiddelen. De geïnstalleerde MCP-server (bijvoorbeeld “GitHub MCP Server”) zou moeten verschijnen. Schakel het indien nodig in.

Stap 3: MCP-code schrijven en testen

Met MCP kan Copilot acties uitvoeren zoals het maken van GitHub-problemen of het vergelijken van bestanden. Hier leest u hoe u MCP-gerelateerde interacties schrijft en test:

MCP-prompts schrijven:

Zorg ervoor dat in de Copilot Chat-weergaveAgent-modusis geselecteerd.

Voeg context toe met behulp van deContext toevoegenknop of variabelen zoals#fileof#codebase.

MCP-interacties testen:

Voer de prompt in het invoerveld Copilot Chat in en druk op Enter.

Copilot zal de tools van de MCP-server aanroepen (bijvoorbeeld de GitHub API voor het maken van problemen) en de resultaten weergeven in de chatweergave.

Bekijk de uitvoer (bijvoorbeeld een nieuw probleem dat in uw repository is aangemaakt of een verschil tussen bestandsvergelijkingen).

Accepteer wijzigingen door te selecterenHoudenofAccepterenin de chatweergave, of wijs ze af als ze onjuist zijn.

Voorbeeld Node.js-code voor MCP-interactie:

Als u een aangepaste MCP-server ontwikkelt, gebruikt u de MCP SDK. Hieronder ziet u een eenvoudig Node.js-voorbeeld om een ​​tool te maken voor het weergeven van repositorybestanden:

Kopiëren

const { MCPServer } = require('@anthropic/mcp-sdk');
	
const server = new MCPServer({
transport: 'stdio',
tools: [
	{
	name: 'list_repository_files',
	description: 'Lists files in a GitHub repository',
	execute: async (params) => {
		const { repo } = params;
		// Simulated GitHub API call
		return ['index.js', 'package.json', 'README.md'];
	},
	},
],
});

server.start();
											

Bewaar dit alsmcp-server.jsen voer het uit metnode mcp-server.js.Configureer VS Code om deze server te gebruiken, zoals weergegeven in stap 2.

Voorbeeld Python-code voor MCP-interactie:

Voor op Python gebaseerde MCP-servers gebruikt u de Python MCP SDK:

Kopiëren

from mcp_sdk import MCPServer

server = MCPServer(
	transport="stdio",
	tools=[
		{
			"name": "create_github_issue",
			"description": "Creates a GitHub issue in a repository",
			"execute": lambda params: f"Issue created in {params['repo']} with title: {params['title']}",
		}
	],
)

server.start()span>Use async/await for asynchronous code.
										

Opslaan alsmcp_server.pyen mee rennenpython mcp_server.py. Update de.vscode/mcp.jsonbestand om naar dit script te verwijzen.

Stap 4: Geavanceerde functies en maatwerk

Aangepaste instructies:

Maak een.github/copilot-instructions.mdbestand om projectspecifieke context te bieden (bijvoorbeeld coderingsstandaarden, voorkeursbibliotheken). Voorbeeld:

Kopiëren

# Copilot Instructions
This project is a web application built with Node.js and Express.
- Use camelCase for variable names.
- Prefer async/await over callbacks.
- Use the GitHub MCP server for repository actions.
											

Copilot past deze instructies automatisch toe in Agentmodus.

Dynamische toolupdates:

MCP-servers kunnen tools dynamisch bijwerken met behulp van lijstgewijzigde gebeurtenissen. Wijzig uw MCP-servercode om updates uit te zenden wanneer er nieuwe tools worden toegevoegd.

Externe MCP-servers:

Host MCP-servers op platforms zoals Azure Container Apps voor externe toegang. Configureer VS Code om verbinding te maken via door de server verzonden gebeurtenissen (SSE) in plaats van stdio.

Snelle techniek:

Gebruik specifieke aanwijzingen voor betere resultaten. Voorbeeld: “Genereer een Node.js-functie om gegevens op te halen van een API met behulp van de GitHub MCP-server.

Stap 5: Problemen oplossen en best practices

Problemen oplossen:

• MCP-server niet gedetecteerd: Controleer de
  .vscode/mcp.jsonbestand voor de juiste opdrachtpaden. Loop
  MCP: List Serversvanuit het opdrachtpalet om te verifiëren.
• Geen suggesties: Zorg ervoor dat de agentmodus actief is en dat de
  De MCP-server is ingeschakeld in het menu Extra.
• Fouten in chatweergave: Selecteer de foutmelding
  en kies “Toon uitvoer” om serverlogboeken te bekijken.
• Authenticatieproblemen: Authenticeer uw GitHub opnieuw
  account via het Accounts-menu als Copilot geen verbinding kan maken.

Beste praktijken:

• Gebruik vertrouwde MCP-servers: Installeer alleen servers van
  geverifieerde bronnen om veiligheidsrisico's te voorkomen.
• Houd aanwijzingen specifiek: Breek taken op in kleinere,
  duidelijke aanwijzingen (bijvoorbeeld “Genereer een functie” in plaats van “Bouw een
  app”).
• Instructies voor versiebeheer: Winkel
  .github/copilot-instructions.mdin uw repository om te delen
  met jouw team.
• Wijzigingen testen: Beoordeel en test altijd Copilot's
  suggesties voordat u deze accepteert, omdat MCP-acties bestanden kunnen wijzigen of
  opslagplaatsen.

Conclusie

Door het Model Context Protocol (MCP) te integreren met GitHub Copilot in VS Code worden krachtige AI-gestuurde mogelijkheden ontgrendeld, waardoor naadloze interactie met GitHub-repository's, API's en externe tools mogelijk wordt. Door deze handleiding te volgen, heeft u geleerd hoe u uw omgeving instelt, MCP-servers configureert, MCP-interacties schrijft en test en geavanceerde functies gebruikt, zoals aangepaste instructies. Met de gestandaardiseerde interface van MCP kunt u de Agent-modus van Copilot uitbreiden om aan de behoeften van uw project te voldoen, waardoor de productiviteit en modulariteit worden vergroot.

Raadpleeg deze bronnen voor verdere verkenning:

Experimenteer met verschillende MCP-servers en prompts om Copilot aan te passen aan uw workflow, en deel uw feedback met de community om de toekomst van AI-gestuurde ontwikkeling vorm te geven!