AI App Builder Workflow

Overview

This guide shows you how to set up a workflow where you chat with OpenClaw in natural language, it generates working code, and you instantly preview and share your app at a public URL.

The result: Build web apps like you would with Lovable or Bolt, but on your own server with no message limits.

Prerequisites

A Clawdy account with a deployed OpenClaw instance (deploy in 60 seconds)
An AI API key (OpenRouter, Anthropic, or OpenAI)

Step 1: Create Your Project

Connect to your OpenClaw instance via the Web Terminal or SSH, then create a project directory:

mkdir ~/projects/client-dashboard
cd ~/projects/client-dashboard

Ask OpenClaw to scaffold your project:

Create a new Vite + React + Tailwind project in the current directory

OpenClaw will generate the project structure, install dependencies, and set everything up.

Recommended stacks:

Vite + React + Tailwind - Fast, lightweight, great for dashboards
Next.js - Full-stack with API routes, good for larger apps
Astro - Content-heavy sites and landing pages

Step 2: Set Up a Unique Port

Use path-to-port to generate a consistent, unique port based on your project path:

bunx path-to-port `pwd`
# Example output: 8234

Tell OpenClaw to use this port:

When starting the dev server, use port 8234

Why this matters: Each project gets its own port, so you can run multiple apps simultaneously without conflicts. The port is deterministic - same project path always gives the same port.

Step 3: Start Dev Server in tmux

Start a tmux session so your dev server keeps running even when you disconnect:

tmux new -s dashboard
npm run dev -- --port 8234

Detach from the session with Ctrl+B then D. The server keeps running in the background.

To reconnect later:

tmux attach -t dashboard

Step 4: Access Your Live Preview

Your app is now accessible at:

https://8234--your-slug.clawdy.app

Replace your-slug with your actual instance slug (visible in your Clawdy dashboard).

Share this URL with anyone:

Clients reviewing a prototype
Team members testing features
Stakeholders previewing progress

No need to deploy. No $50/month publish tier. It just works.

Step 5: Build with Natural Language

Now the fun part. Chat with OpenClaw to build your app iteratively.

UI & Layout Prompts

Add a sidebar with navigation links: Dashboard, Clients, Invoices, Settings

Create a header with a logo placeholder on the left and a user dropdown on the right

Implement dark mode with a toggle switch in the header

Data & Visualization Prompts

Add a Dashboard page with 4 KPI cards showing: Total Revenue, Active Clients, Open Projects, Hours This Month

Create a line chart showing monthly revenue for the last 12 months using Recharts

Build a clients table with columns for Name, Email, Status, and Last Activity. Add search and sorting.

Backend & Auth Prompts

Set up Supabase for authentication with email/password login

Create an API route at /api/clients that returns client data from Supabase

Add role-based access control: admins see everything, viewers only see their own data

Multi-Project Workflow

Running multiple apps for different clients? Use separate tmux sessions:

# Start projects for different clients
tmux new -s acme-portal      # Port from path-to-port
tmux new -s globex-dashboard # Different port
tmux new -s internal-tools   # Another port

# List all running sessions
tmux ls

# Switch between projects
tmux attach -t acme-portal

Each project runs on its own port, accessible at its own URL:

8234--slug.clawdy.app - Acme portal
8235--slug.clawdy.app - Globex dashboard
8236--slug.clawdy.app - Internal tools

Share different URLs with different clients. Everything stays organized.

Example: Build a Client Portal

Here's a complete prompt sequence to build a client portal from scratch:

1. Project Setup

Create a Vite + React + Tailwind + React Router project for a client portal

2. Authentication

Add a login page with email and password fields. Use Supabase Auth for the backend. Redirect to /dashboard after successful login.

3. Layout

Create a layout component with:
- A sidebar on the left with navigation: Dashboard, Projects, Invoices, Messages, Settings
- A header showing the logged-in user's name and a logout button
- A main content area that renders child routes

4. Dashboard Page

Build the Dashboard page showing:
- A welcome message with the user's name
- 3 summary cards: Active Projects, Pending Invoices, Unread Messages
- A recent activity list showing the last 5 actions

5. Projects Page

Create a Projects page with:
- A grid of project cards
- Each card shows: project name, status badge, progress bar, due date
- Clicking a card opens a project detail modal

6. Invoices Page

Build an Invoices page with:
- A table showing: Invoice #, Date, Amount, Status, Actions
- Status badges: Paid (green), Pending (yellow), Overdue (red)
- A "Pay Now" button that opens a Stripe checkout (mock for now)

7. Messages Page

Add a Messages page with:
- A list of conversation threads on the left
- The selected conversation's messages on the right
- A text input at the bottom to send new messages

8. Settings Page

Create a Settings page with tabs:
- Profile: Update name, email, avatar
- Notifications: Toggle email notifications for different events
- Security: Change password form

9. Polish

Add dark mode support to all pages. The toggle should be in the header and persist the preference to localStorage.

Result: A complete client portal in about 30 minutes of prompting. Preview it instantly at your Clawdy URL, share with your client for feedback, iterate in real-time.

Tips for SMB Workflows

For Client Work

One tmux session per client - Keep projects isolated and easy to manage
Share preview URLs in meetings - Show progress without deploying
Iterate live - Make changes while the client watches, refresh to see updates

For Internal Tools

Build the tools your business actually needs:

Admin dashboards for operations
Reporting tools pulling from your database
Inventory management systems
Employee directories and org charts

No need to learn complex frameworks or hire specialists. Describe what you need, OpenClaw builds it, you own the code.

Best Practices

Always use path-to-port - Consistent ports make URLs predictable
Keep dev servers in tmux - Survives disconnects and server maintenance
Use descriptive session names - tmux new -s acme-dashboard not tmux new -s project1
Commit often - OpenClaw can help with git: "Commit these changes with message 'Add invoices page'"

Next Steps

Auth-Protected Apps - Deep dive into the port forwarding system
Web Terminal - Using the browser-based terminal
Security Layers - How your instance stays secure

You now have a personal AI app builder that rivals Lovable and Bolt - but with unlimited messages, public sharing included, and code you fully own.