Dari Asisten ke Agen
Saat kecerdasan buatan bertindak, bukan sekadar menjawab.
Dari Asisten ke Agen adalah pelajaran Vibe Coding gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vibe Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vibe Coding mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
When AI Stops Talking and Starts Doing
So far you've used AI like a chat partner: you ask, it answers, you copy the code. That's an assistant.
An agent is different. You give it a goal, and it acts on its own: it reads files, runs commands, checks results, and keeps going until the job is done. You're no longer the one pasting everything.
This lesson is about that leap: from AI that answers to AI that does the work.
Assistant vs Agent
The simplest way to feel the difference:
- Assistant: "Here's the code for a login form" — you take it from there.
- Agent: "I created
login.html, wired up the form, ran the app, and it works." — it did the steps.
Tools like Claude Code and Cursor's agent mode are agentic: they touch your real project files, not just a chat box.
The Agent Loop
Under the hood, an agent runs a simple loop: think → act → observe → repeat.
It plans a step, takes an action (edit a file, run a command), looks at what happened, then decides the next step. It keeps looping until your goal is met or it gets stuck.
Here's that loop sketched as JavaScript pseudo-code so you can picture it:
function agentLoop(goal) {
let done = false;
while (!done) {
const plan = think(goal); // decide next step
const result = act(plan); // edit file / run command
done = check(result, goal); // is the goal met?
}
return "Goal reached!";
}
console.log("An agent repeats: think, act, observe.");What a Goal Looks Like
You don't micromanage an agent. You hand it an outcome and let it figure out the steps.
Compare a single instruction to an agent goal: the goal describes the finished result, not each keystroke.
Goal for an agent (paste into Claude Code or Cursor agent mode):
"Add a dark mode toggle to my website. Create a button in the top
right, switch the page between light and dark colors when clicked,
and remember the choice when the user comes back. Test it works
before you finish."Agents Use Your Real Project
The big shift: an agent works inside your actual files. It can open index.html, find your CSS, add new code, and save — all without you copy-pasting.
That's powerful and a little scary. It means the agent can change a lot at once, so you'll learn to review what it did (and you'll cover safety in the last lesson of this course).
Agents Can Run Things
Beyond editing files, agents can run commands: start your app, install a package, or run tests. Then they read the output and react.
If a command fails, a good agent notices the error and fixes it — no need for you to copy the red text into chat. This is why agents feel like a teammate, not a tool.
Example agent goal that involves running things:
"Install the dependencies for this project, start the dev server,
open the homepage, and tell me if there are any errors in the
console. If there are, fix them and run it again."Watching an Agent Work
When you run an agent in Claude Code or Cursor, you'll see it narrate its steps: "Reading file... editing... running... done."
This is your window into its thinking. Read it! If it heads in the wrong direction, you can stop it and steer. You stay the pilot; the agent just flies the plane for the boring parts.
Approve Before It Acts
Most agent tools ask for permission before doing something risky — like deleting files or running an unknown command. They show you the action and wait for a yes.
Treat every approval as a real decision. "Allow once" for normal edits is fine; pause and read carefully before approving anything that removes or overwrites a lot.
Good Tasks for an Agent
Agents shine on tasks with many small, mechanical steps:
- Renaming something across many files
- Adding a feature that touches several places
- Fixing a bug, running the app, confirming it's gone
- Setting up a new project from scratch
For a one-line question ("what does this function do?"), a plain assistant chat is faster. Match the mode to the job.
You Set the Goal, AI Walks the Path
Here's the mindset to carry forward: you own the goal and the judgment; the agent owns the legwork.
You decide what success looks like and check the result. The agent handles the how — the dozens of little steps in between. That partnership is the heart of vibe coding at the next level.
Try this framing for any agent request:
GOAL: what the finished result should be
CONTEXT: which project / files it should work in
DONE WHEN: how the agent knows it succeeded
Fill those three in and you've written a great agent task.Your First Agent Mindset
Before the quiz, picture it: instead of asking "how do I add a contact form?" and copying code, you say "Add a working contact form to my site and confirm it submits."
Same idea, totally different workflow. The agent reads your project, builds it, tests it, and reports back. You review and approve. That's agentic building.
Quick Check
Let's make sure the assistant-vs-agent difference clicked.
Recap: From Answering to Acting
You've made the leap in mindset:
- An assistant answers; an agent acts on a goal.
- Agents run a think → act → observe loop on your real files.
- You hand over a goal (and a "done when"), not every step.
- Watch and approve — you stay the pilot.
- Tools like Claude Code and Cursor agent mode make this real.
Next up: giving your agent tools so it can reach the web, files, and code.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 25
- Pelajaran
- 100
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dari Asisten ke Agen” gratis?
Ya — teks lengkap “Dari Asisten ke Agen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vibe Coding, upgrade ke CoddyKit PRO. Kursus Vibe Coding mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Dari Asisten ke Agen”?
Saat kecerdasan buatan bertindak, bukan sekadar menjawab. Kamu berlatih Vibe Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vibe Coding?
Tidak diperlukan pengalaman sebelumnya. Vibe Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Dari Asisten ke Agen” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vibe Coding ini?
Ya. Setiap pelajaran Vibe Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Dari Asisten ke Agen
- Memberi Alat kepada Agen
- Otomatisasi Tugas Multi-Langkah
- Menjaga Keamanan Agen