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: put mdk on your PATH,
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.
You'll ask for a statistics tutorial page so students can explore distributions, trends, and raw grades, and 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/primitives are enough for a highly visual, shippable UI.
What you'll learn
- Domain is yours. Component contracts describe shape and behavior (chart datasets, table columns), not industry vocabulary.
- The agent path is unchanged. Install the CLI → install the skills → plain-language intent → local registry lookup → build → typecheck.
- 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
mdkon your PATH: Install the CLI- The MDK React packages installed and wired: Install and wire the React packages
Agent session walkthrough
Install the skill suite (once per project)
cd to your app or monorepo project root. Do not run this from the CLI checkout:
mdk skill add --client cursorThis 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. Full flag list:
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
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/primitivesand@tetherto/mdk-react-devkit/domainwhere 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
Stats Lab is a standalone Vite project. It needs no MDK checkout: the three React packages come from npm, and the page runs on mock data in the browser.
Scaffold stats-lab
Run this in any directory:
npm create vite@latest stats-lab -- --template react-ts
cd stats-lab
npm installInstall the MDK React packages
npm install \
@tetherto/mdk-react-devkit \
@tetherto/mdk-react-adapter \
@tetherto/mdk-ui-foundationInstall zod@^4.6.6 first. @tetherto/mdk-react-devkit@0.12.1 declares zod@^4.6.6 as a peer while its
@hookform/resolvers peer pulls a chain that pins zod 3, so the command above aborts with ERESOLVE in a project that
has no zod. Installing zod 4 at the project root resolves it:
npm install zod@^4.6.6Wrap with MdkProvider
In 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 stats-lab folder:
npm run devOpen the URL Vite prints (typically http://localhost:5173). You should see Stats Lab with histogram, trend line, stat cards,
and a sortable roster tab.
The MDK component catalogue (npm run dev:catalog) lives in the monorepo, not in a published package. To browse those
mining-oriented examples alongside Stats Lab, clone the monorepo using the
from-source path in the install guide: 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 and wire the React packages: the provider, hooks, and theming your generated pages rely on, and the manual path if you'd rather not use an agent
- Agent skills: the skill suite behind the lookups above
- Chart components:
BarChart,LineChart, and related data shapes - Data display:
DataTablesorting and pagination