Create Your Dashboard

The OpenClaw CLI and web interface work great, but a custom dashboard gives you a visual way to browse memories, manage tasks, and view documents. Let's build one with Next.js.

What We're Building

📈

Stats Overview

See memory count, documents, tasks at a glance

📄

File Browser

View all workspace files and their contents

✅

Task Manager

Interactive todo list with add/complete/delete

Prerequisites

✓ Node.js 18+ (you have this from OpenClaw setup)
✓ OpenClaw installed and running
✓ Basic familiarity with React/Next.js (helpful but not required)

Step 1: Create the Next.js Project

Open your terminal and run:

# Create new Next.js app
npx create-next-app@14 dashboard --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm

This creates a dashboard folder with Next.js, TypeScript, and Tailwind CSS preconfigured. It will take a few minutes to install dependencies.

Step 2: Install Additional Dependencies

cd dashboard
npm install lucide-react date-fns

Lucide provides icons, date-fns helps with formatting timestamps.

Step 3: Build the Dashboard

Now we need to create the dashboard files. Here's the complete structure:

File Structure

dashboard/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── files/
│   │   │       └── route.ts      # API for reading files
│   │   ├── documents/
│   │   │   └── page.tsx          # File browser page
│   │   ├── memories/
│   │   │   └── page.tsx          # Memories page
│   │   ├── tasks/
│   │   │   └── page.tsx          # Task manager
│   │   ├── globals.css
│   │   ├── layout.tsx            # Root layout with sidebar
│   │   └── page.tsx              # Dashboard home
│   ├── components/
│   │   ├── QuickActions.tsx
│   │   ├── RecentActivity.tsx
│   │   ├── Sidebar.tsx
│   │   └── StatsCards.tsx
│   └── lib/
│       └── data.ts               # Data fetching utilities

💡 Quick Setup

Instead of typing all this code, you can clone the pre-built dashboard from GitHub:

git clone https://github.com/aihawkins/openclaw-dashboard.git dashboard

Step 4: Configure Workspace Path

The dashboard needs to know where your OpenClaw workspace is. Edit src/lib/data.ts:

// src/lib/data.ts
const WORKSPACE_PATH = "/Users/YOUR_USERNAME/.openclaw/workspace";

Step 5: Run the Dashboard

npm run dev

Open your browser to http://localhost:3000

Dashboard Features

📊 Dashboard Home

• Stats cards showing memory count, documents, tasks
• Recent activity feed
• Quick action buttons

🧠 Memories Page

• View parsed MEMORY.md content
• See when memories were created
• Browse by category

📄 Documents Page

• Browse all workspace files
• Click to view file contents
• See file sizes and types

✅ Tasks Page

• Interactive todo list
• Add new tasks
• Mark complete/delete
• Progress tracking

Keeping It Running

The dashboard is just a Next.js app. To keep it accessible:

• Development: Run npm run dev when you need it
• Production: Build with npm run build and deploy to Vercel/Netlify
• Always-on: Deploy to a server or use Vercel for 24/7 access

What's Next?

You now have a visual interface for your OpenClaw workspace! Next, let's upgrade your memory system with Mem0 + structured memory folders for cleaner, cheaper context.

Step 6: Upgrade Your Memory → Complete Setup Guide