Fix a Chat App with Copilot Chat

In the video, Pamela demonstrates how to use GitHub Copilot’s various modes—including ask, agent, and custom fixer modes—to efficiently understand, fix accessibility issues, and update a chat application’s codebase with automated testing and GitHub integration. She highlights how prompt-driven development with Copilot streamlines bug fixing, code comprehension, and collaboration through automated commits and pull requests.

In this video, Pamela demonstrates how to use prompt-driven development with GitHub Copilot to fix bugs in a chat application. The app is a retrieval augmented generation (RAG) chatbot designed for a fictional company’s HR department, answering questions based on a knowledge base with citations. Pamela begins by exploring the app’s code in VS Code, running both the front end and back end locally. To understand the architecture quickly, she uses GitHub Copilot in “ask mode” to get a concise overview of the app’s structure, which includes a React and TypeScript front end communicating with a Python backend using the Quir framework, along with details about data ingestion, deployment, testing, and CI/CD.

Next, Pamela addresses accessibility issues reported by users struggling with screen readers. She uses an accessibility extension to scan the app and identifies three issues. Switching to GitHub Copilot’s “agent mode,” which can edit code and use tools, she uploads a screenshot of the errors and instructs the agent to fix them. The multimodal model reads the image, analyzes the codebase, and makes changes such as adding a main element wrapper to improve accessibility. After rebuilding the front end and rescanning, the accessibility tool reports zero issues, demonstrating the effectiveness of agent mode in fixing multiple problems automatically.

Pamela then introduces custom chat modes, which extend beyond the built-in ask and agent modes in VS Code. She shows a custom mode called “fixer,” configured with specific tools and instructions tailored for fixing issues in the app. This mode can interact with GitHub issues, make minimal necessary changes, and verify fixes by running tests. Pamela tests this by addressing an outdated link in an error message reported in a GitHub issue. The fixer mode fetches the issue details, searches the codebase for relevant files, updates the backend message and related test files, and runs all tests to ensure nothing is broken.

After the fixer mode completes the updates and verifies that all tests pass, Pamela proceeds to commit the changes. She asks Copilot to create a new branch, stage the modified files, and commit with an autogenerated message summarizing the fixes. Then, she instructs Copilot to create a pull request (PR) on GitHub. Although the initial PR command needs correction, Copilot suggests the right command and successfully creates the PR. Pamela highlights that she can assign reviewers, including Copilot itself, and share the PR with colleagues for further review.

In conclusion, Pamela showcases how GitHub Copilot’s various modes and custom configurations can streamline bug fixing and development workflows. From understanding unfamiliar codebases to automatically fixing accessibility issues and updating error messages with test verification, Copilot proves to be a powerful assistant. She encourages viewers to explore the resources linked in the video description and watch other videos in the series for more prompt-driven development tips. Pamela also invites feedback and questions in the chat, emphasizing the collaborative potential of using AI tools in software development.