Configuring model context protocol in the GitHub Copilot CLI | demo

Key Concepts

• MCP (Model Context Protocol): A protocol described as “USB for AI,” enabling connection to various data sources and tools for AI models.
• GitHub Copilot CLI: A command-line interface for GitHub Copilot, allowing interaction with AI models and MCP servers.
• Context 7: An MCP server providing access to up-to-date documentation for AI development, specifically highlighted for its comprehensive documentation.
• Nex.js: A React framework used for building web applications, the technology used for the speaker’s podcast dashboard application ("Handy").
• HTTP Server: The type of server Context 7 operates as, requiring a URL for connection.
• API Key: A unique identifier used for authentication with services like Context 7, passed as a header in JSON format.
• Slash Commands: Commands initiated with a forward slash (“/”) within the Copilot CLI to trigger specific actions.

Configuring and Utilizing MCP Servers with GitHub Copilot CLI

This demonstration focuses on configuring and utilizing Model Context Protocol (MCP) servers within the GitHub Copilot CLI environment, specifically using Context 7 to enhance AI-assisted development of a Nex.js application. The speaker, Scott, showcases the process on Windows, WSL, Linux, or macOS.

Understanding MCP and its Role

MCP is presented as a standardized protocol – likened to USB – for connecting AI models to external data sources and tools. This allows the AI to leverage specific knowledge bases and functionalities beyond its core training data. Several MCP servers are mentioned, including those for Aspire, Microsoft Learn, Playwright, and notably, Context 7.

Context 7: A Detailed Documentation Resource

Context 7 is highlighted as a valuable MCP server due to its extensive and current documentation for AI development. Scott demonstrates accessing Context 7’s dashboard to retrieve an API key, essential for authentication. He emphasizes the importance of this key for accessing the server’s capabilities.

Adding a Context 7 Server to Copilot CLI

The process of adding Context 7 as an MCP server within the Copilot CLI is detailed step-by-step:

1. Initiate MCP Configuration: Using the slash command /MCP within the Copilot CLI.
2. Add Server: Selecting the option to add a new server (designated as ‘a’).
3. Server Type: Specifying the server type as an HTTP server (designated as ‘3’).
4. Remote Server URL: Pasting the Context 7 remote server URL, obtained from their documentation.
5. API Key Configuration: Providing the Context 7 API key as a JSON header, formatted as a name-value pair. Scott demonstrates replacing a placeholder API key with a user’s actual key.
6. Saving Configuration: Saving the configuration using Control+S. The changes are applied immediately without requiring a restart.

Generating an Architecture Diagram with Context 7 Integration

Scott then demonstrates a practical application of the configured MCP server. He prompts Copilot to generate an architecture diagram for his Nex.js application, "Handy," explicitly requesting the use of the latest documentation.

The process unfolds as follows:

1. Prompting Copilot: Using the prompt "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."
2. Context 7 Interaction: Copilot, utilizing Claude Opus 4.5, automatically resolves the Context 7 library ID. It queries Context 7 to determine available libraries and relevant information.
3. Analysis and Diagram Generation: Copilot analyzes the project’s TypeScript and JavaScript files, explores the tools directory, and leverages Context 7’s documentation to construct the architecture diagram. It correctly identifies middleware components.
4. Diagram Output: Copilot generates a detailed diagram, recognizing the application is built with Nex.js 15 and providing a clear data flow representation. Scott mentions the ability to share the diagram as a gist using the /share command.

Configuration Flexibility and Alternative Methods

Scott highlights the flexibility of MCP server management, allowing users to add, remove, disable, and re-enable servers as needed. He also notes that the MCP configuration can be done both through the command line and by directly pasting the JSON configuration file (MCP config.json) into Copilot.

Data and Statistics

• The application being developed is a Nex.js 15 application.
• The AI model used for diagram generation is Claude Opus 4.5.

Notable Quote

“MCP, model context protocol is kind of like USB for AI. You can plug stuff into it.” – Scott, describing the function of MCP.

Technical Terms

• WSL (Windows Subsystem for Linux): A compatibility layer for running Linux binary executables natively on Windows.
• Gist: A feature of GitHub allowing users to share snippets of code or text.
• JSON (JavaScript Object Notation): A lightweight data-interchange format.
• Middleware: Software that acts as an intermediary between different applications or components.

Conclusion

The demonstration effectively illustrates the power of MCP servers, particularly Context 7, in enhancing the capabilities of GitHub Copilot. By connecting Copilot to specialized knowledge bases, developers can leverage up-to-date documentation and generate more accurate and insightful results, as demonstrated by the successful creation of the Nex.js application architecture diagram. The ease of configuration and flexibility of MCP server management further contribute to its value as a tool for AI-assisted development.