The video demonstrates using GitHub Copilot Chat’s plan mode in VS Code to collaboratively design and build a URL shortener app with Python, FastAPI, and a simple HTML frontend, emphasizing interactive planning and real-time agent steering during implementation. It showcases the seamless workflow from project planning to coding, testing, and running the app, highlighting plan mode’s benefits for clear project understanding and efficient development.
In this video, the presenter demonstrates how to use the plan mode in GitHub Copilot Chat within VS Code to build a URL shortener application. Starting with a clean project, they open the agent debug logs and chat debug view to show that no prior activity exists. They then select plan mode and outline the project requirements, specifying the use of Python 3.14, SQLite3, FastAPI for the backend, and a simple HTML frontend with static files. The frontend is designed to have a minimal UI with fields for entering URLs to shorten and for retrieving original URLs from shortened ones.
The presenter emphasizes the interactive nature of plan mode, where the agent asks clarifying questions to better understand the project scope. For example, it inquires about the web framework and the method for generating short URL slugs. The user specifies using FastAPI and a base62 encoding scheme for the slug generation. This back-and-forth helps the agent create a detailed plan before any code is written, ensuring a clear understanding of the implementation goals.
Once the plan is finalized, the presenter initiates the implementation phase using autopilot mode, which automatically approves all commands the agent executes. During this phase, the agent generates the necessary backend and frontend files, including main.py, style.css, and index.html. The user can also steer the agent’s work by sending messages, such as requesting a dark theme for the UI, which the agent incorporates into the ongoing development. The debug views provide transparency into the agent’s actions and tool calls throughout the process.
As the implementation progresses, the presenter opens a new session to generate a README file for the project, demonstrating the ability to multitask within the environment. They monitor the agent’s commands in the terminal and observe the successful execution of tests, including URL shortening and redirection functionality. Finally, the presenter opens the running application in a browser, tests the URL shortening and lookup features, and confirms that everything works as expected with a clean and functional UI.
The video concludes by summarizing the benefits of plan mode, highlighting how it facilitates thorough planning, clarification, and steering before and during implementation. The presenter notes that this video serves as an introduction to using GitHub Copilot Chat’s agent mode and hints at upcoming videos that will explore more advanced topics such as custom agent configurations and MCP servers. Overall, viewers gain a foundational understanding of how to leverage plan mode to efficiently build and manage projects within VS Code.