drafty
GitLab logo

Build a GitLab pipeline & MR dashboard with Claude

Connect the GitLab MCP server to Claude, ask for a CI pipeline and merge-request dashboard from your live numbers, and publish it to a link your team comments on directly — no BI tool, no screenshots pasted into Slack.

What you'll build
A self-contained engineering dashboard — pipeline pass rate, average pipeline duration, open merge requests, review wait time, recent pipelines and MRs — generated by Claude from your real GitLab data, then published to a drafty.im/canvas/… link. Your team clicks the exact chart or number they want changed and leaves a note. Claude reads the comments and ships a revised version to the same URL.

This is an end-to-end example: connect a data source over MCP, generate a dashboard from live numbers, and close the review loop on one link. Total time, start to shared link, is under fifteen minutes. The same shape works for any of the other examples — only the connection step changes.

Here's the finished dashboard, published to a canvas — click any tile or number to leave a comment, exactly as your team would:

Live canvas — comment on any elementOpen ↗

The three moving parts

  1. The GitLab MCP server gives Claude read access to your GitLab data — merge requests, pipelines, jobs, issues, project search — through a controlled set of tools. You approve what it can touch.
  2. Claude pulls the numbers and writes a single self-contained HTML dashboard. You iterate on it in the artifact panel until it's right.
  3. Drafty turns that HTML into a stable link your team reviews. Comments pin to the exact element; Claude ships the fix to the same URL.

The generation step is fast now. The part this example is really about is the third one — getting the dashboard in front of people without losing their feedback to a screenshot circled in Preview.

Step 1 — Connect the GitLab MCP server

GitLab runs an official MCP server at https://gitlab.com/api/v4/mcp (for self-managed instances, swap in your own host). You connect once; it authenticates over OAuth 2.0, so no token is pasted into a config file.

In Claude Code:

claude
claude mcp add --transport http GitLab https://gitlab.com/api/v4/mcp

Then run /mcp inside Claude Code and follow the OAuth prompt to authorize the account. When you authorize, grant read scopes only — this dashboard never needs to write to GitLab.

In Claude Desktop: open Settings → Connectors → Add custom connector, paste https://gitlab.com/api/v4/mcp, and authorize with OAuth the same way.

Safety first
Use OAuth with read-only scopes, or — if you're running an unattended agent — a personal access token scoped to read_api only. Never paste a full-scope token into a config file or commit it. The dashboard only reads; it has no reason to hold write permissions.

Step 2 — Pull the numbers

Ask Claude in plain language. It uses the MCP server's read tools (get_merge_request, get_merge_request_pipelines, get_pipeline_jobs, search) to fetch real data:

claude
Using the GitLab MCP server, pull everything we need for an engineering dashboard for our main project: pipeline pass rate and average pipeline duration over the last 30 days, count of open merge requests, median time-to-first-review and median time-to-merge, the 10 most recent pipelines with status and duration, and the open MRs with their author and age. Summarize the figures before you build anything.

Claude calls GitLab, returns the figures, and you sanity-check them against the GitLab UI before going further. This is the moment to catch a wrong assumption — the wrong default branch, draft MRs counted as open, a pipeline status you didn't expect — while it's cheap.

Step 3 — Build the dashboard

Once the numbers look right, ask for the artifact:

claude
Build a single self-contained HTML dashboard from those figures. Pipeline pass rate as the hero number with the 30-day trend, then tiles for average pipeline duration, open merge requests, and median review wait. A recent-pipelines table and an open-MRs table at the bottom. Clean, no external dependencies — inline the CSS and any chart code.

Claude renders it live in the artifact panel. Iterate in place — you're not regenerating from scratch:

Step 4 — Publish to Drafty for review

A Claude artifact link is a preview, not a stable URL — iterate the artifact and the link you already sent now shows the old version. Ask Claude to publish it to a Drafty canvas instead, so the link you share always stays current:

claude
Publish this dashboard to Drafty as a canvas and give me the shareable link.

Claude pushes the dashboard and hands back a drafty.im/canvas/… link that renders on any device. Send it — your team opens it in a browser, no login and no Claude account needed.

Step 5 — The review loop

This is the part that's not obvious until you've done it once.

A reviewer clicks the specific tile, chart, or number they want changed and leaves a pinned comment — "this pass rate looks high, are we counting only the default branch?" The comment is anchored to that element, not floating in a Slack thread. Claude reads the comments through the CLI, reruns the relevant GitLab query if needed, and pushes a revised dashboard to the same URL. The reviewer refreshes and sees the change; the thread stays attached to the element.

The mechanic matters because of what it removes. A Slack message about a chart produces "the number on the left looks wrong." A pinned comment on the actual tile produces "this — exclude scheduled-pipeline runs from the pass rate." One of those produces a correct revision; the other produces a guess.

Keeping it fresh

An MCP-generated dashboard is a snapshot — it holds the numbers Claude pulled when it built it; it doesn't re-query GitLab when someone opens the link. For a weekly review or a sprint-review snapshot, that's fine.

To make it a live canvas that always shows today's figures, copy this prompt — Claude sets up the refresh for you and schedules it to run on its own:

claude
Turn this GitLab dashboard into a live canvas: every morning, re-pull the latest pipeline and merge-request numbers from GitLab via the MCP server, rebuild the dashboard, and push a new version to the same canvas URL so the link always shows today's figures. Schedule it to run daily on its own.

The link stays stable while the content updates underneath it — see keeping a canvas updated automatically.

What to watch for

GitLab dashboard with Claude — FAQ

Do I need to paste my GitLab token anywhere?
No. The GitLab MCP server at gitlab.com/api/v4/mcp authenticates over OAuth 2.0, so you authorize the account through a consent screen instead of pasting a token. For an unattended agent, use a personal access token scoped to read_api only — never a full-scope token, and never committed to a repo.
Is the dashboard live or a snapshot?
A snapshot. It contains the numbers Claude pulled when it built the file; it does not re-query GitLab when someone opens the link. To refresh it, ask Claude to repull and re-push to the same URL — or put that on a daily schedule so the stable link always shows current numbers.
Can my team comment without a GitLab or Claude account?
Yes. The dashboard is published to a Drafty canvas link that renders in any browser. Reviewers click the exact element they want changed and leave a pinned comment with no login required. Only the person connecting GitLab needs access to the account.
Is it safe to give Claude access to my GitLab account?
Connect with read-only OAuth scopes or a read_api-scoped token, and an engineering dashboard never needs more than that. Every tool call is mediated by the MCP server, and in Claude you approve actions. Don't grant write scopes for a read-only reporting task.
How is this different from GitLab's built-in Analytics or CI/CD dashboards?
GitLab's analytics query live data against models GitLab maintains — the right choice for governed, always-on reporting. This approach is for a fast, shareable snapshot you can spin up in minutes and iterate by talking to Claude, then collect feedback on inline. Different jobs: one is a standing system, the other is a quick reviewable deliverable.