Membangun asisten kode AI dengan Agen Kode Pipet

Menulis kode bisa bermanfaat dan memuaskan, tetapi mendapatkan kode dari bekerja menjadi dapat dipresentasikan bagi rekan kerja sering kali merupakan tugas yang merepotkan. Model generatif kecerdasan buatan dapat membantu Anda menambahkan komentar kode, menemukan kesalahan sebelum dilakukan peninjau manual, dan melakukan berbagai tugas lain untuk mempermudah alur kerja coding Anda.

Tutorial ini menunjukkan cara memperluas Pipet Code Agent, alat bantuan kode dengan teknologi AI yang dibuat oleh tim AI Developer Relations di Google. Project open source ini adalah ekstensi untuk Microsoft Visual Studio Code (VS Code) yang membantu Anda menangani beberapa tugas coding yang penting tetapi kurang menyenangkan, seperti mengomentari kode Anda, menemukan kesalahan, dan menyarankan peningkatan. Ekstensi mengirimkan permintaan bantuan coding ke Gemini API dan menggabungkan balasan ke jendela pengeditan kode Anda.

Anda dapat memodifikasi Pipet agar fungsi yang sudah ada ini berfungsi lebih baik, atau membuat perintah baru untuk mendukung alur kerja pengembangan Anda dengan lebih baik.

Untuk ringkasan video project dan cara memperluasnya, termasuk insight dari orang-orang yang membuatnya, lihat AI Code Assistant - Build with Google AI. Jika tidak, Anda dapat mulai memperluas project dengan mengikuti petunjuk di bawah ini.

Penyiapan project

Petunjuk ini akan memandu Anda menyiapkan project Agen Kode Pipet untuk pengembangan dan pengujian. Langkah-langkah umumnya adalah menginstal beberapa software prasyarat, menetapkan beberapa variabel lingkungan, meng-clone project dari repositori kode, dan menjalankan penginstalan konfigurasi.

Menginstal prasyarat

Project Agen Kode Pipet berjalan sebagai ekstensi dari Visual Studio Code Microsoft, dan menggunakan Node.js serta alat npm untuk mengelola paket dan menjalankan aplikasi. Petunjuk penginstalan berikut ditujukan untuk mesin host Linux.

Untuk menginstal software yang diperlukan:

  1. Instal Visual Studio Code untuk platform Anda.
  2. Instal node dan npm dengan mengikuti petunjuk penginstalan untuk platform Anda.

Meng-clone dan mengonfigurasi project

Download kode project dan gunakan perintah penginstalan npm untuk mendownload dependensi yang diperlukan dan mengonfigurasi project. Anda memerlukan software kontrol sumber git untuk mengambil kode sumber project.

Untuk mendownload dan mengonfigurasi kode project:

  1. Clone repositori git menggunakan perintah berikut.
    git clone https://github.com/google/generative-ai-docs
  2. Secara opsional, konfigurasikan repositori git lokal untuk menggunakan checkout sparse, sehingga Anda hanya memiliki file untuk project Agen Dokumen. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Buka direktori utama project Agen Kode Pipet. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Jalankan perintah instal untuk mendownload dependensi dan mengonfigurasi project: 
    npm install

Mengonfigurasi dan menguji ekstensi

Sekarang Anda dapat menguji penginstalan dengan menjalankan Pipet Code Agent sebagai ekstensi pengembangan di VS Code di perangkat Anda. Pengujian ini akan membuka jendela Extension Development Host VS Code terpisah tempat ekstensi baru tersedia. Di jendela baru ini, Anda akan mengonfigurasi Kunci API yang digunakan ekstensi untuk mengakses Google Gemini API.

Agen Kode Pipet yang berjalan di jendela Extension Development Host Gambar 1. Jendela Host Pengembangan Ekstensi VS Code dengan perintah ekstensi Pipet.

