Amazon Bedrock AgentCore Preview Live: Pantau Web App Real-Time

Kenapa Evaluasi Coding Agent Butuh Live Preview?

Coding agent modern sudah makin lihai menyusun aplikasi web fungsional dari nol. Agen bisa membuat struktur komponen, mengatur routing, merapikan styling CSS, hingga menyiapkan endpoint API internal. Masalahnya, siklus peninjauan (feedback loop) bakal terasa patah kalau aplikasi web tersebut mati begitu agen selesai mengedit kode.

Cara paling wajar buat meninjau kerja agen adalah membuka aplikasinya, mencoba tombol-tombolnya, meminta perubahan baru lewat obrolan teks, lalu langsung mengecek hasilnya. Siklus interaktif ini baru berjalan lancar kalau server pengembangan tetap hidup di lingkungan yang sama tempat agen bekerja. Dengan begitu, setiap kali agen menyimpan berkas, perubahannya langsung terdorong ke layar browsermu dalam hitungan detik tanpa jeda rilis.

Apa Itu Bedrock AgentCore Runtime dan Fitur Session Endpoints?

Amazon Bedrock AgentCore adalah platform komprehensif untuk membangun, menghubungkan, dan mengoptimalkan agen AI dalam skala besar menggunakan berbagai pilihan framework maupun foundation model. Di dalam ekosistem ini, ada komponen bernama AgentCore runtime yang bertugas menjalankan setiap sesi kerja agen di dalam microVM terisolasi.

Lewat pembaruan Session endpoints, runtime ini memberikan URL khusus terautentikasi untuk tiap sesi yang aktif. URL ini bekerja meneruskan metode HTTP, jalur URL, query string, request body, hingga koneksi WebSocket langsung ke port-port yang kamu izinkan di dalam microVM. Jadi, aplikasi pengembangan web apa pun yang dijalankan agen di dalam microVM bisa langsung dibuka dari browsermu.

6 Aturan Main Cara Kerja Session Endpoints

Agar bisa memanfaatkan Session endpoints secara tepat, ada enam detail teknis utama yang mengatur perilakunya:

1. Kamu yang menentukan port: Port yang boleh diakses ditentukan lewat parameter allowedPorts saat memanggil CreateAgentRuntime. Kamu bisa memasukkan 1 sampai 5 entri, baik berupa port tunggal maupun rentang port antara 8000–12000 (di luar reserved platform ports). Membuka port ini nggak otomatis menyalakan server, jadi aplikasimu wajib melakukan listen ke host 0.0.0.0.
2. URL sesi datang bersama respons: Alamat URL sesi dikirim langsung di header respons InvokeAgentRuntime dengan nama X-Amzn-Bedrock-AgentCore-Runtime-Session-Endpoint-Url, atau terbaca sebagai properti sessionEndpointUrl pada SDK.
3. Setiap request wajib terautentikasi: Kalau runtime memakai AWS Identity and Access Management (IAM), tiap HTTP request, HTTP/2 stream, dan jabat tangan WebSocket wajib menyertakan tanda tangan Signature Version 4 (SigV4). Pemanggil juga butuh izin aksi bedrock-agentcore:InvokeAgentRuntimeProxy. Jika runtime memakai inbound JSON Web Token (JWT) authorizer, request membawa bearer token. Mengetahui URL saja tanpa kredensial valid nggak bakal memberi akses.
4. Pemilihan port lewat nama host: Klien luar selalu terhubung ke port 443 via HTTPS, sedangkan port target di dalam microVM dipilih lewat prefix pada nama host. Formatnya berupa kode port yang dipasang di depan alamat host sesi, misalnya 8090--<session-endpoint-id>.runtime... untuk port 8090, atau 8081--<session-endpoint-id>... untuk port 8081.
5. Mendukung beragam protokol modern: Endpoint ini meneruskan HTTP/1.1, HTTP/2 (termasuk server-sent events dan gRPC), serta koneksi WebSocket penuh.
6. Masa hidup terikat pada sesi: URL ini hanya valid selama sesi agen berlangsung. Begitu sesi selesai, URL mati. Fitur ini memang ditujukan untuk kebutuhan build, test, dan review saat membangun purwarupa. Kalau mau merilis aplikasi ke pengguna akhir secara permanen, kamu disarankan mendeploy kodenya ke layanan hosting seperti AWS Amplify Hosting.

