You can build a wide range of use cases using the same logic used for creating the client portal. The core idea is: if you have a Google Sheet containing data for multiple clients, you can filter it so that each client only sees their own data.

For example:

1. Create a website where each client can track their GSTR and TDS filing status
2. Show the date their accountant requested data and the date the client submitted it
3. Build a portal that logs all client communication for mutual reference
4. Use the webhook feature to enable real-time actions, like uploading bank statements directly into Google Sheets

In this AI use case, we will learn how to use AI to automate client communication and build a client portal for balance reconciliation.

We’re going to cover three main features:

1. Auto-generate and email invoices and reminders from Google Sheets
2. Build a client portal using Loveable.dev where clients can view their live outstanding balances—fully synced with Google Sheets in real-time
3. Auto-email documents to clients directly from OneDrive using n8n

So, let’s start with feature 1 – Auto-generate and email invoices and reminders from Google Sheets

Let’s start by setting up your Google Sheet with columns like:

Invoice date, Client name, Service, Invoice number, Invoice amount, Amount received?, Invoice sent? and so on

Once your sheet is ready, send a prompt to ChatGPT asking it to generate the Google Apps Script code for our automation.

✅Google sheet Prompt

Give me a Google Apps Script that works with two Google Sheets:

One sheet named "Invoices" that contains the following columns:

Invoice date, Invoice number, Invoice amount, Client name, Service, Amount received?, 1st reminder, 2nd reminder, Invoice sent?, 1st reminder sent?, 2nd reminder sent?

Another sheet named "Client master" with columns:

Client name, Email

The script should do all of the following:

For each row in "Invoices" where "Invoice sent?" ≠ "Yes":

Create a PDF invoice using inline CSS styled for full A4 page.

Include header with "XYZ & ASSOCIATES", address, phone.

Right side should show "INVOICE" label with invoice number and date.

Add "Billed To" section with client name.

A table of "Particulars" with service and amount, and a total row.

A footer saying thank you.

Send this PDF to the client email (looked up from "Client master" by matching client name).

Subject of email: Invoice [Invoice Number] from XYZ & ASSOCIATES.

Body: short message like "Hi, please find your invoice attached. Thank you!"

Mark "Invoice sent?" as "Yes".

For rows where "Amount received?" ≠ "Yes":

If days since Invoice date ≥ value in "1st reminder" and "1st reminder sent?" ≠ "Yes", send reminder email, and mark it "Yes".

Same for "2nd reminder" and "2nd reminder sent?"

Reminder email should include: client name, invoice number, date, service, amount, and polite reminder message.

Subjects: 1st Reminder: Invoice [Invoice Number] Pending, 2nd Reminder: Invoice [Invoice Number] Still Pending.

Once you get the code:

1. Open your Google Sheet
2. Click on Extensions → Apps Script
3. Paste the code
4. Click Run

Note : - When you open the Apps Script feature for the first time, you’ll need to click on a few "Allow access" buttons.

Now, let’s move on to the second feature — building a website using Loveable.dev where customers can view their outstanding balances.

We are using Loveable.dev instead of ChatGPT for this part because it is capable of generating large, complex codes with fewer errors, although it may take more time. Additionally, it offers automatic website deployment without the need for external platforms like GitHub or Netlify.

So, here is the prompt I’ll be sending to Loveable

✅ Prompt to send to Loveable

Build a clean and responsive Client Portal interface where the user enters a Client Code and views their transaction statement.

When the form is submitted, make a POST request to this URL:

https://ihsan7777.app.n8n.cloud/webhook-test/get-client-data

The request body should be JSON like this:

{

"client_code": "TTA"

}

✅ The API will return a JSON response with a transactions array.

Each transaction object will have the following case-sensitive keys:

1. date (string in YYYY-MM-DD format)
2. type ("Invoice" or "Receipt")
3. amount (number)
4. invoice_number (string)
5. balance (number)

✅ Display the data in a clean, sortable table:

1. Sort the rows by date ascending
2. Highlight Invoice rows in red
3. Highlight Receipt rows in green
4. Show Total Balance at the bottom
5. Below the table, display Account Status:
6. If balance > 0 → show "Overdue"
7. Else → show "Clear"

While Loveable is generating the website, lets setup the n8n automation that sends data to the website on request. This is what the workflow diagram will look like (detailed steps are given below)

1. First, Create a Webhook Node, this will act as trigger node
2. Set the HTTP method to POST.
3. This is because when a client logs in through the website, their login data will be sent to this webhook in order to fetch and display their transaction data.
4. Specify the path — ensure it matches the one used in the Loveable prompt.
5. Under the “Respond” option, choose “Respond with ‘Respond to Webhook’ node”, since we’ll be sending the client’s data back as a response.
6. Now, add Google Sheets Nodes
7. Use two Google Sheets nodes: one for Invoices and one for Receipts, to bring the data from Invoice sheet and receipts sheet.
8. Next, Add a Merge Node
9. This node will combine the data from the webhook and both Google Sheets.
10. Now, connect it to a Code Node
11. Here’s the prompt to send to ChatGPT to generate the code for the Code node. The prompt is self-explanatory — it’s just me explaining the purpose to ChatGPT.

✅ Prompt to send to ChatGPT to generate Code node logic

Give me the full working JavaScript code for the Code node in n8n.

Workflow structure:

1. A webhook receives client_code in the body (like { "client_code": "TTA" })
2. Two Google Sheets are triggered by that webhook:
3. One contains Invoices
4. One contains Receipts
5. All three branches (Webhook, Invoices, Receipts) are merged using a Merge node in Append mode
6. The Code node receives this combined data

