Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Perintah dan kontrol: Mengatur pengembangan aplikasi dengan Gemini dan MCP

1. Pengantar

Dalam lab interaktif ini, Anda akan mempraktikkan keterampilan pengembangan modern dengan mengorkestrasi Antigravity untuk membangun aplikasi berbasis cloud yang lengkap, serta mempelajari cara menggunakan MCP Pengetahuan Developer dan keterampilan agen untuk meningkatkan kualitas pengetahuan dan output agen.

Kita akan membangun "Sistem Pengiriman Kucing", sebuah aplikasi yang membuat gambar kucing menggunakan Gemini 3.1 Flash Image, yang juga dikenal sebagai Nano Banana 2. Backend aplikasi akan dikembangkan menggunakan Antigravity SDK dan di-deploy ke Cloud Run. Kita juga akan membuat frontend modern menggunakan lit dan vite. Semua ini tanpa menulis satu baris kode pun secara manual.

Yang akan Anda pelajari

Cara menggunakan Antigravity CLI dalam mode cepat dan perencanaan
Cara memberi Antigravity akses ke dokumentasi developer Google menggunakan server MCP Pengetahuan Developer
Cara menginstal skill kustom ke Antigravity CLI
Cara menggunakan Antigravity untuk men-deploy dan mengaudit aplikasi

Prasyarat

Pengalaman menggunakan terminal
Membaca dan memahami kode
Pengetahuan dasar tentang agen pengodean AI
Pemahaman dasar tentang konsep cloud

2. Penyiapan

Ikuti petunjuk di bawah untuk menginisialisasi Project Google Cloud yang diperlukan untuk codelab ini. Setelah menginisialisasi project, sebaiknya Anda menjalankan codelab ini di Cloud Shell, karena dilengkapi dengan semua alat yang diperlukan untuk menjalankannya secara langsung.

Jika ingin menjalankan codelab ini di lingkungan lokal, Anda harus menginstal python, uv, dan editor kode sebelum melanjutkan. Semua petunjuk dalam codelab ini mengasumsikan Anda menjalankannya di Cloud Shell, kecuali jika disebutkan lain.

Penyiapan lingkungan mandiri

Login ke Google Cloud Console dan buat project baru atau gunakan kembali project yang sudah ada. Jika belum memiliki akun Gmail atau Google Workspace, Anda harus membuatnya.

Project name adalah nama tampilan untuk peserta project ini. String ini adalah string karakter yang tidak digunakan oleh Google API. Anda dapat memperbaruinya kapan saja.
Project ID bersifat unik di semua project Google Cloud dan tidak dapat diubah (tidak dapat diubah setelah ditetapkan). Cloud Console otomatis membuat string unik; biasanya Anda tidak mementingkan kata-katanya. Di sebagian besar codelab, Anda harus merujuk Project ID-nya (umumnya diidentifikasi sebagai PROJECT_ID). Jika tidak suka dengan ID yang dibuat, Anda dapat membuat ID acak lainnya. Atau, Anda dapat mencobanya sendiri, dan lihat apakah ID tersebut tersedia. ID tidak dapat diubah setelah langkah ini dan tersedia selama durasi project.
Sebagai informasi, ada nilai ketiga, Project Number, yang digunakan oleh beberapa API. Pelajari lebih lanjut ketiga nilai ini di dokumentasi.

Selanjutnya, Anda harus mengaktifkan penagihan di Konsol Cloud untuk menggunakan resource/API Cloud. Menjalankan operasi dalam codelab ini tidak akan memakan banyak biaya, bahkan mungkin tidak sama sekali. Guna mematikan resource agar tidak menimbulkan penagihan di luar tutorial ini, Anda dapat menghapus resource yang dibuat atau menghapus project-nya. Pengguna baru Google Cloud memenuhi syarat untuk mengikuti program Uji Coba Gratis senilai $300 USD.

Mulai Cloud Shell

Meskipun Google Cloud dapat dioperasikan dari jarak jauh menggunakan laptop Anda, dalam codelab ini, Anda akan menggunakan Google Cloud Shell, lingkungan command line yang berjalan di Cloud.

Dari Google Cloud Console, klik ikon Cloud Shell di toolbar kanan atas:

Mengaktifkan Cloud Shell

Hanya perlu waktu beberapa saat untuk penyediaan dan terhubung ke lingkungan. Jika sudah selesai, Anda akan melihat tampilan seperti ini:

Screenshot terminal Google Cloud Shell yang menunjukkan bahwa lingkungan telah terhubung

Mesin virtual ini berisi semua alat pengembangan yang Anda perlukan. Layanan ini menawarkan direktori beranda tetap sebesar 5 GB dan beroperasi di Google Cloud, sehingga sangat meningkatkan performa dan autentikasi jaringan. Semua pekerjaan Anda dalam codelab ini dapat dilakukan di browser. Anda tidak perlu menginstal apa pun.

3. Menyiapkan dan mengautentikasi Antigravity CLI

Dalam lab ini, Anda akan menggunakan Antigravity (AGY). Agen coding Google yang menggunakan model Gemini Google untuk membantu Anda membangun software. Ada aplikasi desktop AGY, antarmuka command line (AGY CLI), dan lingkungan pengembangan terintegrasi (IDE) yang memungkinkan Anda melihat dan mengedit kode bersama agen. Dalam lab ini, Anda akan menggunakan AGY CLI.

Selain itu, ada juga SDK untuk membangun agen serbaguna Anda sendiri menggunakan harness agen Antigravity (anggap harness sebagai mesin Antigravity).

Meluncurkan dan mengautentikasi AGY

Tekan tombol Open editor untuk membuka Cloud Shell Editor.

Setelah editor terbuka, Anda dapat memaksimalkan jendela menggunakan tombol maksimalkan di panel menu:

