MobileClaw

A mobile-first chat UI for OpenClaw — the open-source AI agent platform. Built with Next.js, Tailwind CSS v4, and zero UI dependencies.

Features

• Real-time streaming — word-by-word text streaming with animated cursor
• Rich markdown — headings, lists, tables, code blocks with syntax labels and copy button
• Tool calls — live tool execution with running/success/error lifecycle
• Thinking/reasoning — expandable reasoning blocks on assistant messages
• Command palette — slide-up sheet with all OpenClaw slash commands, search and autocomplete
• Demo mode — fully functional without a backend server
• Mobile-first — optimized for iOS Safari with pull-to-refresh, viewport fixes, and smooth scroll animations
• Dark mode — automatic theme via CSS custom properties

Quick Start

git clone https://github.com/user/mobileclaw.git
cd mobileclaw
npm install
npm run dev

Open http://localhost:3000.

Demo Mode

Try the UI without a backend:

• Visit localhost:3000?demo — auto-enters demo mode with sample conversation
• Or open the app, leave the URL field empty, and click "Start Demo"

In demo mode, send messages with these keywords to see different features:

Keyword	What it shows
weather	Tool call with JSON result
code / function	Syntax-highlighted code blocks
think / reason	Expandable reasoning block
error	Failed tool call
help	List of demo commands

Connecting to OpenClaw

1. Start your OpenClaw instance
2. Open MobileClaw and enter the server URL (e.g. ws://127.0.0.1:18789)
3. Optionally enter a gateway auth token
4. Click Connect

The connection persists across page reloads via localStorage.

Tech Stack

• Next.js 16 — App Router, single-page architecture
• Tailwind CSS v4 — utility-first styling with OKLch color tokens
• TypeScript — type-safe WebSocket protocol handling
• Zero UI dependencies — no component library, hand-rolled components with inline SVG icons

Architecture

The entire UI lives in a single file (app/page.tsx) — this is intentional for rapid iteration. Supporting modules:

File	Purpose
app/page.tsx	All components, state, and rendering
lib/useWebSocket.ts	WebSocket hook with auto-reconnect
lib/toolDisplay.ts	Tool name → human-friendly label mapping
lib/demoMode.ts	Demo mode handler with mock data
app/globals.css	Tailwind config and OKLch color tokens

Contributing

1. Read CLAUDE.md for project conventions
2. Read AGENTS.md for architecture details
3. Test changes in demo mode (?demo) before testing with a live server
4. Run npm run build to verify no build errors