What the Code node should do:

1. Use $input.all() to access everything
2. Loop through the merged data
3. Extract the client_code from the webhook data (data.body.client_code)
4. Identify each item as either an Invoice (if it has "Invoice date") or a Receipt (if it has "Receipt date")
5. Parse Receipt date if it’s in dd/mm/yy format
6. Add a type field for each entry ("Invoice" or "Receipt")
7. Filter the data to only include entries matching the client_code
8. Combine all matching entries
9. Sort by date (ascending)
10. Calculate a running balance:
11. Invoices add to balance
12. Receipts subtract from balance
13. Return an array of:
14. date (in YYYY-MM-DD)
15. type ("Invoice" or "Receipt")
16. amount
17. invoice_number
18. balance

Final return format:

return [{ json: { transactions } }];

Connect to the Respond to Webhook Node, so that the client receives their data as a response on the website. Select JSON in the option and under it type {{$json}}. Select response code under option (it will be auto assigned to 200).

1. Your website should be ready by now. Enter one of the client codes (from your Invoice or Receipt sheet), then go to the Google Sheets node for Invoices. Click on "Execute Previous Workflow", and add a filter — under Columns, select Client code as your filter. Once the previous workflow is executed, you’ll see Client code appear on the left. Drag and drop it into the Value field just below the Columns field.
2. Do the same for the Receipts node as well. Then close the Google Sheets node and click "Execute Workflow" (at the bottom of the entire workflow). Finally, refresh your Loveable website, enter the client code, and you’ll see the n8n workflow being executed.
3. 
   

We can make this more advanced by adding a feature to download the data in PDF or Excel

Now, I’ll give a brief overview of Feature 3. In n8n, create a workflow like the one shown here. What this workflow does is: when you drop a file into your OneDrive folder—with the client’s unique code included in the filename—it checks the Google Sheet for the corresponding client name and email, and automatically sends the file to the client via email. You can copy this workflow to build something similar for your own use case.

Below you can see images of content in each node in feature 2

Below you can see images of content in each node in feature 3

Now, lets move to the third feature - Build a website using Loveable.dev where customers can view their outstanding balances. The reason why we are not using chatgpt and instead using loveable.dev for creating code is that it can create lengthy codes for complex applications with less chances of error, though it takes more time. Also it can auto deploy the website by itself without the use of any external thing like github or Netlify.

Here is the prompt ill be sending to loveable now. The bottom part of the prompt is all about the format I want my output in. I will explain this top part of the prompt at the end. Its more convienent that way. Lets paste the prompt now.

Okay so now while loveable creates the website for us, lets work on the n8n automation that sends the data to our website when we request.

First create a webhook node. Select HTTP method as POST because when we enter the client login in the website we are basically posting the client login here so that we can display the clients data for the client on website. Here you will enter the path, this is to the same as in the prompt. This link will be the same here and in prompt. Select in respind option “Using respond to webhook node” because we will send the clients data as the response. Next connect the google sheets of ivoices and receipts, using google sheet node.

Next add a merge node, that merges the webhook and both the google sheets. Next add a code node, the code in this code node will be generated by chatgpt. Heres the prompt to send to chatgpt to get the code for code node. The prompt is self explanatory, its basically me explaining chatgpt my purpose. Next connect it to respond to webhook node.Our website is ready here, lets enter one of the client codes. As you can see the workflow is being executed. And the output is here. You can make it more advanced by stating in prompt to allow download in pdf or excel format, just like how banks lets us download bank statement, but here ive kept it simple just to be able to explain in short time.

Now, let’s move on to the third feature — building a website using Loveable.dev where customers can view their outstanding balances.

We are using Loveable.dev instead of ChatGPT for this part because it is capable of generating large, complex codes with fewer errors, although it may take more time. Additionally, it offers automatic website deployment without the need for external platforms like GitHub or Netlify.

So, here is the prompt I’ll be sending to Loveable. In the bottom section of the prompt I’ve specified the format in which I want the output. I’ll explain the top part of the prompt later — it’s more convenient that way.

Let’s paste the prompt now.

While Loveable is generating the website, lets setup the n8n automation that sends data to the website on request.

1. First, Create a Webhook Node, this will act as trigger node
2. Set the HTTP method to POST.
3. This is because when a client logs in through the website, their login data will be sent to this webhook in order to fetch and display their transaction data.
4. Specify the path — ensure it matches the one used in the Loveable prompt.
5. Under the “Respond” option, choose “Respond with ‘Respond to Webhook’ node”, since we’ll be sending the client’s data back as a response.
6. Now, add Google Sheets Nodes
7. Use two Google Sheets nodes: one for Invoices and one for Receipts, to bring the data from Invoice sheet and receipts sheet.
8. Next, Add a Merge Node
9. This node will combine the data from the webhook and both Google Sheets.
10. Now, connect it to a Code Node
11. Here’s the prompt to send to ChatGPT to generate the code for the Code node. The prompt is self-explanatory — it’s just me explaining the purpose to ChatGPT.
12. Connect to the Respond to Webhook Node, so that the client receives their data as a response on the website.

So, the website is ready now, let’s test it by entering a sample client code. You can see the workflow is being executed now. The client’s balance is being displayed here accordingly. It shows the invoices, receipts and the balances.

We can make this more advanced by adding a feature to download the data in PDF or Excel format, similar to how banks provide statements. I’ve kept it simple for this presentation, as we’re short on time. You can even use a webhook trigger to have bank statements entered into the Google Sheet in real time. I don’t think we’ll have time to cover everything today, but if I make it to the next round, this is one of the topics I’d like to discuss on. So, I’ll provide a brief conclusion now.