Perlu diingat juga, Session endpoint berbeda dari runtime endpoint biasa (misalnya versi DEFAULT). Runtime endpoint dipakai untuk memanggil logika agen dan mengatur versi rilis (production vs development). Sementara itu, Session endpoint murni dipakai untuk mengintip apa pun yang sedang berjalan di dalam sesi microVM tersebut.

Arsitektur Solusi: Kolaborasi AgentCore, Vite, dan Claude Haiku 5.5

Untuk membuktikan keampuhan sistem ini, AWS menyusun arsitektur percontohan yang memadukan server pengembangan web, agen AI, dan proxy lokal di laptop pengembang.

Komponen dalam solusi ini dibagi menjadi empat pilar:

• Coding Agent (Port 8080): Berjalan di dalam microVM runtime dan bertugas mengedit berkas situs web memakai empat alat dasar: list, read, write, dan edit.
• Vite Development Server (Port 8090): Menjalankan aplikasi web frontend sekaligus membuka koneksi WebSocket untuk fitur hot-reload. Server ini mengawasi berkas proyek secara terus-menerus.
• PreviewApp Lokal (Port 8087 dan 8088): Berjalan di laptop pengguna. Aplikasi lokal ini menyajikan antarmuka preview di alamat lokal port 8087, mengirim prompt ke InvokeAgentRuntime, dan membuka proxy endpoint lokal di port 8088. Karena browser biasa nggak bisa menempelkan header SigV4 atau token JWT ke setiap request aset web secara otomatis, proxy lokal inilah yang bertugas menambahkan tanda tangan kredensial AWS sebelum meneruskannya ke Session endpoint.
• Model Bahasa Foundation: Agen memanggil Claude Haiku 5.5 yang tersedia di Amazon Bedrock untuk menganalisis kode dan memutuskan baris mana yang harus diubah sesuai permintaan pengguna.

Alur kerjanya teratur rapi: ketika pengguna mengirim instruksi perubahan dari bilah chat, PreviewApp mengirimkannya ke agen di port 8080 lewat InvokeAgentRuntime. Agen meminta saran ke Claude Haiku 5.5, membaca berkas proyek, lalu menulis revisi. Begitu berkas disimpan, Vite seketika mendeteksi pembaruan dan mengirim data lewat WebSocket kembali ke browser melalui Session endpoint dan proxy lokal, sehingga tampilan web berganti tanpa reload halaman.

Menyiapkan Prasyarat Sebelum Deployment

Sebelum mulai mempraktikkan alur ini di lingkungan kerjamu, pastikan beberapa syarat berikut sudah siap:

• Akun AWS di Region yang sudah mendukung Bedrock AgentCore runtime Session endpoints, lengkap dengan konfigurasi kredensial lokal.
• Izin IAM untuk membuat IAM role, mengunggah ke Amazon S3, membuat runtime, serta aksi bedrock-agentcore:InvokeAgentRuntime dan bedrock-agentcore:InvokeAgentRuntimeProxy pada runtime dan runtime endpoint DEFAULT.
• Lingkungan Python 3.10 atau versi lebih baru, disertai paket bedrock-agentcore SDK minimal versi 1.25.2 dan boto3 minimal versi 1.43.122.
• Git untuk mengklon repositori sampel serta lingkungan Jupyter (seperti JupyterLab atau ekstensi Jupyter di VS Code).
• Akses model ke Claude Haiku 5.5 di Amazon Bedrock.
• Node.js 22 atau lebih baru beserta npm untuk membungkus kode agen dan situs web.

Sebagai catatan, sampel ini memanfaatkan direct code deployment untuk Node.js dengan mengunggah arsip zip ke Amazon S3, jadi kamu nggak butuh Docker atau Amazon Elastic Container Registry (ECR). Session endpoints berjalan di compute type microVM (bukan tipe Instances), bisa diakses lewat public HTTPS, dan belum mendukung AWS PrivateLink untuk koneksi inbound.

