MDK App Toolkit
frontend tools, backend tools, and a plug-and-play shell for building applications on top of @tetherto/mdk-ork
Status: ๐ง The MDK App Toolkit is under active development. The v0.0.2 release ships the React UI Kit.
Introducing the MDK App Toolkit
The MDK App Toolkit is an open-source, reusable package for building applications on top of
@tetherto/mdk-ork.
The App Toolkit ships in three parts:
While @tetherto/mdk-ork is entirely unopinionated, the App Toolkit provides a batteries-included application layer. It plugs into existing stacks
(leveraging the low-level @tetherto/mdk-client for @tetherto/mdk-ork connectivity) so teams can ship operator-ready dashboards and custom domain
logic without rebuilding the App Node from scratch.
The problem
Building an application on top of hardware infrastructure historically forces developers to face four friction points across the full stack:
-
Frontend repeated logic: every frontend developer integrating with backend APIs ends up reinventing solutions to the same plumbing challenges:
- Throttling fast-moving telemetry streams
- Managing optimistic UI state transitions
- Detecting silent communication timeouts
-
Backend repeated logic: every backend developer ends up writing the same App Node plumbing (JWT auth, RBAC, command proxying, and fleet aggregation) before they can ship any custom business logic.
-
The UI rigidity trap: platforms try to solve the repeated logic problem by shipping a UI component library. UI is inherently subjective; when external developers are forced to use generic components, they get locked out of customizing the CSS to match their brand, leading to abandoned toolkits and identical-looking dashboards.
-
The extension bottleneck: when an external manufacturer builds a brand new miner or device, there is no clear path for injecting a custom dashboard widget and custom aggregator into an existing deployment.
The solution
The App Toolkit decouples logic from styling, separates frontend and backend concerns, and provides an explicit plug-and-play extension architecture:
-
It extracts complex API state and caching logic, such as handling server disconnects and buffering data from the App Node gateway, into a purely headless frontend layer (
@tetherto/mdk-react-devkit/core). -
It ships a reusable App Node library that drops into Fastify or Express, handling JWT auth, RBAC, and
@tetherto/mdk-orkproxying out of the box, while exposing hooks for developers to plug in their own routes and aggregations. -
It embraces the shadcn/ui pattern by providing reference UI components that developers copy and paste, giving them full control over CSS and layout while still leveraging the underlying data hooks.
๐ง Components will soon be available via npm.
-
It provides the MDK-App plugin architecture: an out-of-the-box, extensible shell framework where third-party frontend widgets and backend routes can be injected dynamically at runtime as a single drop-in package.
The scope
While MDK targets Bitcoin mining, the App Toolkit's architecture is deliberately domain-agnostic. Anywhere there is a fleet of devices reporting telemetry, with operators that need real-time visibility and control, the same patterns apply: IoT sensor networks, industrial telemetry, energy grid monitoring, autonomous vehicle fleets, and AI-agent control planes are all natural fits.
The portable layers are everything above the protocol boundary: the headless state machine handles buffering, optimistic UI, and stale detection regardless of what telemetry it receives; the framework adapters translate that state into reactive lifecycles for any React, Vue, or Svelte app; the reference UI primitives and the plug-and-play shell are generic UI building blocks; the App Node middleware library is generic Fastify/Express; and the plugin pattern, register a backend route alongside a widget that consumes it, works for any backend with the same shape.
The MDK-specific glue lives below: @tetherto/mdk-client speaks the MDK Protocol to @tetherto/mdk-ork, the App Node middleware proxies commands over Holepunch RPC,
and @tetherto/mdk-react-devkit/foundation adds mining-domain components such as vendor container UIs and the operations centre. Swap that protocol layer
and the App Toolkit pattern carries to any domain with the same shape.
Frontend tools
Frontend tools are the building blocks for dashboards on top of @tetherto/mdk-ork. They decompose into three layers:
UI Core (headless state), framework adapters (e.g., React bindings), and UI Kit
(styled React components), so business logic is shared while styling stays under developer control.
UI Core
The UI Core (@tetherto/mdk-ui-core) is the framework-agnostic headless layer. Headless: the same store
logic can back React, Vue, Svelte, or plain JS utilities. Framework adapters bind @tetherto/mdk-ui-core into reactive lifecycles for each UI runtime.
Headless primitives will land in this package.
Framework adapters
@tetherto/mdk-ui-core stores do not trigger UI re-renders on their own. Framework adapters subscribe to those stores and expose reactive hooks.
For React, @tetherto/mdk-react-adapter provides <MdkProvider>, store hooks (useAuth, useDevices, useActions, and others), and TanStack Query re-exports. Future adapters (@tetherto/mdk-vue, @tetherto/mdk-svelte, @tetherto/wc) will follow the same pattern.
UI Kit
The toolkit optionally ships styled reference components (for example, <DeviceTile />). These follow the shadcn/ui pattern:
they are copy-pasted into the developer's source tree. Developers own the styling completely.
React UI Kit
For React, @tetherto/mdk-react-devkit is a production-tested UI Kit available as a ready-made implementation
of this layer. Highlights:
- 100+ production-tested components
- Built on React 19 and shadcn/ui
- Zero CSS-in-JS runtime overhead
๐ง UI Kits for other frameworks (Vue, Svelte, and so on) will follow the same pattern and ship alongside their framework adapters.
Developer entry points
The toolkit can be adopted at any of the following entry points, from most batteries-included to least.
| Entry point | Package | What ships | What you write | When to choose |
|---|---|---|---|---|
| UI Kit | @tetherto/mdk-react-devkit (/core + /foundation entrypoints) | Pre-built React components, shell layout, ready-made ops dashboard | Data wiring, optional theming | You want a dashboard up fast |
| Framework adapter | @tetherto/mdk-react-adapter (React today; Vue/Svelte/WC planned) | <MdkProvider>, store hooks, TanStack Query re-exports | Your own components and layout | You have a design system already |
| UI Core | @tetherto/mdk-ui-core | Zustand vanilla stores, QueryClient factory | Framework bindings or headless utilities | You need store access outside React or are building a new adapter |
| Raw SDK | @tetherto/mdk-client | MDK Protocol client, connection management, reconnection | Everything above the wire: state, framework, UI | You are building a non-UI consumer (CLI, agent, backend service) |
Backend tools
Backend tools are a library for implementing custom business logic on top of @tetherto/mdk-ork, loosely coupled to the App Node and completely plug-and-play.
Developers do not have to write the App Node gateway from scratch: the library drops directly into Fastify or Express, ships the boilerplate every operator
needs, and exposes hooks for the custom routes and aggregations that make each deployment unique.
Drop-in App Node middleware
Pre-built middleware that wires up the standard App Node responsibilities so developers do not reinvent them:
- Exposing standard
/authendpoints - Validating incoming user JWTs
- Proxying commands securely down to
@tetherto/mdk-orkover Holepunch RPC (HRPC) using@tetherto/mdk-client
Route extension API
Hooks allowing developers to bind new REST or WebSocket endpoints (for example, POST /mining/stats) that perform complex aggregations using @tetherto/mdk-ork
capabilities via @tetherto/mdk-client. Custom routes live in a developer-owned package and snap into the middleware without forking it.
Plugins
A plugin pairs a frontend tools widget with a backend tools route as a single drop-in module. For developers looking for an out-of-the-box solution, the toolkit pairs the frontend and backend halves into the MDK-App plugin architecture: an extensible, multi-tenant shell.
The prebuilt shell
Instead of building a custom React layout and a custom Fastify server, developers spin up the MDK UI Shell and MDK Generic App Node. These are ready-to-use binaries fully wired together.
Writing a plugin
External developers write plugins consisting of two tightly coupled pieces of code that register dynamically into the shell at runtime:
- MDK-App server: a package of business logic that registers custom backend routes (for example,
/mining/stats) into the backend tools middleware hooks. - MDK-App widget: a custom frontend component that mounts into the MDK UI Shell's grid layout and natively queries
/mining/stats.
Plug-and-play reusability: this explicit convention ensures that an external company can build a completely new dashboard widget and backend aggregator for a new device type, publish it as a single npm package, and allow any user to drop it into their existing MDK deployment without modifying upstream source code.
Architecture overview
Next steps
Learn more: