README.md

Menggunakan server dari ekstensi AI Toolkit untuk Visual Studio Code

Saat Anda membangun agen AI, bukan hanya soal menghasilkan respons cerdas; tetapi juga memberikan kemampuan kepada agen Anda untuk mengambil tindakan. Di sinilah Model Context Protocol (MCP) berperan. MCP memudahkan agen untuk mengakses alat dan layanan eksternal secara konsisten. Bayangkan seperti menghubungkan agen Anda ke kotak peralatan yang benar-benar bisa digunakan.

Misalnya, Anda menghubungkan agen ke server MCP kalkulator Anda. Tiba-tiba, agen Anda bisa melakukan operasi matematika hanya dengan menerima perintah seperti “Berapa 47 kali 89?”—tanpa perlu menulis logika khusus atau membuat API kustom.

Ikhtisar

Pelajaran ini membahas cara menghubungkan server MCP kalkulator ke agen dengan ekstensi AI Toolkit di Visual Studio Code, memungkinkan agen Anda melakukan operasi matematika seperti penjumlahan, pengurangan, perkalian, dan pembagian melalui bahasa alami.

AI Toolkit adalah ekstensi kuat untuk Visual Studio Code yang mempermudah pengembangan agen. AI Engineer dapat dengan mudah membangun aplikasi AI dengan mengembangkan dan menguji model AI generatif—baik secara lokal maupun di cloud. Ekstensi ini mendukung sebagian besar model generatif utama yang tersedia saat ini.

Catatan: AI Toolkit saat ini mendukung Python dan TypeScript.

Tujuan Pembelajaran

Pada akhir pelajaran ini, Anda akan dapat:

• Menggunakan server MCP melalui AI Toolkit.
• Mengonfigurasi konfigurasi agen agar dapat menemukan dan memanfaatkan alat yang disediakan oleh server MCP.
• Menggunakan alat MCP melalui bahasa alami.

Pendekatan

Berikut cara pendekatan yang perlu kita lakukan secara garis besar:

• Membuat agen dan mendefinisikan system prompt-nya.
• Membuat server MCP dengan alat kalkulator.
• Menghubungkan Agent Builder ke server MCP.
• Menguji pemanggilan alat agen melalui bahasa alami.

Bagus, sekarang setelah kita memahami alurnya, mari konfigurasikan agen AI untuk memanfaatkan alat eksternal melalui MCP, meningkatkan kemampuannya!

Prasyarat

• Visual Studio Code
• AI Toolkit untuk Visual Studio Code

Latihan: Menggunakan server

Dalam latihan ini, Anda akan membangun, menjalankan, dan meningkatkan agen AI dengan alat dari server MCP di dalam Visual Studio Code menggunakan AI Toolkit.

-0- Langkah awal, tambahkan model OpenAI GPT-4o ke My Models

Latihan ini menggunakan model GPT-4o. Model harus ditambahkan ke My Models sebelum membuat agen.

1. Buka ekstensi AI Toolkit dari Activity Bar.
2. Di bagian Catalog, pilih Models untuk membuka Model Catalog. Memilih Models akan membuka Model Catalog di tab editor baru.
3. Di bar pencarian Model Catalog, ketik OpenAI GPT-4o.
4. Klik + Add untuk menambahkan model ke daftar My Models Anda. Pastikan Anda memilih model yang Hosted by GitHub.
5. Di Activity Bar, pastikan model OpenAI GPT-4o muncul di daftar.

-1- Membuat agen

Agent (Prompt) Builder memungkinkan Anda membuat dan menyesuaikan agen AI Anda sendiri. Pada bagian ini, Anda akan membuat agen baru dan menetapkan model untuk menjalankan percakapan.

1. Buka ekstensi AI Toolkit dari Activity Bar.
2. Di bagian Tools, pilih Agent (Prompt) Builder. Memilih ini akan membuka Agent (Prompt) Builder di tab editor baru.
3. Klik tombol + New Agent. Ekstensi akan memulai wizard setup melalui Command Palette.
4. Masukkan nama Calculator Agent dan tekan Enter.
5. Di Agent (Prompt) Builder, pada kolom Model, pilih model OpenAI GPT-4o (via GitHub).

-2- Membuat system prompt untuk agen

Setelah agen dibuat, saatnya menentukan kepribadian dan tujuannya. Pada bagian ini, Anda akan menggunakan fitur Generate system prompt untuk mendeskripsikan perilaku agen—dalam hal ini agen kalkulator—dan model akan menulis system prompt untuk Anda.

1. Pada bagian Prompts, klik tombol Generate system prompt. Tombol ini membuka prompt builder yang menggunakan AI untuk membuat system prompt agen.
2. Di jendela Generate a prompt, masukkan: You are a helpful and efficient math assistant. When given a problem involving basic arithmetic, you respond with the correct result.
3. Klik tombol Generate. Notifikasi akan muncul di kanan bawah yang mengonfirmasi bahwa system prompt sedang dibuat. Setelah selesai, prompt akan muncul di kolom System prompt pada Agent (Prompt) Builder.
4. Tinjau System prompt dan ubah jika diperlukan.

-3- Membuat server MCP