Langkah Praktis: Deploy Coding Agent AWS Vite

Langkah pertama dimulai dengan menyiapkan runtime dan menentukan port mana saja yang boleh dibuka ke publik lewat Session endpoint. Repositori sampel resmi sudah tersedia di repositori agentcore-samples pada folder 14-remote-access.

Berikut tahapan instalasinya:

1. Klon repositori sampel dan masuk ke direktorinya:

git clone https://github.com/awslabs/agentcore-samples.git
cd agentcore-samples/01-features/02-host-your-agent/01-runtime/03-advanced/16-session-endpoints

2. Buka berkas notebook session_endpoints_preview.ipynb.
3. Jalankan sel instalasi dependensi Python.
4. Jalankan sel %run deploy.py untuk mengemas kode, mengunggah ke S3, dan membuat runtime. Proses ini memakan waktu beberapa menit sampai status runtime berubah menjadi READY.

Di balik layar, konfigurasi deploy.py memegang peran krusial dalam mengatur port:

agentRuntimeArtifact={
    "codeConfiguration": {
        "code": {"s3": {"bucket": code_bucket(), "prefix": S3_PREFIX}},
        "runtime": "NODE_22",
        "entryPoint": ["app.js"],
    }
},
protocolConfiguration={"serverProtocol": "HTTP", "port": 8080, "path": "/invocations"},
allowedPorts=[{"port": 8090}, {"port": 8081}],

Perhatikan bahwa port 8080 (jalur agen menerima instruksi) sengaja nggak dimasukkan ke allowedPorts karena pemanggilan InvokeAgentRuntime sudah memiliki jalur privat sendiri dari AWS API tanpa lewat Session endpoint. Di sisi web, konfigurasi Vite disetel mendengarkan 0.0.0.0 di port 8090 dengan pengaturan server.allowedHosts: true agar menerima host name acak yang dibuat oleh runtime AWS.

Menjalankan Preview Live dan Menguji Perubahan Kode

Setelah runtime berstatus READY, kamu bisa menyalakan aplikasi peninjau lokal langsung dari notebook. Satu panggilan kode Python sederhana akan menjalankan tiga proses sekaligus: memulai sesi di AWS, membuka endpoint lokal di port 8088, dan menyajikan halaman preview di port 8087.

from preview_app import PreviewApp

app = PreviewApp().start()
print("Open", app.url)

Buka alamat port 8087 lokal di browsermu. Layar akan terbelah menjadi dua: bilah panduan dan chat di sisi kiri, serta website toko kopi yang sedang berjalan live di sisi kanan.

Kamu bisa langsung mencoba prompt revisi, misalnya meminta agen mengganti gaya visual:

Switch this website to a dark coffee-house color theme.

Begitu prompt dikirim, perhatikan bilah chat. Langkah agen akan terkirim secara streaming berkat dukungan server-sent events. Agen membaca src/main.js, memeriksa index.html, lalu menyusun perubahan di src/style.css. Saat berkas CSS disimpan, panel website di sebelah kanan seketika berubah warna menjadi nuansa gelap khas kedai kopi tanpa perlu kamu refresh manual.

Kamu juga bisa mengirim perintah langsung lewat baris kode Python menggunakan fungsi app.ask:

for event in app.ask("Make the Order ahead button green"):
    if "step" in event:
        print("  ", event["step"])
    elif "done" in event:
        print(event["done"]["reply"])

Hasil eksekusinya memperlihatkan alur kerja transparan: agen membaca CSS, menyimpan warna baru pada tombol "Order ahead", dan halaman preview di browser langsung memperbarui tombol tersebut menjadi warna hijau.

Mengakses Port Tambahan dan Memahami Penolakan Request

Kelebihan lain dari Session endpoints adalah kemampuannya melayani beberapa port sekaligus dalam satu microVM yang sama. Di sampel ini, agen juga menyajikan rute inspeksi /status pada port 8081 untuk memantau daftar prompt beserta berkas apa saja yang sudah dimodifikasi.

