MCP Server di VS Code: Setup, Tools, dan Workflow AI

Daftar Isi

• Pengenalan MCP Server
• Mengapa MCP Server Penting?
• Cara Menggunakan MCP Server di VSCode
• MCP Server Populer
• Membuat Custom MCP Server
• Best Practices
• Troubleshooting
• FAQ

Pengenalan MCP Server

Model Context Protocol (MCP) adalah protokol terbuka yang dikembangkan oleh Anthropic untuk menghubungkan aplikasi AI dengan berbagai sumber data dan tools. MCP Server berperan sebagai jembatan yang memungkinkan aplikasi AI seperti Claude untuk mengakses data lokal, API eksternal, dan berbagai layanan dengan cara yang terststandarisasi dan aman.

Dengan MCP, Kamu dapat memberikan konteks tambahan kepada AI assistant tanpa perlu melakukan copy-paste manual atau mengintegrasikan setiap sumber data secara terpisah. Ini membuka kemungkinan baru untuk produktivitas dan otomasi dalam workflow development Kamu.

Mengapa MCP Server Penting?

MCP Server memberikan beberapa keuntungan utama:

Standarisasi Integrasi: Dengan protokol yang konsisten, Kamu tidak perlu membuat custom integration untuk setiap aplikasi atau sumber data yang berbeda.

Keamanan: MCP dirancang dengan mempertimbangkan keamanan, memungkinkan kontrol akses yang granular terhadap data dan tools yang dapat diakses oleh AI.

Fleksibilitas: Kamu dapat menghubungkan berbagai jenis sumber data, mulai dari filesystem lokal, database, hingga API pihak ketiga seperti Google Drive, Slack, atau GitHub.

Produktivitas: AI dapat mengakses informasi yang relevan secara langsung, membuat respons lebih akurat dan kontekstual untuk kebutuhan spesifik Kamu.

Cara Menggunakan MCP Server di VSCode

Langkah 1: Instalasi Extension

Untuk menggunakan MCP di VSCode, Kamu perlu menginstal extension yang mendukung MCP. Saat ini, beberapa extension AI assistant di VSCode mulai mengintegrasikan dukungan MCP.

1. Buka VSCode
2. Pergi ke Extensions marketplace (Ctrl+Shift+X atau Cmd+Shift+X)
3. Cari extension yang mendukung MCP (seperti Cline, Continue, atau extension AI lainnya)
4. Klik Install

Langkah 2: Konfigurasi MCP Server

Setelah extension terinstal, Kamu perlu mengkonfigurasi MCP Server yang ingin digunakan. Konfigurasi biasanya dilakukan melalui file JSON di folder konfigurasi VSCode atau extension.

Contoh konfigurasi dasar MCP (biasanya di file settings.json atau file konfigurasi khusus extension):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      }
    }
  }
}

Langkah 3: Instalasi MCP Server Packages

Banyak MCP server tersedia sebagai npm packages. Kamu dapat menginstalnya secara global atau menggunakan npx untuk menjalankannya on-demand.

Beberapa MCP server populer:

• @modelcontextprotocol/server-filesystem: Akses ke filesystem lokal
• @modelcontextprotocol/server-github: Integrasi dengan GitHub
• @modelcontextprotocol/server-postgres: Koneksi ke database PostgreSQL
• @modelcontextprotocol/server-sqlite: Akses ke database SQLite

Untuk menginstal secara global:

npm install -g @modelcontextprotocol/server-filesystem

Langkah 4: Mengaktifkan dan Menggunakan MCP

Setelah konfigurasi selesai:

1. Restart VSCode atau reload window (Ctrl+Shift+P > “Reload Window”)
2. Buka AI assistant yang Kamu gunakan di VSCode
3. MCP server yang telah dikonfigurasi akan otomatis tersedia untuk digunakan oleh AI
4. Kamu dapat langsung meminta AI untuk mengakses data atau melakukan operasi melalui MCP server

Contoh penggunaan:

• “Baca file README.md di project ini” (menggunakan filesystem MCP)
• “Tampilkan semua issues terbuka di repository GitHub saya” (menggunakan GitHub MCP)
• “Query database untuk mendapatkan user yang terdaftar minggu ini” (menggunakan database MCP)

Langkah 5: Membuat Custom MCP Server (Opsional)

Jika Kamu memiliki kebutuhan khusus, Kamu dapat membuat MCP server sendiri. Anthropic menyediakan SDK untuk berbagai bahasa pemrograman.

MCP Server Populer

1. Filesystem MCP Server

