Membangun asisten kode AI dengan Agen Kode Pipet

Menulis kode bisa memuaskan dan memuaskan, tetapi mendapatkan kode dari bekerja hingga ditampilkan bagi rekan kerja sering kali merupakan tugas yang melelahkan. Artifisial AI generatif dapat membantu Anda menambahkan komentar kode, kesalahan sebelum peninjau manusia Anda lakukan, dan melakukan banyak tugas lain untuk membuat alur kerja {i>coding<i} Anda lebih mudah.

Tutorial ini menunjukkan cara memperluas Agen Kode Pipet, alat bantuan kode dengan teknologi AI yang dibangun oleh tim AI Developer Relations di Google. Project open source ini adalah ekstensi untuk Microsoft Visual Studio Code (VS Code) yang membantu Anda mengambil mengerjakan beberapa tugas {i>coding<i} yang penting, tetapi kurang menyenangkan, seperti memberi komentar kode Anda, menemukan kesalahan, dan menyarankan perbaikan. Ekstensi mengirim permintaan bantuan coding ke Gemini API dan memasukkan balasannya ke dalam jendela pengeditan kode Anda.

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

Untuk video ringkasan proyek dan cara memperluasnya, termasuk wawasan dari pembuatnya, lihat AI Code Assistant - Membangun dengan AI Google. Jika tidak, Anda dapat mulai memperpanjang 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 prasyarat mengatur beberapa variabel lingkungan, meng-clone proyek dari kode repositori, dan menjalankan instalasi konfigurasi.

Instal prasyarat

Project Pipet Code Agent berjalan sebagai ekstensi dari Microsoft Visual Studio Kode, dan menggunakan Node.js dan alat npm untuk mengelola paket dan menjalankan aplikasi. Petunjuk penginstalan berikut adalah untuk mesin {i>host<i} Linux.

Untuk menginstal software yang diperlukan:

  1. Menginstal Visual Studio Code untuk platform Anda.
  2. Instal node dan npm dengan mengikuti penginstalan petunjuk khusus 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 perlu git software kontrol sumber untuk mengambil kode sumber proyek.

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 Anda untuk menggunakan checkout sparse, jadi 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 Pipet Code Agent. 
    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 instalasi dengan menjalankan Pipet Code Agent sebagai ekstensi pengembangan di VS Code pada perangkat. Pengujian akan membuka VS terpisah Jendela Extension Development Host kode tempat ekstensi baru tersedia. Di jendela baru ini, Anda akan mengonfigurasi Kunci API yang digunakan ekstensi untuk mengakses Gemini API Google.

Pipet Code Agent berjalan di jendela Extension Development Host Gambar 1. Jendela VS Code Extension Development Host dengan Pipet perintah ekstensi.

Untuk mengonfigurasi dan menguji penyiapan Anda:

  1. Mulai aplikasi VS Code.
  2. Di VS Code, buat jendela baru dengan memilih File > Jendela Baru.
  3. Buka project Pipet Code Agent dengan memilih File > Buka Folder, dan memilih folder pipet-code-agent/.
  4. Buka file pipet-code-agent/package.json.
  5. Jalankan ekstensi dalam mode debug dengan memilih Run > Mulai Proses Debug. Langkah ini akan membuka jendela Extension Development Host VS Code yang terpisah.
  6. Buka setelan VS Code dengan memilih Code > Pengaturan > Setelan.
  7. Dapatkan Kunci Gemini API Google dari Generative AI Developer, dan salin string kunci.
  8. Setel kunci API sebagai setelan konfigurasi. Di Setelan Penelusuran kolom, ketik pipet, pilih tab Pengguna, dan di tab Google > Gemini: setelan Kunci API, klik link Edit di settings.json, dan tambahkan Kunci Gemini API: 
    "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 Extension Development Host VS Code, pilih kode apa pun di jendela editor.
  2. Buka palet perintah dengan memilih View > Palet Perintah.
  3. Pada Palet Perintah, ketik Pipet dan pilih salah satu perintah dengan awalan tersebut.

