New Programming Paradigm

"English is the New Programming Language" (but you need the vocabulary)

To get there

As projects grow more complex, understanding shifts from every line to structure/architecture.
That also entails specific vocabulary.
Notes

Session Target, Local vs Copilot vs Cloud

VS Code also lets you choose where a chat session actually runs. Open the Session Target dropdown in the chat input to see it. For this class, stay on Local.

VS Code chat panel with the Session Target dropdown open, showing Local, Cloud, Copilot, and Claude as Continue In options, and the Local indicator at the bottom of the chat input
Local (use this)
Runs interactively inside VS Code, right here on your machine. It works directly in your current workspace and can use VS Code's built-in tools, extensions, and MCP servers. This is the only target with the tight edit, save, reload feedback loop this class relies on.

Copilot (Copilot SDK agent)
Also runs on your machine, but outside the editor. It hands the task to a separate "Agent Host" process, working in your current folder or an isolated Git worktree, using GitHub's Copilot SDK. Built for general coding tasks, not the moment-to-moment editing this class does.

Cloud (GitHub's cloud agent)
Runs remotely on GitHub's own servers, not your machine at all. It works against a GitHub repository and opens a pull request when it's done, meant for well-scoped tasks you hand off and check on later. You will not see the file change locally as it happens.

Why it matters here: If your Session Target drifts to Copilot or Cloud, the changes you expect to see in your open file will not show up, because the work is happening somewhere else. Keep it on Local so what you type, ask, and approve stays visible in your own editor.
Notes: VS Code documents five targets in total (Local, Copilot, Claude, Codex, Cloud), all from the same Session Target dropdown. Claude and Codex bring their own agent's tools and permission modes into the same "on your machine, isolated worktree" category as Copilot. Only Local, Copilot, and Cloud are called out here since those are the three named most often in class discussion.

Editing with Copilot: Edit Mode (Inline Chat)

Copilot can make targeted changes right where your cursor is, without opening the full chat panel. Place your cursor in your code (or select a line or block) and press Cmd+I (Mac) / Ctrl+I (Windows) to open inline chat.

Edit (Inline Chat)
For targeted changes to your code. Describe what you want added or changed, right there in the file.
Examples: "Add an image tag here"  /  "Fix the typo in this tag" Use this when you already know what you want to change.
Notes: Edit is one of several Copilot modes (Ask, Edit, Plan, Agent). See ai_use.html for the full comparison across all four modes, and for Agent mode's plan-first workflow, kept there for later reference.

Four Ways to Use Copilot: Ask, Edit, Plan, Agent

Copilot in VS Code has four modes, selectable from the agents dropdown in Chat view. Open Copilot Chat with Cmd+Shift+I (Mac) or the chat icon in the sidebar.

VS Code chat panel with the agents dropdown open, showing Agent, Ask, and Plan as mode options above Configure Custom Agent
Ask
For learning and understanding. Ask Copilot questions, about concepts, about code you see, about errors. It answers conversationally and never touches your files.
Examples: "What does <!DOCTYPE html> do?"  /  "Why is my page showing a blank screen?" Use this mode most, especially early in the course.

Edit (Inline Chat)
For targeted changes to your code. Select a line or block of code and press Cmd+I to ask Copilot to modify just that part.
Examples: "Add an image tag here"  /  "Fix the typo in this tag" Use this when you already understand what you want to change.

Plan
For preparing a bigger task before anything is changed. Select Plan from the agents dropdown (or type /plan) and describe what you want. Copilot researches your project, asks clarifying questions, and writes a reviewable step-by-step plan. No files are touched yet.
Example: "/plan Add a navigation menu with three links to my page" Use this before Agent, any time the task is bigger than a one-line change.

Agent
For bigger, multi-step tasks. Copilot can create files, make changes across multiple files, and run commands autonomously.
Examples: "Create a new HTML file with a header, three sections, and a footer" Use with care, Agent can change a lot at once. Plan first for anything non-trivial (see next slide).
Notes: The Session Target dropdown covered on the previous slide (Local / Copilot / Cloud) is a separate axis from the four modes here, it controls where the session runs, not what permission it acts with.

Agent Mode: Always Plan First

When you use Agent mode for anything bigger than a one-line change, start with the Plan mode from the previous slide. Don't let Agent start editing before you've seen and understood what it intends to do.


How Plan and Agent relate:

Plan is a preparation step that feeds into Agent. Plan only researches your project and drafts a step-by-step plan (saved for the session); it makes zero file changes. Once you're happy with the plan, you move into Agent (in the same conversation) to actually execute it.


Recommended workflow:

  1. Select Plan from the agents dropdown (or type /plan) and describe your task
  2. Answer any clarifying questions Copilot asks
  3. Read the generated plan carefully. Make sure it sounds right to you
  4. Only once you understand and agree with it, tell it to proceed. This switches into Agent to actually make the changes

Sound software engineering approach for humans and better reasoning for AI models


Agent mode is powerful. It can delete or overwrite things. If you don't understand the plan, you won't know if something went wrong. Planning is how you stay in control of your own project.

A good prompt: "/plan I want to add a navigation menu to my page with three links."
This is not only a human review step. Research on chain-of-thought prompting shows that LLMs tend to produce better, more accurate results when they work through a problem step by step before generating a final answer, instead of jumping straight to output. Plan mode forces exactly that. It makes the model think through your project and lay out steps before it touches a single file. A clearer plan usually means better code once Agent executes it.
Notes

Running AI on your own machine

You don't need the internet to use AI. Ollama lets you download and run language models locally on your own computer, for free, with no account required.

Step 1: Install Ollama and try a model:

  1. Download and install Ollama (Mac / Windows / Linux). This installs a background service and a native desktop app with its own chat window. Look for the Ollama icon in your menu bar (Mac) or system tray (Windows).
  2. Easiest path: open the Ollama app, click the model dropdown at the top, and choose gemma4:e2b. Picking a model you don't have yet downloads it automatically (~7 GB) and drops you straight into a chat window, no terminal needed.

gemma4:e2b is one option among many, see the next slide to compare sizes, tags, and strengths across models.


Step 2: Connect Ollama to VS Code:

VS Code's old built-in Ollama provider is being retired. As of summer of 2026, use VCS's built in Ollama provider.

If that does not work, install the official Ollama extension instead (maintained directly by the Ollama team):

  1. Open the Extensions view in VS Code and install Ollama (publisher: Ollama), or open Quick Open (Cmd+P / Ctrl+P) and paste ext install ollama.ollama
  2. Make sure Ollama is running (the desktop app, or ollama serve in a terminal)
  3. Open Copilot Chat, click the model picker at the bottom of the chat input, and choose a model from the Ollama section. It auto-discovers whatever's running at http://127.0.0.1:11434, no manual setup needed
  4. If your models don't show up: run Ollama: Refresh Models from the Command Palette. If that doesn't fix it, run Ollama: Diagnose Models and check the "Ollama" output channel.

Step 3: Choose gemma4 as your model:

  1. Open Copilot Chat
  2. Click the model name at the bottom of the chat panel, this opens the model picker
  3. Select gemma4:e2b from the Ollama section
  4. To set it as the default: click the model picker → find gemma4:e2b → click the star or "Set as default" option
Known limitation: Agent mode with local models.
  1. Most local models are really only reliable for Ask mode (chat, explain, answer questions), even ones tagged "tools" on Ollama. gemma4:e2b and qwen2.5-coder:7b both fall in this bucket: fine for explaining code, but not dependable for Agent mode (autonomous file edits). You may see a model claim it "doesn't have tools" even though it's tagged as supporting them, or answer the same clarifying question twice without progressing, or print a raw JSON-looking tool call as plain chat text instead of actually running it. All of these are signs the model can't reliably drive Agent mode, not a bug in your setup.
  2. qwen3-coder:30b is, so far, the only model that has reliably worked as an agent (but only through the Cline extention). it actually wrote real, working code to a file. Treat every other local model on the previous list as Ask-only until proven otherwise: gemma4:e2b and qwen2.5-coder:7b both struggled in Agent mode across multiple tests.
  3. Cline extension: qwen3-coder:30b only worked reliably through Cline.

Always verify by checking the file, not by trusting the chat text. If the tool call looks malformed or the model just describes what it "would do," open the file and confirm nothing (or the wrong thing) happened before assuming it worked.



Watch your memory. Open Activity Monitor (Mac) → Memory tab while Ollama is running.
  • The Memory Pressure graph at the bottom tells you how hard your machine is working
  • Green = fine   Yellow = getting tight   Red = overloaded, quit other apps
  • Lab machines have 32 GB RAM; gemma4:e2b uses roughly 7 GB, so there is plenty of room

Why bother running AI locally?
Your data never leaves your computer. No usage limits. Works offline. Good for understanding how these models actually function, they're just files sitting in a folder on your disk.
Ollama runs a local server on port 11434. VS Code's built-in Ollama BYOK provider was deprecated in favor of the official Ollama extension (publisher: Ollama, id ollama.ollama), maintained by the Ollama team so it keeps pace with new Ollama models/features. Install it from the Extensions view or via "ext install ollama.ollama" in Quick Open. It auto-discovers models from the local Ollama server (127.0.0.1:11434), no manual "Add Models" step required. Requires VS Code 1.120+, Ollama running, at least one pulled model. Local models need no sign-in; "ollama signin" is only for Ollama's cloud-hosted models. Troubleshooting commands: "Ollama: Refresh Models" and "Ollama: Diagnose Models". GitHub Copilot Free is sufficient, no paid plan needed to use local models. Memory pressure in Activity Monitor reflects RAM/disk swapping; yellow/red means responses will slow down significantly.

Choosing a Local Model (That fits on our lab machine with 32GB of memory)

gemma4:e2b (used on the previous slide) is one option among many. ollama.com/search shows capability tags but not file size, check a model's own Tags page (e.g. ollama.com/library/gemma4/tags) for exact download sizes before pulling.

Model Size Tags Strengths
gemma4:e2b 7.2 GB vision, tools, thinking, audio General-purpose, multimodal, native tool-calling. The all-around choice, what we use in this class.
qwen2.5-coder:7b 4.7 GB tools Coding-specialized: generation, repair, and reasoning about code specifically.
qwen2.5-coder:14b 9.0 GB tools Same family, stronger coding quality, still comfortable on 32 GB lab machines.
qwen3-coder:30b 19 GB tools, cloud Strongest local coding/agentic model here, 256K context. The only model confirmed to reliably work in Agent mode (tested via Cline) so far in this class. Uses most of a 32 GB machine's headroom.
codestral:22b 13 GB none Mistral's dedicated code-completion model, fast inline autocomplete, no tool-calling.
lfm2.5:8b 5.2 GB tools, thinking Liquid AI's edge model, built for fast, reliable tool-calling on modest hardware rather than top benchmark scores.

What the tags mean:

For coding specifically: tools matters if you want the model to act on your behalf (agent mode), thinking helps on harder problems, vision is a nice-to-have for screenshot debugging, and embedding models are a different tool entirely, skip them for this class.
Ask vs. Agent, in practice. The "tools" tag tells you a model is designed to support tool-calling, it doesn't tell you whether it actually works reliably inside VS Code. In this class's own testing, qwen3-coder:30b is the only model that has reliably acted as an agent (successfully wrote working code to a file). gemma4:e2b and qwen2.5-coder:7b are solid for Ask mode but have repeatedly failed or stalled in Agent mode. Treat any untested model on this table as Ask-only until you've confirmed otherwise.

Tool matters as much as model. qwen3-coder:30b only worked through the Cline extension. Through VS Code's native Copilot Chat + Ollama extension, the same model failed with a known, currently-open Copilot Chat bug ("Response contained no choices").
Sizes and tags pulled directly from each model's page on ollama.com/library as of July 2026 (default/first quantization shown). gemma4:e2b's tags (vision, tools, thinking, audio) come from Google's own model card: all Gemma 4 sizes support vision and native function-calling; audio is supported by the E2B/E4B edge variants specifically (the 31B dense variant has no audio). "cloud" only appears where Ollama also hosts a cloud-run version (e.g. gemma4:31b-cloud, qwen3-coder:480b-cloud); it doesn't mean the local model itself needs the internet.