Bolt.new Masterclass: How To Build AI Apps | STEP BY STEP

bold. new I am so excited for this tutorial you can find this entire 42 Page guide with all the basics why AI agencies should be using it and AI value assessment tool and all the stuff that we are building today all the prompts all the research prompts all the make scenarios that we going to to be using everything is available in this guide and check the first link below it's free you can download this from my free school and what are we building we will start off with AI value assessment tool for small businesses where

you can enter your name and email and this is captured and sent into uh whichever email list you use for me it is being sent to convert get and once you in you can uh enter what your budget current budget is for customer service you will get three different sources that are backing this uh data backing our claims what uh potential annual savings we are generating and we have everything is working as uh working perfectly and it will show you what what you'd be saving every year potential savings profits um Revenue uh loss money whatever

a receptionist will ask you how many calls do you receive per month when we say th annual potential savings is 25,000 so there is a lot of I mean we can toggle dark mode and light mode on you can visit my website which is um no actual website I and next we have ai content generator again you can do uh dark mode light mode toggle on and uh you can log in this is proper authentication we are using super base for authentication and database once you log in you will see something like this where what

any content that you generate you just need to give an idea for the title and it will generate a LinkedIn post for you where you can add this post as needed and save it for uh further review we can build additional automations around this but this is to teach you both authentication and database again you can see the light and dark mode in action so next up we have a fact Checker article generator that is integrated with uh make.com and a table so anytime you have a URL that you wanted to generate an article off

of or if you have an idea that you want to generate an article off of uh you are gening these really uh amazing looking articles unpacking Google's uh 2024 AI updates and as you can see the title uh the image being ated by uh flux image generator so really high quality and doesn't look like they are AI generated at all so you can integrate both air table and make and create this beautiful looking front end and not just that we uh talk about lot of I mean the automations that are powering these this is what

it's doing the lead capture and this is for LinkedIn post generation and this huge thing here is generating all your images and fact checked articles based on uh whether you sent a URL or if it's an idea it is um it changes based on what you uh chose in the beginning and not just that we talk about how to embed and custom style voice flow chat boards for example and this is what we came up with I mean full page uh covering entire viewport to viewport with to of with the chatbot where we talk about

discuss how we can uh leverage this documentation to vapi and I I show you how to a better way to deploy your uh projects not from directly from uh both we instead of using the deploy button we do it slightly differently so that we have access to repository so that we can then go in make minor changes as needed so all in all this is a completely um I mean this is a complete tutorial and I'm really excited uh for you bold. new is one of my most favorite tools of 2024 say that because they

have launched 3 weeks ago and I have been using it almost every single day at my AI agency and it has been a game changer to say the least you might be wondering we'll be using tools like make.com aable or vapy voice flow how does Full Stop applications fit in is one of the questions I get from my community when I say uh when I talk about bold. new but so far in the past 3 weeks I have worked and and delivered three projects using bold. new and the feedback that I received is I mean

it's excellent they love it because right now we can build custom front ends for our make scenarios and all of a sudden my clients who have been using air table for most of their projects can now have this beautiful UI that they can interact with their there are buttons they can click there are fields that they can interact with and see what they have generated all of this has been uh really helpful in you know providing that premium experience and in this video I am going to show you how to do how to build the

same tools that I have built over these past 3 weeks and as you can see this is a really long course and you can we will discuss everything from what's new how AI agencies can leverage this uh the basics the pre three projects that I've been talking about AI value assessment to uh content generation AI app and how I'm integrating this uh with make an air table and how to deploy this and Host this using your own custom domains how to uh create authentication mechanisms for these apps databases we will see all of that no

code we we even talk about uh vapy improvements voice flow improvements and a lot of tip tips and tricks where I have spent millions of tokens on on um learning some of these lessons where you can learn from just if you don't watch anything if you can just watch tips and tricks section you can take a lot out of this master class so I would suggest this is a really long course as you can see but each section that we are going to discuss will have timestamps so feel free to refer or go to any

section that you are interested in and want to work on this doesn't have to be step by step it definitely helps understanding why this is important and the basics of it but this is more of an art than science so this is going to be different from my other courses that I did on voice flow vapy so I'm planning to share everything that I am using in terms of prompts uh the repositories that I deploy everything without further Ado let's get started first we will discuss what's new you can go to their website you can

log in it's really straightforward and if you don't want to pay for Bol subscription fee you can even uh locally host it or host it on cloud because this is an OP source project p. new is open source and you can find the repo here if I cover this it would be too long I'm sure other people have tutorials on how their uh using and deploying both locally feel free to refer those but if you want me to cover that aspect as well in my next video uh make sure you comment on that and you

can join their Discord also I'm already a m the team has been uh conducting office hours every other week so they have uh It's really informative any questions that you have uh you can get support on disc God and they are constantly improving it's only 3 weeks and they have been doing excellent job why should you care and if you want to take one line from this I would say idea to prototype or MVP can be completed in hours instead of days this is what I would take from this section because I have been in

uh tech for over 15 years um and I know what the process from idea to prototype I idea to MVP looks like you don't even have to go back to 15 years you can just 4 years ago in 2020 if you look at the average time if a simple clickable prototype takes a few days a basic functional prototype takes 3 to 5 days for minimal features and initial app prototype or MVP takes 4 to 6 months that was in 2020 Just 4 years ago but today with tools like bold. new or cursor v0 a combination

of these Cloud we can minimize this into I mean a simple clickable prototypes and within minutes under one hour a basic functional prototype 3 to 5 hours and initial app prototype 4 to 6 days for a complete working version and that is what makes this so powerful I know this because I come from this background I got my first job as a software developer 12 years ago and I have been the there were days that I spent on building some of these simple applications that claw or bolt is taking minutes as opposed to days so

this is by no means an exaggeration it will only get better from here so it's really important even if you don't have a Dev background it is important to learn this today and what better way if you already have an AI agency start implementing this on top of what you have what you have already built on make already built on a table and we will see that uh in this video and I would say this is a game changer for AI agencies using no code tools it seamlessly integrates with your existing text stack enhancing your

capabilities and opening up new possibilities and build an AI SAS we can create beautiful AI powered front ends for your IR table databases we show that in content generation AI app and make.com integration we do talk about make Integrations in two of these tools I plan to talk about that in AI value assessment tool as well um so allowing for develop custom uis for make.com scenarios allowing for more complex and Visually appealing Automation workflows and zapier augmentation we can it it can also be make.com it can be a table so any tool that you use

at your AI agency can be integrated into Bol and this is this seamlessly integrates uh into your workflows current workflows and we will see how we can customize the you know CSS and The Styling instead of your routine chatbot look we can embed that in a page to make it more like a web app style application and we talk about how we can use this for vapy also uh and do custom embeds on um websites so we unlock new possibilities with bolt your a AI agency can create custom AI powered solutions that seamlessly integrate with

your existing nood stack we already covered that and we develop full stack applications without leaving your familiar no code environment this is huge guys because if you want to build a custom front end for your existing workflows that takes days if not weeks and I was able to uh deliver a client project a custom friend end for a me scenario under 3 hours and I charged 1,000 over what I uh usually charge for my make scenarios or uh some workflow automation so imagine this 3 hours of work is equal to 1,000 and I only have

to do this once and I can just Fork this and redeploy this over and over because that is uh something reusable which you would see uh in coming sections let's talk about basics of and AI driven development so it's all about prompting you can just use your words you can prompt run edit and deploy full stack web apps that's what their website says and you can and as you can see the you can start with your favorite text Tack and there are a ton of options here let's go back and you can generate modify and

optimize code just using prompts and you can rapidly prototype ideas without extensive coding knowledge uh iterate on designs and functionality with simple prompts you can tackle complex development tasks more efficiently and full stack capabilities and this is you don't have to download a software you everything is done on browser and it's uh installing all the backend stuff that you need all the repositories all all the uh packages dependencies it will do that in the back end in the background all you have to do is use your words all you have to do is prompting and

you can uh do API Integrations third party service Integrations and the kind of interfaces that you can um so in intuitive interface is um we are talking about bold where you you can have I mean it is almost like using chat GPD or um you can use natural language for most of these things and real time code preview and editing anything that you generate will be previewed so you know what you need to change uh in The Next Step seamless deployment all you need to do is click a button and it will be deployed although

I feel like it's not the right way to do it but you can indeed deploy it in one click and it's easy to share uh prototypes and demos with uh clients and there is Version Control and roll back options as well when a prompt that you used is not working or you're not satisfied with the generation you can go to previous one so this is mostly the basics and I'm sure we'll be discussing a lot of things once we start working on these tools let's start with AI value assessment tool as you can see at

the URL here I've been working on this for a while now almost I deployed this one month ago and initially I was planning to use uh cursor and VZ and clot to achieve this functionality where users will submit their email and then we will let them access say uh a tool where they can calculate what they are currently spending on you know let's go to this website and see okay we would ask them how much is your business spending on monthly customer service if they say 10,000 we would show them according to a fobes article

you would be potentially saving 6,600 and when they follow this fobes article they will see how Clara has implemented a chatbot that has helped um them you know uh save 2/3 of their customer service efforts so we I I was doing something similar to that for dental practice AI power chatbots virtual receptionist patient engagement and recall and appointment reminders that was a month ago and this is a a first version now we have I have made one for small businesses as well uh don't worry we this is just for demo we will actually build this