Mengubah perintah yang ada

Memodifikasi perintah yang diberikan di Pipet Code Agent adalah cara paling sederhana untuk mengubah perilaku dan kemampuan ekstensi. Komentar dan meninjau perintah menggunakan beberapa shot prompting dengan contoh kode dan komentar untuk kode tersebut, serta beberapa petunjuk umum untuk model generatif AI. Konteks perintah ini informasi memandu model generatif Gemini dalam membentuk respons. Menurut mengubah instruksi perintah, contoh, atau keduanya dalam komentar atau meninjau perintah, Anda dapat mengubah bagaimana perilaku setiap perintah yang ada.

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

Untuk mempersiapkan pengeditan perintah review.ts:

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

Untuk mengubah perilaku perintah review.ts:

  1. Di file review.ts, ubah awal PROMPT konstan ke instruksi 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 kode dan contoh peninjauan 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 > Mulai Ulang Proses Debug.
  2. Di jendela Extension Development Host VS Code, pilih kode apa pun di jendela editor.
  3. Buka palet perintah dengan memilih View > Palet Perintah.
  4. Pada Palet Perintah, ketik Pipet lalu pilih Pipet: Tinjau kode terpilih.

Buat perintah baru

Anda bisa memperluas Pipet dengan membuat perintah baru yang melakukan tugas yang sama sekali baru dengan Gemini API. Setiap file perintah (comment.ts dan review.ts) sebagian besar mandiri, dan menyertakan kode untuk mengumpulkan teks dari editor aktif, menulis perintah, menghubungkan ke Gemini API, mengirim perintah, dan menangani responsnya.

Agen Kode Pipet dengan Nama fungsi pemilihan yang ditampilkan Gambar 2. Perintah rekomendasi nama fungsi baru di Ekstensi Kode VS Jendela Host Pengembangan.

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

Untuk membuat perintah yang merekomendasikan nama fungsi:

  1. Buat salinan file pipet-code-agent/src/comment.ts yang disebut name.ts dalam 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. Mengupdate kode assembly prompt untuk hanya menyertakan PROMPT dan teks yang dipilih dalam 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 Anda menyelesaikan kode untuk perintah baru, Anda perlu mengintegrasikannya dengan sisa ekstensi. Update file extension.ts dan package.json ke buat 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. Menambahkan file kode baru ke ekstensi dengan menambahkan impor baru pernyataan pribadi Anda. 
    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 pada 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 Anda selesai melakukan {i>coding<i} perintah dan mengintegrasikannya dengan ekstensi, Anda dapat mengujinya. Perintah baru Anda hanya tersedia di VS Code Extension Development Host, dan tidak di jendela VS Code tempat Anda mengedit kode untuk ekstensi tersebut.

Untuk menguji perintah yang diubah:

  1. Di jendela project ekstensi VS Code Pipet, mulai ulang debugger dengan memilih Run > Mulai ulang Proses Debug, yang memulai ulang proses debug terpisah Jendela Extension Development Host.
  2. Di jendela Extension Development Host VS Code, pilih beberapa kode di jendela editor.
  3. Buka palet perintah dengan memilih View > Palet Perintah.
  4. Pada Palet Perintah, ketik Pipet dan pilih Pipet: Beri nama perintah fungsi yang dipilih.

Referensi lainnya

Untuk informasi selengkapnya tentang proyek Agen Kode Pipet, lihat repositori kode. Jika Anda membutuhkan bantuan untuk membuat aplikasi atau mencari developer kolaborator, lihat Perselisihan Komunitas Google Developers server tertentu.

Aplikasi produksi

Jika Anda berencana menerapkan Agen Dokumen untuk audiens dalam jumlah besar, perhatikan bahwa penggunaan Gemini API Google mungkin dikenai pembatasan kapasitas dan pembatasan penggunaan. Jika Anda mempertimbangkan untuk membangun aplikasi produksi dengan Gemini API seperti Agen Dokumen, lihat Vertex AI Google Cloud untuk meningkatkan skalabilitas dan keandalan aplikasi Anda.