Quickstart

Luncurkan IBM Bob

Luncurkan aplikasi IBM Bob di komputermu.

Buka antarmuka chat Bob

Jika antarmuka chat Bob tidak terlihat, buka dengan mengklik ikon Bob di sebelah bilah navigasi atau gunakan pintasan Option + Command + B (Mac) atau Ctrl + Alt + B (Windows).

Kamu berinteraksi dengan Bob dengan mengetik permintaan bahasa alami di kolom input.

Klon repositori tutorial

Klon repositori yang berisi aplikasi contoh menggunakan langkah-langkah berikut:

1. Klik ikon file di pojok kiri atas panel Bob IDE.
2. Klik Clone Repository dan tempel URL repositori berikut.
3. Saat Bob menanya di mana menyimpan repositori, pilih lokasi yang kamu inginkan.

https://github.com/IBM/bob-demo.git

Buka repositori

Saat Bob menanya apakah kamu ingin membuka repositori yang diklon, klik Open. Jika Bob menanya "Do you trust the authors of the files in the folder?", klik Yes, I trust the authors.

Explorer menampilkan file proyek, dan panel chat Bob terbuka di sisi. Kamu bekerja dari folder bob-get-started/express-todo-api-modern.

Beralih ke mode Agent

Pilih Agent di pemilih mode, atau ketik /agent di chat. Mode Agent memungkinkan Bob menulis, memodifikasi, dan refactor kode. Bob masih meminta izin sebelum setiap operasi.

Konfigurasi auto-approval

Temukan toggle auto-approval di pojok kanan bawah jendela di bawah menu Permissions. Pastikan hanya Read yang dipilih untuk auto-approval. Bob secara otomatis menjalankan perintah hanya-baca, tetapi meminta persetujuan untuk perintah apa pun yang memodifikasi file atau berjalan di terminal.

Inisialisasi Bob di proyekmu

Jalankan /init di panel chat Bob untuk meminta Bob membuat file AGENTS.md root dan file aturan AGENTS.md.

File AGENTS.md root memberi tahu Bob tentang struktur keseluruhan, konvensi, dan tujuan proyek sehingga Bob bisa menulis kode yang sesuai dengan proyekmu. Tanpanya, Bob memulai dari awal setiap kali karena Bob bersifat stateless.

File aturan di .bob adalah tempat Bob membuat AGENTS.md untuk setiap mode-nya: Agent, Plan, dan Ask. Setiap mode memiliki set aturan berbeda yang memandu perilaku Bob dalam mode tersebut.

/init

Bob meminta izin untuk membuat file AGENTS.md. Klik Approve todo tools for task untuk membuat file-file tersebut. Setelah Bob membuat semua file AGENTS.md, kamu akan melihat file-file berikut:

Build dan jalankan API di Docker

Minta Bob untuk membuat Dockerfile dan memulai kontainer:

Create a Dockerfile for this API using Node 22 and run it on port 3000.
Don't install dependencies locally.
The Dockerfile handles all installations.

Once you create the Dockerfile, build the image and start the container.

Bob memintamu menyetujui build image dan memulai kontainer. Klik Approve todo tools for task dan Approve edit tools for task.

Karena kamu hanya mengaktifkan auto-approval Read, Bob meminta izinmu untuk menjalankan perintah Execute. Klik I understand the risks dan kemudian klik Approve untuk mengizinkan Bob mengeksekusi perintah untukmu.

API sekarang berjalan dan tersedia.

Tambahkan tugas ke daftar todo

Untuk menguji API, tempelkan perintah berikut langsung ke panel chat Bob. Perintah ini menambahkan tugas ke daftar todo dengan membuat permintaan POST ke API:

curl -X POST http://localhost:3000/api/todos   -H "Content-Type: application/json"   -d '{"title": "Build a web UI"}'

  Give me the response in a table format with two columns: Field and Value

Bob menampilkan respons yang mengonfirmasi kamu bisa menambahkan tugas ke daftar todo dengan API.

Hentikan dan hapus kontainer

Minta Bob untuk menghentikan dan menghapus kontainer. Kamu akan membangun kontainer baru dengan UI web di bagian berikutnya:

Stop and remove the running container and Docker image.

Mulai percakapan baru

Klik tanda plus di bagian atas antarmuka chat untuk memulai percakapan baru dan membersihkan context window.

Memulai percakapan baru membersihkan context window, yang:

• Mencegah diskusi perencanaan sebelumnya mengonsumsi anggaran token-mu.
• Menjaga konteks implementasi tetap terfokus pada rencana yang disetujui.
• Mengurangi risiko Bob mencampuradukkan instruksi perencanaan dan implementasi.

Rencanakan UI web

Sebelum memodifikasi kode, beralih ke mode Plan agar Bob bisa membuat rencana cara membangun UI web. Klik dropdown pemilih mode dan pilih Plan, atau ketik /plan di chat.

Minta Bob untuk merencanakan UI web ui-plan.md di direktori proyek express-todo-api-modern.

Make a plan to add a React TypeScript web UI to this todo app using Vite.

The UI needs to:
- Display all existing tasks fetched from GET /api/todos
- Add new tasks using POST /api/todos
- Mark tasks as complete or incomplete using PUT /api/todos/:id

Constraints:
- Do not modify the existing Express API or its endpoints
- Serve both the API and React frontend from a single Docker container using a multi-stage build
- Keep the implementation simple: no authentication, no client-side routing, no external state management library
- run `npm install` inside the Dockerfile

Save the plan to a file named `ui-plan.md` in the express-todo-api-modern project directory.

Tinjau rencananya sebelum meminta Bob menjalankannya. Klik ui-plan.md di explorer untuk membukanya.

Minta Bob membangun UI web

Beralih Bob ke mode Agent dengan mengklik dropdown pemilih mode dan memilih Agent, atau ketik /agent di chat.

Minta Bob membangun UI, mengkontainerisasinya, dan menjalankannya:

Implement the plan `ui-plan.md` you outlined to build the web UI
containerize the application with Docker, and run it.
Don't install dependencies locally. The Dockerfile handles all installations.

Bob membaca ui-plan.md, menampilkan file yang akan dibuat atau diubah, kemudian membangun dan memulai kontainer. Klik Approve dari permintaan alat Bob.

Perbaiki kegagalan build

Terkadang percobaan pertama Bob dalam membangun UI dan kontainer mungkin gagal karena error dalam kode atau Dockerfile. Bob menampilkan pesan error dan mengusulkan perbaikan. Iterasi pengembangan adalah bagian dari penulisan kode dengan Bob.

Buka UI web di browser-mu

Setelah kontainer berjalan, Bob memberikan ringkasan apa yang diselesaikannya.

Buka http://localhost:3000/index.html di browser-mu. Coba tambahkan tugas baru menggunakan kolom input untuk mengonfirmasi API berfungsi dengan benar.

Minta Bob memperbarui gaya

Personalisasi UI dengan memberi tahu Bob font, warna font, dan warna latar belakang yang kamu inginkan. Di panel chat Bob, deskripsikan pilihanmu menggunakan bahasa alami.

Bob mengusulkan pengeditan pada gaya komponen React. Tinjau diff dan klik Save untuk menerima perubahan.

Rebuild kontainer dan lihat perubahanmu

Kontainer yang berjalan masih menyajikan gaya lama. Minta Bob untuk rebuild dan memulai ulang agar kamu bisa melihat perubahanmu:

Rebuild the Docker image and restart the container with the updated styles.

Refresh http://localhost:3000/index.html di browser-mu untuk melihat desain yang diperbarui.