# Build a single-machine dashboard
In this tutorial, you will build a browser-based dashboard for a single Viam machine. The finished dashboard shows:
- A live camera feed
- The most recent reading from a sensor
- A start/stop button for a motor
- A connection status indicator
You will learn the four patterns that almost every Viam client app uses: opening a connection, reading state from a component, changing state on a component, and reacting to connection events. The dashboard runs locally in your browser by the end; deployment is out of scope for this tutorial.
The tutorial uses vanilla TypeScript and Vite without any frontend framework. The patterns work the same in React, Vue, or Svelte; a vanilla setup keeps the SDK calls visible without framework ceremony.
## What you need
- A configured Viam machine with a camera, a sensor, and a motor. Any models work. If you do not have the physical hardware, add fake components in the Viam app’s **CONFIGURE** tab: `fake:camera`, `fake:sensor`, and `fake:motor`. The fake components respond to SDK calls the same way real ones do.
- A completed [TypeScript setup](https://docs.viam.com/build-apps/setup/typescript/). You should have a project directory with `@viamrobotics/sdk` installed, a `.env` file holding your machine credentials, and `index.html` plus `src/main.ts` files from the setup page.
- Two browser windows side by side, or two tabs you can switch between. One window runs your dashboard; the other opens the Viam app’s **CONTROL** tab for the same machine so you can see server-side state change when your code runs.
Before continuing, confirm your setup by running `npx vite` and verifying that the page from the setup step shows `Connected. Found N resources.` in the browser. If it does not, go back to [TypeScript setup](https://docs.viam.com/build-apps/setup/typescript/) and fix the connection before continuing.
## Step 1: Replace the HTML
Open `index.html` and replace its contents with a layout that has slots for each piece of the dashboard:
```html
My Viam Dashboard
My Viam Dashboard
Status: Connecting...
Camera
Sensor readings
—
Motor
```
Save the file. If Vite is still running, it reloads automatically. You should see the page layout in your browser with empty values and non-functional buttons.
## Step 2: Connect to your machine
Open `src/main.ts` and replace its contents with a connection that stores the machine client as a module-level variable. You will add the dashboard logic on top of this connection in the steps that follow.
```ts
import * as VIAM from "@viamrobotics/sdk";
const statusEl = document.getElementById("status") as HTMLSpanElement;
const cameraEl = document.getElementById("camera") as HTMLVideoElement;
const sensorEl = document.getElementById("sensor") as HTMLPreElement;
const startBtn = document.getElementById("start") as HTMLButtonElement;
const stopBtn = document.getElementById("stop") as HTMLButtonElement;
let machine: VIAM.RobotClient;
async function main() {
machine = await VIAM.createRobotClient({
host: import.meta.env.VITE_HOST,
credentials: {
type: "api-key",
authEntity: import.meta.env.VITE_API_KEY_ID,
payload: import.meta.env.VITE_API_KEY,
},
signalingAddress: "https://app.viam.com:443",
});
statusEl.textContent = "Connected";
statusEl.className = "connected";
}
main().catch((err) => {
statusEl.textContent = `Connection failed: ${err.message ?? err}`;
statusEl.className = "disconnected";
});
```
Save the file. Refresh the browser. The status line should change from `Connecting...` to `Connected` in green. If it shows `Connection failed:`, check that your `.env` file has the right credentials and that your machine is online in the Viam app.
## Step 3: Display the camera feed
Add a camera stream to the dashboard. Use a `StreamClient` to attach the camera’s WebRTC stream to the `