Tutorial: ORE Dashboard

For AI agents: the documentation index is at llms.txt (full corpus: llms-full.txt). A markdown source for this page is /agent-skills/tutorial-ore-dashboard.md.

Check that ORE is available to you first

This tutorial is written for one specific package, the ORE hosted stack, and it only works for projects that have access to it. Before you start, run a4 explore catalog stack ore --json. If the descriptor is unavailable, or it isn’t subscribe-ready for your account, follow the Quickstart instead and pick a stack the catalog returns for you. The endpoint and generated names on this page belong to ORE, so don’t reuse them with a different package.

In this tutorial you build a real-time ORE mining dashboard without writing any code yourself. You work through seven prompts. Your AI agent discovers the data, sets up the project, and builds the interface, and you watch it take shape one step at a time.

New to coding?

If you haven’t set up a coding agent yet, start with Choose and Set Up an Agent. It takes about 5 minutes.

---

Prerequisites

• Install the Arete CLI: curl -fsSL https://arete.run/install.sh | sh (Windows: irm https://arete.run/install.ps1 | iex)
• Install agent skills and MCP config: a4 init -y (or just the skills: npx skills add AreteA4/skills)
• A code editor with an AI agent (Cursor, VS Code with Copilot, etc.)

---

Step 1: Scaffold the Project

Start by having the agent create the project and install what it needs. This prompt is long because it pins down the details an agent would otherwise have to guess.

Prompt:

Agent prompt Copy / paste

Create a new React + Vite + TypeScript project. Install @usearete/react, @usearete/sdk, zod, and Tailwind CSS with its Vite plugin. Do not install zustand; @usearete/react carries it as a normal dependency. Run a4 install ore --ts --output ./src/generated/ore-stack.ts --package-name @usearete/react so the app uses the deployed ORE stack’s generated types and extensions. Add VITE_ARETE_PUBLISHABLE_KEY to .env.local for hosted authentication and fail with a clear message if it is missing. Read-only viewing does not require a wallet.

---

Step 2: Discover the ORE Schema

Before building anything, ask your agent to look at the ORE data that is available, so you both know what there is to work with.

Prompt:

Agent prompt Copy / paste

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

Next comes the frame of the app, including an indicator that shows whether it is connected to live data.

Prompt:

Agent prompt Copy / paste

Create the main App.tsx with AreteProvider from @usearete/react. Import ORE_STREAM_STACK, pass it as the provider’s stack, and pass auth={{ publishableKey: import.meta.env.VITE_ARETE_PUBLISHABLE_KEY }}. Do not pass a provider WebSocket URL because the generated stack embeds its endpoints. autoConnect defaults to true and controls only the initial connection; autoReconnect defaults to true and controls only recovery after an established connection is lost. Create an OreDashboard component with a dark Tailwind theme and a connection indicator based on useArete(...).status; surface socketIssue and provide a retry() action on connection failure.

---

Step 4: Add Live Round Data

Now connect to the live round view, so the dashboard shows what is happening in the current mining round.

Prompt:

Agent prompt Copy / paste

In OreDashboard, import ORE_STREAM_STACK from ./generated/ore-stack and call useArete(ORE_STREAM_STACK). Subscribe to OreBoard.state with { address: arete.addresses.board() }, then pass its state.roundId to OreRound.state.use({ roundId }); pass undefined until Board loads. Use each view result’s full status, isPending, isReady, isEmpty, isRefreshing, and error fields for accurate UI states. Display generated camelCase fields id.roundId, state.motherlode, state.totalMiners, state.totalDeployed, and metrics.deployCount. Explain that Board, not OreRound.latest, is authoritative for the active round.

---

Step 5: Add Treasury Data

Add a few headline numbers about the ORE treasury.

Prompt:

Agent prompt Copy / paste

Add a section that shows ORE treasury state. Subscribe to OreTreasury.state with { address: arete.addresses.treasury() }. Display generated camelCase fields that exist in the returned entity, including state.totalRefined, state.totalUnclaimed, and state.motherlode, in a grid of stat cards.

---

Step 6: Add Round History

List recent rounds in a table, so you can see how mining has gone lately.

Prompt:

Agent prompt Copy / paste

Add a section below the stats that shows recent rounds in a table. Use OreRound.latest.use({ take: 10 }). Show columns for id.roundId, state.motherlode, state.totalMiners, state.totalDeployed, and results.didHitMotherlode. The view is already sorted by round ID descending; do not use it to choose the active board round.

---

Step 7: Polish the UI

Finish by making the dashboard look polished and work well on a phone.

Prompt:

Agent prompt Copy / paste

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 last step, you have a working, real-time dashboard. The app connects to the Arete ORE stream and updates on its own as new data lands on Solana.

You built a data-heavy application by describing it, one prompt at a time. To take the same approach to your own idea, browse the Prompt Cookbook or read From Question to Application.