from scratch step by step so this is an AI value assessment tool for small business it says get your free AI audit we will see how to change this stuff from instead of saying get your free AI audit we will say start my assessment or a different call to action and of course you would be updating your own uh testimonials here so let me test this I have entered my name as money test and I used a dummy email where I click get my free AI audit and it says it opens all of this stuff

right so where did the email go is the question if we open my um convert kit and refresh yeah the Mone money test uh showed up here so this is um the newsletter service that I use this is where my email list is obviously you can integrate this uh with whichever tool you use and based on you know average customer service inquiries we if we say 150 and uh customer service budget this is the second version we came up with we show based on two inputs we show potential annual savings is $84,000 so we would

ask them a virtual receptionist average monthly call volume if they say uh 2,000 we would say typically 500 missed calls would be captured at an average $100 lead value we would be saving at least 50,000 or we would be I mean potential monthly Revenue gain when they Implement a virtual receptionist is huge so we do that for appointment setter on one click on boarding workflow automation because this is what we uh think is applies for a general AI agency so I was uh covering all of this so that you can just Fork the project and

use it for yourself if you feel like and when you click book your free AI audit right now it's showing this um MD screen but it's supposed to show you um a calendar embed where you where your user can book a call so that is the tool let let's begin um let's start from scratch on how to build this step by step first I you need to go to this um free guide um link will be available in the description down below and go to First prompt and this is what I have prepared for first

prompt don't wor I will show you to okay uh it's says let I think this is a better view what I'm doing in this first prompt is create an AI value assessment tool for AI agency let's create separate components for better organization and maintainability this is huge guys this has I mean if you look at my bolt usage uh this is a second account by the way and I have used over what 12 million tokens so far and and the other account is over uh 20 million tokens so all of this I could have saved

at least 5 million tokens if I was doing it from uh the beginning because this is I mean if you don't separate your app into components every time you need a simple change every time you prompt AI would start from scratch and rewrite the whole thing it is I mean it takes a lot of tokens and a lot of generation so when we start creating separate components we will if you are only updating header if you are only updating footer or if you're only updating one tool component this is huge so you won't appreciate unless

you have used Bol uh for a while but learn from your mistakes first B should be a form to collect the user name and email this is important I am attaching the image that I'm showing here and I want you to I want this to be a a learning experience because if I don't do that and attach the one I say provided image while adapting it for small business inter of dentist and collecting name addition to email I am purposefully showing it on older version and making a lot of changes so that you can attach

your own stuff your own uh where you find inspiration from and this is how you'd be uh tweaking it so the second page should display the tool it has five sections one below the other uh customer service AI agent ver virtual receptionist AI Apartment C all all the stuff each section should have a logo second page see GDA after five sections is book a free AI audit once you click once clicked should open a large Square popup with this embed code and you get your embed code from whichever tool you use whether you're using calendly

go high LEL cal.com uh tidy Cal like me you can go to your booking page and click on embed on website and you should be able able to copy this code and that is what I have used here the embed code and each section requires one input from the user and displays the value that would be generated obviously this is changed this will be changed um based on okay does it make sense to add two columns for example for onboarding automation it does make sense to add two so for now we say one uh please

include a header and a footer um so yeah and a logo AI growth creators and call to action visit website which will open the link uh design should feature a futuristic purple theme incorporate ingredient buttons server animations for all buttons and cards additionally please include a dark and light mode toggle switch so usually when people were if people are using a simple prompt they would use a prompt enhancer I would do but this is a really detailed prompt and a really long prompt I didn't want to enhance it any further but you can uh you

you can enhance your prompt further by clicking this button so let's generate it already started as you can see it started with app. TX TSX usually best practice it should have created multiple uh into let's break this down into well organized components gives me hope but I don't see any additional components okay nice it's doing that header footer and hopefully it will create a component for AI value assessment tool and it will uh it will have to create an additional component for uh you you know submission form yes welcome form that is good really good

now there are multiple uh newsletter platforms that people use I don't know where your email list is hosted some people use a convert kit like myself most people that I've seen use um beehive and active campaign is a good one mail chimp so that is the next step in this uh notes okay let's let's not even go there uh for now uh we have a troubleshooting section because what I have seen happen is uh the first page should be formed collected oh okay I see what went wrong there okay I forgot to add the attachment

which I was showing you here so that it will prepare um an image for us uh prepare the front end or the first page similar to what we have here but no worries it will still make something yeah this is nice we have a dark dark and light toggle is not working okay visit website is working now we have name and email and start assessment right now what happens is when you enter your email and password nothing happens it's just validating and it's taking you to a different screen and let's see how many yeah this

is good now I like the layout I like the uh the little animation that's going on now we can say um just copy the troubleshooting mod the first page should be a form to collect the username and email the this is important please email uh please maintain the purple theme so in the attachment okay I have added the image the same image that you have access to and I said and I used this prompt and this should update uh the first page to to really use the exact stuff that we are using and the whether

that's chatboard Voice Assistant workflow automations and also it should replace the word uh dental practice with small business and it in addition to uh capturing the name field it will also need um email address that is good okay yeah I I like this there is no testimonial section but um I don't worry about it too much I would now say so dark light toggle is not working I will enhance the prompt this is good I will copy this and add this prompt to the troubleshooting section while um bolt does its thing perfect and let's go

back to Bol and see what's happening nice uh it should have fixed it it did very good I am using my emails so the next step that this looks really good right and what happens when we book an appointment it nothing is showing up because bold has a thing with embeds it would usually say uh tidy Cal refused to connect or something usually it should say that but I'm not sure why it's not showing because it might be because it is a popup since we are doing this inside a browser it's we are not um

actually using our local host natively um I'm not sure there is a thing which doesn't allow us to see the book um the embeds before deploying it we will see that once it's deployed let's Okay you remember how I came up with a lot of stats showing you okay when you click uh when you enter how many custom inquiries do you handle monthly when they say 100 uh we say 5,000 Harvard Review I yeahi can handle up to 80% of routine so it came up with sources but we don't know this to be accurate or

um AI virtual receptionist can save when we search when we search with search this with even this is a Google search or if we force bold to add sources for these links it will I mean most of this stuff is hallucinations and you will uh ruin your reputation if you just go by this I'm I'm sure you can double check this On Tools like perplexity to make sure it has generated the right stuff that's the lazy way but I will show you a bit of hard way but a really good way I use a tool

called uh perplexity for research not sure if you're familiar with perplexity but all of the research that I do for my um all of the research that I do for this tool or any kind of research I use perplexity okay I am looking for statistics so this this is the thread that I have used step by step on how to do this so I will start a new thread and I will show you how I can how you can do if you are if you do decide to do another industry a tool for another industry

like real estate we would go to again my free quotes guide and you can say something like this I'm looking for statistics on how much businesses can save on a customer support budget by using an AI chatboard I'd like no more than three sources please example Clara's chatbot I will turn on Pro search because that's where you get Max results a really good results so now perplexity is searching for stats that can help us and it comes up with business can achieve significant cost reduction so as you can see there are a lot of sources

it's it came up with six sources if I copy all of this to um copy all of this to bolt it would just be confusing so there were a lot of there was a lot of uh back and forth but I uh learned to say please please limit the sources to three pick the best three sources yeah something like that um because if we give more than three like I said it would be too confusing for um now we have this stat here and we have you need to use this prompt first before you go

forward because what I was doing initially for the first one is if you go to AI value assessment two prompts I I was asking please update the first two AI customer service AI agent ask for customer service budget and output potential savings calculate and display 70% of savings and I provided the citations and links so let's use this and see how it does right uh I mean we already have the stats it is three stats that we have here and if you look at perplex the three sources that it picked were um okay so Clara's

chatbot implementation um 30% saving monthly cost of chatbots um if we look at the prompt I have it also revolves around Clara 30% annual savings and there are there is one slight difference in this companies can reduce their cost per supp tiet uh so I will share both of the threads that I use in perplexity um the thread that I'm generating now the thread I generated when I made this prompt so that way you can have access to both and see the difference for yourself to in order to save time I'm not editing these prompts

but this is 80% similar to what perplexity is generating again and that is also a thing with a a I where nothing really uh repeats itself even if you use the same prompts the kind of outputs you would be getting at the end of it is really different so for that reason I'm actually providing you with the actual repo so you will have access to um what I have built the whole front end where you can just with a click of a button clone the whole project so no worries there but it is really exciting

to build this yourself especially when you are targeting a different Niche like in e-commerce or a real estate Plumbing HVAC this is huge in uh helping your end user visualize or make sense of how much valuable these Solutions are because all of a sudden now we are linking stats to who I mean they previously thought okay a chat bot what does a chat bot do or voice assistant what does a voice assistant do so let's say uh we say 10,000 and it actually calculated um 70% of it and it says okay Clara reduce support ticket

resolution time generating 40 million in annual profit so when it when we go to Source we have the source this is perfect um this is working as expected now let's go to perplexity and we have what we limit the sources for three pick the best three we have it now because we know that there are a lot of stats that are saying 60% 70% savings for you know U for customer service chat boards we know the stats but we don't know what value an AI virtual receptionist brings or an AI appointment set brings so for

that reason you need to rely on perplexity a lot I mean if you have someone that you can validate these uh let's say if I'm targeting dentist Niche I would talk I would have to talk to a dentist if you're researching about a real estate Niche you would probably need to uh speak to a real estate agent who to just to validate the idea everything is not true if we uh everything we read on the internet may not be true so I I would say I'll need a stat I'll need stats for our AI virtual

