GitHub Copilot Agent Mode & MCP Integration - Hands-On Workshop

A comprehensive, practical workshop covering advanced GitHub Copilot techniques including agent modes, Model Context Protocol (MCP) integration, context engineering, and sophisticated prompting strategies.

🎯 Workshop Overview

This hands-on repository teaches you to:

• Transform basic prompts into production-ready code generation
• Create custom Copilot instructions for project-specific guidance
• Master proven prompt patterns used by professional developers
• Build custom agent modes for specialized AI assistance
• Integrate MCP servers for real-time external context
• Generate UI tests with visual context through Playwright MCP
• Develop custom MCP servers to extend Copilot's capabilities

🚀 Quick Start

Prerequisites

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

Setup

1. Clone this repository:

   git clone <repository-url>
   cd ghcp-agent-mode-mcp
   

More setup instructions follow in the docs/ directory.

📚 Learning Path

Exercise 1: Basic to Advanced Prompting (10 min)

Path: docs/01-basic-to-advanced-prompting.md

Learn the difference between basic and advanced prompting:

• Compare generic vs. production-ready code generation
• Master the Specification, Context-Setting, and Constraint patterns
• Transform simple prompts into comprehensive, context-rich instructions

Files:

• exercises/01-basic-to-advanced/basic-api.js
• exercises/01-basic-to-advanced/advanced-api.js

Exercise 2: Copilot Instructions Mastery (15 min)

Path: docs/02-copilot-instructions.md

Create workspace-level instructions that guide Copilot's behavior:

• Understand instruction scope and hierarchy
• Write effective project-specific guidelines
• Test instruction effectiveness across different contexts

Files:

• exercises/02-copilot-instructions/root-example.copilot-instructions.md
• exercises/02-copilot-instructions/react-app/example.copilot-instructions.md
• exercises/02-copilot-instructions/api-service/example.copilot-instructions.md

Exercise 3: Prompt Files (5 min)

Path: docs/03-prompt-files.md

Create reusable prompt files using GitHub's prompt system:

• GitHub Prompts Directory: Store and share prompt templates
• Template Variables: Customizable prompt components
• Team Collaboration: Consistent prompting across team members
• Pattern Application: Apply proven patterns through reusable files

Files:

• .github/prompts/react-component.prompt.md
• .github/prompts/generate_test.prompt.md

Exercise 4: Agent Modes Strategy (15 min)

Path: docs/04-agent-modes.md

Build custom agent modes for specialized assistance:

• Create domain-specific AI assistants
• Design effective agent mode descriptions
• Test and refine mode behaviors

Files:

• .github/chatmodes/code-review-assistant.chatmode.md
• .github/chatmodes/api-development-expert.chatmode.md

Exercise 5: MCP Integration Setup (20 min)

Path: docs/05-mcp.md

Set up Model Context Protocol for external integrations:

• Understand MCP architecture and benefits
• Configure Playwright MCP server
• Connect Copilot to live applications
• Perform visual analysis and browser automation

Files:

• .vscode/mcp.json
• examples/demo-app/ (Express.js demo application)

Exercise 6: Custom MCP Server Development (25 min)

Path: docs/06-custom-mcp-server.md

Build your own MCP server from scratch:

• Create a programming jokes server
• Implement custom tools and handlers
• Integrate with VS Code and Copilot
• Extend functionality with additional features

Files:

• exercises/06-custom-mcp-server/programming-jokes-server.js
• exercises/06-custom-mcp-server/package.json
• exercises/06-custom-mcp-server/README.md

🛠️ Repository Structure

├── docs/                          # Exercise documentation
│   ├── 01-basic-to-advanced-prompting.md
│   ├── 02-copilot-instructions.md
│   ├── 03-prompt-files.md
│   ├── 04-agent-modes.md
│   ├── 05-mcp.md
│   └── 06-custom-mcp-server.md
├── exercises/                     # Hands-on exercise files
│   ├── 01-basic-to-advanced/
│   ├── 02-copilot-instructions/
│   ├── 03-prompt-patterns/
│   ├── 04-agent-modes/
│   ├── 05-mcp/
│   └── 06-custom-mcp-server/
├── examples/                      # Demo applications and references
│   └── demo-app/                  # Express.js demo for MCP testing
├── .github/                       # GitHub-specific configurations
│   ├── prompts/                   # Reusable prompt templates
│   └── chatmodes/                 # Custom agent mode definitions
└── .vscode/                       # VS Code configurations
    └── mcp.json                   # MCP server configuration

