Intro to AI Engineering
Understand the AI Engineer role, course structure, the Build-Eval-Improve loop, and environment setup.
On this page (6 sections)
What We Are Building
We are building an AI powered diagram design tool. You start with a fully functional Excalidraw canvas and a chat sidebar. Over the course of 12 lessons, you will turn that chat sidebar into an intelligent agent that can create, modify, and reason about diagrams on the canvas.
The app is built on Cloudflare Workers with the Agents SDK for the backend, and React with Excalidraw for the frontend. Everything runs locally on your machine. No deployment or cloud account needed.
Course Progression Roadmap 1. Lessons 1 through 5: Build the agent, wire up the chat, and establish evals so you have a working baseline to improve against. 2. Lessons 6 through 12: Systematically improve the agent using context engineering, better tools, RAG, generative UI, human-in-the-loop flows, planning mode, and data flywheels. Every improvement is measured with evals.
What is an AI Engineer?
An AI Engineer is a system builder. You take foundation models (like Claude, GPT, etc.) and turn them into dependable product features. This is different from ML Engineering, where the focus is on training models, managing datasets, and optimizing model performance. As an AI Engineer, you treat the model as a given and focus on everything around it:
- Context engineering: curating exactly the right tokens to send to the model at inference time
- Tool design: giving the model the right capabilities to take actions in the world
- Evaluation: building automated test suites that measure whether the system is getting better or worse
- Production reliability: handling errors, managing costs, dealing with latency, and shipping to real users
*Think of it this way: an ML Engineer builds the engine. An AI Engineer builds the car around it.*
In 2026, roughly 70% of AI Engineer job postings center on four core skills: RAG, Evals, Agents, and Production Deployment.
The 12 Factor Agents Framework
The 12 Factor Agents framework provides a set of principles for building reliable AI agents. The most important takeaway: an agent is just a program. It has inputs, outputs, and a control flow that you design. The model is a powerful component inside that program, but you are the architect.
The Build, Eval, Improve Loop
This course is structured around a simple iterative loop:
Build → Eval → Improve → Eval → Improve → ...
The first half of the course is about building and measuring. You will create the agent, wire up the chat interface, write a golden dataset of test cases, and build automated scorers. By the end of that phase you will have a working agent AND a baseline eval score.
The second half is about systematic improvement. Each lesson applies one technique, then runs evals to measure the impact. Every change is measured. This is the professional workflow: you never ship an improvement you have not evaluated.
Project Structure Tour
Here is what the codebase looks like and what each piece does:
| 1 | ├── src/ |
| 2 | │ ├── main.tsx # React entry point |
| 3 | │ ├── App.tsx # Root component, layout |
| 4 | │ ├── App.css # Layout styles |
| 5 | │ ├── index.css # Global styles, fonts |
| 6 | │ ├── worker.ts # Cloudflare Worker entry point |
| 7 | │ ├── components/ |
| 8 | │ │ ├── Canvas.tsx # Excalidraw wrapper |
| 9 | │ │ ├── chat/ # Chat panel components |
| 10 | │ │ ├── streaming/ # Streaming text, tool status |
| 11 | │ │ ├── gen-ui/ # Generative UI registry |
| 12 | │ │ └── hitl/ # Human in the loop components |
| 13 | ├── lessons/ # Course notes |
| 14 | ├── evals/ # Eval dataset (golden.json + scorers) |
| 1 | import { defineConfig } from "vite"; |
| 2 | import react from "@vitejs/plugin-react"; |
| 3 | import { cloudflare } from "@cloudflare/vite-plugin"; |
| 4 | |
| 5 | export default defineConfig({ |
| 6 | plugins: [react(), cloudflare()], |
| 7 | }); |
| 1 | name = "ai-design-tool" |
| 2 | compatibility_date = "2025-04-01" |
| 3 | main = "./src/worker.ts" |
| 4 | |
| 5 | [assets] |
| 6 | not_found_handling = "single-page-application" |
| 1 | export default { |
| 2 | fetch(_request: Request, _env: Env) { |
| 3 | return new Response("Not found", { status: 404 }); |
| 4 | }, |
| 5 | } satisfies ExportedHandler<Env>; |
| 6 | |
| 7 | interface Env {} |
Environment Setup
Follow these 5 steps to set up your environment:
| 1 | # 1. Install dependencies |
| 2 | npm install |
| 3 | |
| 4 | # 2. Set up API key |
| 5 | cp .dev.vars.example .dev.vars |
| 6 | # Edit .dev.vars: OPENAI_API_KEY=sk-your-key-here |
| 7 | |
| 8 | # 3. Start development server |
| 9 | npm run dev |
| 10 | |
| 11 | # 4. View course notes locally (optional) |
| 12 | npm run docs |
Finished reading this module?
Mark it complete to track your progress through the course.