Cara Menggunakan Server MCP VSCode

Pengantar VSCode MCP Server

MCP (Model Context Protocol) adalah standar terbuka inovatif yang mengubah cara model AI berinteraksi dengan alat dan layanan eksternal melalui antarmuka terpadu. Di VSCode, dukungan MCP meningkatkan mode agen GitHub Copilot dengan memungkinkan Anda menghubungkan server yang kompatibel dengan MCP ke alur kerja pengkodean berbasis AI Anda. Tutorial ini akan memandu Anda melalui semua yang perlu Anda ketahui tentang penggunaan server MCP dengan VSCode, mulai dari pengaturan awal hingga konfigurasi lanjutan dan pemecahan masalah.

💡

Sebelum menyelami pengaturan Github MCP Server, lihat Apidog—alat canggih untuk mendesain, menguji, dan mendokumentasikan API. Apidog memungkinkan Anda mengintegrasikan API Anda dengan mulus, meningkatkan alur kerja Anda dengan model terstruktur dan kolaborasi yang mudah. Jika Anda ingin meningkatkan otomatisasi dan manajemen API Anda, Apidog adalah alat pendamping yang hebat untuk digunakan bersama Zapier MCP.

button

Apa itu VSCode MCP Server

Model Context Protocol memungkinkan model AI untuk menemukan dan berinteraksi dengan alat, aplikasi, dan sumber data eksternal melalui antarmuka standar. Saat menggunakan VSCode dengan mode agen Copilot, AI dapat memanfaatkan berbagai alat untuk melakukan tugas seperti operasi file, mengakses database, atau memanggil API berdasarkan permintaan Anda.

MCP mengikuti arsitektur client-server:

Klien MCP (seperti VSCode) terhubung ke server MCP dan meminta tindakan atas nama model AI
Server MCP menyediakan alat yang mengekspos fungsionalitas tertentu melalui antarmuka yang terdefinisi dengan baik
Protokol mendefinisikan format pesan untuk komunikasi antara klien dan server, yang mencakup penemuan alat, pemanggilan, dan penanganan respons

Misalnya, server MCP sistem file mungkin menyediakan alat untuk membaca, menulis, atau mencari file dan direktori. Server MCP GitHub menawarkan alat untuk membuat daftar repositori, membuat permintaan pull, atau mengelola masalah. Server-server ini dapat berjalan secara lokal di mesin Anda atau dihosting dari jarak jauh.

Menyiapkan VSCode MCP Server Pertama Anda

Langkah 1: Menambahkan Server MCP ke Ruang Kerja Anda

Ada beberapa cara untuk menambahkan server MCP ke VSCode:

Menggunakan file konfigurasi ruang kerja:

Buat file .vscode/mcp.json di ruang kerja Anda
Pilih tombol "Add Server" untuk menambahkan templat untuk server baru
VSCode menyediakan IntelliSense untuk konfigurasi server MCP

Menggunakan Command Palette:

Jalankan perintah MCP: Add Server
Pilih "Workspace Settings" untuk membuat file .vscode/mcp.json di ruang kerja Anda

Menggunakan Pengaturan Pengguna untuk akses global:

Buka Command Palette dan jalankan MCP: Add Server
Pilih "User Settings" untuk menambahkan konfigurasi server MCP secara global

Langkah 2: Memahami Format Konfigurasi VSCode MCP Server

Konfigurasi server MCP mengikuti format JSON tertentu:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "API Key",
      "password": true
    }
  ],
  "servers": {
    "MyServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-example"],
      "env": {
        "API_KEY": "${input:api-key}"
      }
    }
  }
}

Elemen kuncinya adalah:

inputs: Mendefinisikan placeholder khusus untuk nilai konfigurasi
servers: Berisi daftar server MCP
type: Jenis koneksi ("stdio" atau "sse")
command: Perintah untuk memulai executable server
args: Array argumen yang diteruskan ke perintah
env: Variabel lingkungan untuk server

Jenis Koneksi dan Opsi Konfigurasi VSCode MCP Server

Koneksi STDIO untuk VSCode MCP Server

Untuk koneksi input/output standar:

"MyServer": {
  "type": "stdio",
  "command": "npx",
  "args": ["server.js", "--port", "3000"],
  "env": {"API_KEY": "${input:api-key}"}
}

Koneksi SSE untuk VSCode MCP Server

Untuk koneksi server-sent events:

"MyRemoteServer": {
  "type": "sse",
  "url": "http://api.example.com/sse",
  "headers": {"VERSION": "1.2"}
}

Menggunakan Variabel dalam Konfigurasi VSCode MCP Server

Anda dapat menggunakan variabel yang telah ditentukan sebelumnya dalam konfigurasi Anda:

"MyServer": {
  "type": "stdio",
  "command": "node",
  "args": ["${workspaceFolder}/server.js"]
}

Contoh Konfigurasi VSCode MCP Server Tingkat Lanjut

Berikut adalah contoh yang lebih komprehensif yang menunjukkan beberapa server dan variabel input:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "perplexity-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    "Perplexity": {
      "type": "stdio",
      "command": "docker",
      "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:perplexity-key}"
      }
    },
    "Fetch": {
      "type": "stdio",
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "RemoteServer": {
      "type": "sse",
      "url": "http://api.contoso.com/sse",
      "headers": {"VERSION": "1.2"}
    }
  }
}

Menggunakan Alat VSCode MCP dalam Mode Agen