Untuk mengonfigurasi dan menguji penyiapan Anda:

  1. Mulai aplikasi VS Code.
  2. Di VS Code, buat jendela baru dengan memilih File > New Window.
  3. Buka project Agen Kode Pipet dengan memilih File > Open Folder, dan memilih folder pipet-code-agent/.
  4. Buka file pipet-code-agent/package.json.
  5. Jalankan ekstensi dalam mode debug dengan memilih Run > Start Debugging. Langkah ini akan membuka jendela VS Code Extension Development Host yang terpisah.
  6. Buka setelan VS Code dengan memilih Code > Settings > Settings.
  7. Dapatkan Kunci API Google Gemini dari situs Developer AI Generatif, lalu salin string kunci.
  8. Tetapkan kunci API sebagai setelan konfigurasi. Di kolom Search Settings, ketik pipet, pilih tab User, dan di setelan Google > Gemini: Api Key, klik link Edit in settings.json, lalu tambahkan kunci API Gemini Anda: 
    "google.gemini.apiKey": "your-api-key-here"
  9. Simpan perubahan pada file settings.json dan tutup tab setelan.

Untuk menguji perintah ekstensi:

  1. Di jendela VS Code Extension Development Host, pilih kode apa pun di jendela editor.
  2. Buka palet perintah dengan memilih View > Command Palette.
  3. Di Palet Perintah, ketik Pipet dan pilih salah satu perintah dengan awalan tersebut.

Ubah perintah yang ada

Memodifikasi perintah yang diberikan di Agen Kode Pipet adalah cara paling sederhana untuk mengubah perilaku dan kemampuan ekstensi. Perintah komentar dan ulasan menggunakan pendekatan beberapa shot prompting dengan contoh kode dan komentar untuk kode tersebut, serta beberapa petunjuk umum untuk model generatif AI. Informasi konteks perintah ini akan memandu model generatif Gemini dalam membuat respons. Dengan mengubah petunjuk perintah, contoh, atau keduanya dalam perintah komentar atau tinjauan, Anda dapat mengubah perilaku setiap perintah yang ada.

Kumpulan petunjuk ini menjelaskan cara mengubah perintah review.ts dengan mengubah teks perintah perintah.

Untuk bersiap mengedit perintah review.ts:

  1. Mulai aplikasi VS Code.
  2. Di VS Code, buat jendela baru dengan memilih File > New Window.
  3. Buka project Agen Kode Pipet dengan memilih File > Open Folder, dan memilih folder pipet-code-agent/.
  4. Buka file pipet-code-agent/src/review.ts.

Untuk mengubah perilaku perintah review.ts:

  1. Dalam file review.ts, ubah awal konstanta PROMPT ke petunjuk yang berbeda. 
    const PROMPT = '
Write review comments for following code, identifying bugs and ways to improve code quality. Examples of bugs are syntax errors or typos, out of memory errors, and boundary value errors. Examples of improving code quality are reducing complexity of code, eliminating duplicate code, and ensuring other developers
are able to understand the code.
${CODE_LABEL}
...
  2. Secara opsional, dalam file review.ts, tambahkan contoh lain ke daftar contoh peninjauan kode dan kode. 
    ...
${REVIEW_LABEL}
There are duplicate lines of code in this control structure.
${CODE_LABEL}
const fixed_value = 128;
${REVIEW_LABEL}
Make sure constant names are in all capitals (FIXED_VALUE) for clarity.
';
  3. Simpan perubahan pada file review.ts.

Untuk menguji perintah yang diubah:

  1. Di jendela project ekstensi VS Code Pipet, mulai ulang debugger dengan memilih Run > Restart Debugging.
  2. Di jendela VS Code Extension Development Host, pilih kode apa pun di jendela editor.
  3. Buka palet perintah dengan memilih View > Command Palette.
  4. Di Palet Perintah, ketik Pipet, lalu pilih perintah Pipet: Tinjau kode yang dipilih.

Buat perintah baru