🎯 Key Learning Outcomes

After completing this workshop, you will:

✅ Prompting Mastery

• Transform basic prompts into production-ready code generators
• Apply proven patterns for consistent, high-quality results
• Create reusable prompt templates for your team

✅ Context Engineering

• Write effective Copilot instructions for project guidance
• Understand how context hierarchy affects AI behavior
• Design context-aware development workflows

✅ Agent Mode Development

• Build custom AI assistants for specialized tasks
• Design effective agent behaviors and constraints
• Create domain-specific development tools

✅ MCP Integration

• Set up and configure Model Context Protocol servers
• Connect Copilot to external data sources and tools
• Leverage real-time context for enhanced assistance

✅ Advanced UI Testing

• Generate tests based on visual application analysis
• Create context-aware test automation
• Implement visual regression testing workflows

✅ Custom MCP Development

• Build MCP servers from scratch
• Design custom tools and integrations
• Extend Copilot with team-specific functionality

🌟 Real-World Applications

For Development Teams

• Consistent Code Quality: Standardize coding patterns across team members
• Faster Onboarding: New developers get context-aware assistance
• Better Testing: Generate tests that match actual application behavior
• Custom Workflows: Build AI assistants for your specific domain

For Organizations

• Knowledge Integration: Connect AI to internal documentation and APIs
• Process Automation: Automate repetitive development tasks
• Quality Assurance: Ensure code follows organizational standards
• Innovation Acceleration: Rapid prototyping with intelligent assistance

💡 Best Practices

Prompting

• Be Specific: Detailed requirements produce better results
• Provide Context: Background information improves relevance
• Use Examples: Show patterns for consistent code generation
• Set Constraints: Define limitations and technical requirements

MCP Integration

• Start Simple: Begin with basic integrations before complex workflows
• Security First: Only test on development/local applications
• Error Handling: Implement robust error handling in custom servers
• Documentation: Clear tool descriptions help Copilot usage

Agent Modes

• Single Purpose: Focus each mode on specific tasks
• Clear Boundaries: Define what the agent should and shouldn't do
• Iterative Development: Test and refine mode behaviors
• Team Feedback: Gather input from actual users

🔧 Troubleshooting

Common Issues

MCP Server Not Starting

# Check installation
npm list -g @playwright/mcp

# Reinstall if needed
npm uninstall -g @playwright/mcp
npm install -g @playwright/mcp

# Install browsers
npx playwright install chromium

Demo App Connection Issues

# Verify app is running
curl http://localhost:3000

# Restart if needed
cd examples/demo-app
npm run dev

VS Code MCP Integration

1. Check .vscode/mcp.json configuration
2. Restart VS Code
3. Use "Developer: Reload Window" command
4. Check "GitHub Copilot: Show Output" for errors

🤝 Contributing

This workshop is designed to be practical and hands-on. If you find issues or have suggestions:

1. Issues: Report problems with exercises or setup
2. Improvements: Suggest better examples or explanations
3. Extensions: Share additional exercises or patterns
4. Documentation: Help improve clarity and completeness

📖 Additional Resources

Official Documentation

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

Advanced Topics

• Building production MCP servers
• Integrating with CI/CD pipelines
• Scaling agent modes across organizations
• Advanced prompt engineering techniques

🎉 Next Steps

After completing this workshop:

1. Apply to Real Projects: Use these techniques in your actual development work
2. Share with Team: Train colleagues on advanced Copilot usage
3. Build Custom Solutions: Create MCP servers for your specific needs
4. Contribute Back: Share successful patterns with the community
5. Stay Updated: Follow MCP and Copilot developments for new capabilities

Ready to transform your AI-assisted development workflow? Start with Exercise 1 and work through the progressive learning path. Each exercise builds on the previous ones, creating a comprehensive understanding of advanced GitHub Copilot techniques.