---
title: "Tutorial: ORE Dashboard"
description: "Build a live ORE mining dashboard by prompting your AI agent step by step."
editUrl: true
head: []
template: "doc"
sidebar: {"order":6,"hidden":false,"attrs":{}}
pagefind: true
draft: false
---

This tutorial shows you how to build a real-time ORE mining dashboard without writing any code. You will use your AI agent to discover the data, set up the project, and implement the UI.

:::tip[New to coding?]
If you haven't set up a coding tool yet, start with the [Setup Guide](/agent-skills/setup-tools/) first — it takes about 5 minutes.
:::

---

## Prerequisites

- Install agent skills: `npx skills add AreteA4/skills`
- Install Arete CLI: `npm install -g @usearete/a4`
- A code editor with an AI agent (Cursor, VS Code with Copilot, etc.)

---

## Step 1: Scaffold the Project

Start by creating the basic project structure and installing dependencies.

**Prompt:**

Create a new React + Vite + TypeScript project. Install these dependencies: arete-react, arete-stacks, tailwindcss. Set up Tailwind with the Vite plugin.

---

## Step 2: Discover the ORE Schema

Ask your agent to look at the available ORE data to understand what you can build.

**Prompt:**

Run `a4 explore ore --json` and `a4 explore ore OreRound --json` to understand the ORE stack schema. Summarize the available entities, views, and fields.

---

## Step 3: Build the Main Layout

Set up the application shell with a connection status indicator.

**Prompt:**

Create the main `App.tsx` with a `AreteProvider` (autoConnect={true}). Create an `OreDashboard` component that will hold our mining data display. Use a dark theme with tailwind (bg-gray-900, text-white). Add a header that says "ORE Mining Dashboard" with a connection status indicator.

---

## Step 4: Add Live Round Data

Connect to the live round view to show the current mining status.

**Prompt:**

In the `OreDashboard` component, use the `useArete` hook with `ORE_STREAM_STACK` from `arete-stacks/ore`. Subscribe to the `OreRound.latest` view using `useOne()` to get the current round. Display: Round number (`id.round_id`), Motherlode amount (`state.motherlode`), Total miners (`state.total_miners`), Total deployed (`state.total_deployed`), and Deploy count (`metrics.deploy_count`). Format large numbers with commas.

---

## Step 5: Add Treasury Data

Include high-level stats about the ORE treasury.

**Prompt:**

Add a section that shows the ORE treasury state. Use `OreTreasury.list` view with `useOne()`. Display: Total staked, Total refined, Total unclaimed, and Treasury balance. Put these in a grid of stat cards.

---

## Step 6: Add Round History

List previous rounds to show historical mining activity.

**Prompt:**

Add a section below the stats that shows recent rounds in a table. Use `OreRound.list` view with `use()`. Show the last 10 rounds with columns: Round #, Motherlode, Miners, Deployed, Motherlode Hit (boolean as a checkmark or X). Sort by `round_id` descending in the component.

---

## Step 7: Polish the UI

Make the dashboard look professional and responsive.

**Prompt:**

Clean up the layout. Add subtle animations for when data updates like a brief highlight or pulse effect. Make the stat cards have a slightly lighter background (`bg-gray-800`). Add a footer that says "Powered by Arete" with a link to `docs.arete.run`. Ensure the app is responsive on mobile devices.

---

## The Result

Once your agent finishes the final step, you will have a fully functional, real-time dashboard. The app connects to the Arete ORE stream and updates automatically as new data hits the Solana blockchain.

You built a complex, data-heavy application in minutes without writing a single line of manual code.