Setelah Anda menentukan system prompt agen—yang mengarahkan perilaku dan responsnya—saatnya melengkapi agen dengan kemampuan praktis. Pada bagian ini, Anda akan membuat server MCP kalkulator dengan alat untuk melakukan penjumlahan, pengurangan, perkalian, dan pembagian. Server ini memungkinkan agen Anda melakukan operasi matematika secara real-time berdasarkan perintah bahasa alami.

AI Toolkit dilengkapi dengan template yang memudahkan pembuatan server MCP Anda sendiri. Kita akan menggunakan template Python untuk membuat server MCP kalkulator.

Catatan: AI Toolkit saat ini mendukung Python dan TypeScript.

1. Di bagian Tools pada Agent (Prompt) Builder, klik tombol + MCP Server. Ekstensi akan membuka wizard setup melalui Command Palette.

2. Pilih + Add Server.

3. Pilih Create a New MCP Server.

4. Pilih template python-weather.

5. Pilih Default folder untuk menyimpan template server MCP.

6. Masukkan nama server berikut: Calculator

7. Jendela Visual Studio Code baru akan terbuka. Pilih Yes, I trust the authors.

8. Gunakan terminal (Terminal > New Terminal) untuk membuat virtual environment: python -m venv .venv

9. Aktifkan virtual environment melalui terminal:

   1. Windows - .venv\Scripts\activate
   2. macOS/Linux - source venv/bin/activate

10. Instal dependensi melalui terminal: pip install -e .[dev]

11. Di tampilan Explorer pada Activity Bar, buka direktori src dan pilih server.py untuk membuka file di editor.

12. Ganti kode dalam file server.py dengan yang berikut dan simpan:

    """
    Sample MCP Calculator Server implementation in Python.
    
    
    This module demonstrates how to create a simple MCP server with calculator tools
    that can perform basic arithmetic operations (add, subtract, multiply, divide).
    """
    
    from mcp.server.fastmcp import FastMCP
    
    server = FastMCP("calculator")
    
    @server.tool()
    def add(a: float, b: float) -> float:
        """Add two numbers together and return the result."""
        return a + b
    
    @server.tool()
    def subtract(a: float, b: float) -> float:
        """Subtract b from a and return the result."""
        return a - b
    
    @server.tool()
    def multiply(a: float, b: float) -> float:
        """Multiply two numbers together and return the result."""
        return a * b
    
    @server.tool()
    def divide(a: float, b: float) -> float:
        """
        Divide a by b and return the result.
        
        Raises:
            ValueError: If b is zero
        """
        if b == 0:
            raise ValueError("Cannot divide by zero")
        return a / b

-4- Menjalankan agen dengan server MCP kalkulator

Sekarang agen Anda sudah memiliki alat, saatnya menggunakannya! Pada bagian ini, Anda akan mengirim perintah ke agen untuk menguji dan memvalidasi apakah agen menggunakan alat yang tepat dari server MCP kalkulator.

Anda akan menjalankan server MCP kalkulator di mesin pengembangan lokal melalui Agent Builder sebagai klien MCP.

1. Tekan F5 to start debugging the MCP server. The Agent (Prompt) Builder will open in a new editor tab. The status of the server is visible in the terminal.
2. In the User prompt field of the Agent (Prompt) Builder, enter the following prompt: Saya membeli 3 barang dengan harga $25 masing-masing, lalu menggunakan diskon $20. Berapa yang saya bayar?
3. Click the Run button to generate the agent's response.
4. Review the agent output. The model should conclude that you paid $55.
5. Here's a breakdown of what should occur:
   • The agent selects the multiply and substract tools to aid in the calculation.
   • The respective a and b values are assigned for the multiply tool.
   • The respective a and b nilai-nilai tersebut diberikan untuk alat subtract.
   • Respons dari masing-masing alat akan muncul di bagian Tool Response.
   • Output akhir dari model akan muncul di bagian Model Response.
6. Kirim perintah tambahan untuk menguji agen lebih lanjut. Anda bisa mengubah perintah yang ada di kolom User prompt dengan mengklik dan mengganti isinya.
7. Setelah selesai menguji agen, Anda bisa menghentikan server melalui terminal dengan menekan CTRL/CMD+C untuk keluar.

Tugas

Coba tambahkan entri alat tambahan ke file server.py Anda (misalnya: mengembalikan akar kuadrat dari sebuah angka). Kirim perintah tambahan yang mengharuskan agen menggunakan alat baru Anda (atau alat yang sudah ada). Pastikan untuk me-restart server agar alat baru dimuat.

Solusi

Solution

Poin Penting

Hal penting yang bisa diambil dari bab ini adalah:

• Ekstensi AI Toolkit adalah klien yang hebat untuk menggunakan Server MCP dan alat-alatnya.
• Anda dapat menambahkan alat baru ke server MCP, memperluas kemampuan agen agar memenuhi kebutuhan yang berkembang.
• AI Toolkit menyertakan template (misalnya template server MCP Python) untuk mempermudah pembuatan alat kustom.

Sumber Tambahan

• Dokumentasi AI Toolkit

Selanjutnya

• Selanjutnya: Testing & Debugging

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berusaha untuk akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi yang penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.