What is the difference between code generation and agentic coding?

Code generation produces code from a single prompt. Agentic coding uses an autonomous loop: the agent plans, writes code, runs tests, reads errors, and fixes issues iteratively — similar to how a developer works, but automated.

When should I use agentic coding vs writing code myself?

Agentic coding excels at boilerplate, tests, refactoring, and well-defined tasks. Write code yourself for novel architecture decisions, security-critical logic, and creative problem-solving where human judgment is essential.

How do CLAUDE.md and rules files improve agentic coding results?

CLAUDE.md and rules files provide persistent context about your project: coding conventions, architecture patterns, and constraints. They act like onboarding docs for the AI agent, dramatically improving code quality and consistency.

ApplicationNew

Agentic Coding

How AI agents autonomously write, test, and iterate on code

The Problem: Developers spend up to 60% of their time on routine code: boilerplate, tests, refactoring, documentation. AI agents can autonomously write, test, and fix code — but how do you work with them effectively?

The Solution: Your Tireless AI Pair Programmer

Agentic coding goes beyond simple code generation — it uses autonomous AI agents that plan, write, test, and fix code in a loop. Think of "vibe coding": you describe your intent, and the agent handles implementation. The key difference from chat-based coding is the agent loop — the agent reads your codebase, plans an approach, writes code, runs tests, and iterates on errors without manual intervention.

Think of it like a tireless junior developer:

1. Describe intent clearly: What to build, constraints, coding style, test requirements — like briefing a new team member
2. Agent plans approach: Reads codebase, finds patterns, proposes a plan before writing any code
3. Agent writes & tests: Writes code, runs tests, reads errors, fixes issues — the autonomous plan-code-test-fix cycle
4. Human reviews & iterates: Developer reviews the result, gives feedback, and iterates — AI handles implementation, human ensures quality

Where Is This Used?

Rapid Prototyping: From idea to working MVP in hours, not days — the agent scaffolds, wires, and tests everything
Test Generation: AI writes unit, integration, and e2e tests based on existing code and patterns
Refactoring: Agent refactors code following project patterns, running tests after each change
Code Review & Documentation: AI finds bugs, suggests improvements, and writes documentation from code
Gotchas: Blind Spots: Agents can write plausible but subtly wrong code: hallucinated imports, outdated APIs, security holes, over-engineering. Always review agent output critically — it looks confident even when wrong

Fun Fact: According to industry reports, some companies already write over 50% of their code with AI agents. Andrej Karpathy coined the term "vibe coding" in 2025 — coding by describing intent and letting AI handle the implementation. Key insight: the quality of your CLAUDE.md and rules files matters more than the quality of individual prompts.

Try It Yourself!

Use the interactive visualization below to explore the agentic coding loop, compare prompt quality, and see how context layers affect code output.

Click "Next Step" to walk through the agent loop:

Intent

Developer describes what to build

Key Insight

1. Agentic coding is not "type a wish and get code." It is a collaboration: clear intent + agent autonomy + human review.
2. CLAUDE.md and rules files are your highest-leverage investment — they improve every future interaction.
3. The agent writes code fast, but you must always review. Subtly wrong code from a confident agent is more dangerous than obviously wrong code.

Try it yourself

Interactive demo of this technique

Technique Comparison

Demo Mode

Pre-recorded responses

TaskIntermediateCoding

Task an AI agent to create an API endpoint for user search with pagination and filters

Without technique

Prompt

Make a user search endpoint.

Response

app.get("/users", (req, res) => { const users = db.query("SELECT * FROM users WHERE name LIKE '%" + req.query.q + "%'"); res.json(users); });

Tokens:10/40

Time:250ms

Quality:

With applications-agentic-coding

With technique

Prompt

Create GET /api/users endpoint for Next.js App Router: Requirements: - Query params: q (search by name/email), role (filter), page (default 1), limit (default 20, max 100) - Zod validation of all params - Parameterized SQL (Prisma) — never concatenate user input - Response: { data: User[], pagination: { page, limit, total, totalPages } } - Rate limiting: 30 req/min per IP - Tests: success, invalid params, empty results, SQL injection attempt Follow patterns from src/app/api/posts/route.ts.

Response

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { rateLimit } from "@/lib/rate-limit";

const searchSchema = z.object({
  q: z.string().max(100).optional().default(""),
  role: z.enum(["admin", "user", "editor"]).optional(),
  page: z.coerce.number().int().min(1).default(1),
  limit: z.coerce.number().int().min(1).max(100).default(20),
});

export async function GET(req: NextRequest) {
  const ip = req.headers.get("x-forwarded-for") ?? "unknown";
  const limited = await rateLimit(ip, 30, 60);
  if (limited) {
    return NextResponse.json(
      { error: "Rate limit exceeded" },
      { status: 429 }
    );
  }

  const parsed = searchSchema.safeParse(
    Object.fromEntries(req.nextUrl.searchParams)
  );
  if (!parsed.success) {
    return NextResponse.json(
      { error: parsed.error.flatten() },
      { status: 400 }
    );
  }

  const { q, role, page, limit } = parsed.data;
  const where = {
    ...(q && {
      OR: [
        { name: { contains: q, mode: "insensitive" as const } },
        { email: { contains: q, mode: "insensitive" as const } },
      ],
    }),
    ...(role && { role }),
  };

  const [data, total] = await Promise.all([
    prisma.user.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      select: { id: true, name: true, email: true, role: true },
    }),
    prisma.user.count({ where }),
  ]);

  return NextResponse.json({
    data,
    pagination: { page, limit, total, totalPages: Math.ceil(total / limit) },
  });
}

