Agent Mode CoPilot in Visual Studio Code | MCP Enabled in Co Pilot

0:00 Hello everyone, welcome back to my channel Prince Automation Destination. This prince I hope you are doing well. So today we are going to talk about Asgent mode of GitHub copilot in Visual Studio Code which enables MCP support. So what is this MCP support and what is the need of this mode in Visual Studio Code along with GitHub copilot? We will try to understand as part of current discussion. So for that purpose let me jump onto the slides. Right. So we will try to understand what is agent mode, what is the need of this particular agent mode and how it enables MCP support and how we can talk to our MCP server with the help of this particular agent mode. Right? So if we talk about any AI tool such as chat GPT

0:47 claim right so they have one thing in common that is LLM. LLM stands for large language model. But these LLMs does not have capabilities to talk to external data sources such as Jira, Confluence and other external sources, right? But if we can give access to these resources, they would be able to give us more accurate output. Why? Because LLMs needs the context. So what is context? So when we say act as a senior automation QA to any AI tool and write the manual test cases. So this is where it get the context and we provide the module name as well for this particular module we want to generate the test cases. So this is how it get the context and based on that context it generates

1:32 the output. Now suppose we have Jira story available on Jera. If we will directly provide the linking between LLM and Jira. So it would be able to read more context and it would be able to generate more accurate test cases. Right? So this is where the LLM has the limitation and this is where MCP pitches in and MCP provides the support to talk to external data services. Right? But GitHub copilot by default does not have this capability. That's why they have introduced agent mode and with the help of this agent mode now they can connect to MCP servers and MCP servers can further talk to external data sources and we can say now LLM can talk to external data sources right now let us

2:17 try to understand what is MCP right so this is unified protocol which defines standard to allow applications to provide context right so using MCP we define a standard or we follow some standard and this is the protocol which defines standard to allow applications to provide context. So it will allow Jira for example to provide context to LLMs so that LLM would be able to give more accurate output. So it acts like a bridge between LLMs and external systems. This is what we discussed and it follows client server architecture. So as like we have Postman which is an HTTP client. It can talk to REST APIs. Right? Similarly in case MCP client such as cloud desktop or GitHub copilot if

3:03 they want to talk to MCP server they should be MCP client meaning they should have capabilities to talk to MCP server right so client could be any cloud desktop and now GitHub copilot is also MCP client and server is a lightweight code which provide the functionality to talk to external data sources. So for example we have GitHub MCP server. So what we can do is this particular GitHub MCP server will have functionality to connect to GitHub repository right sorry now let us try to decode what is MCP. MCP stands for model context protocol. So model could be any model that is LM model GPT4 or claude Germany. Context is reference as we discussed and protocol is rules. So MCP defines some set of

3:49 rules by which we can provide context to models. so that we can generate the more accurate output. Sorry. Right. So now the question is was it not possible uh for LLMs to talk to external data sources even before MCP? So the answer to this is yes but we needed to write the custom implementation right. So we needed to write uh hit the unique API for Confluence for Jamin for Confluence or for Selenium right but with the help of MCB this process is unified. Now you can develop a MCP server, I can develop a MCP server and as a library anyone can use it. So there are like many MC MCP server available already in the market like there is selenium MCP, there is playright MCP, there is confluence MCP,

4:37 right? There is Atlachian MCP right. So we need to simply integrate or set up a connection between LLM and the MCP server and rest of the task is done. So this process is unified. We don't need to write the custom implementation. That's why MCP is known as unified protocol. Right? Now let us try to understand this particular scenario. As a user I have Visual Studio and I have added an extension that is GitHub copilot. Right? Previously it does not have asent mode. Now they have introduced agent mode and with the help of this agent mode now it can integrate MCP servers and these MCP servers have light code functionality or they are light code uh lightweight code which has functionality to talk to different data services or data sources. So for example

