MCP Pipeline Dashboard with Grafana

Visualize an MCP pipeline in a dark-themed Grafana dashboard via Docker.

Introduction

30 Second Summary

Every complex system needs a control panel. The dashboard in your car shows speed, fuel, and engine health at a glance. The same idea applies to software. When multiple components work together, you need a visual way to see what's happening.

In this project, you will build a dark-themed Grafana dashboard that maps out an MCP (Model Context Protocol) pipeline. You'll launch it with Docker Compose, add live panels showing AI agents and tools, then push everything to GitHub as a portable repository anyone can run.

What You'll Build

Run one command, open your browser, and see a live dashboard with animated graphs tracking your AI agents, MCP servers, and connected tools in real-time.

By the end of this project, you'll have:

  • A running Grafana dashboard where you see your MCP pipeline's architecture, active agents, connected tools, and request counts updating in real-time.
  • A single docker compose up command that launches everything identically on macOS, Windows, or Linux.
  • A GitHub repository you can share with anyone. They clone it, run one command, and see your exact dashboard on their machine.
  • Secret Mission: collaborate with a classmate by sharing your dashboard and accepting their contribution via a Pull Request.

Do I need anything installed before starting?

You need Docker Desktop installed and running on your machine. Everything else (Git, GitHub account, and project files) is set up during Step 1.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters.

You're going to create a professional Grafana dashboard that visualizes an MCP pipeline, launch it with Docker Compose, and share it on GitHub so anyone can run it with a single command.

Set Up Your Tools

You need three tools ready before you can build anything: Docker (to run Grafana), Git (to track your files), and GitHub (to share your project with the world).

Without these verified up front, you will hit confusing errors later that have nothing to do with your actual dashboard code. This step locks in your foundations.

In this step, get ready to:
  • Verify Docker Desktop is running.
  • Install and configure Git.
  • Create a GitHub account.
Verify Docker Desktop is running

Docker Desktop needs to be actively running for Docker Compose commands to work. Let's confirm it is ready.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or Command Prompt (Windows) and press Enter to open it.
  • Verify Docker is running by entering this command:
docker compose version

You should see output like Docker Compose version v2.x.x with a version number of v2.0 or higher.

Don't see a version number?

If you see an error mentioning "command not found" or "Cannot connect to the Docker daemon", Docker Desktop is not running.

  • Open Docker Desktop from your Applications folder (macOS) or Start menu (Windows).
  • Wait for the whale icon to appear in your menu bar or system tray. This means Docker is ready.
  • Try running docker compose version again.

Still stuck? Help me troubleshoot Docker Desktop not starting.

Install and configure Git

Git tracks every change you make to your project files. It also enables pushing your work to GitHub so others can use it.

  • Check if Git is already installed by running this command:
git --version

✔️ I see a version number

You should see output like git version 2.x.x. Any version works for this project. You are all set.

ⓧ Command not found

Git is not installed yet. Install it with the instructions for your operating system.

macOS

  • Install Git using Homebrew by running this command:
brew install git

If you do not have Homebrew, running git --version on macOS automatically prompts you to install the Xcode Command Line Tools, which includes Git. Follow the prompt and try again.

Windows

  • Download the Git installer from https://git-scm.com.
  • Run the installer and accept all default settings.
  • Close and reopen your terminal after installation.
  • Run git --version again to confirm Git is now installed.

Now configure your Git identity. This name and email appear on every change you save to your project history.

  • Set your Git name and email by running these commands:
git config --global user.name "[[YOUR_NAME="Your Name"]]"
git config --global user.email "[[YOUR_EMAIL="your@email.com"]]"

What do these commands do?

These commands store your identity in Git's global configuration. Every commit you make from now on will be labeled with this name and email.

The --global flag means the setting applies to all Git projects on your machine, not just this one.

  • Confirm your name was saved by running:
git config --global user.name

You should see the name you just entered printed back to you.

Seeing a blank output?

If nothing prints, the config command did not save. Make sure you included the quotes around your name and email in the previous commands.

Re-run both git config commands with your values inside double quotes.

Need help? Help me fix my Git global config so my name and email are set correctly.

Create a GitHub account