receptionist it is a voice agent that answers calls 247 no more missed calls are waiting we'll handle inbound downb seamlessly three sources and three excellent stats so that is the prompt that I'm going to use in my perplexity and we will compare the sources that we receive uh with bolt The Prompt that I have with bolt so it came up with three sources and when we look bold uh look at my doc I have here uh so I also have a followup prompt where we will uh need to ask a calculation before I go to

the prompt itself I want to show you this this is where uh what we discussed earlier comes in what is the value that is the question right I need to ask my users to enter a metric and calculate a value based on that data what would it be for example if the user enters their call volume or current Revenue we say they could potentially make an additional 25,000 uh please format your calculation in such a way that we take one you input from the user and display results so let's see what perplexity comes up with

and it came up with um it came up with this calculation where it will also show you um example calculation for example if your business receives 1,000 calls monthly 250 potentially missed calls can be captured monthly uh Revenue opportunity 18,000 this is something similar to what we have seen in that other tool as well so if we look at our um both first let's look at the sources it generated three sources is AI receptionist uh my AI frontes coin and uh D Zara so if we go to the second prompt AI virtual receptionist we can

see something similar ta Zara we have a a Reddit thing where okay we so if you look at the example if business th000 calls we would say uh 250 uh missed calls average $100 value per lead potential monthly uh additional revenue is about 25,000 I think um it is still following my previous thing but in this calculation if you look at uh this calculation here it is all so something similar but the only uh assumption that is different is average lead value is $75 is written in this calculation but in our calculation it was an

average lead value of 100 so it doesn't matter uh what what that is I will just use this prompt again like I said you can just copy the sources of your um generation what perplexity produced and remove that um replace this part with your stats your three stats and your own calculation example and then uh just copy it and um paste it in Bolt now we please update the second tool AI virtual receptionist and we um use it so while it is working on this which will uh take a bit of time if I uh

keep explaining as just a waste of time so let's see what is next in terms of um the research so we do something similar for uh let's not stop let's um right now we have about two um sections ready for ouri Value assessment tool now we have three more we have ai appointment setter we have ai powered workflow Automation and we have one click on boarding so I have research prompts for three where we will ask them now that it has done these calculations twice in a row okay it is ready now that uh it

has done calculations to twice in a row we can go ahead and use uh prompting see uh it's exactly 1,000 calls um potentially 250 lost um sorry missed calls at $100 average potential savings 25,000 and while we are doing that guys you can see if they say 1,000 BR potential annual savings is going up in real time so this is really good and now we do that for we I want to step by step go through all three first on perplexity and compare what uh the results were and then please find me three sources um

that highlight the value of an AI appointment setter focused on outbound calls or main selling point is our speed to lead we will contact every lead within 5 minutes of receiving it additionally I would like you to come up with a calculation similar to what we did uh previously regarding this value proposition so right now instead of asking it for three sources and asking it for a calculation now that it has done this calculation twice I will just go ahead and prompt give me three sources and um calculation also so this works surprisingly well because

it has um even though in the first iteration it has about nine sources it will minimize that and um only take stuff from three and yeah we have not just okay this is nice we are still um gaining these from Gaining in insights from each of these sources that is good and if you look at uh the sources here image building media Kalen uh service bill and if we go to our uh prompt for AI appointment seter we have a Harvard HVAC company and um something else so it is completely different from what we have

gotten but if we look at um the what the value is let's see what value prop it has come up with okay it says um monthly speed to the lead value calculator of where is the example calculation I don't see an example calculation so if we use this formula bolt will calculate how much um you know value it can be but I like I said I will share both of these perplexity threads with you so you can decide uh which source is better but for now I would be using the same or better yet let's

uh update this uh in a way that um no I I like these sources hwac uh there's a harbard stud that is um the this is good guys let me just use this instead uh but if we like the sources for uh the next ones next tools we would definitely update them as well so we have uh the prompt and now while it up updates I will copy the next perplexity prompt and then go to we are done with AI appointment set now can you find sources for I'm getting lazy as you can see can

you find sources for AI power bflow automations and provide an example calculation so easy straightforward as you can see it is still using updating assessment tool each time so this is why I said breaking up into components really helps and if it if we did not do that if we would have been updating starting everything from the Welcome form we would have been updating header footer this theme would be messed up so it's really important to divide the components right so appointment seter when we say uh 100 how many leads do you receive per month

potential annual savings is uh 17,000 because based on increasing conversion rate from 4% to 21% how many businesses do you know is reaching out to a customer in the first um 5 minutes if they at least the businesses that I spoke to if I ask them how much time you're taking they would tell me uh yeah 5 hours 10 hours 24 hours some people with pride they would say um but it's really important to get to that um lead in the first 5 minutes and that is uh that brings like I said like we read

in one of these uh sources it's 100 times more likely they would buy from you and that is not a small number now can you find sources uh for aod we already covered that we are looking at the sources which which is podium pulpstream Aion so what sources did I get so when I go to uh workflow automations I the sources that I got is um pulp stream I think uh this was there but um ble and lebay Huds it is okay um for this example I don't want to drag this any longer just copy

The Prompt that I had but it's just a matter of here are the key three statistics and I would calculate everything from you know all the calculations all the citations I would just um click on copy here and use I'll create a calculation focused on uh I I would say please use this calculation if you look at the prompt structure I'm not sure where it went wrong but uh the whole structure is messed up but usually it would give us the three stats first and then go into calculation um simple Roi calculator and the user

prompt is and currently month current monthly hour spent on manual all of this stuff right so it is really detailed that's why I really wanted to include the prompts that I used um step by step so that you can replicate this as much as uh possible so let's see what how it is updated while we wait for that I will go ahead and do the last one which is one click on boarding one click on boarding The Prompt itself because uh now we have one click onboarding which utilizes automation to reduce onboarding Time by 90%

um please gather sources and statistics to support this claim additionally um provide calculations of potential GED based on two user inputs I wanted to add two for this number of new clients added each month and salary of the person responsible for onboarding so that would clearly show them uh value right so we need to First do this in perplexity as always this is the final one yay uh we have as usual over 12 sources but they um they three best ones now um we have okay so we have these C calculations and I got something

similar to I just want to compare these stats one last time if you go to one click on boarding we have if we go to citations um okay um so this is where it gets interesting I had five sources but I like I said lazy by the end of it and I was using it as is um but I I'm sure the sources that I have in there will be uh covered at least uh three or two should be overlapped so I will let's test bold one last time for one click on boarding five oh

okay so one click on boarding is not something we updated how many hours per month do you spend on manual workflows let's say uh my staff spends 50 annual savings is this nice so one click onboarding is what uh needs to be updated and we are doing a two field capture for one click onboarding uh let's paste our prompt here uh let's see what happens when we have five sources this is good this is um coming up to a really good version that I can use in my actual uh workflows so we did a really

good job of segmenting everything and um yeah let's see we don't have anything in here anymore we already um we already got everything we need I will share this publicly sharable copy link I will paste this link in my uh perplexity thread so you will have access to my research my first research and my okay this is from the previous one I was using the exact uh prompts but still um AI it's not really super consistent um okay we have bolt should be done now we have this get my free AI audit and we ask

them how many clients you on board monthly let's say 20 and it's already generating um this okay uh if we say monthly salary is 5,000 potential annual savings is 130 um 5 that is good I don't really like how it's showing 1.999 but it is a simple fix and um let's not worry about that too much right now what about toggle to is working good AI growth creators we have our logo and when we book our free I audit there is a popup um I will make sure everything is working correctly 7,000 viral receptionist how

many calls monthly 100 uh 2,500 good how many leads do you receive per month yeah I just want to make sure if it's this something is super unrealistic because um if if it is it I mean I built one value assessment to First where I was not uh really going back and checking whether everything is working correctly but when by the time I deployed it AI appointment seter is showing some crazy uh million dooll um million dollar savings so it was so weird so always double check now we have to fix a couple of things

I really like this layout but I I was doing something different in my previous uh deployments when we go to this um as you can see one below the other but I like the view of you know the nothing shows when it's empty it only shows the sources when it's something is there and we have the source links and we have uh bookfree AI audit that this is good let's leave it at that now we need to do something about this right you have seen me integrate this with convert kit some people use go High

um some people use of course go high level some people use beehive some people use active campaign meal chimp uh so when I looked at all you need is is I will provide the links in the so I think that is the next step I have links here as well to uh integrate email capture for email capture I have added links for beehive active campaign and convert kit when you go to beehive you can see um you know create a subscript deson there is an endpoint there is you need your API key obviously you will

just uh copy this code and ask bold to say something along the lines of okay this is how you um do a post request for creating a subscription on beehive please take the name and email and send it to this so it would usually um name an email I believe is U required uh string so it it's really easy and straightforward all you need to do is copy this code uh and the headers are there it it will figure it out and it will ask you for an API key so that is for beehive uh

there is something similar for uh active campaign as well create a contact and this is what I'm using convert kit the problem with convert kit is app developer platform is in beta and V3 is our Legacy which is uh deprecated and V4 is only available to developer in our closed beta so there was no way for me to use these um API keys and try to do what what we are doing right now so I went ahead and uh used make.com to achieve that and I will uh show you how so let's head on over