Memberikan akses ke file dan folder dalam project:

npx @modelcontextprotocol/server-filesystem /path/to/project

2. GitHub MCP Server

Integrasi lengkap dengan GitHub untuk repository management:

GITHUB_TOKEN=your_token npx @modelcontextprotocol/server-github

3. Database MCP Servers

Untuk PostgreSQL:

npx @modelcontextprotocol/server-postgres \
  --host localhost \
  --port 5432 \
  --database mydb \
  --user postgres

Untuk SQLite:

npx @modelcontextprotocol/server-sqlite /path/to/database.db

Membuat Custom MCP Server

Meskipun sudah ada banyak MCP server yang siap pakai, terkadang Kamu memiliki kebutuhan spesifik yang tidak tercakup oleh server yang ada. Di sinilah Kamu dapat membuat custom MCP server sendiri. Dengan SDK yang disediakan Anthropic, membuat custom MCP server menjadi cukup mudah bahkan untuk developer pemula. Kamu dapat membuat server yang menghubungkan AI assistant dengan sistem internal perusahaan Kamu, database proprietary, atau API khusus yang Kamu miliki. Ini membuka kemungkinan tak terbatas untuk mengintegrasikan tools dan data yang paling relevan dengan workflow development Kamu.

Setup Dasar dengan TypeScript

npm init -y
npm install @modelcontextprotocol/sdk
npm install -D typescript ts-node

Custom server example:

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio";
import { Server } from "@modelcontextprotocol/sdk/server/base";
import {
  Tool,
  TextContent,
  CallToolRequestSchema,
} from "@modelcontextprotocol/sdk/types";

const server = new Server({
  name: "my-custom-server",
  version: "1.0.0",
});

const tools: Tool[] = [
  {
    name: "get_weather",
    description: "Get current weather for a city",
    inputSchema: {
      type: "object",
      properties: {
        city: { type: "string", description: "City name" },
      },
      required: ["city"],
    },
  },
];

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_weather") {
    const city = request.params.arguments.city;
    // Implement your logic here
    return {
      content: [
        {
          type: "text" as const,
          text: `Weather information for ${city}...`,
        },
      ],
    };
  }
  throw new Error("Unknown tool");
});

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools,
}));

const transport = new StdioServerTransport();
server.connect(transport);

Best Practices

✅ Praktik Terbaik untuk MCP Server:

1. Keamanan Token: Jangan hardcode token API. Gunakan environment variables.

   export GITHUB_TOKEN="your_token"
   export DATABASE_URL="your_db_url"

2. Rate Limiting: Implementasikan rate limiting untuk mencegah abuse.

3. Error Handling: Selalu tangani error dengan baik dan berikan pesan yang informatif.

4. Logging: Tambahkan logging untuk debugging dan monitoring.

5. Testing: Test MCP server Kamu sebelum deploy ke production.

6. Versioning: Maintain backward compatibility atau document breaking changes.

Troubleshooting

MCP Server Tidak Terhubung

Problem: VSCode tidak bisa connect ke MCP server.

Solusi:

• Verifikasi command path dan arguments di konfigurasi
• Check apakah package sudah terinstal: npm list @modelcontextprotocol/sdk
• Lihat output VSCode di Developer Tools (Help > Toggle Developer Tools)

Permission Denied

Problem: “Permission denied” saat mengakses file atau resource.

Solusi:

• Verifikasi path permissions
• Pastikan user memiliki akses ke resource yang diminta
• Check environment variables (misalnya GITHUB_TOKEN)

Timeout Issues

Problem: MCP server sering timeout.

Solusi:

• Increase timeout di extension settings
• Optimize query/request yang lambat
• Check network connectivity jika menggunakan remote resources

FAQ

Q: Apakah MCP gratis? A: Ya, MCP adalah protokol open-source dari Anthropic dan gratis untuk digunakan.

Q: Bisakah MCP bekerja offline? A: Ya, MCP server lokal (filesystem, SQLite) dapat bekerja offline. MCP server yang memerlukan API eksternal memerlukan koneksi internet.

Q: Apakah MCP aman? A: MCP dirancang dengan keamanan sebagai prioritas. Selalu gunakan HTTPS untuk komunikasi dan jangan expose token API.

Q: Berapa banyak MCP server yang bisa terhubung? A: Tidak ada batasan hard limit, tapi performanya tergantung pada resource sistem Kamu.

Resources

• Official MCP Documentation
• MCP GitHub Repository
• MCP Server Examples

---

Sudah mencoba MCP Server? Share pengalaman Kamu di comment! 💬