GitHub hosts your project online so anyone can clone it and run your dashboard. You will push your finished project here in a later step.

  • Open your browser and go to https://github.com.
  • If you already have an account, click Sign in and log in.
  • If you do not have an account, click Sign up and follow the prompts to create a free account.
  • Verify you can see your GitHub dashboard after logging in.

Why do I need GitHub this early?

You will use GitHub in Step 5 to push your project and in the Secret Mission to collaborate with a classmate. Setting it up now means no interruptions when you get to the exciting parts.

Before you move on, let's confirm everything is ready. What do you think you will see if you run docker compose version and git --version back to back?

  • Run both verification commands:
docker compose version
git --version

Both commands print version numbers without errors. If either fails, revisit the relevant substep above.

Your tools are locked in. Next up, you will launch Grafana with a single Docker Compose command and see your first dashboard login screen.

Launch Grafana with Docker Compose

Your environment is locked and loaded. Docker Desktop is running, Git knows who you are, and GitHub is ready for later.

Now you need a running Grafana instance to build dashboards on. Docker Compose lets you define that instance in a single file and start it with one command that works identically on macOS, Windows, and Linux.

In this step, get ready to:
  • Create your project folder on the Desktop.
  • Write a Docker Compose file that defines the Grafana service.
  • Start Grafana and log in to the dashboard UI.
Create your project folder

Every terminal session starts somewhere random on your machine. You need a dedicated folder on your Desktop so you can always find your project files.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir mcp-pipeline-dashboard
cd mcp-pipeline-dashboard
  • Confirm you are in the right place by running:
pwd

You should see a path ending in mcp-pipeline-dashboard.

Seeing a 'no such file or directory' error?

Make sure Docker Desktop is still running (whale icon in your menu bar or system tray). Also confirm you typed the folder name exactly as shown, with hyphens not spaces.

Still stuck? Help me fix my project folder setup.

Write the Docker Compose file

Docker Compose reads a YAML file that describes which containers to run and how to configure them. You will create one file that tells Docker to pull the Grafana image and expose it on port 3000.

  • Create a new file called docker-compose.yml inside your mcp-pipeline-dashboard folder.
  • Open it in your preferred text editor and paste the following content:
services:
  grafana:
    image: grafana/grafana-enterprise:13.1.1
    container_name: mcp-pipeline-grafana
    restart: unless-stopped
    ports:
      - '3000:3000'
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin

What does this file do?

  • image tells Docker to pull Grafana Enterprise version 13.1.1. This is the latest stable release and includes all free features.
  • container_name gives your container a friendly name so you can find it easily in Docker Desktop.
  • ports: '3000:3000' maps port 3000 inside the container to port 3000 on your machine, so you can open Grafana in your browser.
  • environment sets the admin username and password. Grafana reads these on startup.
  • Save docker-compose.yml.
  • Confirm the file exists by running:
ls

You should see docker-compose.yml listed in the output.

Don't see docker-compose.yml?

Make sure you saved the file inside the mcp-pipeline-dashboard folder, not one level above it. Run pwd to confirm your terminal is still in the right directory.

Also check that the filename is exactly docker-compose.yml with no extra extension like .txt.

Need more help? Help me find my docker-compose.yml file.

✔️ Awesome, I've got everything!

Great. Double check you have saved your file before moving on.

ⓧ I'd like to double check the full code

Your docker-compose.yml should look exactly like this:

services:
  grafana:
    image: grafana/grafana-enterprise:13.1.1
    container_name: mcp-pipeline-grafana
    restart: unless-stopped
    ports:
      - '3000:3000'
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin
Start Grafana

With your Compose file saved, one command pulls the Grafana image from Docker Hub and starts the container in the background.

  • Start Grafana by running this command:
docker compose up -d

What does this command do?

docker compose up reads your docker-compose.yml and starts all the services defined in it. The -d flag runs the container in detached mode, meaning it runs in the background and gives your terminal back to you.

Docker pulls the Grafana image (this may take a minute the first time) and then starts the container. You should see output confirming the container is running.

  • Verify the container is running:
docker ps

You should see a row with mcp-pipeline-grafana in the NAMES column and a status of Up.

Container not showing up?

Make sure Docker Desktop is running. If you see an error about the port being in use, another process is already on port 3000. Stop it or change the port mapping in your docker-compose.yml to something like '3001:3000' and re-run.

Still stuck? Help me get my Grafana container running.

Log in to Grafana