to make.com and in make.com you will uh let me sign in if you don't have an account uh sign up uh if you do you just go to your account and you will um go to scenarios obviously I need to turn off my old one to create a new one create new scenario and we will uh start with web hook custom web hook I will add a web hook and I would say bolt email web hook save uh copy address to clipboard so right now it's doing its thing it's running trying to determine the data

structure so we go to our make and we replace this web hook URL with our web hook um web hook that you copied and you the form with name and email Fields should send the data to a web hug URL this and then submitted include validation and loading State let me go back copy it and go to bolt and paste it and when we use this prompt obviously you'll have to use your own web hook to make this work we will be able to send data directly once we click uh get get my free AI

audit we will then um trigger that I believe this will time out now I will wait on this page for 10 more seconds to see it shouldn't take this long wow uh let me stop this and retry should start ASAP okay perfect so welcome form component only this compon is being updated remember if you do not uh break this up uh break this app into components you would have updated everything starting from assessment section you would have updated header and footer and there is a pretty good chance that you will mess some of these things

up I know that because if you look at my history from the past 30 days that's what exactly uh I did so I will um use this again and let's go back and see I know I don't have to check these other tools because I can see the only thing that's updated is the welcome form so I will go back to make and it says successfully determined but I don't have any data yet it says it it only has the structure I want to sub one more time get my free AI audit and it should

yeah now I received money and uh name and email right so next module is depending on which app that you're using if you are using convertkit you go to convert kit uh to update a subscriber we say add a tag to subscriber to add a tag add a tag meaning you will add a subscriber to for tag ID I have created uh a new tag called lead magnet you can do so easily it is super straightforward you go to we have all the subscribers and I believe this is where the tags are and you can

just create tag here and once you create a tag you should be able to see that tag in Bol oh not Bol in make.com so it's if you don't see it you would just have to refresh this connection and creating your convert uh kit connection is let me show you how you do that and API secret you just need your API key uh to get your API key you will go to uh the subscribers and you will go to settings and here I don't want to blur my thing but developer API access and app creation

when you click that you would be able to see your keys so with that out of the way uh we have email email first name first name we map those fields and for um tags I select lead magnet and I click okay and I save it and I run once to test if it's working now I don't want to do this again because I already have my email in there I don't want to I want to use something different that is money bolt let's say money Bol uh get my free AI audit and that should

have worked I money and let's check our convert kit as well to make sure it um It's usually the first yes Monica to lead magnet tag is here we will call this bold lead capture and I it is so easy to do this for your for example if you're using active campaign let's say create or update a contact is the first one so we can um if you're using convertkit you can do that I don't have an uh active campaign don't have that I do have a beehive that I was using previously but not anymore

um in beehive you can either create a subscriber or or there is also an add tag to subscriber like we do uh here with um there is an add tag to a subscriber also for beehive and it's the same way for uh never mind but you can still use this creat a subscriber um yeah any email you use you can do that for if you want to use this as uh your example I don't think I have any API keys in here but um yeah I will export this blueprint and I will um upload this

to a Google Drive let me do that right now yes you can download this here or my uh school so yeah um with that okay now we have a working version where you submit your name and email you will um you have this Dark Knight mode uh once you submit your email and password you will be able to interact with the tool now if we have any um adjustments that you need to do in terms of Okay add how animations to all of the cards or if you want to do simple edits but I will

show you how to edit these um buttons basically so when you go to this um this is in the welcome form right we go to welcome form TSX and in the button section we uh we can see get your free AI audit I can leave that for um the title but I want to change the button call to action where do we find that okay this is H2 H2 meaning um The Heading um it should be around here get my free AI audit I would say I will save this and that should update the preview

as well get my AI assessment so that is how you would update um the code for uh minor things so there is a kind of if you look at the deployment section in the guide there is a lazy way to do it once you hit deploy it will I will show both of them uh but one after the other so let's do the lazy way first um you click deploy and you deploy this application and well taking a while so while it deploys I would like to show you um what the Hardway is not the

Hardway not hard at all but it's so it makes us life makes our life so easier uh you can first you need to open stack PL okay I don't want to go over this in this guide here but I will however um stop this for some reason it is taking a while I'll retry yeah it's working uh now while it is being deployed to netlify I will show you why it's a bad idea um for one of two reasons one if we were to make changes after deployment we have to come to bolt and we

have to redeploy the whole thing for Simplest edits let's say you want to change your web hook um and for you can follow this and you will see the uh full you know I will have to turn off my bold email so that I am not sending these um all scenarios bold email bold lead capture it as off so we um go here yeah get assessment and it is opening um dark light dark light toggle is working so when we click book free AI audit it is not working and there is a claim URL also

when you click on this claim URL you will uh there will be a popup add projects to netlify dashboard I will do that and this is what we got right so so when there is no way to enable visual editor visual editor meaning if you want to edit something um you know edit something that is a minor text or something if visual editor lets you edit content right inside the site preview and syncs the content to your content source so this is a really good feature to have and if you look at uh the site

details we it doesn't have any repository it doesn't have um you know a place to place for us to go somewhere and if you look at uh deploys um it is already deployed and no way to um edit our stuff anywhere it's just sitting that we can link our own uh domain uh for example we can add a domain and we can say um I already have a domain link dopt here so in testing in deployment and um deployment section I will go in depth on how to do this but for now bear with me

I will say um test. growth creators. XYZ um is one of my emails it would say it is available and I if I click add sub domain it will be added so there is nothing wrong with that if you have something that is done 100% that you know uh it is you won't be making any changes then perfect uh this is great but that is not always true right so we need to in order to update this manually first you need to click open and stack blits and once it's open and stack blits you need

to create a repository once you click create repository it will ask you to name it we can say um AI value let's say a value I want to make this public so you guys can see it I will create a repo and now you can leave so when you leave you this page would open up and the first time your GitHub is not connected so you will have to log in with your GitHub account and uh authorize it uh it's just a click of a button if you don't have a GitHub account create one it

is straightforward it is easy uh once you create the GitHub account it will create a repository a public repository in your in your profile let's assume for sake which I won't deploy my website like this I I won't deploy to netlify because of the reasons that I've told you there is no uh manual editing visual editor features there is no repository to make changes so I always open and stack BL and I will I can still use netlify how you go to home when you log into netfly that is this is what you would see

and I will say import an existing project and it will lets deploy your project with and it will give you GitHub as one of the options and when you I already connected my GitHub again similar to what you have seen in stack blit but if not if um you can connect yours it's just logging in so I will look for AI value did I miss that so was it first or second so easy to miss the second one um AI value you can name the site if you want AI value check availability site name is

available that is good um and deploy AI value so that's it actually instead of clicking one click uh deploy we are doing we are following three additional steps but it will give you a lot of um ability in terms of uh you know updating this moving forward because uh let's say this is the embed code right I now have a GitHub where I can go to where I can see my uh repositories so we are at an early checkpoint and I have tried to add um this make this an embed code um open where it

says you know tidy C refuse to connect so that I know it's working but this is a really good alternative for now without breaking too much so I will try to do this second page CTA should be a button um yeah okay see this this is bad uh you need to add something in order to make this work because it is taking an easy way and we will get an error at the end of it I mean once I submit this it will be an error anyway so I will show you how to fix it

you need to come here in the tips and trick section you need to copy this um once you copy this you go to bold you paste the prompt here um and you copy this also so what what's happening now is previously it's it used to be happening so much we didn't face um this issue yet but uh we would there would be uh instances where it says Please provide complete code with okay yeah you you will see what I mean when I click this there are four problems right so I would first copy this guy

here I will roll back to checkpoint and once I'm back I will use this please respond with whole code I don't want any placeholders so so um hopefully it doesn't say all the code remains same sections remain same so that way we'll get we we absolutely need to get to that second page fix it and get this over with uh already it's been too long uh for the first section we still have three more to discuss I believe two more to discuss okay uh what is happening okay we can go ahead and delete the previews

I will i' since I've already shown you how to deploy this I will provide you with the updated GitHub repo in the doc itself so once we make sure that it's working we will stop this tutorial and everything else is the same yeah B the growth consult it will it is being redirected to another page that is a good workaround for now so you click deploy or you open in stack place you know the drill so that concludes the now ai value assessment to AI content generation app this is more uh LinkedIn focused we will

generate we will take three to four words input our idea from the user and we will generate a LinkedIn post but that that's not the whole thing the primary focus for using bold for this particular application for this particular tutorial is for authentication and uh database functionality authentication meaning you can um let your users sign up and uh sign in with their own account and once they do you will also save the content that they are generating um so obviously you'll you can apply to this for various uh use cases you can build an actual

AI SAS using the exact method so without further or let me show you a demo that I have worked as this is a simple app that says instant generation secure save time a and this is a login screen let me open up so when I log in it um as you can see once I logged in there are previous um entries here I'm not sure if the automation that's running it is functional for title I say test for prompt I'll say something like what are you doing so if it's turned on it usually uh it

will be generated like a you will see the generation here yes it is uh you can see the time and date as well so this is perfect now you can sign out you can once you sign in with this the same account uh you will be able to see what you just generated I'm not sure why the invalid date is happening but we will uh fix it no worries so that is basically it there are two components and this um I mean multiple components I'm sure uh but we are um authentication and uh content history

