AI Vibe 04 — AI Agents & Tools

An AI agent is a model combined with tools and a loop: the model decides which tool to call, calls it, gets the result, and decides the next step — repeating until the task is done.

# Agent execution loop:
User: "Add a search feature to the products page"

Agent:
  1. [Read] src/pages/ProductsPage.vue        → understands current structure
  2. [Read] src/api/products.ts               → sees existing API calls
  3. [Read] src/stores/products.ts            → sees the Pinia store
  4. [Edit] src/api/products.ts               → adds searchProducts() function
  5. [Edit] src/stores/products.ts            → adds searchQuery state + action
  6. [Edit] src/pages/ProductsPage.vue        → adds search input + wires it up
  7. [Bash] npm run type-check                → verifies no TS errors
  8. Done — reports what it changed

Claude Code is a full agentic CLI. It runs in your project directory with access to your full file system and terminal.

# Start Claude Code in your project:
cd my-project
claude

# What it can do autonomously:
- Read any file in the project
- Edit files (with your approval by default)
- Create new files
- Run bash commands (npm, git, php artisan, etc.)
- Search the web (with web search tool)
- Search the codebase for symbols and patterns

# Example agentic tasks:
"Find all API calls that don't handle loading state and fix them"
"Write tests for every function in src/utils/formatters.ts"
"Refactor the auth flow to use refresh tokens"

# Claude Code permission modes:
--dangerously-skip-permissions   # Full auto, no approvals (risky)
Default                          # Asks approval for file writes + bash
--print                          # Print-only, no tool calls (safe)

# Control auto-approve in settings.json:
{
  "permissions": {
    "allow": ["Read", "Glob", "Grep"],   # always allow reads
    "deny": ["Bash(rm:*)"]               # never allow rm commands
  }
}

MCP is an open standard that lets AI connect to external tools, databases, and services in a structured way. It is the "plugin system" for AI agents.

# MCP connects Claude to:
- Databases (Postgres, MySQL, SQLite)
- File systems (remote or local)
- APIs (GitHub, Jira, Slack, Notion)
- Code tools (ESLint, test runners)
- Browsers (Puppeteer, Playwright)

# Example: connect Claude Code to your Postgres DB
# In ~/.claude/settings.json:
{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_URL": "postgresql://user:pass@localhost/mydb"
      }
    }
  }
}

# Now Claude can: read schema, write queries, explain tables
claude
> "Show me all tables and describe the orders table schema"
> "Find all customers who haven't ordered in 60 days"

Autonomous agents are powerful but must be supervised. Never give AI unrestricted access to production systems.

• Review before committing: Always run git diff to see what the agent changed
• Test after each task: Run your test suite after any agentic task, not just at the end
• Approve destructive operations: Keep bash approval on for rm, drop table, git push
• Sandbox for experiments: Use a branch or dev environment for risky agentic tasks
• Set scope upfront: Tell the agent exactly which files/directories it is allowed to touch

# A well-defined agentic task has:
1. Clear goal ("implement X feature")
2. Known stopping condition ("when tests pass" / "when no TS errors")
3. Defined scope ("only touch files in src/features/cart/")
4. Success criteria ("all existing tests still pass")

# Example well-scoped agent task:
"Add email validation to the registration form.
 Only edit: src/components/RegisterForm.vue
             src/composables/useRegistration.ts
 Stop when: no TypeScript errors and the form shows an error
            message for invalid email addresses.
 Do not change any other files."

# Signs an agent task is poorly scoped:
- "Improve the whole codebase"
- No clear done condition
- Touches config/env files without being asked

# Prompt given to Claude Code:
"Implement a product favorites feature. When the user clicks
 the heart icon on any ProductCard, toggle the product as a
 favorite. Favorites are stored in localStorage and shown
 in a new FavoritesPage at /favorites.

 Files to create/edit:
 - src/composables/useFavorites.ts (new)
 - src/components/ProductCard.vue (add heart button)
 - src/pages/FavoritesPage.vue (new)
 - src/router/index.ts (add /favorites route)

 Constraints: Composition API, TypeScript, Tailwind CSS.
 Do not change any other files."

# Agent actions taken:
1. Read ProductCard.vue (understand current structure)
2. Read router/index.ts (understand route format)
3. Write useFavorites.ts (new composable with localStorage)
4. Edit ProductCard.vue (add heart button + useFavorites)
5. Write FavoritesPage.vue (new page using useFavorites)
6. Edit router/index.ts (add /favorites route)
7. Bash: npm run type-check (verify no errors)
8. Report: "Done. 4 files changed, 0 TypeScript errors."