Grafana is now serving a web interface on your machine. Time to open it and confirm everything works.

  • Open your browser and go to http://localhost:3000.

Before you do anything else, what do you expect this page to look like? Think about it for a moment.

You should see the Grafana login page with a dark background. This confirms your container is serving Grafana correctly.

  • Enter admin in the **Email or username** field.
  • Enter admin in the **Password** field.
  • Click **Log in**.
  • When prompted to change the password, click **Skip**.

You are now inside Grafana. The interface uses a dark theme by default. You should see the Grafana Home page with a dark background and a welcome panel.

Can't reach localhost:3000?

Switch back to your terminal and run docker ps to make sure the container status shows Up. If it shows Exited, run docker compose logs to see what went wrong.

If the container is running but the page won't load, try a different browser or clear your cache. Some browsers cache connection failures.

Need help? Help me access Grafana in my browser.

Your Grafana instance is live. Next up, you will build a full dashboard inside it that visualizes your MCP pipeline with architecture diagrams, stat panels, and live graphs.

Build the MCP Pipeline Dashboard

You have Grafana running and you're logged in. The dark-themed interface is ready, but it's completely empty.

In this step, you'll fill that blank canvas with panels that visualize your MCP pipeline. By the end, you'll have an architecture diagram, live stat panels, and a time series graph all displaying simulated data on a dark background.

In this step, get ready to:
  • Add the TestData datasource for simulated data.
  • Create an MCP Pipeline Architecture text panel.
  • Add stat panels and a time series graph for live metrics.
Add the TestData datasource

Grafana needs a datasource to pull data from. TestData is a built-in datasource that generates simulated time-series data without any external infrastructure.

  • In Grafana, click Connections in the left-side menu.
  • Under Your connections, click Data sources.
  • Click Add new data source.
  • Type TestData in the search bar.
  • Click TestData from the results.
  • Click Save & test.

You should see a green banner confirming the data source is working.

What is TestData?

TestData is a core Grafana plugin that ships with every installation. It generates random walk data, simulated logs, and other test patterns so you can build dashboards without connecting to a real database or monitoring system.

In a production setup, you would replace this with a real datasource like Prometheus or InfluxDB. For this project, TestData gives you live-updating numbers that make your dashboard look active.

Not seeing TestData in the search results?

Make sure you typed TestData (capital T and D) in the search bar. If you still do not see it, confirm you are logged in as the admin user. Only organization administrators can add data sources.

Help me find TestData

Create the architecture text panel

The first panel on your dashboard will be a visual architecture diagram showing how Claude connects to your MCP Server and tools. This uses Grafana's Text panel with Markdown rendering.

  • Click Dashboards in the left-side menu.
  • Click New in the top-right corner.
  • Click New Dashboard.
  • Click Add visualization.
  • Select TestData as the datasource when prompted.
  • In the panel options on the right side, find the visualization type dropdown (it may default to Time series) and change it to Text.
  • Set the Mode to Markdown.
  • Paste the following Markdown content into the content field:
## Your MCP Pipeline

```
┌─────────────────┐       ┌──────────────────┐       ┌─────────────────────┐
│                 │       │                  │       │                     │
│   Claude        │──────▶│   MCP Server     │──────▶│   Tools/Resources   │
│   (AI Agent)    │◀──────│   (Protocol)     │◀──────│                     │
│                 │       │                  │       │   - File System     │
└─────────────────┘       └──────────────────┘       │   - Web Search      │
                                                     │   - Database        │
                                                     │   - Custom APIs     │
                                                     └─────────────────────┘
```

**How it works:** Claude sends requests through the MCP protocol layer to your configured tools. Each tool invocation is tracked below.

What does this Markdown do?

The triple backticks create a code fence that preserves the ASCII box-drawing characters exactly as written. This renders a visual diagram showing the three layers of an MCP pipeline: the AI agent (Claude), the protocol server, and the connected tools.

  • In the panel options on the right, set the Title field to MCP Pipeline Architecture.
  • Click Apply in the top-right corner.

You should now see your dashboard with the architecture diagram rendered as a formatted box diagram on a dark background.

Diagram looks like plain text instead of boxes?

Make sure the Mode is set to Markdown, not HTML or plain text. Also confirm you pasted the content inside the Content text area, not the Title field.

