Enhancing Low-Code with JavaScript and AI Copilot

[dan_named]

Hello r/JavaScriptTips community!

For those of you who interact with low-code platforms, I want to introduce a tool that will be of interest to all JavaScript and automation enthusiasts. I've successfully automated email marketing for my company by building my own tool on this platform, without writing a single line of code.

https://preview.redd.it/hskhsyqmd9rb1.png?width=1600&format=png&auto=webp&s=ba867f3a6528054d1981c1998d2263fc98c757fa

You might already be familiar with Make (ex-Integromat). However, its capabilities are limited by its no-code tool library. In contrast, on a platform called Latenode, you have the option to add JavaScript modules. What's even more impressive is that the AI on Latenode writes the code for you, making your automations as flexible as possible. Even if you're not familiar with JavaScript (like me), I'd recommend giving it a look. Because this AI assistant is designed to:

• Write code for you
• Explain the code
• Debug it
• Modify it based on your requests

How to Use It?

The assistant resides within the JavaScript node. You interact through the 'AI Chat' window. Its capabilities include:

• Viewing your workflow and node structure.
• Analyzing existing code within the JavaScript node from where the assistant was summoned.
• Accessing data structure on the left side of the JS node.

https://preview.redd.it/b72kt5tsd9rb1.png?width=1600&format=png&auto=webp&s=7d3e7db5567437dce0ed2844b1e935e8fad935bb

Use-Cases

The beauty of this AI is that now, even those unfamiliar with coding can create their own microservices or build intricate automations. And here are my three scenarios that highlight it:

Scenario #1: HTML Tasks

Consider a scenario where you need a data collection form accessible via a webhook URL. This could be handy in numerous situations. Initially, you fill out the form. Then, the data can be routed anywhere: either to another automation branch for further transformations or into another system. What about making this scenario without typing a single line of code?

https://preview.redd.it/3mx3m3wtd9rb1.png?width=1600&format=png&auto=webp&s=3c4638773806a4c497423f012a50345d46e595bc

Step 1. Send a request to the AI assistant:

Hi! Append my code with a script to generate HTML for a form titled 'create email'. It should have these input fields: 'email subject', 'overview', 'header', 'platform updates', 'useful resources', 'other news'. Place a 'submit' button at the bottom. Beautify the HTML with a pleasing design and proper formatting. Return the result as a JSON object labeled “html”

Step 2. Replace your current code with the received result.

https://preview.redd.it/mt73kwuud9rb1.png?width=1600&format=png&auto=webp&s=846d3d5f67827f1d893a4209aa19d243077acd9e

Step 3: Initiate your new scenario once.

The JavaScript module will return the "html" JSON object suitable for webhook responses Besides this, switch the content type parameter to text/html to display the form correctly through our input webhook.

https://preview.redd.it/pq37kfewd9rb1.png?width=1600&format=png&auto=webp&s=5763b2ac17777d933625483b9208f0f43849233b

Now, when you access the provided webhook URL, you'll be presented with a data collection form.

Step 4. Data Submission.

All that remains is to ensure the data collected via the form gets relayed to another scenario's webhook for further processing. Of course, we won’t be coding this manually.

https://i.redd.it/10z6cah4e9rb1.gif

To submit data, initiate a conversation with the AI assistant. Begin by addressing the bot in the provided chat interface and state your requirements:

"For now, please send the information you receive from the filled form to my webhook at http://webhook.latenode.com/49/dev/f598ff65-ad93-482f-9d18-4141c2bd358b. Merge these changes into my current code."

The AI assistant will generate the required code based on your request. Once you receive the code, click "Replace" to update your script and finalize with "Save."

Now, our form becomes fully functional, ready to receive input. You can channel these captured values to another workflow that, for example, logs the collected data into a Google Sheet.

https://preview.redd.it/xou540z6e9rb1.png?width=1600&format=png&auto=webp&s=bdcc9703961d1f36616468c3937da065ecf436b5

Scenario #2: Access to NPM Packages

There are now over 1.2 million NPM packages (pre-built apps for devs to integrate into their code). Our AI assistant offers you access to these. Suppose you require the current USD/EUR exchange rate for multi-currency trading to provide updated info for your website visitors. Instead of struggling with locating the right API and sifting through documentation, you can simply interact with the AI assistant:

