[HAI5016] Lucky Context7 (MCP)

After today’s presentations, and in preparation for our next class, we’ll explore how to use MCP servers in Visual Studio Code.

We’ll focus on the Context7 server by Upstash, which gives our AI coding assistant (like Copilot) access to the latest, accurate documentation and code examples for popular libraries and frameworks like Pandas, LangChain, Supabase, and Google’s Gemini API.

Disclaimer: This blog provides instructions and resources for the workshop part of my lectures. It is not a replacement for attending class; it may not include some critical steps and the foundational background of the techniques and methodologies used. The information may become outdated over time as I do not update the instructions after class.

There are several ways to set up and use MCP servers in VS Code. I’ve outlined three methods below. We will select one of these for our in-class workshop, but you are welcome to explore all of them to your convenience.

• Option 1: Add a remote MCP server to our local VS Code (easiest)
• Option 2: Install Context7 MCP server in GitHub Codespaces via Node.js and npm
• Option 3: Install Context7 MCP server locally using Docker

Then: Try out the Context7 MCP server with Copilot

Option 1: Add a remote MCP Server to our local VS Code

The easiest way to get started is by adding a remote MCP server. This requires no local installation; you simply connect to an existing server on the internet.

1. Open the command palette in VS Code by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).

2. Find MCP: Add server and select it

   

3. Find the HTTP option and select it

   

4. When asked for an URL of the remote MCP server, enter: https://mcp.context7.com/mcp
5. When asked to enter a name for the server, enter: Context7 Remote
6. When asked for a configuration target, select Global (Available to all workspaces)

This should open a file called mcp.json in a new tab in VS Code, containing the configuration for the remote MCP server you just added. Its content should look like this:

mcp.json file containing the Context7 Remote MCP server configuration

• Save and close the file.

Check if the Context7 Remote MCP server is running

Before we proceed, let’s check if the server is running:

1. Open the command palette in VS Code by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).

2. Find MCP: List Servers and select it.

   

3. In the list of MCP servers, Context7 Remote should be there. Check if it’s running.

   

If this is marked as running, you’re all set! Let’s try using it with Copilot below.

---

Option 2: Install Context7 MCP server in GitHub Codespaces via Node.js and npm

1. Install nodejs and npm in your codespace (dev container)

Many (local) MCP servers extensions require Node.js and npm to be installed on the system, in this case our development container in GitHub Codespaces. To install them, open the terminal in your Codespace and run the following commands:

sudo apt update
sudo apt install nodejs -y
sudo apt install npm -y # Install npm if not included with nodejs
node -v
npm -v

That should look something like this:

Wish it would always be that easy!

When installed, you should see the version numbers of Node.js and npm printed in the terminal.

Got some errors thrown at you during installation? Don’t worry, and ask Copilot using inline chat (select the error text and press ctrl + I) or use the Chat: Explain last terminal command option from the command palette.

2. Add MCP Servers to VS Code

In recent updates, the Extensions view in VS Code gained a dedicated section for MCP servers. VS Code retrieves the list of MCP servers from the GitHub MCP server registry.

1. Open the extensions view in VS Code by clicking on the Extensions icon in the Activity Bar.

2. Scroll down to the MCP Servers section.

   MCP Servers section under ‘extensions’ in VS Code

3. You may have to click on Enable MCP Servers Marketplace to see the full list of MCP servers.

4. In the search bar, type Context7 and look for the Context7 MCP Server extension by Upstash. (Or click this link: Context7 MCP Server)

   Click ‘install’ when you found the Context7 MCP Server

3. Activate the MCP Server in VS Code

1. Open the command palette in VS Code by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).
2. Find MCP: List Servers and select it.

3. In the list of MCP servers, Context7 MCP Server should be there - albeit probably marked as stopped.

   Activating Context7 MCP Server in VS Code

4. Select the Context7 MCP Server from the list, and then choose Start Server.

   Starting Context7 MCP Server in VS Code

5. This should open the output tab in your VS Code window, showing that the Context7 MCP server is starting up and discovered (at least) 2 tools.

   Context7 MCP Server started in VS Code

Again, if you run into any issues, don’t hesitate to ask Copilot for help using inline chat or the command palette.

---

Option 3: Install Context7 MCP Server Locally using Docker

There are multiple ways to install and run the Context7 MCP server on your local machine. One way, that is universal and works across different operating systems, is to use Docker. Let’s go through the steps to set it up using Docker.

Before proceeding, ensure that you have Docker installed on your machine.

1. Open your hai5016-rag project folder in VS Code

2. Create a new file named Dockerfile in the root of your project with the following content:

    FROM node:18-alpine
   
    WORKDIR /app
   
    # Install the latest version globally
    RUN npm install -g @upstash/context7-mcp
   
    # Expose default port if needed (optional, depends on MCP client interaction)
    # EXPOSE 3000
   
    # Default command to run the server
    CMD ["context7-mcp"]```
    3. Save the `Dockerfile`{: .filepath}
    4. Build the Docker image by running the following command in the terminal:
      ```bash
      docker build -t context7-mcp .
   
   

3. Save the Dockerfile and commit the changes to your repository

4. Build the image using a tag (e.g., context7-mcp). Make sure Docker Desktop is running. Run the following terminal command in the same directory where you saved the Dockerfile:

    docker build -t context7-mcp .
   

---

Use the Context7 MCP Server with Copilot

Now that the Context7 MCP server is running, Copilot can use it to fetch the latest documentation and code examples while assisting you with coding tasks.

Open a new Chat and try asking Copilot to help you with a coding task, for example:

Use context7 to find out how to ground Google Gemini API responses with google search results

References

• Github - Context7 MCP Server
• Use MCP servers in VS Code
• Context7 MCP Server Extension on Marketplace