content list so this to build this there were a lot of uh problems errors that need needed to be fixed so the prompts that we have is really important now there are two ways to achieve this functionality uh one is through when I hear content generation I see a lot of people that you know create use uh for example use uh the API open AI API Cloud API perplexity API for their content generation purposes or even open router where you have access to a ton of models I don't really like that because uh for some

reason I always liked a combination of AIS for example we enter an idea and perplexity then use its internet access to uh create a framework create an outline create uh some research analysis and then we send that in to CLA now in addition to what these large language models are trained on the data that it has if we supplement that with the existing relevant fact checked info that we find from perplexity the combination is definitely better than what either of them can um you know create individually so I have the first prompt in the same

way that I have um The Prompt for the previous uh tutorial I will explain that in uh it is nothing special create a full stag AI content generation application that integrates super base for authentication and database management the application should include the following features we have authentication sign up login AI powered content generation via web hook uh this is what I said um it is a simple flow we will build it under five minutes and which will send text entered by the user to the web Hook and the ability to save and manage generated content

response from the web hook so when we receive content back from you know you have seen that in the demo the the right now I'm saving the same thing but usually uh in the ideal case we would send the idea and it would be processed and the response we receive is an uh you know an actual Fe LinkedIn post that we can use basic content editing capabilities this is not included by the way please use react super base make for implementation inure proper ER handling uh for better organization create separate components uh like I said

this is really important in my opinion and um yeah your design should include how animations all the fun stuff so let's go to Bol and see okay I want to change the web hook so to change the web hug let's go to make.com I think I was using um I was using this web hook to um so let's not be confusing uh delete everything and this is web hug we start with web hook I copy the web hook to uh clipboard I will make sure it is the right web H yeah it is so I

am not enhancing The Prompt if you want feel free to now it started creating our application and I'm sure it will once our dependencies are installed we are creating multiple components for authentication we are um so this is important you in previous application we got something that is relative uh good starting point but for this particular application we need to set up our super base so it says save to super base but uh it will give us couple of errors and we have to we try to avoid as much as uh avoid these errors as

much as possible in the first tutorial but I believe there will be a lot of errors I will try to go back roll back and if an error is significant that you need to know I will definitely discuss that but for others I would usually uh roll back and um U skip those so it won't be be boring okay while we do that let me show you what I have next the followup prompt would be I will need step by step instructions to on how to set up superbase create. EnV file for keys so this

is important and I believe we don't have a Dev server as well this is good and I don't see a EnV file so what I would do now is if you look at replace the super base configuration uh SRC Library Super base. DS uh it has given me where I should place my superbase URL and super base key and it it has already given me step by step so and it also said you need in a new table and superas contents with the following columns okay so I would need additional help uh with this so

so I will say I will update this I will create um I will create a new let's go to super base and I will create a new project under my it it's so easy to sign up I think I signed up with uh GitHub but uh you should be able to do it with um anything your email I mean um AI content let's say database password secure password uh let's say new item W is fine create new project so AI content is the new project that will be created and once it's created it will have

um the project URL you need to copy this and come back to bolt and update it here paste and we will also um need one more thing which is Anon and public key I will be deleting this uh once the tutorial is done but make sure you don't uh share your project details with anyone so we saved it so I said something like I have updated superbase dots file and I'll need step-by-step instructions to set up SQL tables but I enhanced The Prompt as you can see and let's see what happens um I'll help you

so as you can see it's not really updating any code because it understands that we need additional help so we log into your super oh it is indeed updating some code not everything I believe hopefully not everything uh so log on to Super based dashboard go to SQL editor create contents table with proper relationship to RSL so yeah I will copy that and let's go to super base and go to SQL editor paste and run content tables with r level security you should see a success success no returned um one thing that these steps missed

because uh I didn't ask for stepbystep instruction is in the authentication there is one simple thing you need to um check in the providers email should be enabled uh good but when there is secure email change and confirm email when it's turned on it is causing some issues for me I don't know why and I will figure it out but for the time being I decided to turn them off but you can also include uh login with Facebook login with uh Google discord or something if you do uh use it for your community or your

client uses for it uh for their community so we have the database we have um I believe everything that we need let's make sure if we missed anything your database have contents uh okay okay yeah um so I want to see if we have uh if we if this is not changed so that's good and I believe there is no Dev Dev server run Dev Server Like I said it is a pretty good um chances that we will face errors in our first try because we are trying to you know work with three different components

essentially this is really good first um so let let's sign up let's sign up with the account sign up wow uh we went in let's see in super base whether we go to authentication nice money at CC creators. Friday November 1st 1839 so it's working and uh is we just created this um authentication so now we can log in with this um email and password so next step is is fixing or figuring out whether this is working we have one um dashboard here one module here with um web hooks trying to receive info so I

would say this is a test so unexpected token a accepted is not valid Json so when you receive this kind of error chances are it has worked and it um as you can see it say successfully determined it is working it is triggering but we don't have a web hook response right in the web hook response right now I am displaying The Prompt uh but we will have to add additional stuff once we know that it's working so that is the idea so and I uh module and instead of doing this instantly I will um

do a sleep of 10 seconds not more than that so that there is a bit of delay in um so we have received an error so now but it's not showing up when I say this is a test and it will it will probably still will show um that error if not if it has generated um a Content that is cre okay T unexpected token t uh now I have followup prompts to fix this I this happens right so modify the web hook Handler to validate process responses in multiple formats this is something that we

need to try right now it is expecting a j Json but I'm not giving this a Json I am just throwing some plain text into um web hook response so I want this to handle multiple formats it can be Json it can be plain text XML um so let's see what while that happens I also have this prompt which I finally figured out after running into errors more than 10 times so let's see um whether that helps us in any way right now we click this is a test two oh yeah there is a 10sec

wait sorry guys um okay it should be done at any moment now uh create contents in schema so this is the problem that I'm looking for because there is an error um it is not the content that we are generating is not being saved in our database that is the error uh that we are facing right now because I've ran into same error multiple times I had to fix problems fix problems and finally it was this long prompt uh this is actually the response from AI when I was trying to fix it where it separated

logic into dedicated service added proper type typescript interfaces so when it did all of these things my application started working as uh you know as intended so let's see this is a test so could not find content type columns in schem so what I would do is I can try again and again to fix it um because this error is different from uh previous error which is uh you know if you look at it oh is it the same P or PG or is yeah it's the same error I believe oh no previously it was

metadata it was uh content type in this one so let's try and fix it because if you are receiving same error again and again it stop uh it's better to just stop it because it won't be it will try to fix it in a different way but I believe it um it is bad for you to try um after it goes wrong three to four times it's just just better if we try a different approach um 100% let me see okay demo so yeah I remember the 10 seconds let's go in and actually fix it

um to 1 second maybe don't feel like waiting 10 okay content generated and saved it says generated and saved but oh okay uh it did it uh definitely did that fix actually fixed the error so we didn't have to use a troubleshoot prompt but it's good to have uh because this is what I uh concluded and this is what AI had to do to fix it after a long time uh but this is good and now we want to add um I have a CSS thing addit the CSS to make the landing page um beautiful

and all that stuff I will just use it um let's see how that changes and this is really good I definitely uh thought it would take a bit longer than this um so let's go to um make.com for the time being and instead of um we have the sleep we don't need sleep anymore because we we can test one last time to see if CSS had broken anything okay there is a how so I don't see a sign out button anywhere this is a test let me see yeah it it is saving it is working

even though it's not instant once we refresh we can see that so I'm also adding this uh new prompt please add a header with sign out button and include section titles to improve uh dashboards organization and um navigation while it does that I will add this prompt to um one of the prompts here I think if uh it we can get away with using this using this right here okay it should have um so I won't be testing the make scenario anymore I know that it's working we can go ahead and delete this uh we

can add a module which is perplexity so in perplexity I already added my key uh one you you just need to get yours um once you go to um public city there is a section um settings here API once you go into API you should be able to see uh your API key and you need to copy your API key and paste it in make so if I were to yeah I already had mine in there so this model seems to be having some issues I will use Lama 3.1 70b instruct for Content um let's

say roll user um for Content I would say I I have an outline prompt somewhere let me see if I can find it um so I I found the prompt this is a prompt as a LinkedIn content strategist um I don't want to go into it it's just generating outline and research um it is generating Trends research analysis based on the idea that we are giving it so insert topic here for topic I am adding my prompt so max tokens I think we can leave it um as is to use chuse maximum and I will

add error Handler so um even if it um not resume let's use break break okay uh now it is showing red because in scenario settings you need to allow storing of incomplete executions and it will go up okay now let's add one more module here which is cloud cloud anthropic we uh create a prompt Max tokens you need to hit 4,000 and messages add message to user content type text and text I already have a prompt here and in the content generation I will also add the perplexity prompt in here so you can refer to

that when needed I will copy this LinkedIn prompt and paste it [Music] in text here now uh we have okay uh I will add an error Handler here as well break three so whenever it times out or has any overload kind of error whenever it is down it will try to inst of breaking and stopping uh the whole scenario it will try to uh reattempt the execution every 15 minutes that is uh what this is doing nothing uh complex so in the okay I'm not actually referencing what I find right so output only finished post

create engaging Solutions around um I will have to refine this prompt a little bit um I will but I don't have time right now um so this is just an example do not use this in the final thing uh the content that is finally sent to our Bol is the content we generated here let's save it let me try and run this or we can run once and do the actual thing um okay where are we where are we Bol okay what is the problem so did we change something any okay sign out button we