Setelah Anda mengonfigurasi server MCP Anda, Anda dapat menggunakan alat mereka dalam mode agen Copilot:

Buka tampilan Chat (Windows, Linux: Ctrl+Alt+I, Mac: ⌃⌘I)
Pilih mode "Agent" dari dropdown
Klik tombol "Tools" untuk melihat alat yang tersedia
Pilih atau batalkan pilihan alat sesuai kebutuhan
Masukkan prompt Anda di input obrolan

Saat alat dipanggil, Anda harus mengonfirmasi tindakan sebelum dijalankan. Anda dapat mengonfigurasi VSCode untuk secara otomatis mengonfirmasi alat tertentu untuk sesi saat ini, ruang kerja, atau semua pemanggilan di masa mendatang menggunakan dropdown tombol "Continue".

Mengelola Server dan Alat VSCode MCP

Melihat dan Mengelola Server

Jalankan perintah MCP: List Servers dari Command Palette untuk melihat server MCP yang telah Anda konfigurasi. Dari tampilan ini, Anda dapat:

Memulai, menghentikan, atau memulai ulang server
Melihat konfigurasi server
Mengakses log server untuk pemecahan masalah

Referensi Alat Langsung di VSCode MCP Server

Anda dapat langsung mereferensikan alat dalam prompt Anda dengan mengetik # diikuti dengan nama alat. Ini berfungsi di semua mode obrolan (ask, edit, dan agent mode).

Konfigurasi Baris Perintah untuk VSCode MCP Server

Anda dapat menambahkan server MCP menggunakan baris perintah VSCode:

code --add-mcp "{\"name\":\"my-server\",\"command\":\"uvx\",\"args\":[\"mcp-server-fetch\"]}"

Memecahkan Masalah VSCode MCP Server

Saat VSCode mengalami masalah server MCP, ia menampilkan indikator kesalahan di tampilan Chat. Untuk mendiagnosis masalah:

Klik notifikasi kesalahan di tampilan Chat
Pilih "Show Output" untuk melihat log server
Atau, jalankan MCP: List Servers dari Command Palette, pilih server, dan pilih "Show Output"

Masalah umum meliputi:

Konfigurasi server yang salah
Ketergantungan yang hilang
Masalah konektivitas jaringan untuk server jarak jauh
Masalah izin untuk executable lokal

Membuat VSCode MCP Server Anda Sendiri

Jika Anda ingin mengembangkan server MCP Anda sendiri, Anda dapat menggunakan bahasa pemrograman apa pun yang mampu menangani stdout. Beberapa SDK resmi tersedia:

TypeScript SDK
Python SDK
Java SDK
Kotlin SDK
C# SDK

Server Anda harus mengimplementasikan standar MCP yang mendefinisikan bagaimana alat ditemukan, dipanggil, dan bagaimana respons diformat.

Penemuan Otomatis dan Integrasi VSCode MCP Server

VSCode dapat secara otomatis mendeteksi dan menggunakan kembali server MCP yang ditentukan di alat lain, seperti Claude Desktop. Anda dapat mengaktifkan penemuan otomatis dengan pengaturan chat.mcp.discovery.enabled di pengaturan VSCode Anda.

FAQ: Pertanyaan Umum tentang VSCode MCP Server

Bisakah saya mengontrol alat MCP mana yang digunakan?

Ya, Anda dapat mengaktifkan/menonaktifkan alat tertentu di antarmuka mode Agen, langsung mereferensikan alat dengan awalan # dalam prompt Anda, atau menggunakan .github/copilot-instructions.md untuk kontrol yang lebih canggih.

Apakah server MCP aman?

VSCode menerapkan langkah-langkah keamanan seperti mengharuskan konfirmasi sebelum menjalankan alat dan menyimpan input sensitif seperti kunci API dengan aman. Namun, Anda hanya boleh menggunakan server MCP dari sumber tepercaya.

Bisakah saya menggunakan server MCP dengan asisten AI lainnya?

MCP adalah standar terbuka yang dirancang untuk bekerja dengan beberapa model AI. Meskipun VSCode saat ini mengintegrasikannya dengan GitHub Copilot, protokol ini kompatibel dengan sistem AI lain yang mendukung standar tersebut.

Kesimpulan: Memaksimalkan Potensi VSCode MCP Server

Server MCP secara signifikan memperluas kemampuan asisten AI di VSCode dengan menyediakan akses standar ke alat dan layanan eksternal. Dengan mengikuti panduan ini, Anda sekarang dapat:

Menyiapkan dan mengonfigurasi server MCP di lingkungan VSCode Anda
Menggunakan alat MCP dengan mode agen GitHub Copilot
Mengelola dan memecahkan masalah server MCP Anda
Membuat server MCP Anda sendiri jika diperlukan

Model Context Protocol masih terus berkembang, dengan ekosistem server dan alat yang terus bertambah yang tersedia untuk integrasi dengan proyek Anda. Dengan menguasai server VSCode MCP, Anda memposisikan diri Anda di garis depan pengembangan yang dibantu AI, memungkinkan alur kerja pengkodean yang lebih kuat dan efisien.

Terus jelajahi ekosistem MCP dan bereksperimen dengan server yang berbeda untuk menemukan alat yang paling meningkatkan proses pengembangan Anda. Dengan konfigurasi yang tepat dan pemahaman tentang protokol, Anda dapat mengubah asisten AI Anda menjadi mitra pengkodean yang benar-benar hebat.