Introduction to AI Coding Assistants in HCI

Introduction

AI coding assistants are tools that use large language models to suggest, generate, explain, and refactor code directly inside a developer's editor or terminal. Current examples include GitHub Copilot, Claude Code, and OpenAI's Codex-family tools. They range from inline autocomplete that finishes the line you are typing, to chat interfaces that answer questions about your project, to agent modes that can plan and carry out multi-step tasks across several files.

In this course these tools matter because interface work is iterative: you sketch a layout, build a prototype, test it with users, and revise. An assistant that can scaffold a component, draft placeholder content, or convert a design description into working markup shortens the distance between an idea and something you can actually put in front of a user. That speed is only useful if you can judge what comes back — AI output can be plausible but wrong, inaccessible, inconsistent with your design system, or built on assumptions you never stated.

The videos below introduce the practical shape of these tools. As you watch, pay attention to three things: where in the workflow the assistant is invoked (inline, chat, or agent), how much context the human has to supply for the output to be useful, and what the presenter does to check the result before accepting it. Those three habits — invoke, specify, verify — are what you will carry into the rest of the module.

Video 1: Get to know GitHub Copilot in VS Code and be productive IMMEDIATELY

Visual Studio Code · 4:45 · 840,532 views · 2y ago · captions — Watch on YouTube

About this video

A short tour of GitHub Copilot inside Visual Studio Code, showing the different surfaces where the assistant appears: inline suggestions as you type, the chat panel, and editor commands. It is framed as an orientation for someone who has just turned Copilot on and wants to start using it right away, including tips on how to interact with it effectively. Expect practical demonstration rather than conceptual discussion.

Why this video

Produced by the Visual Studio Code team itself, so the interface details and interaction patterns are authoritative and current for the tool it covers. It gives you a concrete answer to the subtopic "What Are AI Coding Assistants?" by showing one in actual use.

Video 2: Spec-Driven Development: AI Assisted Coding Explained

IBM Technology · 9:00 · 483,142 views · 7mo ago · captions — Watch on YouTube

About this video

An IBM Technology explainer on spec-driven development, the practice of writing a clear specification first and letting the AI assistant generate implementation from it rather than prompting ad hoc. The video discusses how AI-assisted coding fits into a development process and what changes when the specification, not the code, becomes the primary artifact you author and review.

Why this video

It moves beyond tool mechanics to the workflow question at the center of this topic — where AI sits in the pipeline and what the human is responsible for. The spec-first framing also sets up the module's later emphasis on evaluating output against stated requirements.

Video 3: Use GitHub Copilot agent mode to create an application from scratch

Visual Studio Code · 5:36 · 184,522 views · 1y ago · captions — Watch on YouTube

About this video

A walkthrough of GitHub Copilot's agent mode, in which the assistant acts more autonomously: taking a high-level request, planning the steps, creating and editing multiple files, and iterating toward a working application. The demonstration starts from scratch, so you see how much scaffolding an agent can produce from a prompt and how the developer supervises the process.

Why this video

Agent mode is the clearest illustration of both the opportunity and the limitation of AI-assisted design — large amounts of code quickly, with the human responsible for reviewing decisions they did not make. Again from the Visual Studio Code channel, so the demonstration reflects how the feature actually behaves.

How These Videos Support the Learning Outcomes

Together these videos build the descriptive foundation MO1 asks for: the first shows what an assistant is and where it lives in the editor, the IBM explainer places it within a development process, and the agent-mode walkthrough shows how far that role can extend. The hands-on demonstrations model the scaffolding and drafting workflows you will practice for MO2, including how to phrase requests so the generated code matches your project requirements. The spec-driven framing and the supervision shown in agent mode set up MO3 by making clear that AI output is a draft to be checked — in this course, against HCI principles, accessibility expectations, and usability standards, which no assistant evaluates for you.

About These Videos

These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.