Demo: end-to-end agentic development with GitHub Copilot

Key Concepts

• Codespaces: Cloud-based development environments.
• Dev container JSON file: Configuration file defining the development environment.
• GitHub Copilot: AI pair programmer that suggests code and automates tasks.
• MCP Server: (Likely refers to a "Model Control Plane" or similar internal GitHub service) Used by Copilot to prioritize backlog items.
• Agent Mode: Copilot's autonomous mode for handling complex tasks.
• Instruction Files: Documents outlining coding standards and best practices.
• Playwright: End-to-end testing framework.
• VS Code: Visual Studio Code, a popular code editor.

1. Setting Up the Development Environment with Codespaces

• The initial step for a developer is setting up a coding environment.
• Traditionally, this involves installing frameworks, libraries, services, and packages, which can be time-consuming.
• Codespaces simplifies this process by providing fully configured environments with just a few clicks.
• The environment is defined in a dev container JSON file, which automatically loads all necessary components.
• Developers can use VS Code directly in the browser or opt for the desktop version, both easily accessible from Codespaces.

2. Prioritizing and Delegating Tasks with Copilot and MCP Server

• GitHub's MCP server helps prioritize the repository backlog using Copilot.
• Copilot identifies issues such as new features, accessibility tests, and migrations.
• In this case, Copilot highlights the new feature as having the biggest impact on customers.
• The developer assigns the accessibility tests to Copilot to ensure they are addressed.

3. Generating Code with Copilot

• The developer focuses on adding filtering by category and publisher to the website.
• Copilot is used inline (via command I) to generate code for returning all publishers.
• Copilot also suggests code for getting publishers by ID, which the developer accepts.

4. Utilizing Copilot Agent Mode for Complex Tasks

• The developer realizes that creating the categories route, updating the app, modifying the interface, and generating tests will require significant effort.
• Copilot Agent Mode is employed to handle these complex tasks.
• Copilot reads through the project, creates necessary files (backend, frontend, tests), and runs the tests.
• Copilot Agent Mode is self-healing, meaning it can identify and fix errors by reading error messages and updating the code.
• The agent mode also handles end-to-end tests using Playwright.

5. Addressing Dependencies with Copilot

• Copilot identifies that Playwright is not listed in the requirements for the image.
• Copilot installs the necessary libraries and dependencies.
• After installing the dependencies, the tests are run again and pass.

6. Importance of Instruction Files

• Instruction files are crucial for ensuring code adheres to project guidelines.
• The team has instruction files for the project as a whole, describing global standards, as well as specific scenarios like creating endpoints and unit tests.
• Copilot Chat uses these instruction files when performing tasks.
• Copilot can even suggest creating instruction files if none exist in the repository.

7. Automating Documentation and Pull Requests with Copilot

• Copilot helps generate commit messages using the sparkles feature.
• After creating and publishing a new branch, Copilot generates the description for the pull request (PR).
• Copilot also created a PR for the accessibility work it was assigned earlier.

8. Reviewing Copilot's Work

• The developer reviews the PR generated by Copilot, which includes a detailed description of the changes and screenshots of the interface.
• The session log provides a comprehensive overview of Copilot's actions.
• The developer checks out the branch locally and runs Playwright tests to ensure everything is working correctly.

9. Conclusion

• GitHub Copilot and VS Code streamline the development process from start to finish.
• Copilot enables developers to quickly generate code, automate tasks, and stay on top of the backlog.
• The integration of Codespaces, Agent Mode, and instruction files enhances productivity and code quality.

Notable Quotes

• "With Codespaces, I'm literally a couple of clicks away from a fully configured environment."
• "Copilot highlighted the new feature as having the biggest impact on customers, so I want to turn my attention to that."
• "Fortunately, Copilot Agent Mode is self-healing."
• "Instruction files are so important, in fact that Copilot coding agent can even suggest the creation of one if you don't have any in your repository, so you don't have to create it manually."