TheFocus.AI TheFocus.AI
About: Build Your Own AI Coding Agent

About: Build Your Own AI Coding Agent

How the course works, prerequisites, tooling, and further reading.

TUTOR WITH THEFOCUS.AI

Agent Integration

Copy this prompt into Claude, ChatGPT, or any external AI assistant. It points the assistant to the course instructions and links it to your student profile to track your progress and customize observations.

Please tutor me in this lesson using the following context. First, read the instructions at: https://courses.thefocus.ai/llms.txt My Student ID is: <none> The lesson markdown source is at: https://courses.thefocus.ai/build-ai-coding-agent/about.md

You are not enrolled yet. Enroll to generate a Student ID to track lesson completions and store learning notes.

About This Course

How It Works

Every chapter is a conversation with your AI agent — the one you’re building. Here’s the loop:

  1. Read the prompt I give you
  2. Paste it into your agent
  3. Watch the agent build the next feature
  4. Test what you just built
  5. Repeat

You are the architect. The agent is the builder. You give it direction; it writes the code. When something doesn’t work, you use your agent to debug it — just paste the error back in and let it figure out the fix.

The Meta-Loop

Here’s the beautiful part: as your agent gets more capable, it becomes better at building itself. By the end, you’ll be using an agent built by the same agent to build more features. This is the compound effect of AI tooling.


Technical Prerequisites

You’ll Install

ToolWhat It IsWhy
miseDevelopment environment managerKeeps everything reproducible
bunJavaScript/TypeScript runtimeFast, built-in test runner and shell
biomeLinter and formatterKeeps code clean
OpenRouterAPI gateway for LLMsOne API key, access to all models

APIs You’ll Need

API KeyCostUsed For
OPENROUTER_API_KEYPay-per-token (~$1–5 for the whole course)LLM access
TAVILY_API_KEYFree tier availableWeb search
GEMINI_API_KEYFree tier availableImage and video generation

The Stack

TypeScript (bun runtime)
├── src/agent.ts          — The core agent loop
├── src/index.ts          — REPL entry point
├── src/lib/
│   ├── api.ts            — OpenRouter client
│   ├── logger.ts         — JSONL session logging
│   ├── readline.ts       — Terminal input
│   └── types.ts          — Shared type definitions
├── src/tools/
│   ├── files.ts          — read_file, write_file, replace_in_file, list_files
│   ├── search.ts         — ripgrep-based code search
│   ├── system.ts         — bash execution
│   ├── web.ts            — URL to markdown download
│   ├── tavily.ts         — Web search via Tavily API
│   ├── git.ts            — git diff
│   └── user.ts           — ask_user (human-in-the-loop)
├── src/prompts/          — Markdown files with frontmatter defining agent personas
├── skills/               — Extensible skill system (images, video, banners)
├── tests/                — Test suite
└── .session_logs/        — JSONL logs of every conversation

Architecture Patterns You’ll Learn

The Agent Loop

The core of every AI agent is a simple loop:

User Input → LLM → Response (with tool calls?) → Execute Tools → LLM → ...

This is in src/agent.ts as runTurn(). It’s ~80 lines of code.

Tool Calling

Models don’t run code. They output structured JSON asking for tools to be run. Your harness intercepts these calls, runs the real function, and feeds results back.

{
  "tool_calls": [
    {
      "function": {
        "name": "read_file",
        "arguments": "{\"path\": \"src/index.ts\"}"
      }
    }
  ]
}

Prompt System

Prompts are Markdown files with YAML frontmatter defining metadata and available tools. The system loads all prompts at startup and injects the appropriate one based on the task:

---
name: default
description: The default full-featured agent.
tools:
  [
    bash,
    list_files,
    read_file,
    write_file,
    replace_in_file,
    search_files,
    run_check,
    git_diff,
    download_url,
  ]
subagents: [feature-planner, tech-researcher, code-map, poet]
---

You are a helpful AI assistant capable of running bash commands and editing files...

Subagents

The run_agent tool spawns a child agent with a different prompt and limited tool access. Subagents can be called in parallel. Results flow back to the parent agent.

Skills

Skills are directory-based extensions with a SKILL.md file containing YAML frontmatter and instructions. Skills are loaded at startup and described to the agent, which loads the full instructions on-demand:

skills/
├── big_text/SKILL.md          — ASCII art banners with figlet
├── generate_image/SKILL.md    — Image generation with nano-banana
└── generate_video/SKILL.md    — Video generation with Veo

The Prompts You’ll Use

Throughout the course, you’ll paste prompts like these into your agent:

Take bootstrap.ts and convert it into a cleanly structured typescript project.  Use mise, bun
and biome to control the building, running, testing, and linting of the project.  Split out
the prompt so that we can iterate on it going forward.  Write tests for everything first, and
make sure everything passes.
We want to add "skills" to the system.  Create a skills directory, and inside of that have a
bunch of directories with skills in them.  Each will have a SKILLS.md file, and there's front
matter that describes how to use it.  Have all the system prompts include that front matter
in them with instructions that when you need to do a task, load in the rest of the SKILLS.md
that explains how to do it.

This is vibe coding, accelerated: you provide vision and direction, the agent does the implementation.


Safety Notes

  • The bash tool in your agent can run arbitrary commands on your machine. This is powerful and potentially dangerous.
  • Consider running inside a Docker container if you want isolation.
  • Always review destructive operations (rm, git reset —hard, etc.).
  • Never share your .env file or commit it to git.
  • The agent may generate code with bugs. Always test before relying on it.

Further Reading

Once you’ve built the core agent, here are paths to explore further.

Connect Directly to Model Providers

Skip OpenRouter and connect directly to the source:

ProviderWhy
Anthropic APIDirect Claude access, prompt caching, lower latency
Google AI StudioGemini models, generous free tier, multimodal
OpenAI APIGPT models, extensive ecosystem, fine-tuning

Memory & Persistence

  • Vector databases — Pinecone, Chroma, pgvector for semantic search over past conversations
  • RAG patterns — Retrieve relevant context before generating responses
  • Long-term memory — Remember user preferences across sessions
  • Episodic memory — “Remember when we fixed that bug last week?”

Multi-Model Strategies

StrategyWhen to Use
Model routingCheap models for simple tasks, expensive for complex reasoning
Cascade patternsTry fast model first, fall back to powerful if confidence is low
Ensemble approachesMultiple models vote on critical decisions
Specialized modelsCode models for code, general models for planning

Security & Sandboxing

  • Docker isolation — Run tools in containers that can’t touch your real filesystem
  • Permission systems — Require approval for dangerous operations
  • Capability tokens — Limit what each session can access
  • Audit logging — Track every action for security review

Advanced Architectures

  • MCP Integration — Connect to the Model Context Protocol ecosystem
  • Team agents — Multiple agents collaborating with different roles
  • Planning agents — Separate planning from execution
  • Self-improvement — Agents that update their own prompts and skills from feedback
  • Evaluation loops — Automated testing of agent behavior

Project Ideas

Ready to take your agent further? Here are project ideas ranging from “do it this afternoon” to “this will take a few weekends.”

Quick Wins

Commands from Logs — Analyze your session logs to automatically suggest new slash commands that would have been helpful.

Custom Model Switcher — Add a /model command that switches between models mid-session and tracks which model performed best for which task types.

Notification Hook — Make your agent ping you (Slack, email, etc.) when long-running tasks complete, instead of you watching the terminal.

Tool Usage Dashboard — Parse JSONL logs to generate a dashboard showing which tools are used most, which fail most, and average cost per task type.

Architectural Projects

Multi-Model Router — Implement the cascade pattern: try Gemini Flash first, fall back to Opus if confidence is low. Build a simple “confidence score” based on whether the model asks clarifying questions or produces tool calls with valid results.

Docker Sandbox — Wrap the bash tool in Docker isolation so the agent can’t touch your real filesystem. Add a “break glass” confirmation for filesystem access.

Voice Interface — Add speech-to-text input and text-to-speech output. Use Whisper for transcription via an API, and a TTS library for the agent’s responses.

Team of Agents — Create specialized agents (architect, implementer, reviewer, tester) that collaborate on features. The architect writes a plan, the implementer codes it, the reviewer checks it, the tester writes tests. They pass work through the filesystem or shared context.

Production-Grade

MCP Server — Wrap your agent as an MCP server so it can be used by other agents and tools. This makes your coding agent a reusable tool in any MCP-compatible ecosystem.

CI/CD Agent — Hook your agent into GitHub Actions. When a PR is opened, the agent reviews the diff, runs tests, and posts findings as a PR comment. Add an approval workflow where the agent can make suggestions but a human must approve merges.

Self-Improving Agent — Build a feedback loop where your agent analyzes its own mistakes from session logs, proposes prompt improvements, and tests them against known good behavior. The agent effectively tunes its own system prompt.

Evaluation Harness — Create a suite of known tasks with expected outcomes. After every feature addition, run the eval suite to ensure the agent still performs correctly on all prior tasks.


← Back to Course

hey@thefocus.ai · thefocus.ai