Context Engineering with GitHub Copilot & MCP

Hands-On Breakout Session (60-90 minutes)

Session Overview

Explore the power of context in GitHub Copilot through hands-on exercises. Learn how to supercharge Copilot by giving it the right knowledge at the right time using context engineering techniques and the Model Context Protocol (MCP).

Learning Objectives

By the end of this session, participants will:

• Understand the fundamentals of context engineering with GitHub Copilot
• Master prompt engineering techniques for better AI assistance
• Learn to leverage data and code context effectively
• Configure and use MCP servers to enhance Copilot's capabilities
• Practice UI testing with Playwright MCP server
• Apply context engineering in real-world scenarios

Session Structure (90 minutes)

Module 1: Context Engineering Fundamentals

• Location: docs/01-context-fundamentals.md
• Practice Files: examples/context-fundamentals/
• Time: 20 minutes

Understand the fundamentals of context engineering with GitHub Copilot.

Module 2: Prompt Engineering Techniques

• Location: docs/02-prompt-engineering.md
• Practice Files: examples/prompt-engineering/
• Time: 25 minutes

Master effective prompt patterns and techniques for better AI assistance.

Module 3: Model Context Protocol (MCP)

• Location: docs/03-mcp-integration.md
• Practice Files: examples/demo-app/
• Time: 30 minutes

Learn to extend Copilot's capabilities with MCP servers and hands-on browser automation.

Module 4: Hands-On UI Testing with Playwright MCP

• Location: docs/04-ui-testing.md
• Practice Files: examples/demo-app/
• Time: 15 minutes

Generate real Playwright tests using MCP server integration and GitHub Copilot working together in real-time.

Module 5: Custom MCP Server Creation

• Location: docs/05-custom-mcp-server.md
• Practice Files: examples/custom-mcp-server/
• Time: 20 minutes

Build your own MCP server from scratch - create a programming jokes server to add humor to your development workflow.

Prerequisites

• VS Code with GitHub Copilot extension
• Node.js 18+
• Basic understanding of JavaScript/TypeScript
• Basic web development knowledge

Repository Structure

├── docs/                    # Step-by-step guides and workshop modules
├── examples/                # Modern code examples demonstrating context engineering
│   ├── context-fundamentals/  # Context engineering examples
│   ├── custom-mcp-server/     # Programming jokes MCP server implementation
│   ├── demo-app/             # Sample web application for hands-on practice
│   └── prompt-engineering/   # Prompt engineering examples
├── .vscode/                 # VS Code configuration including MCP setup
└── README.md               # This file

Quick Start

1. Clone this repository

   git clone <repository-url>
   cd ghcp-context-engineering-mcp

2. Install dependencies

   cd examples/demo-app
   npm install

3. Start the demo application

   npm run dev

4. Follow along with the modules

   • Start with docs/01-context-fundamentals.md
   • Progress through each module
   • Practice with examples in examples/

MCP Servers Included

• Playwright MCP Server: For enhanced UI testing and web automation
• Programming Jokes MCP Server: Custom server for adding humor to development workflow

Configuration is handled through .vscode/ settings in the project root.

Resources

• GitHub Copilot Documentation
• Model Context Protocol Specification
• Playwright Documentation

---

Ready to dive into context engineering? Let's get started! 🚀