Anda dapat memperluas Pipet dengan membuat perintah baru yang melakukan tugas yang benar-benar baru dengan Gemini API. Setiap file perintah (comment.ts dan review.ts) sebagian besar bersifat mandiri, dan menyertakan kode untuk mengumpulkan teks dari editor aktif, menulis perintah, terhubung ke Gemini API, mengirim perintah, dan menangani respons.

Pipet Agen Kode dengan Nama fungsi pemilihan ditampilkan Gambar 2. Perintah rekomendasi nama fungsi baru di jendela VS Code Extension Development Host.

Kumpulan petunjuk ini menjelaskan cara membuat perintah baru menggunakan kode perintah yang ada, comment.ts, sebagai template.

Untuk membuat perintah yang merekomendasikan nama untuk fungsi:

  1. Buat salinan file pipet-code-agent/src/comment.ts bernama name.ts di direktori src/.
  2. Di VS Code, buka file src/name.ts.
  3. Ubah petunjuk perintah di file name.ts dengan mengedit nilai PROMPT. 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. Ubah nama fungsi perintah dan pesan informasinya. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Update kode assembly prompt untuk menyertakan hanya nilai PROMPT dan teks yang dipilih di editor. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Ubah output respons untuk menjelaskan apa yang dihasilkannya. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Simpan perubahan pada file review.ts.

Mengintegrasikan perintah baru

Setelah menyelesaikan kode untuk perintah baru, Anda harus mengintegrasikannya dengan ekstensi ekstensi lainnya. Update file extension.ts dan package.json untuk menjadikan perintah baru sebagai bagian dari ekstensi, dan aktifkan VS Code untuk memanggil perintah baru.

Untuk mengintegrasikan perintah name dengan kode ekstensi:

  1. Di VS Code, buka file pipet-code-agent/src/extension.ts.
  2. Tambahkan file kode baru ke ekstensi dengan menambahkan pernyataan impor baru. 
    import { generateName } from './name';
  3. Daftarkan perintah baru dengan menambahkan kode berikut ke fungsi activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Simpan perubahan pada file extension.ts.

Untuk mengintegrasikan perintah name dengan paket ekstensi:

  1. Di VS Code, buka file pipet-code-agent/package.json.
  2. Tambahkan perintah baru ke bagian commands dari file paket. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Simpan perubahan pada file package.json.

Menguji perintah baru

Setelah menyelesaikan coding perintah dan mengintegrasikannya dengan ekstensi, Anda dapat mengujinya. Perintah baru Anda hanya tersedia di jendela Extension Development Host VS Code, dan tidak di jendela VS Code tempat Anda mengedit kode untuk ekstensi.

Untuk menguji perintah yang diubah:

  1. Di jendela project ekstensi VS Code Pipet, mulai ulang debugger dengan memilih Run > Restart Debugging, yang akan memulai ulang jendela Extension Development Host terpisah.
  2. Di jendela VS Code Extension Development Host, pilih beberapa kode di jendela editor.
  3. Buka palet perintah dengan memilih View > Command Palette.
  4. Di Palet Perintah, ketik Pipet, lalu pilih perintah Pipet: Name the selected function.

Referensi tambahan

Untuk mengetahui informasi selengkapnya tentang project Agen Kode Pipet, lihat repositori kode. Jika Anda memerlukan bantuan untuk membuat aplikasi atau mencari kolaborator developer, lihat server Komunitas Discord Google Developers.

Aplikasi produksi

Jika Anda berencana men-deploy Agen Dokumen untuk audiens yang besar, perhatikan bahwa penggunaan Google Gemini API oleh Anda mungkin dikenai pembatasan kapasitas dan batasan penggunaan lainnya. Jika Anda mempertimbangkan untuk membangun aplikasi produksi dengan Gemini API seperti Agen Dokumen, lihat layanan Vertex AI Google Cloud untuk meningkatkan skalabilitas dan keandalan aplikasi Anda.