Buka panel terminal menggunakan menu Terminal > New Terminal atau menggunakan tombol pintas Ctrl+` (control plus backtick):

Jendela terminal baru akan terbuka di bagian bawah layar yang menampilkan perintah bash:

Kemudian, di terminal, buat direktori kerja untuk latihan pertama Anda dan ubah ke direktori tersebut:

mkdir -p ~/hello-agy && cd ~/hello-agy

Di terminal ini, ketik agy untuk meluncurkan Antigravity CLI:

agy

Setelah diluncurkan, agy akan meminta Anda untuk melakukan autentikasi. Pilih Gunakan project Google Cloud:

Layar kini menampilkan link. Salin link yang diberikan dan tempelkan ke tab lain di browser samaran Anda.

Gunakan kredensial siswa yang sama yang diberikan untuk lab ini untuk login.

Salin kode otorisasi dan tempelkan kembali ke agy:

Jika diminta Project ID, Anda harus menggunakan Project ID yang ditampilkan di panel samping halaman ini.

Terakhir, pilih Lokasi Google Cloud global:

Buat skrip cepat untuk menampilkan trivia kucing

Sekarang, mari kita buat skrip cepat untuk memahami cara kerja AGY CLI.

Minta AGY menulis skrip singkat yang menampilkan fakta kucing, lalu jalankan skrip tersebut untuk Anda:

Write a simple node script that returns cat trivia and run it for me

AGY akan berpikir sejenak dan menulis skrip untuk Anda.

Saat AGY meminta izin untuk menjalankan skrip node, pilih Yes, lalu tekan Enter.

Berikut tampilan permintaan izin bagi saya:

Requesting permission for: node cat-trivia.js

Do you want to proceed?
> 1. Yes
  2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js'
  3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json)
  4. No

Setelah menjalankan skrip, AGY akan memberi Anda ringkasan tentang apa yang telah dilakukannya. Berikut yang dikatakannya kepada saya:

I have created and executed a simple Node.js script that returns cat trivia.

### Created File

• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.

### Execution Output

Running the script using  node cat-trivia.js  produced the following output:

     _._     _,-'""`-._
    (,-.`._,'(       |\`-/|
        `-.-' \ )-`( , o o)
              `-    \`_`"'-

    🐱 Here is your Cat Trivia:
    ----------------------------------------
    "In 1987 cats overtook dogs as the number one pet in America."
    ----------------------------------------

Saya suka karena fitur ini bahkan menambahkan gambar ASCII kucing untuk saya.

Sekarang, Anda mungkin ingin mempelajari lebih lanjut apa yang dibuatnya untuk Anda. Meskipun Anda dapat membuka editor dan memeriksa kode sumber (sebaiknya Anda melakukannya), Anda juga dapat meminta AGY untuk memberi anotasi dan menjelaskan kode tersebut kepada Anda:

Explain the code you generated please

Baca penjelasannya dan ajukan pertanyaan lanjutan jika Anda ingin mengetahui lebih lanjut.

Terakhir, untuk menyelesaikan tugas ini, tutup agy dengan menekan Ctrl+D dua kali.

4. Menghubungkan dan mengkueri dokumentasi Google Developer

Meskipun agen dan model semakin pintar setiap harinya, kualitas respons sangat bergantung pada akurasi dan seberapa terbaru pengetahuan mereka. Itulah sebabnya penting untuk memberi agen alat guna mengambil dokumentasi developer terbaru dari sumber tepercaya, sehingga agen dapat menghindari pengambilan keputusan yang salah berdasarkan pengetahuan internal atau tebakan.

Server MCP Google Developer Knowledge memberi agen coding kemampuan untuk menelusuri dokumentasi developer resmi Google untuk Firebase, Google Cloud, Android, Maps, dan banyak produk Google lainnya.

Dengan menghubungkan agen Anda langsung ke library dokumentasi resmi Google, Anda memastikan kode dan panduan yang digunakannya selalu terbaru dan didasarkan pada konteks yang berwenang.

Untuk memulai, aktifkan Developer Knowledge API:

gcloud services enable developerknowledge.googleapis.com

Menyiapkan dan mengonfigurasi server MCP Pengetahuan Developer

Ikuti langkah-langkah di bawah untuk membuat ruang kerja bagi project ini dan mengonfigurasi server MCP Pengetahuan Developer untuk Antigravity:

File konfigurasi Antigravity untuk pengguna Anda disimpan di folder .gemini di direktori beranda Anda. Diagram di bawah menunjukkan versi sederhananya dengan elemen utama yang akan Anda temukan:

~/.gemini
├── antigravity/
├── antigravity-cli/
│   ├── brain/            # Conversations and artifacts
│   └── settings.json     # CLI settings
├── config/
│   ├── plugins/          # Global / shared plugins
│   └── mcp_config.json   # Global / shared MCP config
├── skills/               # Global / shared skills
│   └── {skill_name}/
│       ├── SKILL.md      # Skill definition
│       └── ...           # [optional] support files, scripts, etc.
└── GEMINI.md             # Global rules

Untuk menambahkan Server MCP Developer Knowledge ke AGY CLI, edit file mcp_config.json di folder ~/.gemini/config.

Pertama, pastikan folder config ada dan buat file mcp_config.json kosong:

mkdir -p ~/.gemini/config && touch mcp_config.json

Kemudian, buka file ini di editor Cloud Shell menggunakan perintah di bawah:

cloudshell edit ~/.gemini/config/mcp_config.json

Terakhir, tambahkan konfigurasi berikut ke mcp_config.json. Perhatikan bahwa Anda harus mengganti [[PROJECT_ID]] dengan project ID Anda yang sebenarnya. Anda dapat menemukan project ID di panel samping petunjuk ini.

~/.gemini/config/mcp_config.json

{
  "mcpServers": {
    "google-developer-knowledge": {
      "url": "https://developerknowledge.googleapis.com/mcp",
      "authProviderType": "google_credentials",
      "oauth": {
        "scopes": [
          "https://www.googleapis.com/auth/cloud-platform"
        ]
      },
      "timeout": 30000,
      "headers": {
        "X-goog-user-project": "[[PROJECT_ID]]"
      }
    }
  }
}

Sekarang Anda dapat memeriksa apakah server MCP telah dimuat dengan benar menggunakan perintah garis miring /mcp. Anda akan melihat yang seperti ini:

MCP Pengetahuan Developer telah dikonfigurasi, sekarang mari kita lihat penerapannya.

Membuat skrip untuk membuat gambar kucing menggunakan Nano Banana 2

Mari kita buat skrip sederhana yang menghasilkan gambar kucing menggunakan Nano Banana 2 untuk menunjukkan kemampuan MCP Pengetahuan Developer.

Anda harus menjalankan perintah berikut di terminal. Anda dapat menutup agy dengan menekan Ctrl+D dua kali untuk kembali ke shell.

Pertama, aktifkan AI Platform API. Ini adalah API yang memungkinkan project Anda melakukan panggilan Gemini API:

gcloud services enable aiplatform.googleapis.com

Buat ruang kerja untuk generator anak kucing:

mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten

Lakukan inisialisasi pengelola dependensi:

uv init

Sekarang luncurkan Antigravity dan berikan perintah berikut:

Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.

Tekan Ctrl+O untuk meluaskan langkah-langkah pemikiran perantara dan membaca bersama. Anda akan melihat AGY menggunakan layanan google-developer-knowledge untuk membuat kueri, menulis skrip, menjalankannya untuk Anda, dan memperbaiki kesalahan apa pun yang ditemukannya.

Lihat gambar kucing =^_^=

5. Membangun agen pengiriman kucing

MCP Pengetahuan Developer Google berguna untuk menjawab pertanyaan melalui dokumentasi resmi, tetapi terkadang informasi yang kita butuhkan sangat khusus dan tidak dapat ditemukan dalam dokumentasi. Untuk situasi tersebut, kita dapat menggunakan standar terbuka lainnya: Keterampilan Agen.

Keahlian Agen adalah format terbuka yang ringan untuk memperluas kemampuan agen AI dengan pengetahuan dan alur kerja khusus. Karakteristik penentu sebuah skill adalah apa yang disebut pengungkapan progresif: alih-alih memuat semua konten skill sejak awal, agen hanya akan mengaktifkan skill jika diperlukan, memuat informasi yang diperlukan sesuai permintaan, dan menghemat token yang berharga.

Untuk menyelesaikan agen pengiriman kucing, kita akan menggunakan Antigravity SDK sebagai harness agen. Untuk meminimalkan hambatan dan menyederhanakan penerapan untuk agen coding, kita juga akan memanfaatkan skill SDK Antigravity resmi.

Membuat ruang kerja dan menginstal dependensi

Pertama, buat folder untuk project akhir:

mkdir -p ~/cat-delivery && cd ~/cat-delivery

Kemudian, gunakan pengelola paket uv untuk melakukan inisialisasi folder ini dan menginstal beberapa dependensi:

uv init && uv add fastapi uvicorn

Menginstal kemampuan Python AGY SDK

Untuk menginstal skill dari kode sumber dan membuka marketplace, Anda dapat menggunakan Skill CLI Vercel. Jalankan perintah berikut di terminal untuk menginstal skill google-antigravity-sdk. Pastikan Anda menjalankannya dari folder ruang kerja lab (~/cdslab)

npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes

Output perintah ini akan terlihat seperti ini:

Perhatikan bahwa perintah npx skills add Google-Antigravity/antigravity-sdk-python secara otomatis meng-clone repositori antigravity-sdk-python dari GitHub. Perintah ini dapat digunakan untuk menginstal skill dari repositori GitHub mana pun, selama repositori tersebut memiliki folder skills.

Menginstal kemampuan dari plugin

Cara lain untuk menginstal kemampuan adalah melalui sistem plugin. Plugin di Antigravity memungkinkan Anda menyertakan tidak hanya keterampilan, tetapi juga server MCP, aturan, dan hook dalam paket yang sama. Ekstensi ini berguna untuk membuat ekstensi yang kohesif dalam satu paket deployment.

Karena kita sedang membangun aplikasi web, instal plugin modern-web-guidance menggunakan perintah di bawah:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Plugin ini mencakup keterampilan yang berisi praktik terbaik untuk pengembangan web yang ditulis oleh tim Google Chrome.

Luncurkan agy lagi agar kita dapat melihat cara kerja keterampilan tersebut. Di perintah agy, ketik /skills untuk membuka menu keahlian:

/skills

Anda akan melihat sesuatu seperti ini:

Setelah kita mengonfigurasi keterampilan MCP dan agen, Antigravity siap mengerjakan proyek kita dengan semua informasi yang diperlukan agar berhasil.

Merencanakan aplikasi

Antigravity memiliki dua mode operasi: cepat dan perencanaan. Dalam mode cepat, Antigravity akan langsung mengerjakan tugas, dan mode ini ditujukan untuk tugas mandiri yang lebih sederhana. Mode perencanaan dirancang untuk tugas yang kompleks, di mana agen akan menguraikan rencana terlebih dahulu yang dapat Anda tinjau dan ubah sebelum memulai implementasi.

Untuk mengaktifkan mode perencanaan, Anda dapat menggunakan perintah garis miring /planning:

/planning

Anda dapat beralih kembali ke mode cepat dengan /fast:

/fast

Saat beralih antara mode perencanaan dan cepat, Anda juga dapat beralih model. Anda dapat melakukannya menggunakan perintah /model:

/model

Daftar model yang tersedia mungkin sedikit berbeda, bergantung pada lingkungan dan mode autentikasi Anda:

Untuk cakupan tutorial ini, pilih Gemini 3.5 Flash (Rendah). Kata "rendah" dalam tanda kurung berarti tingkat penalaran model. Gemini 3.5 Flash dengan kemampuan penalaran Rendah adalah model yang sangat cepat dan efektif dengan ekonomi token yang baik. Memilih Sedang atau Tinggi sebagai level penalaran akan menggunakan lebih banyak token dan waktu untuk melakukan penalaran sebelum model memberikan respons.

Misalnya, dalam skenario dunia nyata, Anda dapat menggunakan model paling mumpuni di tingkat pemikiran Tinggi untuk perencanaan dan model yang lebih cepat untuk penerapan. Namun, untuk project kita, Gemini 3.5 Flash (Rendah) sudah cukup.

Membuat rencana

Mengalihkan Antigravity kembali ke mode perencanaan:

/planning

Kemudian, kirim perintah berikut untuk membuat rencana penerapan:

Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.

The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation

TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth

Anda akan melihat bahwa dalam fase riset, Antigravity dapat memanggil MCP Pengetahuan Developer dan satu atau beberapa keterampilan:

Setelah rencana selesai, Anda akan diminta untuk meninjaunya:

Perhatikan pojok kanan bawah layar: ada pesan yang bertuliskan 1 artefak dan petunjuk untuk menggunakan /artifact guna meninjau. Di Antigravity, file pendukung seperti rencana, daftar tugas, dan panduan disebut "artefak" untuk membedakannya dari file biasa yang merupakan bagian dari solusi (misalnya, kode sumber).

Dengan memasukkan perintah /artifact di perintah, Anda dapat melihat rencana dan memberikan komentar di dalamnya jika perlu melakukan penyesuaian.

/artifact

Anda akan melihat yang seperti ini:

Perhatikan bahwa ada file bernama implementation_plan.md dengan opsi untuk membuka, menyetujui, atau menolak. Tekan Enter untuk membukanya. Berikut adalah contoh tampilan rencana di sistem saya:

Anda dapat men-scroll ke atas dan ke bawah dengan tombol panah, dan di baris mana pun, Anda dapat menambahkan komentar dengan menekan tombol C.

Bagian penting yang perlu diperiksa adalah "Rencana Verifikasi". Di sini Anda dapat memverifikasi dan menambahkan langkah validasi agar model mengetahui bahwa tugas telah selesai.

Tambahkan komentar ke rencana hingga Anda merasa puas dan tekan ESC untuk kembali. Kemudian, tekan Y untuk mengonfirmasi pengiriman komentar ke agen:

Setelah Anda menekan Y, agen akan segera mulai bekerja. Agen mungkin meminta lebih banyak konfirmasi panggilan alat saat ia membuat progres dalam penerapan.

Anda mungkin melihat bahwa jumlah artefak akan bertambah seiring waktu. Selain rencana, Antigravity juga akan membuat daftar tugas (task.md) untuk melacak setiap item yang perlu diterapkan atau tindakan yang perlu dilakukan. Setelah selesai, Antigravity akan membuat file panduan (walkthrough.md) dengan penjelasan tentang tujuan yang dicapai. Anda dapat memeriksa semuanya menggunakan perintah /artifact lagi.

Kapan saja Anda dapat membuka file ini dan menambahkan komentar ke dalamnya, yang setelah dikirim ke agen akan diantrekan untuk dieksekusi seperti perintah yang diantrekan. Sebaiknya berikan komentar pada file ini untuk memberikan konteks tambahan kepada agen tentang permintaan Anda.

6. Men-deploy agen ke cloud

Sekarang Anda siap men-deploy-nya ke cloud menggunakan Cloud Run. Karena tugas ini tidak memerlukan rencana yang rumit, kita dapat menggunakan mode cepat.

Mengalihkan Antigravity ke mode cepat dengan /fast:

/fast

Gunakan perintah berikut untuk menginstruksikan Antigravity agar men-deploy agen CDS ke Cloud Run:

Deploy the agent and frontend to Cloud Run.

TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container

Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors

7. Selamat!

Dalam workshop ini, Anda telah mempraktikkan pengembangan modern dengan Antigravity, termasuk cara memperluas kemampuannya dengan server MCP dan keterampilan agen. Anda juga telah membuat aplikasi lengkap yang memanfaatkan Antigravity SDK dan Gemini 3.1 Flash Image. Perjalanan pembelajaran Anda tidak perlu berhenti di sini: lihat codelab lain di platform ini dan terus kembangkan keterampilan coding berbasis agen Anda.