did not see that okay let let's fix it before we try it should what else do we have we have um a LinkedIn post generator now that's working the authentication is working the okay this is a test you generated content a Content generator and there's sign out button so I log in I see my content I say I said AI in real estate 2024 and see uh what comes out of it and I know um it is taking it will take a bit so yeah it is running the scenario is running it is successful and

Claud takes a bit and it is back so it should have said run successfully H okay did you know a CH Bots um key benefits and customer service improving handle update yeah the the formatting can be much much better instead of seeing link and again The Prompt is not ideal but um yes let's see what we can do in terms of the formatting so the input that it's getting is okay uh it is actually formatted right but for some reason when it's showing up in super base um it is uh not displaying correctly but you

get the idea here it is a good first working version uh for an MVP I will um improve this in the actual REO that I share uh but for the time being we will move on because we have a lot of stuff to uh cover for sure okay LinkedIn yeah and okay what what else do we need to fix in this refreshing is not uh resetting the state that is good and we can make the landing page more uh beautiful in terms of I mean adding the content and all of that stuff I did that

uh from for my previous application where I was adding um stuff for you know making adding Hare animations adding new adding content blocks on top of the login page and stuff you can make this more visually appealing there is no end to that uh I mean you you can okay I think I opened the uh the same one again let's see which one is it but you can refer to the one that um we worked on in the beginning so I just realized it was not recording for the past 5 minutes or something so what

did you miss remember how when we started this we talked about okay we were not able to edit some some of these things right so I added this uh two new prompts where I said I'm unable to edit generated content I need help formatting table correctly could you assist with proper formatting table and Alignment it made some changes but the table itself was super small and then I went ahead and asked make the editable content area larger when the edit button is clicked uh please adjust Dimension the funny part is when I edit this as

you can see it is really uh formatted nice and all that if you do want to copy this and paste somewhere it will it will be um I mean it will be formatted but for some reason I'm not sure if it's a database thing uh additional research is definitely needed in this um aspect but for now um it is what it is it is working correctly even though they show that these two are overlapping a little bit that is not actually uh the case once we deploy this we will uh these two usually will be

a lot uh there would be a lot of distance between the two uh I'm 100% sure I'm not sure if it would show here um but in an actual web page yeah something similar to this they are uh far apart so that's that concludes I think I updated all the prompts as well uh the two new prompts that I used and that concludes the content generation AI app um that we uh obviously I will update all the links that we discussed of the make scenarios and you can all download that within the same doc so

that concludes content generation eii app next we have make air table integration and this is all about creating beautiful UI for your no code AI apps I have I really enjoyed building this um a table this is one of the first apps that I bed like I said said I've been working with this uh for almost for a month every single day and this is one of the applications that we have built uh for the client um we we were previously uh the client was using um air table and make for most of the front

end but we have built this where they can go to the webs weite talk to wdi and we even included a voice flow chat bot in here and we um once the you know search is submitted we will return return the search results and we can proceed and there are a lot of steps that we can take and we can go to you know custom um custom software applications where we built a lot of addition stuff uh for this so to do something like this I I mean we are not building this today it took

a while to uh build the whole thing but we will be building something similar where um previously I have worked on a fact Checker article generator a Blog generator on my YouTube before so I want to that is bu uh using make an air table I want to create a friend and for an application like that so I have this um section with me as you can see there is an a table um generator when you click this link you would be able to uh copy this uh base copy this a table I won't be

doing that um but what we are planning to do here is when you go to a table you just need to hit uh copy base and it will be uh copied over to your base so I have created this bold article generator um air table where it where we need to now create imagine this my client used to go every day in here enter an idea or URL and based on what he enters at a set time we would run this to um a perplexity module to do initial research then Chad GPT takes a goed

then llama then Claude then my clients so you're not supposed to see that my client's um account and then there is a best version and the best version is really picking the best from these three best aspects from these three and we were using Cloud for this and this flow as you can see is okay but the experience itself I mean there is no authentication there is no website he can go to uh there is a lot of button clicking there is a lot of um you know actions that can be avoided should be avoided

so to do that I came up with a solution where you can go to interfaces and this is the interface that I already created if you don't have um this is an interface that I already created you can create one if you don't have it but um since we already saved this and created this uh it should be okay but let me um if you have an interface which you will have uh with the template you need to share this share publicly and share selected page publicly read only and enable public sharing and we need

this embed code we will now embed this into the front end that we are going to build in the make can a table integration so this is an article generator application so this is the prompt that I have for the first one really simple we again using a make scenario I promised when we are doing this tutorial I was suggesting that we will be making um an application that integrates seamlessly with what you are doing in terms of uh make an a table right so let's go back to make.com and start from scratch uh first

let me I mean instead of building an automation from scratch I will just import a blueprint I will give this to you also so that it won't feel like I'm cheating um so fact Checker article generator is let's say you have an existing flow like this where you are using an a table and you are um checking the same way my client was doing it whether you have a URL whether you have a a text file and then you are um choosing if you if you have a URL you would use text pass or website

scraper and you are doing the whole research with perplexity all the four um you know four AIS I want to delete my client specific wants so yeah this is the actual flow right so we want to delete the air table I know we are referencing this at a bunch of places right now what we are getting from this um a table module is only um idea or URL one of two things so I want to delete this and instead what I want to do is add a web hook which is a custom web hook I

will add an I say B article web hook and that is save and copy address and I will paste this address in my here in my prompt here once I have this I will copy this prompt this is nothing fancy create an article generator app for an AI agency let's separate columns for better organization as always create a react application with consistent red gradient theme with a dark red background with a dark background uh we have a input field that lets user enter either a URL or an idea plain text then you should send this

info to web straightforward right so we paste this and go uh while we do that uh we can go ahead while this is building we can go to our um fact Checker article generator and start building it or should we just wait um no it will take a while so I will hit okay and we will see we can't really do anything in terms of um you know updating this until we have this info so while I wait for that info I will connect my API key it is super straightforward you just need to when

you click add it will add for ask for your API key and open AI account API Keys once you click it you will be uh taken to that page anyway so I'm not going to do that because I already did so I will add money key and it is still missing I don't have to change anything in here just the model is this model is good enough for now the Red is because we have deleted the you know the air table which is giving it the URL so it's not happy at all so I will

update everything with I I think it's better if we wait till we um work on the initial bolt wow nice this is amazing guys transform ideas into articles Leverage The Power of AI to generate high quality articles URLs or creative ideas fast efficient and tailored to your needs I mean I mean this is amazing okay I want to add nothing fancy let's do a test I will run this module only account doesn't exist yeah I know but let me disconnect this so it won't bother me and it won't um stop me for running this generate

yeah I think it has sent yeah we have received test and if you look at the type it is idea right now we have uh it is good that it is um you know differentiating between these two I will run this module only now and I will give it a URL there is a URL in let's use our this is about public URL I believe this this won't be an issue um let's say generate does it yeah URL so type there are two types idea and um URL so now let's connect this what filter is

that uh we don't need this anymore because we are not triggering this manually now the status is checking whether URL exists this is the right label but for wrong condition we need to select type and it says equal to case insensitive uh URL you can go case sensitive but I like to use uh case insensitive because I have um okay yeah this happens when we have type equal to Case and sensitive Ida okay so each time we are either sending out URL or um an idea so this we are capturing the input and now we

have the input as well where is that input yes okay and I don't believe we have to okay let me this is also easy guys straightforward if you select o but if you want um you can click connection type O is the easiest one you can save you can just log in and uh it withb and there is a personal access token route as well um even though that is a bit complex but it it's I have covered that many many times before okay tricket ID we are instead of okay yeah before we do that

we we need to add uh one more I want to do something uh as a placeholder so for the time being we have to add one um one module here and this module is an eight table module we are creating a record we are creating a record in the base which is bold article generation bold table one and in table one we are capturing the URL right we need that input URL and no no status we don't have to be concerned about status at this point uh we just have to make sure not um other

automations shouldn't be triggering this so that's important okay this is what we need to do a new of you know record is being created every time this is run so in the same way we'll have to create add a module which is a table I can just I could have just copied it but I'm creating it again so that okay bolt table one and we capture idea um text input instead of URL and we don't have to worry about anything else main points guy we will give um so we delete the idea here and add

the new idea okay okay what what seems to be the problem here okay idea is nice now we have to connect our the ones that doesn't have any is they're not using URL or idea that's good but it still needs to be connected with so this is nothing to do with the AI agency prompts it is a generic um article generator so it doesn't matter which idea which um topic you choose it will just research online it will uh Just Produce content based stuff of that okay now I think we have covered everything in the

top row that should model said to be instruct C connection okay yeah now it's important that we select the right table which is Bol article generation there is table one and record ID is the record ID that has been created the first one and we have the either idea or URL and then for status we are changing it to done and for chat GPT we have chat GPT if for llama we have llama for cloud we have Cloud for best version we have the best one here perfect okay now we can do this we can

just clone this [Music] and add this here delete this and all we need to do is oh mean I think we need to change everything because um you know it doesn't have access to this row anyway yeah nothing really saved in terms of time choices message content Cloud we use first Cloud best version we use best version okay now this will work but I want to take this okay which account doesn't exist this super weird guys let me see OKAY model the 70b okay and yeah that should be the final one save Auto line um