5:23 there is GitHub uh MCP server which we can connect right there is selenium MC server there is posgress MCP server. So as part of current discussion we will try to understand and integrate selenium MCP server and would be we would be performing operations on selenium MCP server with the help of GitHub copilot right post integration. So let me show you. So there are like MCP list of MCP servers. So if I search so this is the official documentation. This is the official documentation and this is GitHub repository of MCP. Here you can take a look at different MCP servers. So for example there is GitHub there is GitLab uh Google drive poses right and puppeteer somewhere I uh I saw Atlassian

6:10 as well right which which means we can talk to Jira confluence right okay so you need to simply go to any of these and you can read the configuration right so on the similar lines there is a MCP server introduced by Angie Jones she developed this particular um MCP server and she defined few function functionalities related to Selenium like starting the browser, navigating to URLs, finding an element of a page, right? Clicking and performing and interacting various operations, right? Performing mouse over, right? So, she has introduced in total 14 functionality and right now the support is Chrome and Firefox, right? So, we can simply integrate this MCP server with GitHub Copilot. So, if you're not aware what is

6:56 GitHub Copilot? So, GitHub copilot is AI assistant which can be integrated with Visual Studio Code, Xcode or Intelligj and many other editors in the market. Right? But as part of current discussion, we are going to talk about VS code. Right? So, this is the configuration she has provided which we can use to talk to MCP servers. Right? So, now now let us jump onto practical demonstration. So this is the configuration that we can utilize to integrate this particular MCP server with GitHub copilot right. So I'm going to visual studio code. So this is the GitHub copilot interface. So I have already configured GitHub copilot and linked it with my this particular visual studio code. So I have added this GitHub copilot as an extension and I'm using

7:41 it. Right? Then you can click on this and you would start seeing this particular interface. Right? So previously there were two options ask and edit. Uh they have now introduced a right. So I will simply say open chrome browser right. So let us say what it will respond to open the chrome browser. This is what it is saying right? So using this particular command line we can do it but this particular uh github copilot does not have this capability. Right? So we are going to use asent mode. Right. So with this particular agent mode what we can do is we can click on this tool section. you would start seeing this tool section and then after we are going to click on add more tools add MCP server and here we are going to choose npm package in our case because if you will take a look this is the node module

8:27 this particular uh MCP server is developed with right so I'm going to copy this particular node module right and going to provide it here right we are going to allow it it is thinking right it would be fetching the information right and I'm going to configure it for the current workspace. So current workspace. So you see that the same configuration which was appearing here has been added here. Right? So selenium. So this is the servers which stands for MCP server. We can add multiple MCP servers. So right now we have added selenium. Command is npx which is used to run node module. Npx is for running the node module. Y and this is the MCP selenium server node module. Right. So we will wait for

9:12 couple of seconds or couple of minutes and then we will start performing these operations. Right before that let me click on this particular tool section and now you would start seeing this MCP server and you would be able to see all 14 functionality that has been defined by that particular MCP server. So we don't need to install Selenium locally. Right now let me try this open Chrome browser. So let us see. So you see now it is behaving different differently. So it is saying run start browser using selenium mcp server right. So it will open chrome browser now. So you see it has opened chrome browser. Now what I'm going to do open or we can say navigate

9:57 to source demo application. So it will ask for the approval. So let me click on this. Right? And it will login here. Right? Next thing is login with valid credentials. So it will start locating these elements using some predefined locators. So it will try with uh one after another. If one is not successful, it will go for next. Right? So it is trying with ID. Right? So you see it has entered using ID. Right? Next thing is it has located login button because we we asked it to login. Right? So it has located login. Now what we can do is we

10:44 can simply quit the browser. Right? So you will notice this particular Chrome browser would be closed. Right? So let me click on this and this particular Chrome browser is closed. So this is how we can integrate any MCP server with GitHub copilot and we can provide more context of MCP server. So as in practice what you can do is you can integrate other MCP servers such as GitHub you can fetch your repositories. So if you will uh scroll here this is a GitHub um MCP server you can check out its configuration how to configure and you can try all these operations from GitHub copilot either from intelligj or from visual studio code. So this is what I wanted to cover guys as part of current discussion. Thank you for watching and I would request you to please like share

11:30 and subscribe. Thank you once again.