Untuk memeriksanya dari Python, kamu cukup memanggil endpoint yang sama dengan mengubah parameter port:

status = app.endpoint.request("GET", "/status", port=8081)
print("GET /status on port 8081: HTTP", status.status)
for edit in status.json()["edits"]:
    print("  ", edit["prompt"], "->", ", ".join(edit["files"]))

Selain melayani request yang valid, Session endpoint punya mekanisme pertahanan ketat. Ketika ada request yang melanggar aturan, runtime akan membalas dengan status HTTP khusus disertai kode galat di response header:

Aspek Keamanan dan Batasan yang Wajib Diperhatikan

Meski Session endpoints menawarkan kemudahan luar biasa, ada beberapa batasan arsitektur yang perlu dipahami para developer:

1. Isolasi Berkas: Karena agen dan server web tinggal di microVM yang sama, pastikan fungsi manipulasi berkas (tool list, read, write) dibatasi jalurnya hanya di dalam folder proyek web. Jangan biarkan prompt bebas memanipulasi berkas sistem operasi microVM.
2. Koneksi dan Penyimpanan Bersifat Efemeral: Jika runtime mengganti instance compute pada sesi yang sedang berjalan, koneksi terbuka akan terputus dan berkas yang diedit agen bisa hilang. Kalau kamu butuh hasil kerja agen tersimpan secara permanen antar sesi, integrasikan runtime dengan konfigurasi sistem berkas persisten.
3. Audit Jejak Aktivitas: Semua lalu lintas yang melewati Session endpoint dicatat di AWS CloudTrail sebagai event InvokeAgentRuntimeProxy dengan sumber bedrock-agentcore.amazonaws.com. Manfaatkan log ini untuk mengaudit aktivitas agen.
4. Pembersihan Resource: Setelah selesai bereksperimen, jangan lupa menjalankan sel stop dan sel pembersihan %run cleanup.py di notebook agar resource runtime, data S3, dan IAM role terhapus sehingga kamu terhindar dari tagihan yang tidak perlu.

Dampak Nyata untuk Alur Kerja Developer di Indonesia

Penerapan sistem live preview semacam ini membawa angin segar bagi tim rekayasa perangkat lunak dan startup di Indonesia. Pertama, dari segi efisiensi kerja, siklus pembuatan purwarupa frontend bisa dipangkas drastis. Developer atau product manager nggak perlu bolak-balik git push, menunggu pipeline CI/CD, atau menyewa server staging terpisah hanya untuk melihat apakah agen AI meletakkan tombol di tempat yang pas.

Kedua, dari sisi kepatuhan data dan UU Perlindungan Data Pribadi (UU PDP), mengeksekusi agen di lingkungan cloud berstandar enterprise seperti AWS memastikan kode sumber dan data pengujian internal perusahaan nggak bocor ke platform publik tanpa enkripsi. Seluruh jejak eksekusi terekam rapi di CloudTrail.

Bagi kamu yang ingin menguji kemampuan reasoning model canggih untuk coding agent tanpa perlu repot menyiapkan konfigurasi AWS yang rumit dari awal, kamu juga bisa menjajal berbagai model AI frontier lewat Classai Router. Kamu bisa mencoba Claude Haiku 5.5 dari Anthropic dengan tarif transparan Rp1.620 per 1 juta token input dan Rp4.500 per 1 juta token output. Kalau butuh daya penalaran kode yang lebih mendalam untuk arsitektur rumit, kamu juga bisa berpindah ke Claude Sonnet 5.5 (Rp3.600 input / Rp18.000 output) cukup dengan mengganti satu string model di kode aplikasimu, tanpa perlu kartu kredit luar negeri karena pembayaran bisa memakai QRIS atau transfer bank lokal.

Kalau kamu tertarik mendalami cara merancang instruksi teknis yang presisi untuk coding agent semacam ini, kamu juga bisa mengikuti kelas AI untuk Developer di Classai untuk meningkatkan produktivitas rekayasa perangkat lunakmu ke level berikutnya.