Rubber Duck Thursdays - Copilot agent mode, coding agent and MCP servers

Key Concepts

GitHub Copilot, Copilot Coding Agent, Model Context Protocol (MCP), Playwright MCP Server, GitHub MCP Server, Sequential Thinking MCP Server, Agent Mode, Edit Mode, CodeQL, GitHub Enterprise Importer, Dependency Auto Submission, Code Review on Mobile, Remote MCP Servers, Copilot Chat Features, TypeScript, Automation, CI/CD, Testing, UI/UX, Requirements Definition.

GitHub Updates and Features

• Agents Page for GitHub Copilot Coding Agent: Users can now view recent runs and initiate ad hoc tasks with the Copilot Coding Agent.
• Copilot Coding Agent Availability: Available on Copilot Pro, Copilot Pro Plus, Copilot Business, and Copilot Enterprise. Admin enablement is required for Business and Enterprise users.
• CodeQL Rust Support: Rust support is now in public preview in CodeQL 2221.
• Visual Studio License Management: Enterprises can manage Visual Studio subscriptions bundled with GitHub Enterprise via a dedicated subpage.
• GitHub Enterprise Importer Limit: A 5,000 repository limit is introduced for GitHub Enterprise Importer organization migrations.
• Improved Repository Creation Experience: A streamlined repository creation process with logical steps and support for required custom properties.
• Dependency Auto Submission for Python: Dependency auto submission now supports Python, in addition to Maven, Gradle, and .NET. Requires enabling in advanced security.
• Copilot Code Review on Mobile: Copilot code review is now generally available on GitHub Mobile.
• Copilot Coding Agent Supports Remote MCP Servers: Copilot Coding Agent now supports remote MCP servers via HTTP and SSE protocols. Caveats include lack of support for resources, prompts, and OAuth authentication.
• Delegate Tasks to Copilot Coding Agent from GitHub MCP Server: Users can delegate tasks to Copilot via the GitHub MCP server.
• New Copilot Chat Features: Rich file interactions, message forking, and enhanced attachments are now generally available in Copilot Chat.

Discussion on TypeScript vs. JavaScript

• The speaker prefers TypeScript due to its type checking capabilities during compilation, which helps catch errors early and aligns with their background in type-based systems.
• TypeScript allows for explicit type definitions, preventing runtime errors caused by unexpected variable types.

Copilot Edit Mode vs. Agent Mode

• Edit Mode: Allows users to explain what they want in the chat, and Copilot edits the code accordingly.
• Agent Mode: Extends Edit Mode by enabling Copilot to run MCP tools, interact with MCP servers, and perform tasks such as building and testing code. Agent mode can automatically fix errors and update tests based on the output of these tools.
• Agent mode is more "agentic" and capable of working independently, while edit mode is better for narrow, specific changes.

Project: Octo Arcade

• The speaker is working on a personal project called "Octo Arcade," a web-based arcade featuring GitHub-themed games.
• Games include an Octocat matching game, a brick breaker game with a GitHub logo ball and contribution graph bricks, and a Pong game.

Live Coding Session: Fixing UI Issues in Octo Arcade

• Problem: The main content of the game pages was rendering behind the navigation bar.
• Solution: The speaker used Copilot in Agent Mode with the Playwright MCP server to identify and fix the issue. Playwright allowed Copilot to "see" the UI and identify the cause of the overlap.
• Copilot adjusted the header component and updated the game pages to use the new header, resolving the initial UI issue.
• New Problem: A small gap appeared between the game board and the footer in the Octo Pong game.
• Attempted Solutions: The speaker tried various approaches, including using the Sequential Thinking MCP server (which failed to initialize), adjusting CSS properties like min-height and padding, and modifying the component structure.
• Final Result: The speaker managed to remove the gap and make the game fit within the viewport on larger screens, but introduced a new issue where the game extended beyond the fold on smaller screens.
• The speaker emphasized the importance of clearly defining requirements and committing code frequently.

MCP Servers Discussed

• Playwright MCP Server: Used for end-to-end testing and UI inspection. Allows Copilot to interact with web pages as a user would.
• GitHub MCP Server: Provides access to GitHub resources like issues and pull requests.
• Sequential Thinking MCP Server: (Anthropic) A tool designed to help break down problems into sequential steps. (Failed to initialize during the stream).

Key Quotes

• "Be explicit with co-pilot, co-pilot doesn't know if you haven't told it."
• "In vibe coding, knowing when to commit is an important back stop measure."

Technical Terms

• Model Context Protocol (MCP): A protocol that allows AI tools to interact with external services and tools.
• LLM (Large Language Model): A type of AI model used for natural language processing.
• CI/CD (Continuous Integration/Continuous Deployment): A set of practices for automating the software development process.
• SBOM (Software Bill of Materials): A list of all the components used in a software project.

Logical Connections

The session begins with GitHub updates, then transitions to a discussion of TypeScript and Copilot modes. This leads into a live coding session focused on fixing UI issues in the Octo Arcade project using Copilot and MCP servers. The speaker demonstrates how Copilot can be used to automate tasks, identify and fix bugs, and improve the user experience. The session concludes with a reflection on the importance of clear requirements and frequent commits.

Synthesis/Conclusion

The session provides a practical demonstration of how GitHub Copilot and MCP servers can be used to enhance the software development process. It highlights the benefits of using Copilot in Agent Mode for complex tasks, as well as the importance of clearly defining requirements and committing code frequently. The speaker also shares valuable insights into the differences between Copilot Edit Mode and Agent Mode, and how to choose the right mode for a given task. While the live coding session encountered some challenges, it ultimately showcased the power of AI-assisted development and the importance of continuous learning and experimentation.