Configuring Model Context Protocol in the GitHub Copilot CLI Demo

Configuring Model Context Protocol in the GitHub Copilot CLI | Demo ![rw-book-cover](https://img.youtube.com/vi/O73egpvWcpY/maxresdefault.jpg) > [!note]+ Document Notes > tags: [github-copilot, model-context-protocol, developer-tools] > author: Scott Hanselman > source: YouTube > reference: https://www.youtube.com/watch?v=O73egpvWcpY > date created: 2024-12-19 14:30 > > # 🏷️ Title: Configuring model context protocol in the GitHub Copilot CLI | demo >  ## 🧰 Action Inbox - [H1] Install GitHub Copilot CLI and configure MCP servers — improves AI context with real-time documentation #devtools - [H2] Set up Context 7 API integration for project documentation — provides up-to-date framework docs to AI #documentation - [H3] Test MCP server configuration with architecture diagram generation — validates integration is working #testing ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [GitHub Copilot CLI](https://copilot.github.com) - [Context 7 Documentation](https://context7.com) - [Model Context Protocol Specification](https://modelcontextprotocol.io) ## 📝 Summary - Scott demonstrates configuring Model Context Protocol (MCP) servers with GitHub Copilot CLI to provide AI with real-time access to documentation - Uses Context 7 service to give AI access to up-to-date Next.js documentation for his podcast dashboard project - Shows the complete setup process from API key configuration to generating architecture diagrams with enhanced context - MCP servers can be added, removed, enabled/disabled without restarting, supporting both local and remote configurations - Bottom line: MCP extends AI capabilities by connecting it to live documentation and tools, making responses more accurate and current ## 📖 Main Content Model Context Protocol (MCP) acts as a standardized interface ("like USB for AI") that allows AI models to connect to external data sources and tools. Scott demonstrates this using GitHub Copilot CLI with Context 7, a service providing up-to-date documentation for various frameworks and libraries. The setup process involves using slash commands in Copilot CLI to add MCP servers. For HTTP-based servers like Context 7, you need the server URL and authentication headers in JSON format. The configuration takes effect immediately without requiring restarts. Context 7 specifically provides a dashboard with current documentation for popular frameworks. When integrated via MCP, it allows the AI to access this documentation in real-time, ensuring responses reflect the latest features and best practices rather than potentially outdated training data. The practical benefit is demonstrated through architecture diagram generation, where the AI leverages both the codebase analysis and current Next.js documentation to create accurate technical diagrams that reflect modern patterns and the actual project structure. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/O73egpvWcpY?t=0) — [H1] Introduction to MCP and Available Servers - Key idea: MCP is "like USB for AI" enabling connections to external tools and data - Evidence: "I've got one for Aspire, which is an orchestrator. I've got one for Microsoft Learn that gives us access to documentation. And I've got one for Playright that lets me talk to the browser" #### ⏱️ [00:30](https://youtu.be/O73egpvWcpY?t=30) — [H2] Context 7 Service Overview - Key idea: Context 7 provides a dashboard with up-to-date documentation for AI integration - Evidence: "Context 7, has got this great dashboard filled filled with tons of up-to-date documentations for your AI" #### ⏱️ [01:15](https://youtu.be/O73egpvWcpY?t=75) — [H2] Accessing MCP Configuration in Copilot CLI - Key idea: Use slash commands to manage MCP servers in Copilot CLI - Evidence: "I'm going to hit a slash command. I'm going to type MCP. Enter. Now it shows me those configured MCP servers" #### ⏱️ [01:30](https://youtu.be/O73egpvWcpY?t=90) — [H3] Adding New MCP Server Configuration - Key idea: Add servers by specifying name, type, and connection details - Evidence: "I'm going to go ahead and just a to add a server and then we'll just call this one uh context 7. I'll hit then tab. And this is going to be an HTTP server" #### ⏱️ [02:00](https://youtu.be/O73egpvWcpY?t=120) — [H3] Configuring HTTP Server with Authentication - Key idea: Remote MCP servers require URL and authentication headers in JSON format - Evidence: "Now, we are going to need our context API key, and that's going to be done as some headers. And that's going to require a little bit of JSON" #### ⏱️ [02:45](https://youtu.be/O73egpvWcpY?t=165) — [H2] Immediate Configuration Activation - Key idea: MCP server changes take effect immediately without restart - Evidence: "Changes taking effect immediately. I don't even have to restart anything" #### ⏱️ [03:00](https://youtu.be/O73egpvWcpY?t=180) — [H1] Testing MCP Integration with Architecture Request - Key idea: Request architecture diagram to test MCP server integration with project context - Evidence: "Hey, let's go ahead and uh do a asky architecture diagram for this uh application and make sure that we're using all the latest documentation" #### ⏱️ [03:30](https://youtu.be/O73egpvWcpY?t=210) — [H2] AI Leveraging Context 7 for Documentation Access - Key idea: AI actively queries Context 7 for available libraries and current documentation - Evidence: "So, it's talking already to context 7 and it's asking it what libraries does it have available and whether or not it needs information" #### ⏱️ [04:00](https://youtu.be/O73egpvWcpY?t=240) — [H2] AI Analyzing Project with Enhanced Context - Key idea: AI combines local code analysis with remote documentation for comprehensive understanding - Evidence: "It's looking at TypeScript and JavaScript. It's exploring our tools directory. It's looking at the source code" #### ⏱️ [04:30](https://youtu.be/O73egpvWcpY?t=270) — [H1] Generated Architecture Diagram Results - Key idea: AI successfully creates accurate architecture diagram using current Next.js 15 documentation - Evidence: "Rec recognizes that it's Nex.js15. Nice data flow diagram. That's hot" #### ⏱️ [05:00](https://youtu.be/O73egpvWcpY?t=300) — [H3] MCP Server Management Features - Key idea: MCP servers can be added, removed, disabled, and re-enabled as needed - Evidence: "I can add, remove, some are local, some are not, some are remote and uh I could even disable them and leave them there and bring them back later" #### ⏱️ [05:15](https://youtu.be/O73egpvWcpY?t=315) — [H3] Alternative Configuration Method - Key idea: MCP configuration can be done via command line or by editing JSON directly - Evidence: "Now I can go and do that MCP both at the command line or if I want I can just copy paste the JSON directly into copilot uh and do the MCP config.json" ## 📚 References - [GitHub Copilot CLI](https://copilot.github.com) - [Context 7 Dashboard](https://context7.com) - [Model Context Protocol Documentation](https://modelcontextprotocol.io) - [Next.js Documentation](https://nextjs.org/docs) ## 🗣️ Paraphrase - Model Context Protocol serves as a universal connector that allows AI models to access external tools and documentation sources in real-time - Context 7 provides a centralized service for accessing current framework documentation, eliminating the problem of AI responses based on outdated training data - The GitHub Copilot CLI makes MCP server management straightforward through slash commands, with immediate activation and flexible configuration options ## 📰 Newsletter **Supercharge Your AI Development with Model Context Protocol** The latest GitHub Copilot CLI demo shows how Model Context Protocol (MCP) is revolutionizing AI-assisted development by connecting your AI to live documentation and tools. Think of MCP as "USB for AI" - a standard way to plug external capabilities directly into your AI workflow. **Key Benefits:** - **Real-time Documentation**: Access current framework docs instead of relying on potentially outdated AI training data - **Seamless Integration**: Add MCP servers through simple slash commands with immediate activation - **Flexible Configuration**: Support for both local and remote servers with easy enable/disable options The demo showcases Context 7 integration, providing up-to-date Next.js documentation that helps the AI generate accurate architecture diagrams based on both your codebase and current best practices. **Get Started:** Try the GitHub Copilot CLI at [copilot.github.com](https://copilot.github.com) and explore available MCP servers for your tech stack. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create MCP server showcase demonstrations, conference talks on AI tooling integration - Education: Develop workshops on MCP configuration, AI-enhanced development workflows - Developer experience: Document MCP server setup patterns, common configuration examples - Developer marketing: Content series on AI productivity tools, MCP ecosystem coverage - Community management: MCP server recommendation threads, troubleshooting forums #### Community - Contributors: MCP server development guides, open source server templates - Maintainers: Integration examples for popular frameworks, documentation standards - Ecosystem: Cross-tool MCP compatibility, server discovery mechanisms #### WordPress - Core: Explore MCP integration for development tooling, AI-assisted code review - Documentation: MCP servers for WordPress documentation access, API reference integration - CLI: WP-CLI MCP server development for WordPress-specific AI context - Developer: AI-enhanced debugging with WordPress-specific context servers ## 🧪 Hypotheses - MCP integration reduces AI hallucination rates by providing access to current documentation instead of potentially outdated training data - Developers using MCP-enhanced AI tools complete architecture and documentation tasks 40% faster than those using standard AI interfaces - Projects using MCP servers for framework documentation maintain better adherence to current best practices and security standards - The standardized MCP interface will accelerate adoption of AI tools across different development environments and workflows ### 📊 Methodology - A/B testing comparing development task completion times with and without MCP server integration - Code quality analysis measuring adherence to current framework patterns before and after MCP adoption - Developer survey measuring confidence levels and accuracy perception when using MCP-enhanced AI tools ### ❓ Questions - How does MCP server latency impact the overall AI response experience and developer workflow? - What security considerations exist when connecting AI models to live documentation and internal tool servers? - How can organizations balance the benefits of external MCP servers with data privacy and security policies? ### 🔮 Future Research - Development of WordPress-specific MCP servers for theme/plugin development context - Integration patterns for MCP servers with existing CI/CD and development automation workflows - Performance optimization strategies for MCP server networks in large development teams ### 💡 Implications - Practice: Developers need to evaluate and configure MCP servers as part of AI tool setup - Policy: Organizations require guidelines for approved MCP servers and external AI tool connections - Security: Additional attack surface considerations when AI tools connect to external documentation services - Education: Developer training programs should include MCP configuration and AI tool integration - Funding: Investment in MCP server development and maintenance becomes part of developer tooling budgets ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 8 #### 👀 Visual learners - Present: Architecture diagram generation demonstration, CLI interface screenshots - Improve: MCP server architecture diagrams, configuration flow charts, visual API integration maps #### 🔊 Aural learners - Present: Video demonstration with narrated configuration steps - Improve: Audio-only tutorial version, podcast discussion on MCP benefits #### 🗣️ Verbal learners - Present: Clear analogies ("like USB for AI"), step-by-step explanations - Improve: Glossary of MCP terminology, comparison tables with traditional AI approaches #### 🧩 Kinesthetic learners - Present: Hands-on CLI configuration demonstration, immediate feedback - Improve: Interactive MCP server playground, guided setup checklist #### 🧠 Logical learners - Present: Clear cause-and-effect demonstration of MCP integration benefits - Improve: Performance metrics, decision trees for server selection #### 🧑‍🤝‍🧑 Social learners - Present: Community-focused presentation style, shared development context - Improve: Discussion prompts for team MCP adoption, collaboration scenarios #### 🧘‍♀️ Solitary learners - Present: Individual developer workflow focus, self-directed configuration - Improve: Written guide version, self-assessment checklist for MCP readiness #### 🌿 Naturalistic learners - Present: Ecosystem thinking about AI tool integration - Improve: MCP server ecosystem mapping, environmental impact of AI tool usage ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear video narration describes visual actions - Improve: Structured transcript with heading hierarchy, descriptive alt text for CLI screenshots #### Keyboard navigation - Present: CLI-focused demonstration naturally keyboard accessible - Improve: Keyboard shortcuts documentation, navigation tips for screen reader users #### Contrast and readability - Present: Clear terminal contrast in demonstration - Improve: High contrast code examples, larger font size options in documentation #### Text resizing and reflow - Present: Video content scales appropriately - Improve: Text-based tutorial version that reflows properly #### Media and captions - Present: Spoken narration throughout video - Improve: Detailed captions including code snippets, downloadable transcript #### Forms and interactions - Present: Clear CLI command structure - Improve: Form-based MCP configuration alternative, validation feedback ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal development tool focus applicable across regions - Improve: Examples from diverse tech stacks and development environments #### Inclusive language - Present: Technical but accessible language, avoids complex jargon - Improve: Define all acronyms on first use, provide plain language alternatives #### Neurodiversity support - Present: Clear step-by-step structure, consistent command patterns - Improve: Visual progress indicators, chunked information presentation #### Representation - Present: Single presenter limiting diversity representation - Improve: Diverse case studies, multiple developer perspectives #### Psychological safety - Present: Encouraging tone, acknowledges speech impediment naturally - Improve: Error handling examples, "safe to experiment" messaging ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Strong logical flow from MCP concept to practical implementation - Inductive strength: Good generalization from specific Context 7 example to broader MCP usage - Causal reasoning: Clear cause-effect relationship between MCP integration and improved AI responses - Analogical strength: Effective "USB for AI" analogy helps conceptual understanding #### Fallacies - Appeal to novelty: Implicit assumption that newer AI tools are automatically better - needs evidence - Hasty generalization: Single successful example doesn't prove universal effectiveness across all use cases #### Tone of voice - Overall tone: Enthusiastic and accessible, with natural conversational style that includes authentic moments like acknowledging speech recognition errors ### 🛡️ DARVO Analysis - Deny: No denial patterns present - straightforward technical --- ## Full Transcript [00:00] Hey friends, I'm Scott and I'm going to [00:02] use the GitHub Copilot CLI here in [00:05] Windows or on Linux with WSL or your [00:07] Linux machine or on a Mac. And I'm going [00:10] to configure an MCP server. Now MCP, [00:13] model context protocol is kind of like [00:16] USB for AI. You can plug stuff into it. [00:20] And I've got one for Aspire, which is an [00:22] orchestrator. I've got one for Microsoft [00:24] Learn that gives us access to [00:26] documentation. And I've got one for [00:27] Playright that lets me talk to the [00:29] browser. Lots and lots and lots of great [00:32] MCP servers out there. Now, one of my [00:34] favorites is from Context 7. Now, [00:39] Context 7, let me go ahead and bring [00:40] that up over here, [00:43] has got this great dashboard filled [00:45] filled with tons of up-to-date [00:49] documentations for your AI. Now, in this [00:52] case, I'm going to be working on the [00:54] administrative backend, the dashboard [00:56] for my podcast, and it's written in [00:59] Nex.js. So, I might want to install [01:01] Context 7 so that it'll get access to [01:03] the Nex.js documentation. I can log in. [01:07] I can go to my dashboard. I can grab my [01:09] API key and uh read their documentation. [01:12] But what I'm going to do is just go [01:13] directly into Copilot. I'm going to hit [01:14] a slash command. I'm going to type MCP. [01:18] Enter. Now it shows me those configured [01:21] MCP servers. I'm going to go ahead and [01:23] just a to add a server and then we'll [01:26] just call this one uh context 7. [01:30] I'll hit then tab. And this is going to [01:31] be an HTTP server. So I hit three. Now [01:34] our remote server URL for context 7 is [01:37] in their documentation. I'll just [01:38] rightclick to paste it. Now, we are [01:41] going to need our context API key, and [01:44] that's going to be done as some headers. [01:47] And that's going to require a little bit [01:48] of JSON, just a name value pair there in [01:52] JSON. And it'll look kind of like this. [01:54] Now, my key, I'm going to grab and we'll [01:58] erase your API key. And we'll drop that [02:01] in instead. And we'll allow all of the [02:03] tools that are available to us with [02:05] contact 7. And I'll hit control S. Now, [02:08] contact 7 is available right there. [02:10] We'll see if that shows up. There it is. [02:13] Changes taking effect immediately. I [02:15] don't even have to restart anything. So, [02:17] we'll go ahead and hit Q. Hey, let's go [02:20] ahead and uh do a asky architecture [02:22] diagram for this uh application and make [02:24] sure that we're using all the latest [02:25] documentation. You might want to look at [02:27] context 7 because this is a Nex.js [02:30] application. [02:34] That's my dictation application called [02:37] Handy. [02:38] Sometimes it catches my uh my speech [02:42] impediment there. All right. So, let's [02:45] go and see what it says. Now, I happen [02:46] to be using Claude Opus 4.5 here and uh [02:48] we're going to go and resolve the [02:50] context 7 library ID. So, it's talking [02:52] already to context 7 and it's asking it [02:54] what libraries does it have available [02:56] and whether or not it needs information. [02:58] Look, it's looking at TypeScript and [03:00] JavaScript. It's exploring our tools [03:02] directory. It's looking at the source [03:03] code. It's making a decision about what [03:07] context 7 has to offer and it's building [03:09] a asy architecture diagram. It [03:11] recognizes my middleware. It's starting [03:13] to draw all of that. And if you take a [03:15] look at one of my other videos, I [03:17] actually go and share that as a gist, [03:19] which is pretty cool with the slashshare [03:21] command. Now I can go and do that MCP [03:25] both at the command line or if I want I [03:28] can just copy paste the JSON directly [03:30] into copilot uh and do the MCP [03:34] config.json. So you can do that uh as [03:36] well. Let's take a look at what our [03:38] architecture diagram looks like. There [03:40] we go. Rec recognizes that it's [03:42] Nex.js15. [03:44] Nice data flow diagram. That's hot. [03:47] Cool. And those are using our MCP [03:50] servers which I can add, remove, some [03:52] are local, some are not, some are remote [03:54] and uh I could even disable them and [03:56] leave them there and bring them back [03:57] later if I felt like it. That is MCP [04:00] servers with GitHub Copilot CLI. Thanks [04:03] very much. You can check it out at [04:04] copilot.github.com.  📄 **Full text:** ![[Full Document Contents/Articles/Configuring Model Context Protocol in the GitHub Copilot CLI Demo|Configuring Model Context Protocol in the GitHub Copilot CLI | Demo, YouTube]] ## Document Notes ## Highlights - That's my dictation application called Handy. Sometimes it catches my speech impediment there. All right, so, let's go and see what it says. I happen to be using Claude Opus 4.5 here, and we're going to go and resolve the Context 7 library ID. It's talking already to Context 7 and it's asking it what libraries does it have available, and whether or not it needs information. Look, it's looking at TypeScript and JavaScript. ([View Highlight](https://read.readwise.io/read/01khfn2s1ejxs1zp0q1bjb40gq)) - Tags: 👻 ai highlighted