AI Agency Automation Control Panel

AI Prompts to Build This

Copy these build prompts into Claude, Cursor, or your AI coding tool. Create a free account to unlock the full research behind them.

1. 1. Project Setup

   Build the weekend MVP of "ClientStack": one dashboard where an automation agency sees every client's workflow health.
   
   Stack: Next.js (App Router), TypeScript, Tailwind, Supabase (Postgres, Row Level Security, Realtime, Auth with email magic link), the n8n API for executions. Deploy on Vercel.
   Platforms: n8n first, with an API key per client. Make and Zapier come later.
   
   Tables (Row Level Security on, each agency reads only its own rows):
   - agencies(id, user_id, name, logo_url, primary_color)
   - clients(id, agency_id, name, n8n_base_url, n8n_api_key_encrypted)
   - executions(id, client_id, workflow_name, status, started_at, duration_ms, error_message)  where status is success or error
   - alerts(id, client_id, kind, created_at)
   
   Screens: /login, /clients (health badges), /feed (execution feed).
   Env vars (names only): NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (server only), ENCRYPTION_KEY.
   
   Do not build: billing or plans, Make or Zapier connections, template deploys, ROI reports, a client portal, roles beyond the one agency owner.
   Done when: npm run dev starts, you can sign in, and the four tables exist with Row Level Security on.

2. 2. Core Feature

   Build the one feature that proves ClientStack: a unified execution feed with a health status per client.
   1. A client form saves the n8n base URL and API key (encrypted at rest).
   2. A scheduled job every 5 minutes calls GET /executions for each client, normalizes each one to { client_id, workflow_name, status, started_at, duration_ms, error_message } and inserts it into executions, skipping ones already stored. Back off on rate limits.
   3. /feed lists executions across all clients, newest first, and updates live through Realtime.
   4. /clients shows a green, yellow or red badge per client from the error rate over the last 24 hours: green under 2%, yellow 2 to 5%, red above 5%. A client that goes red writes one row to alerts.
   Empty state: with no clients, show the add-client form and a one-line n8n API key hint.
   Done when: connecting a test n8n instance fills the feed within 5 minutes, and forcing failed executions turns that client red and writes an alert.

3. 3. Landing Page

   Build a one-page landing site for ClientStack, an operations dashboard for AI automation agencies.
   Hero: "Every client's automations, one screen." Sub: "See which workflows are healthy, which broke and for whom, before the client emails you." One button: Join the waitlist.
   Sections: the problem (agencies find out a client's automation broke when the client does), how it works in five steps (connect platforms, monitor the portfolio, deploy templates, prove ROI, retain clients), and a mock portfolio with green, yellow and red clients.
   Waitlist: store the email in a waitlist table in Supabase. No other service.
   Voice: practical and plain, written for an agency owner.
   Done when: the page renders on a phone and a submitted email appears in the waitlist table.

4. 4. Branding Package

   Use a design or image tool for this one. A coding agent cannot draw a logo.
   Brand for ClientStack: a wordmark and an icon that suggest a stack of client tiles.
   Colors: a near-black, white, and green, yellow and red used only for health status. Type: one clean sans for the interface and a mono for workflow names.
   Deliverables: wordmark, icon, three status badge designs, and one launch graphic of a portfolio of clients.
   Done when: each deliverable is saved in one folder and the three badges are distinguishable without color.