let's let's run this and see what happens okay now go back to um bolt it said AI in real estate uh it already sented we definitely need some um additional um indication as to how it's working and this is good it is checking whether it's idea or URL and it's um transferring based off of that and it's really good practice to add error handlers for each of these AIS but I want to make this U much better so um while this Pro is processing I want to um go back to bolt and said add a

section title generation history below the current content and embed an a table view the embeded view should span 80% of the viewport with insert your embed code so we are we have this embit code we will copy this embit code you should not be copying the emit code uh obviously you'll have to um paste yours but um for the time being I will paste mine here so that I can copy the whole thing copy yeah I will go to bolt now and I will paste it and I believe it has finished um generating oh it

is taking it's sweet time so yeah um okay let's see what what bolt is doing meanwhile um okay this is what I was saying a table refuse to connect this is good really good um I would move this section from or should be no this is okay generation history and it um showing this uh content here I know for a fact that it would be um shown once we deploy it and I will show that when we I also added remove dashboard history and settings because these are not doing anything from the header uh keep

the generated content under the user input so it looks better without this uh you know additional stuff this stuff would have been really uh help ful if um it is shown in the previous app and it is a really good idea you can just screenshot this one and go to now we have a problem okay so does not provide an export a name default this is a simple error it would usually be uh fixed in one go um so like was saying we can um take screenshots of stuff that we really like and Bol really

works well with replicating the style that you want I didn't want to do that too much in this because I didn't know what I want I I kind of wanted AI to come up with this stuff I had in mind what I want to generate for AI um nice okay yeah instant generation continuous learning smart processing um this time let's um use a URL instead there is a BBC article I can use the same article in um let's go to bold and paste not sure if this is running let me turn this on okay why

unsaved let's save it um let's see this an action content has been successfully oh this is new I like that now what happened said bundle one input now it should have so this needs some troubleshooting then uh what did we receive in the history I should be able to see history now why is this turned off do we it is supposed to use that URL but it did not content has been submitted successfully it says input or what happens when we do it for idea for a lack of a better ter let's do idea and

it's only sending idea web Hook is not sending type again really basic let's see what happens I'll update the generate form to include the input type URL or IDE this yes that's what we need while we wait for that I have something else in mind now this is um a social media automation that I use at my agency but this is what I really like this is a flux image generator I will copy this copy and paste it in here so obviously we can do it for both of um both of [Music] the no um

I will unlink this I will actually delete this module all together I can link this two link these two and you can definitely make this more concise you don't really need all of this um okay this this is the prompt you don't have to know the prompt too much we are we are using replicate based on the best response best um article that is generated okay we are prompting this CLA to generate an output in Json which will indeed trigger this um replicate HTTP request you will get this um template so it is not really

a flux generator tutorial or uh make scenario but I didn't want to edit too much so it has my API key to get your API key you need to go to replicate and you need to add your credit card once you add your um once you add your credit card it's really not that it's under 5 cents or 6 cents per image generation and the models is the best model that's available right now is actually um yeah this is my API key I will just you just need to copy this and uh paste it in

these um modules here it will generate a really good image and that goes in the image section that we have uh here add image file your URL we need a URL so we use I think first one we won't be able to get it because um there is a data. output field that we need so we will have to skip that first one let me run this whole thing let's see if bold fixed um okay this is nice uh there is a URL there is an idea what do we want we we have uh we

need you to do this for URL there is no so have this BBC article I will paste it and I hit generate it says um generated content let's see if it triggered the yes it it it is sending type if not it would it wouldn't have triggered the whole thing but once we um now we are scraping the whole thing the scraping the uh web page we are checking the facts we are checking the Checker so we are essentially doing a fact checking twice now we have a cloud then given access to all of this

three data and it goes to the same prompt as being used by CL CL GPT and llama and the final cloud is what generates the actual article and based on this actual article we are generating a flux um image so what this essentially does is um we we should kind of hope that um it's working because when you look at the interface the BBC article so this this is what it would be shown up as on desktop it would show like this and on mobile it will show like this so you will have a really

good image and your idea and the generation and when you want to look into it you can open you can scroll down you can you know copy this or uh use it anywhere you want you have um llama you have all the opening I generated stuff and there is a best version also so we have deleted a field it is showing so I might have to um you know send this share this again but for the time being it should be enough uh let's see error operation failed with an error uh that's so weird okay

oh I don't have my API key listed that is I was hoping I would send this um I was hoping I don't have to edit this that why I [Music] haven't I thought I had it in there okay now I don't want to run the whole thing again let me see I will do do this step manually I will take this HTTP sorry Json request and I will run this module only and I paste this what the okay um think I pasted the API key again cancel I will need to copy the output one last

time the text output copy so run this module only okay and it is uh 20 of1 21 is a success so if we go to [Music] uh if we go to replicate VM not this one in the output the headers I believe in the why does it 10 though in the data we need in the output where is output why is output empty that's so weird uh URLs I believe yet so this is the URL that we need I am not sure I would get the whole thing from here let's go back to red liate

to see if um our account is actually generating something I think this has something to do with affordable housing yeah it is all already done okay professional new aner shooting uh sitting with uh short neatly styled hair this is amazing guys this is really nice so I will just download this and um upload this to you know the um actual a table so we have we know that for this idea which is which for this URL we have a new image this image which will probably be shown in the interface and for bold the issues

still persists right I mean when I say issue still exist is it has um it is now generating an image and it is okay it still wouldn't display it because yeah we will have to run this again let me save it let me run once and in the URL let's use an AI um article news B news we announced in October I will copy this guy here and go to URL paste generate awesome and we will refresh it and we will see whether this is running it is running but I don't want to wait till

it gets here by the time it gets there I will want to deploy this because I know this will work so I will open in stack place my usual route because I am planning to share this repository with you so it is article Bol create a repo the same steps as before I skipped the last one but I looks like I have to do this one by the time it's done okay this is repo this repo has been created um wait did it I still see stack blits okay let's go to netlify instead that should

um beyond the doubt show us and we add a new site import existing project GitHub and it's authorized um we have article bold just now ai article. netlify yeah deploy AI article gen so if we go back to fact Checker it is still running so you you shouldn't be using this unless you are really really know what you're doing and you are complet completely okay with prompts and the thing with replicate guys is um they will only stay for 1 hour I mean in the account if you save it then great if you save it

to a table that is great too but if you are not saving it anywhere they would just expire it would say data has been removed so it's really important whether to save it on air table or manual downloading this lucky for us we are doing it automatically and this is a sleep module for um I'm not sure if it's 60 seconds 180 seconds or something the reason we have a sleep module is where is it uh the reason we have a sleep module is you see how it's still running and um total duration is usually

under 30 seconds each time 18 seconds but just to be sure I added um all that time so okay futuristic classroom with students using holographic displays this is good really good um so we can download this or not even download I wanted to have this file where this output this is what we need this is what I was looking for earlier where we needed some stuff right to get it done okay it is done and the image to capture the image what we need file URL we need to add this output here this is the

URL that we need output so yeah that should do it if you want to use this same one here feel free to do so but um this tutorial is already too long I want to see what's happening with my netlify uh you can set up a custom domain or I want to just use this guy here to see how we um nice so we don't have the image because we haven't run um the whole thing previously now when we run a new uh generation it will definitely update the image as well so yeah take my

word for it um this is you won't see it will refuse to connect in the actual bolt but it will work uh 100% fine when you actually uh deploy this to a website article AI you will add this and as soon as it's done you will get a popup and it will uh once it's done it will Mark as done and you will also be able to open it read it um close it whatever you feel like perfect this is an embed right um yeah that concludes the tutorial how to integrate make an ear table

and create a beautiful friend ends for your apps I just realized the next section we have is deployment and hosting I have already finished uh I already covered deployment and hosting before so I have listed step by step on how you would do this in the guide as well so if you haven't watched that section please do and it is straightforward you have to click open in stack blits and you create a repository and then next step is give a name and hit create a repository and then sign up or sign in to netlify add

new site which is import an existing project GitHub again if you don't have a GitHub account create one it's straightforward and select uh the L from the list the project you want to deploy and give it a site name this is optional you you can or you don't have to once you deploy content you will see this screen which is set up a custom domain and there are now two options once it says uh let me show you what I mean once you are in the screen this is the article generation that I um deployed

once it's done I there is a setup custom domain option now you can if you don't have an account if you do if we are doing this for the first time if you want to add a new domain something that you uh that you don't own you can buy that through for example if I want to buy AI GC money.com this is I I I know that it it would be available it says is available registration cost so you can register if you don't have an account uh I mean the netlify do app is free

um you can have your own sub subdomain you have already seen that I'm talking about custom domains now so if you have an account if you have a domain on on now if you have a domain on uh name chep or something when where you have your domains for example you have this growth creators. or kanisani doc weekly prompt. whatever the URL is you can uh when you add that it will show you okay you need to uh let's say I add ki.com and it will give me is already registered if you registered this domain

through a different regist select add domain to add it to your site you can configure Netflix so I if you are using this domain for something else for your own website for your own emails I strongly recommend that you don't use it for these purposes you can buy axyz C or do online the for something relatively cheap $12 and uh use it for these apps um so I would say add domain and it will ask me to go to um there is once we hit um let's say verify DNS configuration it is um configuration field