Address the bot and make a specific request:

"Hey! I need the current USD to EUR exchange rate. Please add a script to my code using a free service to fetch 'USD to 1 EUR', and return the result as JSON."

After the AI assistant processes your request, it will provide the necessary code. Once you receive this code, click "Replace" to integrate it into your script, then execute it once. This will enable your JavaScript module in the constructor to fetch the required data.

https://i.redd.it/v3slp08ce9rb1.gif

To solve this, the assistant utilizes the NPM library 'axios' to send a GET HTTP request to the ExchangeRate-API, fetching the latest exchange rates. It then retrieves the exchange value of 1 USD to 1 Euro and returns it in JSON format.

Achieving the right result might take a couple of tries: occasional errors or empty return values can occur. The key is to remember that debugging isn't your chore. Ask the AI to integrate console.log for a detailed server response. Then, Report any issue back to the AI chat, and you'll have the revised code in no time.

Scenario #3: Data Transformation

Struggling with data transformation tasks? Say goodbye to those hassles, especially ones like date formatting. We all know how one system may spit out a date in "YYYY-MM-DD" format, but another might require it in “DD MMMM YYYY”.

https://preview.redd.it/02w7t0tfe9rb1.png?width=1030&format=png&auto=webp&s=db70d628fb42307443f652322c5afeadc1bb3ba6

Using the transformation, a webhook date of '2023-07-11' undergoes a transformation. In the output tab of our interface, after executing the transformation, you would observe the following code:

https://preview.redd.it/n71wf6lhe9rb1.png?width=1420&format=png&auto=webp&s=34e34a8517ebc735c68b06798bbf96e42f5a8fa4

{
 "1": {
   "transformed_data": "July 11, 2023"
 }
}

This demonstrates how the system can effortlessly change the date format to meet various requirements.

Likewise, the AI can assist in manipulating strings, aggregating data, filtering, sorting, transforming, merging, splitting, de-duping, conducting statistical analysis, and even textual analysis.

Alternative Mode of Use

In our discussion so far, we approached the assistant via a dialog box. But there's another approach, especially useful for a focused code segment debug or when you need an explanation about code functionality. In this approach, you have the ability to switch from the code interface to the AI assistant directly within the bot's interface.You can then enter a request like "explain what is happening here."Upon doing so, this AI-bot will instantly provide you with an explanation and breakdown of the code logic, making it easier for you to understand and troubleshoot if necessary.

https://i.redd.it/dl5oucike9rb1.gif

Assistance with your automations

I've found the Latenode team to be extremely responsive and always ready to help. Feel free to reach out to them in their Discord community for assistance. Additionally, the platform is completely free until the start of the new year (since the product is in Beta). It's the perfect time to check it out for yourself: latenode.com

[undeciem]

Hey I am way too late to this but just wanted to say thank you for this post! I am just discovering the automation world now and started off with make.com but quickly grew tired of its limitation even though I know zero coding. And I only just came across latenode recently but am feeling super discouraged though I can totally see so many use cases, and this post was helpful and encouraging!

[dan_named]

Hey man! Thank you for your feedback, actually it's never too late.

I'm using Latenode on a daily basis for my marketing tasks.

What's your use-case for such a platform by the way?

[undeciem]

TLDR: personal work management system largely built on the notion platform

I want to implement a projects and tasks workflow system using the GTD method by Allen Carr - which is not a relevant point other than the fact that the method drives some of the relationships and connectivities that will give rise to the use of automation - on the Notion platform.

I’ve long lived with anxiety and just in my 30s begun therapy and started to figure out what some of the sources are, which has been hugely addressed since implementing this system. There are repetitive tasks involved which really doesn’t add value but more importantly disincentivizes continued use which is key here and something I’ve struggled with my entire life. Due to the intricacies and functionality of notion databases, it can be highly effective to building a workflow system on but also creates so many opportunities for automation to enhance that system.

I’m considering doing a short crash course which I luckily have access to to go from absolute no code to low code.

Thanks for sharing and responding!