👁️Specific reference to existing pattern (src/app/api/posts/route.ts) guides agent to consistent code

🧠Zod validation and parameterized SQL requirements prevent typical agent code vulnerabilities

🔍Explicit test scenarios (including SQL injection attempt) force the agent to think about security

Tokens:180/350

Time:1200ms

Quality:

Why this works

A vague instruction produces code with SQL injection and no pagination. A detailed prompt referencing project patterns, Zod validation, and test list produces a production-ready endpoint matching project architecture.

1 / 2

Practice Challenges

Create a free account to solve challenges

3 AI-verified challenges for this lesson

This lesson is part of a structured LLM course.

My Learning Path

ApplicationNew

Agentic Coding

How AI agents autonomously write, test, and iterate on code

The Solution: Your Tireless AI Pair Programmer

Think of it like a tireless junior developer:

1. Describe intent clearly: What to build, constraints, coding style, test requirements — like briefing a new team member
2. Agent plans approach: Reads codebase, finds patterns, proposes a plan before writing any code
3. Agent writes & tests: Writes code, runs tests, reads errors, fixes issues — the autonomous plan-code-test-fix cycle
4. Human reviews & iterates: Developer reviews the result, gives feedback, and iterates — AI handles implementation, human ensures quality

Where Is This Used?

Rapid Prototyping: From idea to working MVP in hours, not days — the agent scaffolds, wires, and tests everything
Test Generation: AI writes unit, integration, and e2e tests based on existing code and patterns
Refactoring: Agent refactors code following project patterns, running tests after each change
Code Review & Documentation: AI finds bugs, suggests improvements, and writes documentation from code
Gotchas: Blind Spots: Agents can write plausible but subtly wrong code: hallucinated imports, outdated APIs, security holes, over-engineering. Always review agent output critically — it looks confident even when wrong

Try It Yourself!

Use the interactive visualization below to explore the agentic coding loop, compare prompt quality, and see how context layers affect code output.

Click "Next Step" to walk through the agent loop:

Intent

Developer describes what to build

Key Insight

1. Agentic coding is not "type a wish and get code." It is a collaboration: clear intent + agent autonomy + human review.
2. CLAUDE.md and rules files are your highest-leverage investment — they improve every future interaction.
3. The agent writes code fast, but you must always review. Subtly wrong code from a confident agent is more dangerous than obviously wrong code.

Try it yourself

Interactive demo of this technique

Technique Comparison

Demo Mode

Pre-recorded responses

TaskIntermediateCoding

Task an AI agent to create an API endpoint for user search with pagination and filters

Without technique

Prompt

Make a user search endpoint.

Response

app.get("/users", (req, res) => { const users = db.query("SELECT * FROM users WHERE name LIKE '%" + req.query.q + "%'"); res.json(users); });

Tokens:10/40

Time:250ms

Quality:

With applications-agentic-coding

With technique

Prompt

Response

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { rateLimit } from "@/lib/rate-limit";

const searchSchema = z.object({
  q: z.string().max(100).optional().default(""),
  role: z.enum(["admin", "user", "editor"]).optional(),
  page: z.coerce.number().int().min(1).default(1),
  limit: z.coerce.number().int().min(1).max(100).default(20),
});

export async function GET(req: NextRequest) {
  const ip = req.headers.get("x-forwarded-for") ?? "unknown";
  const limited = await rateLimit(ip, 30, 60);
  if (limited) {
    return NextResponse.json(
      { error: "Rate limit exceeded" },
      { status: 429 }
    );
  }

  const parsed = searchSchema.safeParse(
    Object.fromEntries(req.nextUrl.searchParams)
  );
  if (!parsed.success) {
    return NextResponse.json(
      { error: parsed.error.flatten() },
      { status: 400 }
    );
  }

  const { q, role, page, limit } = parsed.data;
  const where = {
    ...(q && {
      OR: [
        { name: { contains: q, mode: "insensitive" as const } },
        { email: { contains: q, mode: "insensitive" as const } },
      ],
    }),
    ...(role && { role }),
  };

  const [data, total] = await Promise.all([
    prisma.user.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      select: { id: true, name: true, email: true, role: true },
    }),
    prisma.user.count({ where }),
  ]);

  return NextResponse.json({
    data,
    pagination: { page, limit, total, totalPages: Math.ceil(total / limit) },
  });
}

👁️Specific reference to existing pattern (src/app/api/posts/route.ts) guides agent to consistent code

🧠Zod validation and parameterized SQL requirements prevent typical agent code vulnerabilities

🔍Explicit test scenarios (including SQL injection attempt) force the agent to think about security

Tokens:180/350

Time:1200ms

Quality:

Why this works

1 / 2

Practice Challenges

Create a free account to solve challenges

3 AI-verified challenges for this lesson

This lesson is part of a structured LLM course.

My Learning Path