Frontly AI - The Best AI App Builder?

today we're going to be talking about what I consider to be the best AI app builder out there now for those of you who aren't familiar about this channel I'm not always pushing the latest AI features I tend to focus on where we can see the most value for our client projects by Saving Time and efficiencies through the use of AI now you might not have heard of this application before it's called front le. a it's based in Canada and it got its start on appsumo front L lets you build applications for your team using Google Sheets as a backend and now they offer super bases well which allows you to create a much more scalable backend and coming soon they're going to allow you to use air table as well hi I'm Dan Leman from Automation helpers.com and we help companies like yours get automated with portals apps and Integrations there's three main different applications that we're going to be talking about with AI the first is going to be the general onboarding or creation experience of your app the second is being able to design your own custom blocks with AI and the Third Way is creating your own custom actions with AI as well so let's start off by building new app and from here we're going to create with AI so let's start with a really highlevel example we're going to have it create a residential real estate listings page we'll press submit and from here it's going to determine which tables or spreadsheets that we need for our backend data in this case it's just a single table that we need of these listings on the next step it's going to determine what Fields it thinks we need and this is a pretty good start so for our listings we're going to have an address price number of beds baths square feet a listing date an agent name and a status here's what I really like about their AI features is that you can add feedback to this so instead of just putting in the prompt and it generates everything and you don't get the opportunity to give feedback or to influence it here we can simply add a new field we want to include let's call this one neighborhood next we'll generate some sample records and now you can see it actually generated this sample data on our behalf so we have our fields we have the table of our listings and it's put in some sample data so as we're building our app we can actually utilize that data in the app itself let's go on to our pages in our case this one's going to be pretty simple we're just going to have this single page of listings and for our page blocks it looks like it's going to create property listings a listings table and a listings map this sounds good to try and here you go we're previewing our app and what it recommends so it's got a map we've got some listings here in these cards and we have a listings table now would I use both of these probably not but this is pretty awesome that it could actually determine the blocks or components that we need on this page so let's go ahead and finalize this app so now you see we have two options we can actually preview this app or we can open the editor itself so let's go into the editor and I like the basic layout of this but I probably want something a little bit more visual for these individual cards that I have and so in order to do this we can use the second way of utilizing AI which is to create our own custom blocks now like many other no code tools when you add blocks you've got several different ones to choose from that are out of the box but you can also create your own custom blocks and this is what makes front so powerful so here we're going to actually create our own block and generate that block with AI I'm going to paste in a description here so we'll tell it to create a real estate listing block that's three columns wide and then we've got some other attributes here like the price and the beds and the baths and so let's go ahead and try this out this is something that I'm not writing any kind of technical language you don't need to be a developer to do it let's see what it spits out so let's check it out if I scroll down you can see we have this new Block it's a little bit more visual in nature with we've got a placeholder for an image we've got the price it's got all the pieces we've added we could probably add a description or something that would take up a little bit more room or maybe we'd want to try specifying the dimensions I'm not sure what that would do here we've got a little place where we added an icon for favoriting this so let's see if we can change that ourselves and let's search for something like a bookmark I like this so let's give that a try and then we could begin the process of layering this up to our data inside of Google Sheets now the really cool part about this is is if I like this component I'm like yeah I did the work of wiring this up and I've got my images and all the attributes that I need now I could save this as my own custom block I could simply go to more and then click save as custom block and we'll give it a name and a description and we'll save this so now let's say we were creating a brand new page or application we could click on new page and let's call this one my favorites and then instead of creating that block again from scratch I can just go to add blocks and start searching in for real estate and here we go we've got my real estate listing and I can pull that in so this is where I think friendly is getting way ahead of the curve there's a lot of no code applications and they come with very rigid structure in terms of here are the 10 blocks that you can choose from and then there's low code tools that are like sure bring in your react components but this is a no code way of creating your own composable blocks and I absolutely love it for our last AI use case together today with friendly I'm going to talk about how we can create our own custom actions using open AI and believe me I have seen dozens upon dozens of different rappers around chat GPT and while this effectively does the same thing we're able to actually take the outputs of what we're doing with open aai and map it to our web application and that's what makes it super powerful so let's preview this app together this is one that there's actually a template for already so let's test out this functionality together this is going to generate a blog post but this whole blog post generator and editor is an actual front Le app it's not a CMS for front Le this is just an app built in front l so let's go ahead and generate and you can see it generates a blog post for us both with a title as well as the actual body of that blog post and then if we want to we could open this in our editor and this is actually mapped in all the information we could make changes to it if we want save that and then publish it again but that's not the coolest part the really cool part is that we can wire this up how we want so we could have multiple different fields of information come back save that to our database and display it within our web application we're storing our data in Google Sheets right now so let's add a new column to this called Tags and then back and front L we're going to go to our data sources and we're going to refresh our data source and now it recognizes that fourth column then let's hop back in our generator and we can click on the generate button this is what we have the action actually attached to so if we go into more we can check out this submit action and this is a custom action that we've created you can see that we can actually add multiple different steps if we select the step type you can see there's a number of different navigational ones we can update our local state we can add different delays we can refresh the front end there's a lot of really powerful stuff here that we don't see in a lot of other no code application Builders so the first step that we have is our open AI request and you can see that it's got the prompt but this is the cool part it's where we have the response object Fields so if we added this new field here and we called it tags and I'm going to tell it to give me a comma separated list of topics for this post then in the next step we'll write this data into Google Sheets you can see we're already doing this with our topic title body and then now we have tags added as well and then we'll update our local state and we'll have that point to our tags as well so let's go ahead and modify the preview for this and we'll just change a t title and just for this example We'll add a hyphen here and we'll use our local state and we'll use those tags and we'll insert this now let's preview our app again we'll input a topic and press generate and now you can see it's created our blog post again here we have the title and it's generated this series of tags now blog posts and tags that might not be of interest to you but it's this kind of functionality that lets you build your own AI web application because you're able to take different inputs pass it into open Ai and then take that information back save it to a database update something show it to users on the screen and that's what makes this wrapper of open AI so much more powerful than many other implementations that I've seen across different web application Builders I hope this has been helpful to see just how powerful of a tool friendly is for building your web applications with AI if you have any questions about your own automations or applications don't hesitate to reach out to our team at automation helpers.com where we're offering free 30-minute consultations [Music]

Channel: Dan Leeman

Views: 4,377

Keywords: frontly, frontly review, frontly ai, frontly appsumo, ai app builder, ai app generator

Id: GVH0p7YCigI

Length: 8min 16sec (496 seconds)

Published: Mon Jun 10 2024