MDK Logo

Build any dashboard with an agent

[⏱️ ~12 min] Concept walkthrough — use the agent CI flow to ship a statistics lab dashboard with charts and tables, no mining domain required

This page walks a realistic agent session end to end: the same two-step flow as Build dashboards with your AI agent.

Overview

MDK's React UI Kit'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 Mining Dashboards. 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:

  • UI CLI command the agent would run
  • Resulting page code
  • Run instructions

We use mock JSON in the browser. No ORK 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 this concept page proves

  1. Domain is yours. Component contracts describe shape and behavior (chart datasets, table columns), not industry vocabulary.
  2. The agent path is unchanged. init → plain-language intent → local manifests → scaffold → check.
  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 20+
  • npm 11+ (upgrade npm if npm -v shows 10.x on Node 22)
  • React 19+ and react-dom 19+

Agent session walkthrough

Wire the IDE (same as agents)

From your app or monorepo project root:

npx @tetherto/mdk-ui-cli init --ide cursor

This writes .mdk/context.md and .cursor/rules/mdk.mdc so the session already knows the UI CLI surface. See init.

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 unchanged from Build dashboards with your AI agent: discover exports, scaffold, and verify compile.

Discovery commands the agent runs

Behind the prompt, a well-behaved session issues deterministic CLI lookups (no model calls). A representative transcript:

Full command reference: UI CLI.

Review the scaffolded 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 Wire a React app. If you already completed that tutorial, 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-core": "*",

Install from the monorepo root:

cd ../..
npm install

Wrap with MdkProvider

In apps/stats-lab/src/main.tsx, mirror Wire a React app — 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 Wire a React app — Run the demo app:

npm run dev:demo

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

Why the agent stays accurate

Manifests list real exports, check catches many invented props, and docs / example ground the session in shipped contracts. The app build remains the final TypeScript and Vite verification.

Next steps

Roadmap

Previous Page

Use UI Core headlessly

Next Page

On this page

OverviewWhat this concept page provesPrerequisitesAgent session walkthroughWire the IDE (same as agents)State a non-mining intentDiscovery commands the agent runsReview the scaffolded 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