MDK Logo

Build a dashboard with an agent

[⏱️ ~12 min] Guided tutorial: use the agent skill flow to ship a statistics lab dashboard with charts and tables, no mining domain required

This tutorial walks a realistic agent session end to end, using the same flow every MDK agent session uses: install the skill suite once, then state what you want in plain language.

Overview

MDK's React UI Devkit's library of presentational and composable building blocks can be used wherever suits you.

Mining is one of many disciplines that benefits from charts, tables, tabs, and stat cards. Your telemetry; your dash.

You bring your labels, your mock data, and your layout.

The first thing we built was a mining dashboard. What will you build?

IoT fleet backend reporting, workout metrics motivation app, weather stats? Your data; your choice.

The prompt asked for a statistics tutorial page so students can explore distributions, trends, and raw grades. You see every:

  • Lookup the agent makes against the skill suite
  • Resulting page code
  • Run instructions

We use mock JSON in the browser. No Kernel, Worker, pool API, or fleet backend is required. Presentational imports from @tetherto/mdk-react-devkit/core are enough for a highly visual, shippable UI.

What you'll learn

  1. Domain is yours. Component contracts describe shape and behavior (chart datasets, table columns), not industry vocabulary.
  2. The agent path is unchanged. Install the skills → plain-language intent → local registry lookup → build → typecheck.
  3. Visual density is supported. Bar charts, line trends, sortable tables, and stat cards compose into a dashboard that looks like a product, not a wireframe.

The demo app is Stats Lab: a fictional intro statistics course where Teaching Assistants review quiz score histograms, weekly class averages, and per-student grades.

Prerequisites

  • Node.js >=24
  • npm >=11
  • React 19+ and react-dom 19+

Agent session walkthrough

Install the skill suite (once per project)

From your app or monorepo project root:

mdk skill add --client cursor

This installs the MDK Developer Skill suite into .cursor/skills/ (use --client claude for .claude/skills/, or omit --client for both), so the session knows MDK's conventions and carries the component registry. See Agent skills.

State a non-mining intent

Paste a prompt that names the domain explicitly so the agent does not reach for hashrate widgets:

Build a statistics tutorial dashboard for students in apps/stats-lab. Include:

  • A histogram of final exam scores (bar chart buckets 50–59 through 90–100)
  • A line chart of weekly class average over six weeks
  • A sortable table of students with midterm, final, and section
  • Three summary stat cards: mean final, median final, enrollment count

Use mock data in the repo. Import only from @tetherto/mdk-react-devkit/core and @tetherto/mdk-react-devkit/foundation where needed. No mining APIs.

The agent's job is the same whatever the domain: discover exports, scaffold, and verify compile.

Lookups the agent makes

Behind the prompt, the mdk-ui-component skill activates and a well-behaved session reads its bundled references/ui-registry.json — a deterministic file lookup, no model or network calls. A representative pass:

Full skill reference: Agent skills.

Review the generated page

After the agent edits App.tsx, a Stats Lab dashboard might look like this:

Nothing in this file references pools, workers, or TH/s. The same components appear on mining pages because the data model is generic.

Run Stats Lab locally

Follow the same monorepo workflow as installing and wiring the React packages. If you already did that, skip to Run the app with stats-lab as the workspace name.

Clone and build the UI monorepo

git clone https://github.com/tetherto/mdk.git
cd mdk
npm install
npm run build

Scaffold apps/stats-lab

cd apps
npm create vite@latest stats-lab -- --template react-ts
cd stats-lab

Add workspace dependencies to package.json:

"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*",

Install from the monorepo root:

cd ../..
npm install

Wrap with MdkProvider

In apps/stats-lab/src/main.tsx, mirror Wrap your app in MdkProvider:

import { MdkProvider } from '@tetherto/mdk-react-adapter'
import '@tetherto/mdk-react-devkit/styles.css'

// …
<MdkProvider apiBaseUrl="https://example.invalid">
  <App />
</MdkProvider>

Mock data does not call the API; the provider satisfies components that expect React context.

Run the app

From the monorepo root:

npm -w stats-lab run build

Then start Vite:

npm -w stats-lab run dev

Or from the app folder:

cd apps/stats-lab
npm run dev

Open the URL Vite prints (typically http://localhost:5173). You should see Stats Lab with histogram, trend line, stat cards, and a sortable roster tab.

Optional: compare with the MDK demo app

Same commands as in the install guide:

npm run dev:catalog

Open http://localhost:5173/mdk to browse mining-oriented examples, then contrast with Stats Lab: same primitives, different story.

Why the agent stays accurate

The registry lists real exports with their prop types and usage docs, so the agent can't invent props that don't exist. npm run typecheck remains the final verification against the real component APIs, and the app build catches the rest.

Next steps

Install the CLI

Previous Page

About MDK

Open, modular infrastructure for Bitcoin mining at any scale

On this page

OverviewWhat you'll learnPrerequisitesAgent session walkthroughInstall the skill suite (once per project)State a non-mining intentLookups the agent makesReview the generated pageRun Stats Lab locallyClone and build the UI monorepoScaffold apps/stats-labWrap with MdkProviderRun the appOptional: compare with the MDK demo appWhy the agent stays accurateNext steps