Help me fix my Text panel

Add stat panels and a time series panel

Now you'll add panels that show live-updating numbers and a graph. Stat panels display a single big number (perfect for key metrics), while a time series panel shows how values change over time.

  • Click the Add button (+ icon) at the top of the dashboard.
  • Click Visualization.
  • Select TestData as the datasource.
  • In the query editor at the bottom, find the Scenario dropdown and select Random Walk.
  • Change the visualization type to Stat using the dropdown in the top-right panel options.
  • Set the panel Title to Active AI Agents.
  • Click Apply.

You should see a large number on your dashboard that updates periodically. This is your first stat panel.

  • Repeat the same process (Add > Visualization > TestData > Random Walk > Stat) to create a second stat panel titled Connected MCP Tools.
  • Repeat once more to create a third stat panel titled Total Requests.

Speed up panel creation

For each new panel, click the Add button (+), choose Visualization, select TestData, set Scenario to Random Walk, change the type to Stat, give it the title, and click Apply. Each one takes about 30 seconds.

You should now see three stat panels showing live-updating numbers side by side on your dashboard.

  • Click the Add button (+) one more time.
  • Click Visualization.
  • Select TestData as the datasource and keep the visualization type as Time series (the default).
  • In the query editor, set the Scenario to Random Walk.
  • Set the panel Title to Tool Invocation Rate.
  • Click Apply.

What is a Random Walk?

A random walk generates data points that drift up and down over time, simulating real metric behavior. Each new value is the previous value plus a small random change. This creates realistic-looking graphs without needing a real monitoring system connected.

  • Save your dashboard by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • In the save dialog, enter MCP Pipeline Dashboard as the dashboard name.
  • Click Save.

Before you look at the final result, what do you expect to see on the dashboard right now?

You should see a complete dashboard with the architecture diagram at the top, three stat panels showing live-updating numbers in the middle, and a time series graph with a flowing line at the bottom. All panels display on a dark background.

Panels overlapping or showing No data?

Grafana places new panels below existing ones automatically. If panels overlap, drag them by their title bar to rearrange. You can also resize panels by dragging their bottom-right corner.

If a panel shows "No data", make sure you selected TestData as the datasource and chose Random Walk as the scenario.

Help me fix my dashboard panels

Your dashboard looks great and the data is flowing. But here's a question: what happens to all this work if you stop the Docker container? In the next step, you'll find out the hard way and then fix it with provisioning.

Make It Permanent with Provisioning

Your dashboard looks great inside Grafana, but it has a fatal flaw. Everything you built lives inside the Docker container's temporary storage.

Stop Docker and restart it, and the dashboard vanishes forever. Provisioning solves this by saving your dashboard as code files that auto-load every time the container starts.

In this step, get ready to:
  • Experience the data-loss problem by restarting Docker and watching your dashboard disappear.
  • Create provisioning configuration files that tell Grafana where to find dashboards and datasources.
  • Save your dashboard as a JSON file and verify it auto-loads on restart.
Experience the data-loss problem

Your MCP Pipeline Dashboard currently exists only inside the Grafana container. Let's prove that this is a problem.

Before you run the next command, what do you think will happen to your dashboard if you destroy and recreate the container?

  • Stop and remove your Grafana container by running this command:
docker compose down
  • Start it back up by running:
docker compose up -d
  • Open http://localhost:3000 in your browser.
  • Log in with username admin and password admin (skip the password change prompt again).
  • Click Dashboards in the left sidebar.

Your MCP Pipeline Dashboard is gone. The container started fresh with no memory of what you built. This is exactly the problem provisioning solves.

Why did the dashboard disappear?

Docker containers are ephemeral by default. When you run docker compose down, the container and its internal storage are removed.

Any data created inside the container (like dashboards saved through the UI) disappears with it. Provisioning stores your dashboard configuration in files on your computer, outside the container, so Grafana loads them automatically every time it starts.

Create the provisioning folder structure

Grafana's provisioning system reads YAML files from specific directories to auto-configure datasources and dashboards on startup.

  • Create the required folders by running these commands:
mkdir -p provisioning/datasources
mkdir -p provisioning/dashboards
mkdir -p dashboards
  • Confirm the folders exist by running:
ls

You should see dashboards, docker-compose.yml, and provisioning listed.

  • Create the datasource provisioning file by running:
cat > provisioning/datasources/datasource.yml << 'EOF'
apiVersion: 1

datasources:
  - name: TestData
    type: grafana-testdata-datasource
    uid: testdata-ds
    access: proxy
    isDefault: true
    editable: true
EOF

What does this file do?

This YAML tells Grafana to automatically create a TestData datasource with the uid testdata-ds every time it starts.

The uid is important because the dashboard JSON references this exact identifier to connect panels to the datasource.

  • Create the dashboard provisioning file by running:
cat > provisioning/dashboards/dashboard.yml << 'EOF'
apiVersion: 1

providers:
  - name: 'MCP Pipeline Dashboards'
    orgId: 1
    folder: ''
    type: file
    disableDeletion: false
    editable: true
    options:
      path: /var/lib/grafana/dashboards
EOF

What does this file do?

This tells Grafana to look inside /var/lib/grafana/dashboards for JSON dashboard files and load them automatically.

You will mount your local dashboards/ folder to that path inside the container using Docker Compose volumes.

  • Verify both provisioning files were created by running:
ls provisioning/datasources provisioning/dashboards

You should see datasource.yml and dashboard.yml listed in their respective folders.

Not seeing the files?

Make sure you ran the cat commands from inside your mcp-pipeline-dashboard folder. Run pwd to check your current directory.

If you see a different folder, navigate back with cd ~/Desktop/mcp-pipeline-dashboard and try again.

help me create the provisioning files for Grafana

Save the dashboard JSON and update Docker Compose

Now you need the actual dashboard content as a JSON file. Normally you would export this from Grafana's UI, but since the container restart wiped it, you will use a pre-built JSON file.

How export normally works

In Grafana, you would open your dashboard, click the Export icon in the toolbar, select Export as code, then click Download file.

That gives you the same kind of JSON file you are about to create. The Secret Mission uses this export flow for real.

  • Create the dashboard JSON file by running this command:
cat > dashboards/mcp-pipeline.json << 'ENDJSON'
{
  "annotations": { "list": [] },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 1,
  "id": null,
  "links": [],
  "panels": [
    { "id": 1, "type": "text", "title": "MCP Pipeline Architecture", "gridPos": { "h": 8, "w": 24, "x": 0, "y": 0 }, "options": { "mode": "markdown", "content": "## Your MCP Pipeline\n\n```\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510       \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                 \u2502       \u2502                  \u2502       \u2502                     \u2502\n\u2502   Claude        \u2502\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\u2502   MCP Server     \u2502\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\u2502   Tools/Resources   \u2502\n\u2502   (AI Agent)    \u2502\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2502   (Protocol)     \u2502\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2502                     \u2502\n\u2502                 \u2502       \u2502                  \u2502       \u2502   - File System     \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518       \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518       \u2502   - Web Search      \u2502\n                                                     \u2502   - Database        \u2502\n                                                     \u2502   - Custom APIs     \u2502\n                                                     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n```\n\n**How it works:** Claude sends requests through the MCP protocol layer to your configured tools. Each tool invocation is tracked below." } },
    { "id": 2, "type": "stat", "title": "Active AI Agents", "gridPos": { "h": 4, "w": 8, "x": 0, "y": 8 }, "datasource": { "type": "grafana-testdata-datasource", "uid": "testdata-ds" }, "targets": [ { "refId": "A", "scenarioId": "random_walk", "min": 1, "max": 5 } ] },
    { "id": 3, "type": "stat", "title": "Connected MCP Tools", "gridPos": { "h": 4, "w": 8, "x": 8, "y": 8 }, "datasource": { "type": "grafana-testdata-datasource", "uid": "testdata-ds" }, "targets": [ { "refId": "A", "scenarioId": "random_walk", "min": 4, "max": 12 } ] },
    { "id": 4, "type": "stat", "title": "Total Requests", "gridPos": { "h": 4, "w": 8, "x": 16, "y": 8 }, "datasource": { "type": "grafana-testdata-datasource", "uid": "testdata-ds" }, "targets": [ { "refId": "A", "scenarioId": "random_walk", "min": 100, "max": 2000 } ] },
    { "id": 5, "type": "timeseries", "title": "Tool Invocation Rate", "gridPos": { "h": 10, "w": 24, "x": 0, "y": 12 }, "datasource": { "type": "grafana-testdata-datasource", "uid": "testdata-ds" }, "targets": [ { "refId": "A", "scenarioId": "random_walk", "alias": "File System" }, { "refId": "B", "scenarioId": "random_walk", "alias": "Web Search" }, { "refId": "C", "scenarioId": "random_walk", "alias": "Database" } ] }
  ],
  "schemaVersion": 39,
  "tags": ["mcp", "pipeline", "ai-agents"],
  "time": { "from": "now-1h", "to": "now" },
  "timezone": "browser",
  "title": "MCP Pipeline Dashboard",
  "uid": "mcp-pipeline-001",
  "version": 1
}
ENDJSON

