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 these dependencies: arete-react, arete-stacks, tailwindcss. Set up Tailwind with the Vite plugin.
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 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
Section titled “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
Section titled “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
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.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
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.