Skip to main content

How it works

DeTriz Smart Home Kit is for rapid prototyping of smart home apps. It skips the groundwork: the smart home is already mapped and the components are already built, so you start on your own idea from day one.

The groundwork you skip​

Smart home apps look simple: a number, an icon, a Space name. Then real life shows up. Sensors go quiet, connections drop, Readings go stale, and nobody agrees what a "device" even is.

Before you can design a single screen, you'd normally have to answer questions like these:

  • What are the things, and what are they called? Is it a room or a Space? Is a Sensor the same as a Device?
  • How do they relate? Which Space is a Module in? Which Sensor took this Reading?
  • What can go wrong? What should the screen show when a Device is Stale, Disconnected or reports a Fault?
  • What does it look like? Cards, values, Units and status badges, designed and built for every one of those cases.

The kit answers all of them for you.

The parts of the kit​

The kit has layers. Each one builds on the one before it, and all of them use the same names.

1. The domain model​

The base of everything. A ready-made description of a smart home: what exists (Site, Space, Hub, Module, Sensor, Reading…), how those things relate, and how a Device moves between statuses. Read it in Domain Model.

2. UI components, in Figma and React​

The same components in two places: a Figma library to design with, and React components to build with. They're named after the domain model and already handle every status, so a Disconnected Module hides its old values by itself. Try it:

Loading…
Live editor
<ColumnLayout>
  <ModuleCard
    name="Living room Module"
    connectionStatus="connected"
    sensors={[
      { metric: "temperature", value: 21.5, unit: "celsius" },
      { metric: "humidity", value: 48, unit: "percent-rh", fractionDigits: 0 },
    ]}
  />
  <ModuleCard
    name="Bedroom Module"
    connectionStatus="disconnected"
    sensors={[
      { metric: "temperature", value: 19.8, unit: "celsius" },
      { metric: "humidity", value: 55, unit: "percent-rh", fractionDigits: 0 },
    ]}
  />
</ColumnLayout>

The React components are typed, themed with design tokens and installed from npm. They're made for real apps too, so your prototype's code carries through to production. Browse them in UI Components.

3. Data: simulated first, real later​

Coming next. Your app needs Sensor Readings to show. The kit will give you two sources that speak the same API:

  • API Simulator: realistic, simulated Readings over REST and WebSocket, so you can build without any hardware.
  • Raspberry Pi Hub: software that runs on a Raspberry Pi, reads real Sensors and serves the same API.

A typed SDK connects your app to either one. You switch from simulated to real data without rewriting your app.

4. AI​

Coming later. AI helps in two ways:

  • While you build: an MCP server gives AI tools (like Claude Code, Cursor or Figma) the kit's components, tokens and API, so they build screens the kit's way.
  • Inside your app: Generative UI builds a screen at runtime from a plain-language request, like "show bedroom air quality".

What's ready today​

PartStatus
Domain modelReady
UI components (React) and design tokensReady
UI components (Figma)Ready
API Simulator, Raspberry Pi Hub and SDKComing next
MCP server and Generative UIComing later

A typical workflow​

  1. Learn the model. Skim the Glossary so you know what a Space, Module and Reading are.
  2. Design in Figma. Sketch your screens with the kit's Figma components, including the Stale, Disconnected and Fault cases.
  3. Build in React. Use the same components from npm. Their props match the domain model, so your design maps straight to code.
  4. Add data. Pass in your own values for now. Later, connect the API Simulator, then real Sensors.

Who it's for​

People who make interfaces, not circuit boards:

  • Product designers who want screens that handle the messy, real-world states.
  • Creative technologists who want to prototype fast and connect real data later.
  • Frontend developers who want typed React components, themed with tokens and installed from npm.

Next steps​