What is in this JSON?

This file defines five panels: the architecture text diagram, three stat panels (Active AI Agents, Connected MCP Tools, Total Requests), and a time series graph (Tool Invocation Rate).

Each panel references testdata-ds as its datasource uid, which matches the uid you set in datasource.yml. That connection is what makes provisioning work end-to-end.

Now you need to update docker-compose.yml to mount these local folders into the container so Grafana can read them.

  • In docker-compose.yml, find the line that says:
      - GF_SECURITY_ADMIN_PASSWORD=admin
  • Add the following volumes section directly below it, so your file looks like this:
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin
    volumes:
      - ./provisioning/datasources:/etc/grafana/provisioning/datasources
      - ./provisioning/dashboards:/etc/grafana/provisioning/dashboards
      - ./dashboards:/var/lib/grafana/dashboards

What do these volumes do?

  • The first volume maps your local provisioning/datasources folder to Grafana's internal provisioning path for datasources.
  • The second volume does the same for dashboard configuration.
  • The third volume maps your local dashboards/ folder (containing the JSON file) to /var/lib/grafana/dashboards inside the container, which is the path dashboard.yml told Grafana to watch.
  • Save docker-compose.yml.
  • Restart Grafana with the new configuration by running:
docker compose down
docker compose up -d

Before you open the browser, do you think the dashboard will be there this time?

  • Open http://localhost:3000 in your browser.
  • Log in with admin / admin.
  • Click Dashboards in the left sidebar.
  • Click MCP Pipeline Dashboard.

Your dashboard is back. The architecture diagram, stat panels, and time series graph all load automatically from your provisioned files. You can stop and restart Docker as many times as you want and the dashboard will always be there.

Dashboard not showing up?

Check that the indentation in docker-compose.yml is correct. The volumes: key must be at the same indent level as environment: and ports:.

Run docker compose logs grafana to see if Grafana reported any provisioning errors on startup.

help me fix my Grafana provisioning setup

✔️ Awesome, I've got everything!

Great. Make sure you have saved all four files: docker-compose.yml, provisioning/datasources/datasource.yml, provisioning/dashboards/dashboard.yml, and dashboards/mcp-pipeline.json.

ⓧ I'd like to double check the full code

Here is the complete docker-compose.yml with the volumes added:

services:
  grafana:
    image: grafana/grafana-enterprise:13.1.1
    container_name: mcp-pipeline-grafana
    restart: unless-stopped
    ports:
      - '3000:3000'
    environment:
      - GF_SECURITY_ADMIN_USER=admin
      - GF_SECURITY_ADMIN_PASSWORD=admin
    volumes:
      - ./provisioning/datasources:/etc/grafana/provisioning/datasources
      - ./provisioning/dashboards:/etc/grafana/provisioning/dashboards
      - ./dashboards:/var/lib/grafana/dashboards

Here is provisioning/datasources/datasource.yml:

apiVersion: 1

datasources:
  - name: TestData
    type: grafana-testdata-datasource
    uid: testdata-ds
    access: proxy
    isDefault: true
    editable: true

Here is provisioning/dashboards/dashboard.yml:

apiVersion: 1

providers:
  - name: 'MCP Pipeline Dashboards'
    orgId: 1
    folder: ''
    type: file
    disableDeletion: false
    editable: true
    options:
      path: /var/lib/grafana/dashboards

For dashboards/mcp-pipeline.json, scroll up to the code block you pasted earlier and confirm it is saved in the dashboards/ folder.

Your dashboard is now permanent and portable. Anyone who clones your project folder and runs docker compose up -d will see the exact same dashboard. Next up, you will push everything to GitHub so anyone on any machine can use it.

