Build a dashboard with an agent

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 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. 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

This is a standalone Vite app, not an MDK App or dashboard: there is no route, no mdkFetch, and no mdk run. Use mock data in the repo. Import only from @tetherto/mdk-react-devkit/primitives and @tetherto/mdk-react-devkit/domain where needed. No mining APIs. Verify with npx tsc -b and npm run build.

The mdk-ui-component skill is written for two hosts: an MDK App's ui-src/ or an mdk create dashboard app. Its prerequisites ask for a route and a host, its rules send every request through mdkFetch and import from the devkit package root, and its verify step opens the page in a running dashboard. The prompt overrides those parts: it names the host (a standalone Vite app), the data (mock only, so no requests), the import subpaths, and the verify commands. The agent keeps the rest of the skill, the registry lookups and the component contracts, whatever the domain.

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.

Scaffold stats-lab

Run this in any directory:

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

Install the MDK React packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Wrap with MdkProvider

Replace the whole of stats-lab/src/main.tsx with this file, which mirrors Wrap your app in MdkProvider:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { MdkProvider } from '@tetherto/mdk-react-adapter'
import { noAuth } from '@tetherto/mdk-ui-foundation'
import '@tetherto/mdk-react-devkit/styles.css'
import '@tetherto/mdk-react-devkit/styles-domain.css'
import App from './App.tsx'

// Stats Lab renders fixtures, so it signs in to nothing: noAuth() says so
// explicitly. A dashboard against a real stack passes passwordAuth() instead.
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <MdkProvider apiBaseUrl="https://example.invalid" auth={noAuth()}>
      <App />
    </MdkProvider>
  </StrictMode>,
)

Mock data does not call the API, so noAuth() is accurate here rather than a placeholder. A dashboard against a real stack passes passwordAuth() instead, which Install and wire the React packages covers.

The file leaves out the scaffold's import './index.css'. Delete src/index.css and src/App.css as well: the Vite template's styles draw the Stats Lab title and chart headings in near-black on the devkit's dark background, and add borders and centering to #root.

Run the app

From the stats-lab folder:

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.