right so you have set up net uh netlify DNS once you say verify it will um once we say add domain it will ask us to um update the name servers on these once you update once you go to your url uh I am using this email address so I don't want to change anything right now I just want to show you uh where the settings are you go to name servers and you say custom DNS and you enter all the four uh fields that they have here and you copy these four and you when

you paste all of those four name servers it will almost you can then create any number of subdomains that you need or use uh the main domain for this purpose uh but for I want to customize this um because right now if I go to this it doesn't connect because I haven't changed the I haven't changed the settings I haven't changed the name servers for that reason I have to go to domain management and I um will edit custom domains and probably remove domain remove yeah this is the domain I have but what I do

have is once you add once you add your name servers once you add or once you buy a domain from uh netlify what happens is you can for example AIG growth creators. XYZ I bought this from nlii itself so article. AI growth creators. XYZ it says good news AI growth creators. XYZ is on netlify DNS so you can add your subdomain I would say add subdomain and it will say waiting net netlify DNS and when I uh refresh this it would probably be done and when I go to article. growth creators. XYZ I will see

uh the latest one and I did uh run the test again yeah updates and um it is working as expected so you can uh probably use it without any worries there so this is actually hosted on articles. AI growth creat is doxyz as you can see um okay now what did what else we have we have successfully finished a lot of things in here we finished um deployment and hosting and now we have voice flow improvements I have made a voice flow video a while ago a course video of 3 hours and most people that

join my community were asking me how can I you know embed The Voice flow chat bot instead of you know how voice flow chat bot is it lives uh somewhere down here at the you know bottom right corner of the screen but they wanted to um embed that in the whole page where it occupies the entire width and height of the you know page and when I was reviewing voice flow documentation I did indeed find something related to voice flow CSS um styling so when I search voice flow CSS this is uh what I found

embed uh and customize styling modify CSS this is not straightforward as it seems if you just update a couple of them it's not like you can copy this and paste it in an embed code and it works there is a lot of stuff that uh goes into it and there is also you know proactive bubbles which is relatively easy compared to embedding this into a full page so what I did was I copied this message and I went to Claude And I said uh based on the text on this page um okay actually I sent

I copied this text and went to um perplexity and said based on the text uh on this web page and I also provided the link of this web page and I asked how can I um embed this into a page as opposed to you know the actual chatboard so here is a complete react implementation for uh full page voice flow this is what um perplexity gave me so you might be wondering why would anyone want to use this we can get to that in a bit first let's see what happens when you use this prompt

when we use this prompt it is really detailed it will show as you can see there are a lot of things going on to achieve this so how can I how can you use this is um okay I need to add my project ID I am using something project I ID here with your voice blow project ID where is here where do I need to go usually what I did was okay I see it here and the code itself is done I will stop sharing or I can blur this uh no worries okay I you

go to Integrations and you copy the project ID here um Pro project ID and you replace that in here and you save it and there is no uh preview we ask run do server and that should trigger um the development server which is host and as you can see it is a full screen app that can if deployed it will take viewport 100 100 and okay now fail to execute um attach Shadow an element so this is happening on and off for some reason I did try to fix it a lot and sometimes it is

uh being fixed for the it says the exact same thing that it's F fixing the shadow dome issue and okay that shouldn't be um that is not how it should go roll back to checkpoint rep now so like I said for for some reason when we rolled back the error is not showing up and it's only happening um on and off like I said it's not consistent I did try to find out what the issue might be in CLA and whether is is it something uh it can be ignored um turns out it's not it

is important but as long as it uh you can deploy these applications it should be okay in a sense because uh when we are building the application if it's a critical error usually app uh we won't be able to build the app itself so we shouldn't be able to deploy this um in reality if it's a really bad error but yeah as you can see the are showed up again uh we will need to fix it but for the time being uh this is what it looks like a full page implementation of the chatbot and

why would someone need a full page application is you can now ask Claud to create an embeddable code for this implementation and it will create it you can then take this and embed on your website or um that's a really I mean not not the way to go about it but this is just an idea uh that I'm throwing around but uh there are um when you think about it you can add authentication capabilities to some you can add authentication capabilities to um you know app like these you are let's say you're working with an

influencer you are working with um a coach and that has a community he can now charge for his knowledge when you add in Source links for every answer that you do and if you are I mean there are multiple people we have sold this Persona chatbots to uh sell it to create creators influencers or managers and you can embed this in a SAS apps like software where this page can be behind the pay wall that's the same way like that I said um embed on sorry not embed add authentication capabilities so that that is definitely

worth a try you can go to additional you can um use this documentation to further build upon uh voice flow the same applies for vapy as well I didn't have too much time to research when you are building stuff on vapi building AI voice resistance on vapy there is a lot of um docs you can refer so if we go to I think um last I check they were having some issues with uh documentation 404 let's try this yeah in vapy documentation when you um go to the actual documentation that is web calling on how

to use you know you can install all this you can do copy your copy your assistant ID and outbound calling there is inbound calling um I think this is not what we should be looking at so web calling is uh something Bol can improve upon and uh web SDK and if you want to add new animations to web snippet that is also a way to go or I think cloud can do this too if you are just working with snippet but if you are working with SDK however you need uh Bol uh comment down below

if you'd like to see additional stuff on vapi uh implementation on bolt um make sure you comment down below now finally we have tips and tricks perplexity is your best friend for research anytime you're facing an issue over and over again or if you want to do an API call that you don't know or you want to um you know embed a chatbot like we did previously just copy and paste and for AI value assessment tool you have seen how powerful that is to build the whole thing I mean I was asking about appointments that

are asking it to find stats coming up with calculations and I just give the readymade prompt to um bolt and it has done the work right so perplexity is the the best tool there is for research and enhance your prompts when possible this is also important most of the times if you already have a lot of detail in there if it's really lengthy for some of the prompts that I have in here chances are AI will mess up what you're trying to do it will paraphrase or redo or rewrite in a way that is super

different from what you're trying to do if it's a simple instruction and it's building upon that that is great but I um when I say POS but it's when your prompts are shorter is what I mean do not use only update X and only add this um the reason I say that is I have wasted millions of tokens no exaggeration doing this so I was uh you have seen the error where there was um placeholders in the code I say there is a there are a lot of placeholders because this was made two weeks ago

and bold has updated twice I believe in the past two to three weeks and they have fixed a lot of issues uh this is not an issue anymore but it was an issue to the point where I was um at one point I was using my uh text expander just for doing this to get the prompt right and don't deploy directly from Bol to netlify like it's a lazy way which doesn't let you add uh doesn't let you have visual editor doesn't let you make changes because if I have to make changes for stuff that

I already deployed let's say um okay we have this AI article gen Netflix thing AI article generator netlify DOA so we have what generation history what we can do is um we can rename this in a way we can um okay not generate transform ideas into articles is good leverage power of AI to generate hype okay I will just show you what I mean by uh updating the code most people already do but uh this is a quick I realize that I haven't done this uh previously we okay article bold we go to Source if

I want to update one of the text files let's say B open app. TSX I say edit the file and I go dot dot and there is a button right commit changes once I commit changes I am updating app. TSX if I can quickly go to netlify what's happening in netlify is currently my changes are being pushed um when I go to article so it is starting up and 9:56 p.m. it is building so as you can see it is not possible for uh repositories that are deployed directly from netlify if you hit deploy and

you don't have a repository you don't have anything to go back to and edit right so if you yeah uploaded published so when you go to this new site you have dot dot uh the change that we did that is what I mean to not directly deploy from Bolt edit code yourself for minor text updates like I said if it's a dot dot or in the first tutorial we upload updated um get AIS SS assessment instead of AI audit that is a simple change right if we ask uh bold to fix it it will break

something else so chances of it breaking something is high so save your tokens and edit code yourself for minor text updates AI is not receiving full context fix errors I really wanted to show you this but we did not face that kind of error sometimes there would be error shown on screen but the error is not uh I mean okay you'll have to see it for it to make sense the error will show up in the preview screen but the screen the bolt chat screen doesn't receive an error it doesn't show so sometimes it doesn't

receive context then you have to copy the whole thing and paste it and that will usually fix it but sometimes AI will not receive uh full context and even in the fix errors even if it shows the fix error it doesn't realize what the error is so I always if you um have caught me when I was looking at the errors I was opening the errors I was seeing okay is this met data is this um you know something else and the two errors were different when we were doing the authentication uh the second tutorial

so sometimes it doesn't receive um full context so be mindful about that exit after four to five fixed problem errors so this is something that I was doing before I know about the roll back and roll back was working really well even the roll Bo was um available from the beginning it was really bad the first uh week and a half two weeks even when I go back it was not fixing my issues I didn't really go back go back so yeah that's why I said exit after four to five problems fix problems and do

a different different um uh different chat all together that was here because of that but you don't have to anymore because you always have a checkpoint that you can go to but if you don't manage to make it work from the beginning it's best if you just give up and start a new chat uh break down when code gets too long or if you're building complex app this is not true I say break everything up even if it's a small app you can say help me break down the app component into smaller your usable components

or the other way to say it is let's create separate components for better organization and maintainability so with that I I mean you have seen this in action for all the three tutorials that I showed so yeah that's a no-brainer and I think every should everyone using bold should start doing that unless I'm really wrong and please correct me if I am but that concludes the whole thing I mean I am this 42 Page bold guide I will give this away in my free school so yeah all the templates all the tutorials all the get

Hub repos that you see will be available in the first link in the description down below and I'll see you in the next one