Push to GitHub

Your dashboard runs perfectly on your machine, but what happens if your hard drive fails or you want a teammate to use it? A local folder is not shareable or safe from data loss.

GitHub stores your code in the cloud and gives anyone a URL to clone and run your project. In this step, you'll push your entire dashboard setup to GitHub so it becomes accessible from any machine on any operating system.

In this step, get ready to:
  • Create a .gitignore and README.md for your project.
  • Initialize a local Git repository and commit your files.
  • Push everything to a public GitHub repository.
Initialize a Git repository

Git tracks every change you make to your files and lets you roll back mistakes. Before you can push to GitHub, you need a local Git repository with at least one commit.

First, you'll create two new files that every good repository needs.

  • Create a new file called .gitignore in your mcp-pipeline-dashboard folder with the following content:
# Docker
.docker/

# Grafana data (not needed - dashboard is provisioned)
grafana-data/

# OS files
.DS_Store
Thumbs.db

# Editor files
.vscode/
.idea/
*.swp

What does .gitignore do?

This file tells Git which files and folders to ignore when tracking changes. OS-generated files like .DS_Store and editor config folders like .vscode/ are not part of your project, so they stay out of your repository.

  • Create a new file called README.md in the same folder with the following content:
# MCP Pipeline Dashboard

A dark-themed Grafana dashboard that visualizes your MCP (Model Context Protocol) pipeline architecture, showing AI agents, MCP servers, connected tools, and performance metrics.

## Quick Start

### Prerequisites

