Back to Templates

Host an AI Gmail reply approval inbox with OpenAI and CustomJS

Created by

Created by: CustomJS || customjs
CustomJS

Last update

Last update a day ago

Categories

Share

image.png

Host a Premium AI Email Inbox & Approval Dashboard with CustomJS

This workflow demonstrates how to automatically generate and host a premium, interactive human-in-the-loop email approval dashboard using CustomJS and OpenAI.

Instead of letting an AI reply to emails fully autonomously (which is highly risky) or copy-pasting drafts manually, this workflow fetches unread emails, uses AI to draft reply suggestions, and compiles them into a beautiful inbox-style dashboard. The dashboard is hosted instantly on CustomJS, allowing you to review, edit, and send the replies with a single click.

The result is a secure, production-ready feedback loop that ensures absolute human quality control over automated AI interactions.

Why This Workflow?

Fully autonomous AI agents can hallucinate or send incorrect details to clients. However, manually building a dashboard interface to review AI draft suggestions requires setting up hosting, databases, and authentication, which is overkill for simple automation.

This workflow solves this by utilizing CustomJS as a static file server to host a single-page app (SPA) built with Tailwind CSS and Alpine.js. The entire "inbox" dashboard is generated on-the-fly and hosted instantly. Once you review or edit a draft and click "Approve & Send", the dashboard sends the approval back to n8n via a webhook, which handles the final email dispatch and archives the thread.

What This Workflow Does

  • Monitors Inbox: Automatically fetches recent unread emails via the Gmail node.
  • Filters Automated Mail: Runs a JavaScript utility to automatically exclude common no-reply@ addresses from the queue.
  • Generates AI Drafts: Passes the email content to OpenAI to draft a tailored, professional response.
  • Builds a Custom Dashboard: Compiles all pending emails and drafts into an interactive Tailwind CSS inbox UI.
  • Hosts via CustomJS: Automatically uploads and hosts the generated HTML dashboard on CustomJS.
  • Executes Approvals (Lane 2): Listens for dashboard submissions via webhook, replies to the original email thread, and marks the email as read in Gmail.

Key Features

  • Human-in-the-Loop Control
    Keep final approval of all outgoing correspondence. Review and edit drafts before they are sent.

  • Inbox-Style UI Sidebar
    A modern dark-mode interface built with Tailwind CSS and Alpine.js. It features a responsive sidebar containing all pending emails, dynamic search, and a side-by-side view comparing the original inquiry with the editable AI draft.

  • Instant CustomJS Hosting
    Deploys the static HTML dashboard immediately, eliminating the need to set up Vercel, Netlify, or custom web servers.

  • Threaded Gmail Responses
    Approved emails are sent as threaded replies to the original message, preserving email thread integrity for the recipient.

  • Auto-Clean/Archive
    Once sent, the email is marked as read in Gmail so it drops off the dashboard on the next run.

How It Works

Lane 1: Draft Generator & UI Deployment

  1. Trigger: Set to run manually (or scheduled on a cron job).
  2. Fetch Emails: Pulls unread messages from your Gmail inbox.
  3. Filter: Discards standard no-reply and notification addresses.
  4. AI Generation: OpenAI analyzes the email text and subject line to write a suggested reply.
  5. Build Dashboard: A Code node merges the dataset into a premium HTML template.
  6. Upsert Page: The CustomJS node hosts the generated HTML instantly.

Lane 2: Callback Handler & Dispatcher

  1. Webhook Trigger: Listens for the POST request containing the approved/edited text.
  2. Extract Data: Normalizes the payload structure.
  3. Gmail Reply: Sends the reply threaded to the original message.
  4. Gmail Mark Read: Marks the email as read to update dashboard state.

🛠️ Setup & Configuration Guide

To deploy this workflow, complete the following setup steps:

1. Configure the base URL in the Dashboard

Open the Build Approval Page Code node. Locate line 22 (or the configuration section) and update the N8N_BASE_URL with your n8n instance's URL:

// ⚙️ CONFIGURE: Set your n8n instance base URL here.
const N8N_BASE_URL = "https://your-n8n-instance.com";