Rubber Duck Thursday - Hacking with MCP Servers!

Key Concepts

• GitHub Copilot (including Agent Mode and Chat)
• MCP (Managed Code Platform) Servers (Playwright MCP Server, GitHub MCP Server, Appify MCP Server, Firecrawl MCP Server, etc.)
• Visual Testing
• AI-powered code assistance
• GitHub Change Log & Blog
• GitHub Podcast
• VS Code Extensions
• Context Window/Token Limits
• AI Elicitation

GitHub Updates and New Releases

• Secret Scanning Validity Checks: Now available for Enterprise Cloud with data residency.
• Dependabot Alerts: Now supports production context prioritization (public preview).
• OpenAI GPT-4 and GPT-4 Mini: Now generally available (no longer in preview).
• GitHub Actions for Open Source Maintainers:
  • AI Labeler: Streamlines issue triage with automatic label application.
  • AI Moderator: Scans issues and comments for spam, link spam, or AI-generated content.
• Remote GitHub MCP Server: Generally available, eliminating the need for personal access tokens (PATs).

GitHub Copilot and Agent Mode

• GitHub Copilot as an Agentic Coding Assistant: The presenter emphasizes that GitHub Copilot is more than just autocomplete; it's a mature AI agent capable of building applications autonomously.
• Agent Mode: Allows Copilot to actively build things, autonomously.
• Model Selection: Users can choose from various AI models within Copilot (e.g., Claude Sonnet 4, Claude Sonnet 3.5).
• Installation: GitHub Copilot can be installed as an extension in VS Code.
• Free Tier: GitHub Copilot has a generous free tier with access to Claude Sonnet 3.5, 50 agent mode chat requests, and 2,000 completions.
• GitHub Copilot for Beginners Training: A free training series on YouTube and the GitHub blog covers installation and basic usage of GitHub Copilot.

Playwright MCP Server and Visual Testing

• Playwright MCP Server: Used for visual testing to ensure the UI matches the design.
• Installation: Can be installed via the VS Code extensions marketplace or manually by creating an mcp.json file in a .vscode directory.
• Workflow:
  1. Describe the problem in the UI to Copilot.
  2. Provide a design file (e.g., a mock UI).
  3. Copilot uses the Playwright MCP server to open a browser tab and test the UI.
  4. Copilot updates the UI based on the design and performs visual testing.
  5. Playwright MCP server creates a directory with screenshots of the app for automated visual testing.
• Example: The presenter demonstrates using the Playwright MCP server to update a dropdown menu in an Astro project to match a design file.
• Benefits: Automates visual testing, ensures pixel-perfect UI, and generates screenshots for documentation.

MCP Servers: Installation and Usage

• MCP Servers: Allow LLMs to interact with external tools and data sources.
• Installation Methods:
  • VS Code Extensions Marketplace: One-click installation of MCP servers.
  • Manual Installation: Create a .vscode directory with an mcp.json file and copy the server configuration from the MCP server's repository.
• Configuration: Some MCP servers require API keys for authentication.
• Tool Selection: Users can enable or disable specific tools within MCP servers to manage the context window and improve performance.
• Context Window Limits: Using too many tools can degrade performance due to context window limitations.
• Available MCP Servers: GitHub, MinesDB, Context 7, Playwright, Fast MCP, Appify, Firecrawl, Zapier, N8N, Deep Wiki, etc.

AI Elicitation

• Definition: A feature where the AI can pause, ask for more information, and then continue with the task.
• Support: Currently supported in Visual Studio Code and GitHub Copilot.

Security Concerns with MCP Servers

• Risks:
  • Confused deputy problem
  • Supply chain risk
  • Unauthorized command execution
  • Prompt injection
  • Tool injection
• Mitigation: Use validated and verified MCP servers, and be aware of potential security risks.

Notable Quotes

• "GitHub copilot has matured into an agentic coding assistant."
• "Elicitation is kind of like saying if we don't have all the information we need, let's go and get it."
• "Testing is hideous for us developers."

Technical Terms

• MCP (Managed Code Platform) Server: A server that allows AI models to interact with external tools and data sources.
• LLM (Large Language Model): The AI model used by GitHub Copilot.
• API Key: A code used to authenticate with an external service.
• Context Window: The amount of text that an AI model can process at one time.
• Token: A unit of text used by AI models.
• Prompt Injection: A type of security vulnerability where an attacker can manipulate the input to an AI model to execute malicious commands.
• Visual Testing: Testing the visual appearance of a user interface to ensure it matches the design.
• Astro: A modern web framework.

Logical Connections

• The presenter begins by discussing recent updates to GitHub, highlighting the new AI-powered features for open-source maintainers and the general availability of the remote GitHub MCP server.
• She then transitions to a discussion of GitHub Copilot, emphasizing its capabilities beyond simple autocomplete and introducing the concept of Agent Mode.
• The core of the stream focuses on demonstrating the Playwright MCP server for visual testing, showcasing how Copilot can autonomously update the UI based on a design file.
• The presenter addresses questions from the audience about GitHub Copilot, MCP servers, and security concerns, providing practical advice and resources.
• The stream concludes with a recap of the key takeaways and a call to action for viewers to try the Playwright MCP server and explore the capabilities of GitHub Copilot.

Conclusion

The stream provides a practical demonstration of using GitHub Copilot with the Playwright MCP server for visual testing. It highlights the evolving capabilities of GitHub Copilot as an AI-powered coding assistant and emphasizes the importance of understanding and utilizing MCP servers to enhance development workflows. The presenter also addresses security concerns related to MCP servers and encourages viewers to explore the available resources and experiment with these new technologies. The main takeaway is that GitHub Copilot is more than just an autocomplete tool; it's an agentic coding assistant that can automate complex tasks and improve developer productivity.