For the complete documentation index optimized for AI agents, see llms.txt or llms-full.txt. A markdown version of this page is available by appending.mdto the URL or sendingAccept: text/markdown.
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.
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.
Prerequisites
Section titled “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
Section titled “Step 1: Scaffold the Project”Start by creating the basic project structure and installing dependencies.
Prompt:
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
Section titled “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
Section titled “Step 3: Build the Main Layout”Set up the application shell with a connection status indicator.
Prompt:
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
Section titled “Step 4: Add Live Round Data”Connect to the live round view to show the current mining status.
Prompt:
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
Section titled “Step 5: Add Treasury Data”Include high-level stats about the ORE treasury.
Prompt:
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
Section titled “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.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
Section titled “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
Section titled “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.