- [Docker Desktop](https://www.docker.com/products/docker-desktop/) installed and running

### Run the Dashboard

1. Clone this repository
2. Run `docker compose up -d`
3. Open http://localhost:3000
4. Log in with admin/admin
5. Navigate to Dashboards and open 'MCP Pipeline Dashboard'

### Stop the Dashboard

```bash
docker compose down
```

What does a README do?

A README.md is the first thing anyone sees when they visit your repository on GitHub. It tells them what the project does and how to run it, so they can get started with one glance.

  • Confirm both files exist by running:
ls -a

You should see .gitignore and README.md listed alongside your existing files like docker-compose.yml and the provisioning/ folder.

Don't see .gitignore in the list?

Files starting with a dot are hidden by default. Make sure you ran ls -a (with the -a flag), not plain ls.

help me find my .gitignore file

  • Initialize your Git repository and create your first commit by running these commands:
git init
git add .
git commit -m "Initial commit: MCP Pipeline Grafana Dashboard"

What do these commands do?

  • git init creates an empty Git repository in your project folder.
  • git add . stages all your files (except those in .gitignore) for the next commit.
  • git commit -m "..." saves a snapshot of your files with a descriptive message.

You should see output listing the files that were committed, including docker-compose.yml, dashboards/mcp-pipeline.json, and your provisioning files.

Seeing 'Author identity unknown'?

Git needs your name and email before it can commit. Run these two commands (replacing the placeholder values with your own), then re-run the commit command:

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

help me configure Git identity

Create a new repository on GitHub

Your files are committed locally. Now you need a remote repository on GitHub to push them to.

  • Go to https://github.com/new in your browser.
  • Enter mcp-pipeline-dashboard in the **Repository name** field.
  • Leave the repository set to Public.
  • Do NOT check any of the initialization boxes (README, .gitignore, license). You already have these files locally.
  • Click Create repository.

GitHub shows you a quick setup page with commands for pushing an existing repository. You'll use those in the next substep.

Why leave the initialization boxes unchecked?

If GitHub creates its own README or .gitignore, those files will conflict with the ones you already committed locally. Starting with an empty remote repository lets you push cleanly without merge conflicts.

Push your local repository to GitHub

GitHub's quick setup page shows you the exact commands to connect your local repository to the remote.

  • Push your code to GitHub by running these commands:
git remote add origin https://github.com/[[GITHUB_USERNAME="your-github-username"]]/mcp-pipeline-dashboard.git
git branch -M main
git push -u origin main

What do these commands do?

  • git remote add origin links your local repository to the GitHub repository you just created.
  • git branch -M main renames your default branch to main.
  • git push -u origin main uploads your commit to GitHub and sets origin main as the default push target.

Seeing an authentication error?

GitHub no longer accepts passwords for Git operations. If you are prompted for credentials, you need a personal access token or SSH key.

The simplest fix is to install the GitHub CLI and authenticate with gh auth login, which configures Git credentials automatically.

help me authenticate Git with GitHub

Before you check GitHub, what do you expect to see on the repository page?

  • Visit your repository URL in your browser: https://github.com/your-github-username/mcp-pipeline-dashboard.

You should see docker-compose.yml, the provisioning/ folder, the dashboards/ folder, .gitignore, and README.md all listed. The README content renders below the file list as a formatted page.

✔️ Awesome, I've got everything!

Your project is live on GitHub. Anyone with the URL can now clone it and launch your dashboard with a single command.

ⓧ I'd like to double check the full code

Here are the two new files you created in this step. Make sure they exist in your mcp-pipeline-dashboard folder and match this content.

# Docker
.docker/

# Grafana data (not needed - dashboard is provisioned)
grafana-data/

# OS files
.DS_Store
Thumbs.db

# Editor files
.vscode/
.idea/
*.swp
# MCP Pipeline Dashboard

A dark-themed Grafana dashboard that visualizes your MCP (Model Context Protocol) pipeline architecture, showing AI agents, MCP servers, connected tools, and performance metrics.

## Quick Start

### Prerequisites

- [Docker Desktop](https://www.docker.com/products/docker-desktop/) installed and running

### Run the Dashboard

1. Clone this repository
2. Run `docker compose up -d`
3. Open http://localhost:3000
4. Log in with admin/admin
5. Navigate to Dashboards and open 'MCP Pipeline Dashboard'

### Stop the Dashboard

```bash
docker compose down
```

Your dashboard project is now version-controlled and shareable. Next up, you'll take collaboration to the next level in the Secret Mission by exchanging Pull Requests with a classmate.

Secret mission

Share Your Dashboard with a Fellow Student

Your dashboard works locally, but real-world projects are collaborative. In this secret mission, you will share your repository with a classmate, accept their contribution via a Pull Request, and see their new panel appear on your local dashboard.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally with Docker, so there are no ongoing financial costs.

Resources you used:

  • Docker container: mcp-pipeline-grafana (running Grafana, no cost).
  • GitHub repository: mcp-pipeline-dashboard (free, public).
  • Local project folder: ~/Desktop/mcp-pipeline-dashboard (files on your machine).

Keep everything running

No action needed. Choose this if you are still actively building or experimenting with your dashboard.

  • Your Grafana dashboard stays available at http://localhost:3000 whenever Docker Desktop is running.
  • Your GitHub repository remains public and shareable at any time.
  • Docker Desktop uses some system memory while running, but there is no financial cost.

Pause - I'll come back to this later

Shut down the running container to free up system memory. Your files and repository stay intact so you can resume later.

  • Stop the Grafana container by running this command in your terminal:
  • When you are ready to come back, start it again with:
docker compose stop

To resume later:

docker compose start
  • Your dashboard reappears at http://localhost:3000 once you run the start command.

Delete - I don't want to use this again

Remove all project resources from your machine and start fresh. This is permanent.

  • Stop and remove the Docker container by running:
docker compose down
  • Delete the local project folder. On macOS or Linux, run:
cd ~/Desktop
rm -rf mcp-pipeline-dashboard
  • On Windows, run:
cd ~\Desktop
rmdir /s /q mcp-pipeline-dashboard
  • Delete the GitHub repository. Go to your repository page on GitHub, click Settings, scroll down to the Danger Zone section, and click Delete this repository. Confirm by typing the repository name when prompted.

Nice Work!

Nice Work!

You just built a professional Grafana dashboard that visualizes an entire MCP pipeline, from AI agents to connected tools, all running inside a Docker container you can launch with a single command.

You've learned how to:

  • Build a dark-themed Grafana dashboard with stat panels, time series graphs, and an architecture diagram that visualizes your MCP pipeline in action.
  • Use Docker Compose to define and launch a complete service with one command that works identically on macOS, Windows, and Linux.
  • Store dashboards as code with Grafana provisioning and push a portable, shareable repository to GitHub so anyone can clone and run your exact setup.
  • Secret Mission: Collaborated with a classmate through Git branching and Pull Requests to add new panels to a shared dashboard.

Ready to quiz yourself?