Build URL Shortener via VS Code Copilot Plan Mode
Use GitHub Copilot's Plan Mode to interactively spec a Python FastAPI URL shortener with SQLite, base62 encoding, and minimal HTML UI, then build it hands-off with autopilot agent while steering for changes like dark theme.
Plan Interactively Before Coding
Kick off by opening GitHub Copilot Chat in VS Code, select Plan Mode, and describe your app: a URL shortener using Python (3.14), built-in SQLite3, UV for dependencies, FastAPI backend, and minimal static HTML frontend. Specify a form field for inputting URLs to shorten, a clickable shortened URL output that opens in a new tab, and a lookup field to expand short URLs back to originals.
The agent responds by asking clarifying questions—confirm FastAPI as the web framework and base62 encoding for slugs (using alphanumeric chars for short, reversible codes). Reply inline to refine; these messages update the plan without starting implementation. Review the generated outline: UV init, base62 encoder/decoder, database setup, main.py with API endpoints, and vanilla HTML/CSS. Approve to proceed only after the plan matches your vision, avoiding scattered CLI refactoring.
This back-and-forth ensures full spec before code, reducing errors from vague prompts.
Automate Builds with Autopilot Agent
Click 'Start Implementation' then 'Start with Autopilot' to switch to Agent Mode. Autopilot auto-approves all commands, executing tasks sequentially from the plan: init UV project, create base62 module, set up SQLite DB, build main.py with FastAPI routes (/shorten POST for encoding URLs to base62 slugs, /:slug GET for redirects and lookup), and generate static/index.html + style.css.
Monitor via Agent Debug Logs (tool calls, LLM reasoning) and Chat Debug View (session progress). Tasks appear as a numbered to-do list (e.g., 2/7), with real-time terminal output for commands like uv sync, fastapi dev. Run multiple sessions concurrently—one for the app, another for add-ons like 'Write a README' by analyzing project files.
Autopilot handles full stack: backend persistence, API logic, frontend serving static files, and self-testing (e.g., shortening github.com/features/copilot and verifying redirect).
Steer Changes and Verify Output
Interrupt anytime: use 'Steer with Message' to inject updates mid-build, like 'Make sure the UI has a dark theme.' The agent incorporates it into the to-do (e.g., updates style.css task) without halting progress.
On completion, dev server runs at localhost (e.g., http://127.0.0.1:8000). Test in browser: enter URL to shorten (generates base62 slug like 'abc123'), click to redirect; use lookup field on short URL to retrieve original. Agent verifies via curl tests for redirects.
Debug views reveal internals—LLM tool calls for file edits, terminal commands—but close them post-build to declutter. This workflow builds production-ready apps (API + UI) from natural language in minutes, scalable to CLI or cloud.