DEMO - Build your first app with agent mode | Ep 6 of 6 - VS Code Learn

What the demo shows

• Using GitHub Copilot Chat inside VS Code to build a small app by first creating a plan (plan mode) and then switching to agent/autopilot to implement it.
• The end result is a minimal URL shortener.

End result (high level)

A minimal URL shortener with a Python backend (Python 3.14), SQLite3 storage, FastAPI web framework, and a tiny static front end. Short slug encoding/decoding uses base62.

Static front end features

• index.html and style.css
• Input field for a URL to shorten
• Clickable shortened URL that opens in a new tab
• Lookup UI to paste a short slug and reveal the original URL
• Optionally steered to a dark theme

Product features and agent capabilities demonstrated

Plan mode

• Agent outlines the work before implementation.
• Agent asks clarifying questions (framework choice, slug generation) and incorporates responses into the plan.
• Enables back-and-forth refinement of requirements prior to coding.

Start implementation / Autopilot

• Switching to agent/autopilot auto-approves the commands the agent runs.
• Implementation can run locally or via the Copilot CLI.

Steering and control

• User can steer the agent while tasks run (e.g., request a dark theme), stop/continue, or add messages to the queue.
• Agent updates its to-do list as it proceeds (examples: create base62 module, create DB, create main.py, create style.css, create static index.html).

Debugging and transparency

• Agent debug logs and chat debug view show LLM calls, tool calls, and step-by-step activity.
• A hidden terminal shows the actual commands executed by the agent (file creation, tests, dev server start).

Sessions

• Multiple sessions can run concurrently (for example, implementation session + README-generation session).
• Agent can read project files to produce documentation like README automatically.

End-to-end verification

• The demo runs the dev server, opens the app in the browser, shortens a URL and verifies redirect behavior, and tests the lookup feature.

Implementation artifacts created

• main.py (FastAPI app)
• Database setup using SQLite3
• base62 encoder/decoder module
• static/index.html
• static/style.css (dark theme)
• README generated by a separate session
• Test/verification: agent executed a redirect test (example: shortened github.com/features/copilot) and confirmed successful routing

How this fits into the learning path

• Final episode in an introductory series that ties together earlier debugging and chat views by walking through: plan → clarify → implement → verify.
• Next topics signaled: deeper dives into GitHub Copilot CLI, custom agent customization, MCP servers, and more advanced agent/tooling workflows.

Steps demonstrated (concise)

1. Create a new project in VS Code and open agent debug views.
2. Open GitHub Copilot Chat and choose plan mode.
3. Dictate requirements (Python 3.14, SQLite3, FastAPI, base62, static front end, lookup feature).
4. Answer agent clarification questions to refine the plan.
5. Start implementation with autopilot (agent runs and auto-approves commands).
6. Monitor the to-do list, steer UI choices (dark theme), and inspect debug logs/hidden terminal.
7. Run and verify the dev server; test shortening and lookup functionality.
8. Run a separate session to generate a README from the created files.

Main speakers / sources

• Presenter / demonstrator from VS Code Learn (demonstrating GitHub Copilot Chat agent mode and autopilot).
• Tools shown: GitHub Copilot Chat (plan mode, agent/autopilot), VS Code, FastAPI, Python, SQLite3, static HTML/CSS, and the Copilot CLI (mentioned as an option).