Joel Ross
Autumn 2026 (A)

Coding with AI

View of the Day

• Q&A if needed

• Setting up an AI Agent system

• Experiment / Work Together!

  • Generating code with a prompt

  • Iterating code via AI

Questions?

Do you have an AI Tool setup already?

Do you already have an account with any providers (ChatGPT, Claude, etc)?

Some Principles

A couple of key principles guide choices around AI usage:

• Free: this class will only use tools that are free to use. We will not give a single penny to an AI company.
• Private: we will strive to retain control of our data and prevent code from being shared and used to train future models.
• Educational: the goal is to learn web development; we will approach all AI with that in mind. We are all learning.
• Optional: you do not need to use any AI systems to succeed in this class. You can stop at any time.
   
• Any others?

Getting Started with AI

There are lots of different AI systems, models, and agents that can be used for software development. We're going to start with CoPilot because it's easy to enable in VS Code and we can get started for free.

https://code.visualstudio.com/docs/setup/copilot

• note: turn off telemetry!

Remember to turn off the AI features when working on problem sets!

Alternative: OpenCode

OpenCode is an open source AI coding agent. It can be configured to work with many different models (CoPilot, Claude, etc -- also lots of free and even local models).

OpenCode runs as a terminal process (you chat in the command line), but that can be open through VS Code.

https://opencode.ai/v2/docs

Remember to turn off the AI features when working on problem sets!

Install via npm

Plan vs. Build Mode

CoPilot and OpenCode distinguish between "Ask"/ "Plan"  mode, and "Agent"/"Build" mode.

In Plan modes, the AI will propose changes to your code without actually modifying files. This allows you to review and consider what it will be doing. You can then switch to Build mode to execute the changes.

From an educational perspective, working in Plan modes is probably better (but only if you actually review it!)

Writing The Prompt

To have the AI Agent generate some code, we'll need to give it a prompt describing what we want. Before doing anything with the agent, lets write the prompt!

1. Create a PROMPT.md file in your repo to draft the prompt
2. Individually, write down an explanation of what to build!
   • You can use language from your proposal (don't try and copy stuff from the draft spec for now)
   • "Create an initial static version or mockup an app using just HTML and CSS. Do not include any javascript for functionality, just the static design"

Try it out!

Individually, have your agent build using your prompt!

Discuss the following with your group (and to share out):

1. Overall what worked? What didn't? Were there parts of the design that were correct/incorrect?
2. What was the same & different between you and your teammates versions (since different prompts)?
   • Can you trace differences to the prompt?
3. Look at the code: any initial reactions?
4. What was "missed" in the prompt?

Sync Up

​Pick one team member's version to use as the "starting" version for the project.

• Chosen version: commit and push the code
• Everyone else:
  • Delete (or at least move) any generated files
  • pull the changes (resolve merge conflicts)

Everyone should be at the same place now!

Modification!

Now to start improving/fixing problems!

Identify one or two things that need to be changed in the draft. Note those down somewhere.

These could be anything from a small style fixes to major design adjustments

Modification!

Importantly, you can make changes yourself! You don't need to tell the AI to do it--you have control over the code! Sometimes its better/faster to do it yourself than try to shape the AI into doing that work.

• What changes did you identify? Would you do that yourself or ask the AI agent to do it? WHY?

Make the Changes!

Keep working on the project draft. We'll take 10-15 minutes to debrief and discuss the process before the end of class (I want to hear from everyone!)

Action Items!

• Task list for Week 4 (all items)

  • You may need to catch up with textbook/videos!

• Read: Chapter 10

• Problem Set 04 due Friday

Next: JavaScript!