Follow-along: Run the MCP server

2. Follow-along: Run the MCP server

Follow-along: Run the MCP server

🎯 Goal: Run the MCP server locally and use MCP Inspector to test a pre-defined tool.

Project structure

Open up the project folder in your code editor.

📂 workshop-mcp-security
 ┣ 📂 graph
 ┣ ┣ 📄 listings-schema.graphql
 ┣ ┣ 📄 router.yaml
 ┣ ┗ 📄 supergraph.yaml
 ┣ 📂 mcp
 ┣ ┣ 📂 operations
 ┣ ┣ ┣ 📄 GetListingDetails.graphql
 ┣ ┣ ┗ 📄 GetUser.graphql
 ┣ ┗ 📄 mcp.yaml
 ┗ 📄 commands.sh

📂 graph contains the listings subgraph schema, router configuration, and supergraph configuration.
📂 mcp contains the MCP server configuration and operations we're using as tools.
commands.sh contains the commands to run the graph and MCP server locally.

The MCP server configuration

In mcp/mcp.yaml, we'll find the configuration for the MCP server.

mcp/mcp.yaml

endpoint: http://127.0.0.1:4000/
transport:
  type: streamable_http
operations:
  source: local
  paths:
    - ./mcp/operations/GetListingDetails.graphql
    - ./mcp/operations/GetUser.graphql
introspection:
  execute:
    enabled: true
  introspect:
    enabled: true
  search:
    enabled: true
  validate:
    enabled: true

We're using local GraphQL operations to define the tools for the MCP server. Introspection tools are also enabled.

Run the graph locally

To run the graph locally, we'll use the Rover CLI. Rover is Apollo's command line interface (CLI) tool that helps developers work with graphs.

Open a terminal and navigate to the root of the project.
Run the following command:
rover dev --supergraph-config graph/supergraph.yaml --router-config graph/router.yaml
We'll see some output in the terminal, with a successful message and the endpoint to get to our router in http://localhost:4000.
Navigate to http://localhost:4000 in the browser. We'll see the Apollo Sandbox connected to the endpoint, ready for us to query our local router.
Try running the following query:

query GetListingDetails {
  listing(id: "listing-1") {
    id
    title
    description
    numOfBeds
    costPerNight
    locationType
    photoThumbnail
    amenities {
      name
      category
    }
  }
}

We should see the data for the a listing returned!

This is our graph working by itself, without any AI agents involved. Let's add the MCP server to the mix.

Run the graph and MCP server locally

Stop the rover dev command with Ctrl+C.

Run the same command but this time with the --mcp flag pointing to the mcp.yaml file.

rover dev --supergraph-config graph/supergraph.yaml --router-config graph/router.yaml --mcp mcp/mcp.yaml

We'll see some output in the terminal, with a successful message and the endpoint to get to our MCP server in http://127.0.0.1:5000.

Run the MCP Inspector

MCP Inspector is a tool that helps us inspect and debug MCP servers. It's a web-based tool that allows us to see the tools exposed by the server, and test them directly.

In a new terminal window, run the following command:
npx @modelcontextprotocol/inspector@0.16.7 http://127.0.0.1:5000/mcp --transport http
We're pinning this version specifically because later versions have known bugs working with OAuth. We're also setting the URL endpoint and the transport type.
This will automatically open up a new tab in the browser.
Click the Connect button.
In the Tools tab, we should see the tools exposed by the server, and test them directly.
Click List Tools.
You should see a few tools listed (you can scroll within the tools section). Find the GetListingDetails tool. Click on it.
Input in listing-1 as the value for the listingId argument and click the Run Tool button.
We should see some data for the listing returned, the same ones we saw earlier when we ran the query against the local router.