Rapid Prototyping with Bolt.new

In this video, I'm going to show you how you can go from thought or idea to an actual application in minutes using a tool called Bolt.new. If you haven't heard of this tool before, amidst the thousands of AI tools that come out every day, it pretty much lets you go back and forth with a prompting agent to create an application with the goal of you being able to build some form of prototype literally in minutes with very minimal code or minimal intervention to begin with. While there are other tools out there that promise the same outcome, in the same experience. This tool amongst all of them for us has worked really well with our clients, being able to hop on a call, getting a list of requirements or ideas, and getting those ideas into a concrete proof of concept before we even hop off the call. If you're new to the channel, my name is Mark, and I've been running my own AI automation agency called Prompt Advisors for the past two years. We work with companies in all industries better understand where to use AI best in their workflow. My main goal and ambition in this video is to show you how you can quickly start using and leveraging bolt the best practices for actually prompting it because this is an art form that if you get it right you can really reap the rewards of this platform and as you'd expect as a viewer of this channel i'm going to build out three different business oriented builds using bolt one that's more on the non-functional side but showing you the power of creating a prototype very quickly another one that is semi-functional and actually usable in minutes and the last one which is more of a moonshot that i haven't even practiced building before I'll be building it right in front of you on purpose that you can not only see me squirm and derive value from that, but see what I do to try to troubleshoot and push the limits of this application so that you know what you can or can't do with it, at least as of today. If that sounds like a plan, then I'm going to jump into some slides really quickly to lay the foundation of what we'll be speaking about, and then we'll start building. All right, so real quick, when you log into Bolt for the first time, you're going to see something like this after you've made a user account where... You can have some suggestions as to what different apps you might be able to build. And then pretty much you have a few things at your disposal here. You have this area where just like ChatGPT or Cloud, you can write a prompt here saying what you're actually going for. So you can say something like, I want to build an application where we have some form of box that says upload file. And it would invite us to upload files. And then we have a chat that talks to those files in real time. And that could be, for example, an entry prompt. You have this ability to attach both images as well as files. And you'll see when I actually try and build with this, how this can become really useful, especially if you feed screenshots of not just what's going wrong, but maybe the type of application you're trying to even emulate. The cliche saying of a picture's worth of thousand words really comes into play here, and I'll show you how to take advantage of that. In this group of little stars here that you see probably in tons of AI tools, in this case, lets you take... a entry prompt and tries and refines it using their own UI to help you do the prompt engineering necessary to get the outcomes you're looking for. Now one thing I've built for all of you that you'll be able to take advantage by the end of the video is a custom GPT that pushes back on your idea to set you up for as much success as possible if you choose to use this platform so you have the best entry prompt possible to set you up for success. Now basic concept is you write prompt and and it creates some form of rendering of a user interface that you can interact with. The beauty is once you're actually done with it, you can click on one button on the top right called deploy, and then you'll get a URL that you can now use and share with your colleagues and quickly battle test your ideas or concepts. Now behind this, and this is really important for anyone trying to understand how these tools work, is a series of large language models. And in this case, at least as of today's recording, bolt.new seems to use Claude behind the scenes. obviously with their own architecture, to build the code in real time. So clearly they have some form of logic that understands how to best plan a project, how to best organize a project, but the actual building of the code and the rendering of the view is all being taken care of by a large language model. Knowing this is instrumental because if you just encounter problems where maybe for one moment it's loading and for the next moment it's not, it could be that the underlying large language model is being lazy. As Chachapiti sometimes lazy, Claudiai sometimes lazy, so understanding what you're dealing with, you're not dealing with magic, but more so an LM trying to create a magical experience, will help set you up for success and better understand when things are not going too well. And like I've been harping on already, the very first prompt is one of the most impactful and important prompts in this experience, because it really sets the foundation and sets the tone for how it's going to initially design the code, how it's initially going to design the actual features you're going to be dealing with. It's really easy to change aesthetic things. It's harder to change very functional things once you've had it kind of dig its roots down into a specific build. So having clarity on what you're trying to accomplish is super important. If you want to... see success very quickly and be actually able to build something in minutes on this platform. Now, this is what's on the menu today. So first, we're going to build a non-functional prototype of an internal chat app. So imagine you're in an organization, you have a bunch of data, and you want to prototype what you'd want to build internally to have some form of shared knowledge base. This may be more on the secure side, not using ChatGPT or Cloud Enterprise, but something you can use and host internally. And the reason why I'm purposely making it non-functional is just to show you probably the most high leverage use case you can use this tool for, which in my eyes is the design of the idea. A lot of videos sensationalize the idea of building an AI SaaS in five, 10 minutes you can sell for thousands of dollars. But as of today, realistically, that's not going to happen. Now, I think that in the short term future, you're going to be able to build a lot more scalable solutions with this. But the real value for me today as a business owner from this tool. is that I am less inclined to hire a designer because I can actually go on a client meeting, listen through the requirements they're looking through, and actually map something out that then I can give to my engineering team and we can actually build it out. Now, for the next app, we're gonna make it functional and we're gonna make a smart lead list where we just collect a few pieces of information and then we create an automation that can take that information and store it in an Excel database that we create. They can also look up the company of whoever's signing up for our list. This one's not going to be super impressive, but I'll start giving you the building blocks of what's possible. For the last one, I am going to try something more complex that I haven't tried before, which is building a very basic CRM that is functional, that one, can actually store records, meaning it has its own database using Firebase. And I'm also going to show you how to actually try to map out building something more complex, so that the likelihood... of your first prompt ending up into the 80% of what you're looking for is much more achievable. And if you're not familiar with what Mermaid is, I did record a whole video on it, but I will give you a small crash course on how to use it and how you can feed it as a part of your entry prompt so that this becomes a lot more doable. And as a little cherry on top, I'm going to show you how we can quickly add authentication, meaning creating a login for emails and passwords so that multiple users can have accounts. where their settings and their logins or their contacts are actually being stored in this database dynamically. That sounds like fun, I'm going to jump into bolt and we're going to start building. Alright, so in this case, I can start off with my own version of a prompt, especially if it's more basic where I say, I want to create an internal web application where we have an app that we can upload PDFs, docx files, and PowerPoints. And on one side, we have the area to upload with that cloud icon thingy. If you're familiar with that, you must have seen that a bunch of apps. And on the right side, we will have a chat bot area that allows you to pick different large pages. language models to speak to. And then you can have a toggle that says secure message that will use a secure provider, like let's say Azure OpenAI, which is like a Microsoft instance. So we have some like this, this should be able to at least build some semblance of what I'm looking for. Now the GPT I put together for all of you just to help you out is if you say frame my project, And it's going to ask you what you're looking to build. It's going to be slightly, it's going to push you back a bit to understand what you're looking for. But you'll see here, here's how we can frame your project. Let's break it down step by step. And then here it's trying to basically gentrify my chicken scratch. So I can just say this is what I'm looking for here. And then I can copy paste this instead of what I wrote. I want to build the following. Okay. And then if we paste this here. So we have a file upload interface, we have a chatbot area. And although this won't matter for the LM, I like for my own OCD to space things out. And let's say I had a look and feel I was going for. So let's say I really like the color scheme of po.com. So if I like this, I like their whole purple scheme. Let's go to like a little chat agent here, whatever. Let's go to one of these or create a new chat. And I'll just screenshot this. I'll copy it. I'll go to bolt.new. I'll paste it. And at the very bottom, take the color scheme and general design from the screenshot I provided. Now, if I wanted to make this functional, which we don't for the first one, I would try and give it some hints on how to use the different LLMs, how to actually call them. And again, if you're worried about having to know how to code, My hack around that is using something like perplexity, or you can now use the search GPT from chat GPT to ask, hey, can you pull up documentation for how to integrate OpenAI into an application, right? Or how to call GPT-4.0 using the backend. And then it should be able to give you a code snippet that you can paste and give it as a clue. In this case, we don't care for that. We just want to go from, again, thought to an MVP. So if we click enter here, it will start building on the right-hand side. And you'll see it actually go through its coding. And here it's building on a framework that's called React. Now on their application, you can ask to build in different frameworks. React is typically very well used, very well known. And a lot of AI SaaS applications that you interact with on a daily basis are built on something like React. All right. And you can see right here, it literally took, before I even talk about anything else, it took the purple from my screenshot and it created this little file upload thing. on the side here and you have you can choose between different llms to speak to and you have this little secure mode toggle you can click on etc so again we went from a very basic idea to having something that we can now have a conversation about whether it be to investors whether it be to a client whether it be to your internal team being able to put a thought on paper or in this case a thought on an interface allows you to have the discourse you need to get to what the requirements should be so in this case if i go here and i say I want the chat interface to look like a Silicon Valley, well funded startup designed it. Try and be thoughtful about how pretty it is, the UI and UX using the best design principles. So I'm going to send this. And while it actually loads, I'm just going to give you a little bit of a debrief. This tool is quote-unquote free to use up until a limit. And usually to build something more complex, you will need some credits. So I think it's around $20 a month starting for credits. You can get away with the free one just to kind of test out some very basic concepts. But just prefacing that there that if you want to use this on a very daily basis like we are right now at the agency, we're going to be paying at least a $20 to $50 a month plan. just to be able to go back and forth with this. So in this case now, we have a new rendering where it hasn't changed too much, but at least designed this little style here. This style of the box compared to the blank one before looks like at least intercom, if you're familiar with that tool, and has that little beaming green button saying you're available. And then it has the ability to attach, attach an image, add an emoji. And obviously it's not functional, but I can say at least, can you make the emoji button functional? So I can pick an emoji. And what other changes I want? Underneath the file upload, can you show some fake chat history. Now what I'm going to do here is just show you how the prompt standardization or enhance prompt feature works. So if I click on enhance prompt, It's going to go through and it made it again more gentrified. Add emoji picker functionality to the button and display a mock chat history below the file upload section. Include timestamps, avatars, and example conversations. So it did a really good job in this case. Where you might want to take the prompt for yourself is when you really have very thoughtful, non-generic ideas to add. And you know exactly what you're looking for. So we'll send this and I'll cut to the part where it actually finishes. And you'll see here I'm happy to see an error because... Sometimes you will get an error. So in this case, it's telling me something. Let's assume I am not technically inclined. I'll say, okay, there's an error on screen. Can you ruminate on how to fix it and fix it? I love the using the word ruminate in all kinds of LMS because it's a very heavy word meaning reflect on it. Don't just say fix it. So sometimes that's my hack to increase the likelihood of fixing it the first time. Now sometimes bugs pop up and it takes one to three times for it to get resolved, assuming what you're asking it to do is one, doable, two, it has the training it needs to accomplish it. So because this is using Claude behind the scenes, it's not necessarily cognizant of all frameworks, especially the newer ones. So that's where it might be helpful to spoon feed it some ideas on what exactly you're going for. So in this case, I got the error again. So I'll say, please. resolve this issue right now and I'll screenshot it again. Remove the unexpected token. I'm not doing anything smart here, I'm literally just reading what it's saying. And like I said, third time's a charm in this case. So you'll see we have the recent conversations here that are completely fake. And if you want to add one more thing here just to finish this idea is I can say, when I click on one of these recent conversations, Can you show a fake back and forth conversation? And I'll say, let's say five messages back and forth. I'll click on the prompt enhancer. Okay, so let me just double check that it actually did what I want to do. Display a simulated chat with five alternating messages between the user and the assistant. The message should be realistic and context related. So this is a very helpful function. And again, I would say for your initial prompt, my GPT might be super helpful. to set you up for success and then you can have this kind of lead you throughout the rest of the way so when we click on this because this is more aesthetic with very basic functionality i will expect this to work on the first try but sometimes it can take two to three times all right and we luckily got an error i like to be always positive about when we get errors so i'll say can you ruminate on what's happening here looks like it said unexpected token And that's pretty much all my intervention is typically geared towards just telling it reflect and try to fix. And you'll see sometimes let's say I see the issue. There's an XML closing tag here that accidentally got missed on the app TSX file. Now, while this is actually running, you can interact with this, by the way. So if you're not technically inclined, you can click on the code and then scroll through and see exactly what's happening where. And if you are technically inclined, this is where you can click on that tab. And even put this code in GPT if you find yourself hitting a wall and asking, hey, what do you think might be the problem here? This keeps failing. And then you can give that clue from GPT, which has more virgin eyes on the problem, and give it back to Bolt to resolve it. So in this case, got an error again. So still there. Try another way. And then we got an error again. So I'm going to screenshot this. Now it's a different error, meaning we're making progress. One thing that is helpful also is you want to see what is it. actually updating. So it is the chat dot TSX files, if you go into here, you go into chat dot TSX, you can assuming that it keeps happening over again, just copy this whole thing, put in GPT and say, Hey, what's the problem in bullets, and then you can say, Hey, here's everything you need to fix. So if this happens, again, I will do that. So in this case, I'm going to send this same type of error, different token. And I'm going to add one more thing here, super important. Because you're using, let's say, behind the scenes, Claude, in this case, all these LLMs can be lazy. So when you keep hitting a wall and you have this error that pops up, what's valuable is to say, make sure you generate the whole code end to end. Because what I noticed is that sometimes, just like with a normal experience, when you're asking it to build something, it can give you the full thing the first time. When it has an error, then it kind of shortcuts this response, focusing on just the one area that seems to be broken. And does it? repeat the whole code end to end. So then it breaks. So in this case, I'll say, make sure you're not being lazy and outputting the whole code end to end every time. All right, and we got it again. So as I promised, I'm going to go to chat and take this, I'm going to go to a new session, I'm going to say, you know what, let's pick a heavyweight model, look through this code, and tell me in bullets everything that's wrong. Having more of a heavyweight model that does truly ruminate on this situation should give us at least everything that's wrong. Give me some analysis and if I want it to be more detailed and I want to go into the actual issue I'll say you know what here's the main issue here's the main issue I want to resolve. All right so it comes back here with exactly how to fix it. So I'm going to go to likely cause. Yeah, I'm going to go to likely cause how to fix and correct it example. And I'm just going to actually take this and feed it in. I'm just going to paint this here and then fingers crossed, this should force it to really think about what's happening. So you can see here, I gave the code, I got an error one last time, and then I just said, please fix again. One thing I noticed also is that I'm going to go to the next one. When you have a very sobering message that makes it reflect, it will sometimes out of memory just hit it with the same error or basically repeats mistake and then when I say please fix in a slightly beggy desperate manner it then finally fixed it in this case when you click on this and load it you can actually see a fake conversation so it's really easy like I promised at the beginning of the video to go from thought to actual prototype very quickly it takes a bit more work to get to you know a very detailed prototype with very nuanced outcomes or nuanced results so you can see here any one of these now brings up a whole fake conversation where it has like even like a red icon. So yeah, that's the one part that is really important. So that's our first basic use case. Let's go to our second functional use case. All right, so let's start a net new chat here with Bolt. And then in this case, if you remember, we want to go through is we want to build a smart lead list connector. So imagine you're at a conference, imagine you're on a call, or imagine you're collecting leads wherever it might be. And someone's giving you their name, their email. and then their phone number. Ideally, you could record those in some form of Google Sheet, have a maybe perplexity step that goes and actually searches about the suffix of their domain. So let's say it's at AT&T.com, it'd go and search and give you bullets on that AT&T summary of the company, what they do, and how you might be able to help them. Now, instead of building a very bespoke and complex backend that I know inevitably, I'm going to have to have tons of errors to work through. I'm going to use a hack to use a workflow automation tool called make.com to provide us a little back-end webhook that we can send. And if you're not familiar with what a webhook is, imagine it's like an ear listening for a specific request. Once it hears that request, it kicks off a different set of automations. So on the front end, we'll have a very basic, pretty form that we fill out. And then when we click on a trigger, it will send the request to that ear or webhook to kick off with that automation. to do the research and log that contact into a Google Sheet. All right, so I'll use my voice just to be extra lazy here. I want to create an application that only takes three main components, a name, an email, and a number. And then there should be some form of button on the page that says search and contact or research and contact. I'll let you determine what the best kind of frame for this is. And then that will send a webhook request to a make.com instance. So I'll just send this and then ideally, if it's straightforward enough, it'll provide me with this little breakdown here with the key features. There we go. And then it even puts together a prompt for you in a code block to make it easy for you to copy paste. So then it asks you, do you want, would you like to send plain HTML, JavaScript? And then if you're not technically inclined, don't worry about those details. You'll see here, here's a project. Here's the features. And basically in my underlying prompt for this custom GPT, it tries to really lean down your request so that there's not a lot of fat or noise in the actual prompt itself. So one thing we're missing is just the actual webhook we're going to send the link to. So what we're going to do is I'm going to go into make.com. I'm going to click on create a scenario. And then I'm going to search for webhook. And if you're not familiar with this at all, just follow kind of the step-by-step. It should work. I'm going to create a new web hook, I'm going to call it bolt, I'll click on save. Now while it's saving, you're going to see it's going in this wind little wheel here saying stop, it's basically listening for what the structure of the data it should be triggered by looks like. So what we have to do is just copy the address of this ear to the clipboard, go back here and say, Can you add this to the prompt? So in this case, this should integrate this into the prompt we just got. And then this will allow us to easily copy paste this into bolt and then actually execute it. So in this case, here's the project. Here's the payload structure. And then I'm just going to copy all of this up until here. And then we'll go back into bolt and we'll paste it here. And we'll see how quickly. we can get to a point where we can actually send a request, because once that request is sent, that's 80% of the job done. All we have to do is just build the request on the back end. We can basically create that workflow, very basic, so it actually does that research and then stores it in a Google Sheet, and then we'll have something that is truly functional and can be used instantly. All right, so we have something like this here, and what we're going to do is I'm going to test it out to be able to send a request ideally to that webhook. So I'm going to say mark. and then here's my email and then I'm just going to put in a random number here 456789. I'll do research and contact and then it's saying not a valid number so let's try it with a plus. Oh, wow, it's doing validation. So I'm going to put my number here, I'm just going to blur it out. And then I'm going to click on research is going to say data submitted successfully. So in this case, I'm going to go into make, and you'll see here it says successfully determined, meaning it knows the structure of the data it's dealing with now, which is ideally a name and number. So I'm going to do this again. But this time, I'm going to right click and click on run this module only. The reason why I'm doing that is I want to test and just double check what it thinks I want as the payload. So I'll just do this again. Research and contact. If I go back into make, now it has an output. And when I click on this little icon on the top right, I'll be able to see what was collected. So this to me is perfect. I have a name. I have an email. I have a phone number. So now that I know this works. I will do kind of double time I'll work on the automation while I get this to make this prettier. So if I go to make.com, I really like their purple color scheme. So I'm going to screenshot it. And then I'm going to copy that to the clipboard, go into here, I'm going to say don't change functionality. But please emulate the color scheme of this screenshot, even the button, etc. So I'm going to do that on this side while on the make side, I can now start building my workflow now that I know I'll be receiving that. So let's say we want to do some research using perplexity. So I'm going to click on perplexity, I'm going to say create a chat completion. Now I'm already pre logged in, if you've never logged in, you're going to need a connection name. So you can call this perplexity. And then you need your API key. So where you'd get that is you go to perplexity. And then you want to go to obviously if you haven't created an account, assuming you want to do this is going to be paid. So assuming you want to pay, you can go on to settings and then you can go on to API. And then at the bottom here, you'll be able to create a brand new API key using generate. And in this case, we can just click on this once and then we should get a key here that we're able to use. And then if we hop back into Bolt, now it's made this into with make. We'll figure that out later, but we can paste this actual key in, click save, and then you should be able to start using it. Then for the model, you can use something that's like Sonar Small 128. That's the name of it. And then to the messages, we're going to say this is going to be a system message. And I'm going to say, do research on the suffix of this email to see if this is a real. company or just a Gmail or email service provider. If it is a company, summarize in succinct bullets, what the company does and how we can help them. And we can say, let's say we are an accounting and bookkeeping agency. So I'm adding that in there. taking the role on a business owner on how you can maybe tailor this research to your specific offering. Now it has to know what the email is. So I'm just gonna say, here's the email. And then I'm going to reference, that's why I ran it before so that I can actually have a tag example to feed in. I'm going to say, hey, take this email. And this is dynamic. So every time this changes, every time this runs, this will always be different while the prompt itself will remain static. So in here I'll say max tokens, let's say, I don't know, a thousand. I'll click OK. And what I like to do is to just run each part of the process step by step. So it's very clear to me what's happening. So I'm just going to click Save here. OK. And then I'm going to do the exact same thing. So in this case, I'm just going to enter, let's say, Mark. And then Mark at PromptAdvisors.com. And then let's just steal. their phone number let's see if that'll work one one five five five five and zero zero zero zero zero that doesn't work then we'll just use mine again so i'll do get started for free now in this case i it wasn't actually waiting for that trigger i believe you So if we, there we go, it says one record is waiting in the queue. So I'm going to turn this automation on. I'm going to say process old data. And now that it's basically triggered on on, anytime I send a request, it should run. So I'm going to do run. And now we see we got an error, which is always a good thing on a tutorial. So must have a role user. So I think I'm just going to switch this to a user prompt. I think a rookie mistake there. I'm going to run this again using existing data. And this is working. You can tell because it's not erroring out right away. And if we click on the result, you can see if we go to choices. And then we click on one. We click on message. And then content. It makes it really work for it. It goes through. And it does a full summary on what Prompt Advisors does and how you as an accounting firm or bookkeeping company can actually help this client. So we know this research part works. I would say it's a bit verbose. So the next thing I'd want to do is add a small GPT step to make it very succinct. So I'll add another step here and I'll say GPT and I'll say, let's go here. I'll go completion. And if you don't know how to get an API key, you just add your connection. In this case, you just need to add a name for it and then an API key. So for opening AI. Pretty standard, you go to platform.openai.com, go on your dashboard, and then on the left-hand side, you can just go get an API key from here, create a new secret key, call it whatever, and then you'll get a key. Once you paste that key here and save, you'll be able to use OpenAI. Assuming, by the way, that you have a funded account. So if you don't, then you want to make sure that you go to your usage, and then if you have, let's say, a $5 limit, If you have a starter account, you just want to be able to fund your account by going to settings and then billing and then adding an amount and then paying for it. So in this case, I'm using a different account that does have a credit card on file. I'm going to pick GPT-4 O-mini and then I'm going to click on add a message. I'm going to say, in this case, a system prompt and I'm going to say, we're going to take that output. So what we have to do is just kind of go down to go to choices. message content and before I'm gonna say Make this super succinct a max of five bullets Okay, so I'm gonna click on OK here and now let's try running it So let's do run and I'll do the same thing again here So I'll send that request and you'll see it's triggered it again. It's triggered that And then we get this GPT step that ideally when I go to choices, one message content, you'll see it's way more succinct than the original message. So now we get the final part, which is how do we add this all into a Google sheet? So let's add another step. Let's add Google sheet. Let's first create a Google sheet. I'm getting ahead of myself here. So let's do a brand new sheet and I'll put it side by side. I'm gonna call this lead list demo and we'll make three columns just to make actually four columns name email number and then we're going to do yeah let's call it info about company okay and let's do in this case nothing else we're just gonna bold it and then let's go into Google and see some random number here number for AT&T okay let's pick any number here this should be a valid phone number. So let's say we had a hypothetical person named John. So that's what we're going to do here. We're going to add a Google Sheet first, we're going to say, when John enters their credentials, we want to look up their email, we want to basically create a new row in the Google Sheet, where we store their name, email and a summary about the company. So if we add a row, in this case, again, you have to just authenticate yourself into Google Sheets by clicking Add an account, clicking Sign in with Google. assuming you actually have a Google account. And in this case, all you have to do is go on My Drive. You can click on Spreadsheet ID. In this case, I'll just call it Lead List Demos, what I call it. And then it's going to bring up all the different columns that you have once you bring in the sheet. So it's Sheet 1. And in the values here, you can see we have name, we have email, we have number, and we have info about company. So for name, we're going to just need to go here. because that's where we're getting that from the name is here and then the email is here the number is here. That's pretty easy. And the last thing, we're going to get the information of the company, at least the synthesized and more succinct version from the GPT step. So if we go into here, and we go into prompt completion, no, I think choices, then message, this is the content we want in that summary column. So once we click OK, we should theoretically, fingers crossed, be clear for this automation. So if we go back into Bolt, and we create John Doe and then John at let's actually make sure it's a fake one one two three at atn at and t at t let's go dot com and then let's go into this number here we'll take that and we'll paste this and say get started okay so it doesn't like that so I'll just put a t and t I don't know what the suffix usually is. All right, it doesn't like the phone number, so let's do this. Instead of a period, let's get started. So fingers crossed, that should have worked, and we'll see if it worked from here. Let me put this back to on. Process all data, and you'll see it's running here. And what I expect is to see a brand new row here with that information. So let's wait. Okay, so it looks like it's successful. I'm just going to double-click here to see what it entered. It should have entered. If I go to updates, if I go to values, John Doe, email, this. In this case, it actually did the research about AT&T. And if we go into the sheet itself, you'll see here, other than bolding the whole sheet by accident, we have the name, number, and info about the company. Now, very simplistic use case. But the idea here is we basically created a way to execute or trigger this automation. just from a front end that took us literally a minute to put together, just with that basic set of instructions. So you can basically put together a whole agent army that you can orchestrate from one central dashboard and execute as you wish. And the one thing that I didn't show in the previous demo is that you can actually click on Deploy here once you're ready to go, and you can use it using a URL. So in this case, I'm going to just switch up the UI a bit. I'm going to say, can we call it... Lead list researcher. And then instead of get started for free, should say research and store. And then what else? I think remove fill form to get started. Add cute animations that are floating around the form. Now. I don't care to actually do that, but I just wanted to show you the different types of things that you might be able to ask for. All right, and you'll see here we have our little floating icons here. We have lead list researcher. We have research in store. And then all we have to do to deploy this is click on deploy, and then it will take care of pretty much everything. It will generate a URL using something called Netlify. Think of it as a form of a server that you can implement on and use. And then theoretically, I can use this URL. pretty much wherever you'll see here we have this little tiny fairy URL. And if we open it in a brand new incognito window, you'll see that you can actually use it functionally. And then you can click on research in the store and it is a, it is a fully functional web application that connects to an existing automation. So again, the reason why I use an automation behind the scenes is to simplify what otherwise would have been a series of back and forth saying, Hey, can you find a way to connect to a Google sheet? Can you find a way to connect to perplexity? And it just helps ease the process. All right, and to remind you, the very last one we want to put together is creating a very simple CRM that, one, is functional. Two, can actually store contacts in a real database, not something right in front of you, not in a Make Automation or a Google Sheet. So that's going to be trickier. And what I'm going to do to start planning this design of the system is create a very simple workflow diagram using AI to actually help us with that process. So we're going to go into close all these tabs, deal with more of a blank canvas experience. I'm going to create a brand new chat here. If we go back and we go to new chat, I'm going to say frame my project. I want to create an unbelievably basic CRM that takes literally name, email, phone number, has a notes field. That way you can add notes that are stored about that client. You can have like a last contacted. column, and that's pretty much it. So I'm going to send that hopefully understands some of my misspoken words. So basics here, I'm for client management, client info, notes, field, etc. And then we also want to add authentication and a database. So it's even asking me here, and that's part of my programming is it says, Would you like the data to be stored locally, or with a database, so a Firebase or air table for persistence, I want to actually integrate it with Firebase. And if you're not familiar with what Firebase is, I'll show you very briefly. Now, you do have to not write any code. You just have to give it some code as an input to really facilitate this. So I'm going to go into Firebase. So it's firebase.google.com, and this will act as our database that's hosted in the cloud, which you can use... out of the gates for testing purposes for free. Now, if you want to productionize this, you actually want to do this at scale, this will be paid and you'll likely need a few other paid services to make sure you can scale properly. So if we go down here to get started, then you'll see I already have a couple different projects where I did have to just make sure I knew what I was doing before I told you how you can do it yourself. We're going to go to create a project and we'll call this simple CRM. We'll go on continue for... sake of simplicity, I'm going to turn off Google Analytics, we're going to click on create project, this will take anywhere from five to 20 seconds, and then it will create a new portal for us, where we'll then get what we need in terms of the functionality. Alright, so we're going to click on continue. And then you'll see a few different options here. So we have authentication, cloud firestore, storage and hosting. These two, we don't need to worry about comma for now, the ones we really care about are authentication. and the Cloud Firestore. This will act as your database. So if we click into here, you're gonna see it should be completely blank. There's no entries in there whatsoever. You can click on create a database and then you can click on next. You can keep that location as is. To do this very simply, just put it into test mode. Now, if you're wondering why I put it into test mode, it's just easier to deploy quickly versus production mode. If you did wanna make this very client facing, then you can do that. you'll have to see and configure specific things to make this work. So we'll click on create, it will now put together a blank database. And you'll see here, there's nothing to see. But there will be so we'll go back to the project overview. And you see here you have these little icons. In this case, we're building a web application. So you want to click on web, when you click on this, we'll call this again, simple CRM, we'll click on register application. And then you're gonna get some code. That code is what you're gonna feed into Bolt to help you actually implement the database in the code itself. So all we wanna care about, again, if you're worried about code, if you hate the look of code, all you have to do is close your eyes slightly and copy from here to here. That's your app ID, that's your API key. And then say, integrate this into the prompt. So it knows how to add the database, whatever. And I'll paste this here. Alright, so you can see here you have the project name, the features, we now have this Firebase configuration, we have this UI layout. And the last thing I'm going to ask for is, could you please create a mermaid diagram in a code block representing the flow of this app, although it's simple. So now it's going to generate a bunch of code that to 90% of you will look like complete gibberish. It will not look like gibberish. And soon as I copy this, and then go into live mermaid editor, so it's called mermaid dot live, it basically helps you put together very quick workflow diagrams without you actually connecting it yourself. So in this case, I'm just going to take the code they gave me, I'm going to paste it here. And you'll see it puts together a very quick and compact diagram. So you see here, it basically says the flow is the user opens the app. There's a form to add or edit client information. And when you click on submit, it actually sends it to the Firebase store. The data is saved in the database. The real-time updates are fetched, yada, yada, yada. So I'm going to use this as an input on top of my prompt to increase the likelihood of success. So I'm going to go here. into let's go to the prompt that we have here. So I'll take this. And we'll copy. We'll then go back into Bolt. Let's create a new session. We'll paste this. And then let's go back to here. I'm going to just minimize just a tad. I'm going to screenshot. And I'm going to add this as additional context to Bolt. So I'm going to paste this here. And then we're going to send this all. I want to make sure we have our credentials here for the Firestore. We do. So we're going to just cross our fingers and this one could get dirty, which is fine because it'll help me help you figure out how to troubleshoot. OK, so this is our first draft. I'm even scared to try it out, but it took around a minute and a half to just kind of load up. And here we'll give this a shot. So let's try Mark Kashuv and then we're going to try email, whatever. And then we're going to try. do let's do my business phone number so let's go there and six three nine four all right and then we'll see some notes he seems like a weird person which is slightly accurate so if you add client so that has quote unquote created a record now we'll have to see did it actually create a database entry for that but you can see here oh actions interesting So I don't know what the clock thing is supposed to do. I would imagine this deletes the row. But last contacted was today, contact info, etc. Okay, so what I want to go back to is go into the Firestore and see did we actually have this logged in. So if we go back to continue to console, and we go to Firestore, I see an entry here, I'll be happy. So in this case, look, we now have a functioning app that even if I were to refresh the page, it should still be there. So if I refresh this, we should still have this entry because it's basically stored, or it persists in a real database. So the next thing to test is, can we add a authentication account can we create an email and password, which is where that authentication piece comes into play. So let's go here and say, can we add authentication, so that someone can use their email to log in. and create an account as well as reset their password. So before I send this, I'm going to go into Firebase, back to project overview, and then it wouldn't go into authentication. And then I'm going to click on get started. And it should prompt me what kind of authentication I want. You can do the whole Google sign in Microsoft sign in Twitter sign in, I'm just going to use for the basis of this demo, email and pass old reliable. So in this case, I'm going to click on enable and click on save. All right. So now this should have been quote unquote created. We're going to click on email pass. All right. That seems all good. And if I go to users, we don't have any users as of yet. But if we go back into here and say create authentication through Firebase. I already set up the auth on that side. And ta-da, after another two minutes, it created this where I'm curious now if I add, you know, my name or let's create an account here. Okay, let's do sign up. Moment of truth. Oh, so we got an error here. What is the error? So say some form of error. The query requires an index, yada, Let's assume I have no idea what that means. All right, so we got now this view rendered. There's some form of logout or login. So I'm curious if I log out and I log back in with this account I made, if it'll work. So it looks like I can log in, but it still says it has a problem, but it's a different problem. Anytime you see the same problem over and over again, then you probably are hitting a wall. When you hit a wall, you have two options. You try to go back and forth like the very first. portion of this video in the demo, or you can start a net new chat, taking what you learned into account into that initial prompt. So if you know that authentication is going to be a problem later on, if you add it, maybe it would have added authentication as a requirement in the beginning. So in this case, I'm just going to click on fix a problem. All right. So we got this version where I don't see that fix a problem, little bubble. So let's create a new account here. Let's create a fake email. So I go to temp email. dot org will create a fake email. I'm assuming it's not sophisticated enough to know fake from real. So let's call this sign up. I'll say this. And let's make the password. Hello. And then the password Hello, click on sign up. Oh, I don't know why I created a fail account. So let's try. Let's try another email. Let's try this one, for example. Oh, failed account. So curious what's happening there. It's just wants an email address and yet it's not working. If I go into the simple CRM, the database, I can see my initial one there. But I'll say now I'll screenshot this. I will then paste this here. And then I'll say, hey, when I enter whatever email, it keeps erroring out. Can you help fix? All right, so take three. Let's try this again. Let's try just for simplicity. Let's do this. And then there's an error now. It might be on me. Here, I'll make my life easier. Hello, world. I'll copy that, paste it here, paste it here, sign up. Something happened, but clearly we have a bunch of new bugs here. So we can click on fix. All right, and after the second fix, we now seem to be logged into an account, and it seems to be able to successfully create a net new account. So if I made, ideally, hopefully, abc at gmail.com, or let's go to sign up rather, abc at gmail.com, and we made test, test, test, test, test, and we click sign up, it should create an account. And if we go into... the authentication and we refresh, we should see a new account for abc.com where now there's a user ID. And that user ID basically allows us to track the usage of the user, see what's happening. And they can do, for example, forget your password. So if we go back into Bolt, and now for this ABC account, we added a new person. So let's add myself again. Okay. And we have some number here and we have he's Really bad at prompting. And we add add a client. Now, number one thing is if we go back to the database, we should have slightly different database entry. And the reason why is now that we have a user attached, there should be a user ID attached to whoever is actually adding this record. So if we go to the next one, you'll see here now we have user ID, which again, if you're not technically inclined, just allows us to attach memory. of clients in the CRM to whoever's actually logged in. So, you know, the first email will have a different set of clients, this will have a different set of clients. So when you log in to those different accounts, you should have different actual logins. So now we're on track to making a very simplistic, but an interesting simple CRM here. So let's go back and log out. Okay, and then I'm going to go back here. And I'm going to say, can we make this CRM look a lot prettier and i'm going to go into here and it looks i'm going to say find me the best looking crms now i'm going to go to images and then yeah let's do something like this where i can copy this i don't know which software this is but i attached the vibe i'm going for as an image keep all the core functionality the same. Alright, so it's promised us a much sleeker design. So I don't even remember the credentials of my last email I used here. But let's say it's abc at gmail.com. I think the password was test test. So we sign in. Alright, now wow, we are actually getting a nice looking CRM here we have companies. I don't know if that functions or not. Let me refresh here. Oh, yeah, so I don't know if these tabs work. I know this has still kept our record from before, but we're definitely making some progress. All right, so when I click on those, it doesn't seem to actually do anything, but we're making some progress here. So can we make it so that the suffix of the email we enter in contact info? now becomes logged as a company name in the companies tab, that notes get stored in the important tab, that I won't make it too complicated, and that in the other tabs, you can now enter things like deals, and that there are fake reports in the reports tab and fake documents in the document tab. I just want everything to function, but companies and important to be the only ones that actually inherit entered data. And now this is a good time for me to gentrify my prompt using the enhance prompt. So it's done a much better job than me with mock data here. It's very good at doing that. So I'll do this. All right, so it's reloaded. And now we have it called SimpleCRM. Looks very legit. If I click on Companies tab, let's see if that does anything. So I don't see anything. Let me click on Recents. Nothing. If I click on Messages, nothing. So I'll just tell it, hey, when I click on the tab, the screen goes white. and I don't see anything. This goes for all tabs. And let me just check documents here. Because there could be one small thing that's stopping it from actually propagating on the front end. So I'll just send this and oh, looks like I used all my tokens. So I'm going to pay just for the sake of this video. I'm going to pause this as while I do that. All right, we're now back to regular programming. And I'm going to just go on one of these pages, screenshot the screen, throw it here. I'm going to say when I click on the tabs, other than all the contacts, the screen goes white and I don't see anything. So I'll send that over. All right. And after I sent this request, now you can click on all of these tabs and see something, at least for most of them. So let's click on deals. So now we have some fake deals. We have reports. We have documents. Let's see. Okay. So it's important to give it its feedback. So in this case, let's see. Does messages work? No. So I'll say important works. Recent messages. and documents. So important, recent messages, and documents still don't have anything. And you can see above it acknowledge the issue saying it's a routing issue. The problem is that we need to update the app component to include all the routes for the different tabs. So in this case, we're just going to add that. And then we're going to try to integrate one last feature before we call it quits. Alright, so it ran again. And this time, we can click on every single tab. And at the very least it loads. Even here it was smart enough to say coming soon, messages, deals, reports, documents. And this literally looks like an actual CRM, but we've built it in a very short amount of time. Now we'll add one more feature here, purely out of interest, and see if we can kind of wrangle it. And I only want to show you because it'll help you just also unlock another mini skill set that you can use with Bolt. So I'm going to go into, let's say, a brand new GPT session. And then I'm going to click on search the web. Can you look up how to send a request to open AI's gbt4o mini and give me a placehole basically a code Snippet to quickly Implement it now myself. I've done this a bunch of times so I know how to do this off the top of my head But let's assume you did not know how to do that. So let's take this code here. So Let's assume I can't read any of this. This looks reasonable. I'll quickly check. Yeah, it looks decent. Now, on your end, if you couldn't do that mini second check and see, oh, is this reasonable? It's all about pasting it, pasting it back into Bolt. If it doesn't work, clearly there's something wrong. So in this case, I'll just copy this. I'll say on the contacts tab, can we add a feature that lets me click into a contact? And on the contact card, I have a research button that uses OpenAI to search the subject or the industry of the company that I will write as freeform text. to allow me to see a summary of what that person or contacts company does. Now this looks like a mess. So I'm gonna click on enhance prompt, okay, and then I'll say here's a snippet of how to use opening up and I'm going to paste that code that we just got from the search GPT. And what I'm going to do is I'm going to pause this video, I'm going to add my API key and send the request and I'll show you the result of that request. All right, so now if we click on the contact after running, and I click here, you'll see one, I can actually get into a card. And then now it says the metadata that we have here, we have research, which won't do anything because there's no free form text for me to actually do the research. Now, the way I should have done this and planned out my CRM is I should have a company field, duh, that I can actually use and connect it to the research. So We can try to give this a shot. Retroactive changes are always harder after the initial prompt. So if I say, can we add a company field to the client contact so that it's not just what we have now, which is name, contact info, notes, and last contacted. What else do we have? Okay. I want a company field. And for the research button in the client contact card to just research said company. When I click on research. Okay, and then I'll probably has to add it to the database We probably need to add the company as an entry in Firebase and then what else we need that's all I can think of right now low on brain juice so I'm just going to gentrify the Prompt here. See it looks a lot nicer notice how it made it one two three four and Yeah, I'm just gonna pray. I'm just gonna put this here and we'll see how it goes All right, so now it says it's made all these updates. So if I add a new contact, let's do John Doe, John at Doe.com. And then let's do some phone number. Let's just do my phone number. And then let's call the company something more reputable, like Shell Gas Company. And then he's an oil magnet. And I click on add content now. That seems to have worked. If I go here and click on, at least you can see here, it's now Shell Gas Company. Click on Research Company. This to me will be awesome if it knows to dynamically go to that company, send it as a prompt, and there you go. Now we have a actually functional, you know, low-fidelity CRM that can use Genov AI to tell us about the company that's here. And you can imagine the possibilities with this are truly endless. We click on that. then theoretically we could click deploy. Now we could have a link to a CRM that ideally, if we make more improvements to all these tabs, we could have also circumvented paying for multiple thousands and thousands of software. And realistically, what would be interesting here is actually providing this to a team of developers and saying, hey, here's where we're at. Can you make this more bulletproof or scalable? And one main thing and one main reason why I picked CRM is We meet so many clients on a weekly basis that are stuck in their CRMs and always wish or in search for a CRM that's hyper tailored to their needs. My bet about the SaaS space in general and the software space is that in 6 to 12 months from now, a lot of companies will be able to design their own softwares that perfectly fit their business, have the features they need, and don't necessarily need the support from a support team to add different features or weight for features that don't exist yet. So that's why I went with this because this caught my eye as a really interesting use case and a very disruptive use case for the future. And you can see here, I just finished getting the deployment link and let's try that ABC email and test, test and sign in. We actually have a fully functional CRM, at least that can add contacts and we could probably spend the next few hours building out the companies tab, the important tab, the messages tab. And we could build something pretty interesting in a very short amount of time. So that is my zero to hero explanation of how to use Bolt.new. And hopefully through watching this tutorial, you can see how potent it is and basically what you need to do to troubleshoot to get to your end result of your dreams. This is probably the worst that this kind of software and these kinds of softwares are going to be, which is super promising because anyone that's non-technical will be able to go from genuinely an idea to in the future a fully scalable app most likely that is deployable custom to them and is perfect for their use case if you found this helpful and most importantly intriguing let me know in the comments below if you'd like me to make a part two of the video and what you'd like me to build because it's actually very fun for me to build these tutorials because i get to one squirm right in front of you and two i get to learn a lot along the way on how far i can push these kinds of softwares so hopefully it's helpful give a like to the video a sub to the channel and i'll see you next time

If you're new to the channel, my name is Mark, and I've been running my own AI automation agency called Prompt Advisors for the past two years. We work with companies in all industries better understand where to use AI best in their workflow. My main goal and ambition in this video is to show you how you can quickly start using and leveraging bolt the best practices for actually prompting it because this is an art form that if you get it right you can really reap the rewards of this platform and as you'd expect as a viewer of this channel i'm going to build out three different business oriented builds using bolt one that's more on the non-functional side but showing you the power of creating a prototype very quickly another one that is semi-functional and actually usable in minutes and the last one which is more of a moonshot that i haven't even practiced building before I'll be building it right in front of you on purpose that you can not only see me squirm and derive value from that, but see what I do to try to troubleshoot and push the limits of this application so that you know what you can or can't do with it, at least as of today. If that sounds like a plan, then I'm going to jump into some slides really quickly to lay the foundation of what we'll be speaking about, and then we'll start building.

All right, so real quick, when you log into Bolt for the first time, you're going to see something like this after you've made a user account where... You can have some suggestions as to what different apps you might be able to build. And then pretty much you have a few things at your disposal here.

You have this area where just like ChatGPT or Cloud, you can write a prompt here saying what you're actually going for. So you can say something like, I want to build an application where we have some form of box that says upload file. And it would invite us to upload files.

And then we have a chat that talks to those files in real time. And that could be, for example, an entry prompt. You have this ability to attach both images as well as files.

And you'll see when I actually try and build with this, how this can become really useful, especially if you feed screenshots of not just what's going wrong, but maybe the type of application you're trying to even emulate. The cliche saying of a picture's worth of thousand words really comes into play here, and I'll show you how to take advantage of that. In this group of little stars here that you see probably in tons of AI tools, in this case, lets you take...

a entry prompt and tries and refines it using their own UI to help you do the prompt engineering necessary to get the outcomes you're looking for. Now one thing I've built for all of you that you'll be able to take advantage by the end of the video is a custom GPT that pushes back on your idea to set you up for as much success as possible if you choose to use this platform so you have the best entry prompt possible to set you up for success. Now basic concept is you write prompt and and it creates some form of rendering of a user interface that you can interact with.

The beauty is once you're actually done with it, you can click on one button on the top right called deploy, and then you'll get a URL that you can now use and share with your colleagues and quickly battle test your ideas or concepts. Now behind this, and this is really important for anyone trying to understand how these tools work, is a series of large language models. And in this case, at least as of today's recording, bolt.new seems to use Claude behind the scenes.

obviously with their own architecture, to build the code in real time. So clearly they have some form of logic that understands how to best plan a project, how to best organize a project, but the actual building of the code and the rendering of the view is all being taken care of by a large language model. Knowing this is instrumental because if you just encounter problems where maybe for one moment it's loading and for the next moment it's not, it could be that the underlying large language model is being lazy.

As Chachapiti sometimes lazy, Claudiai sometimes lazy, so understanding what you're dealing with, you're not dealing with magic, but more so an LM trying to create a magical experience, will help set you up for success and better understand when things are not going too well. And like I've been harping on already, the very first prompt is one of the most impactful and important prompts in this experience, because it really sets the foundation and sets the tone for how it's going to initially design the code, how it's initially going to design the actual features you're going to be dealing with. It's really easy to change aesthetic things.

It's harder to change very functional things once you've had it kind of dig its roots down into a specific build. So having clarity on what you're trying to accomplish is super important. If you want to... see success very quickly and be actually able to build something in minutes on this platform. Now, this is what's on the menu today.

So first, we're going to build a non-functional prototype of an internal chat app. So imagine you're in an organization, you have a bunch of data, and you want to prototype what you'd want to build internally to have some form of shared knowledge base. This may be more on the secure side, not using ChatGPT or Cloud Enterprise, but something you can use and host internally.

And the reason why I'm purposely making it non-functional is just to show you probably the most high leverage use case you can use this tool for, which in my eyes is the design of the idea. A lot of videos sensationalize the idea of building an AI SaaS in five, 10 minutes you can sell for thousands of dollars. But as of today, realistically, that's not going to happen.

Now, I think that in the short term future, you're going to be able to build a lot more scalable solutions with this. But the real value for me today as a business owner from this tool. is that I am less inclined to hire a designer because I can actually go on a client meeting, listen through the requirements they're looking through, and actually map something out that then I can give to my engineering team and we can actually build it out.

Now, for the next app, we're gonna make it functional and we're gonna make a smart lead list where we just collect a few pieces of information and then we create an automation that can take that information and store it in an Excel database that we create. They can also look up the company of whoever's signing up for our list. This one's not going to be super impressive, but I'll start giving you the building blocks of what's possible. For the last one, I am going to try something more complex that I haven't tried before, which is building a very basic CRM that is functional, that one, can actually store records, meaning it has its own database using Firebase. And I'm also going to show you how to actually try to map out building something more complex, so that the likelihood...

of your first prompt ending up into the 80% of what you're looking for is much more achievable. And if you're not familiar with what Mermaid is, I did record a whole video on it, but I will give you a small crash course on how to use it and how you can feed it as a part of your entry prompt so that this becomes a lot more doable. And as a little cherry on top, I'm going to show you how we can quickly add authentication, meaning creating a login for emails and passwords so that multiple users can have accounts. where their settings and their logins or their contacts are actually being stored in this database dynamically. That sounds like fun, I'm going to jump into bolt and we're going to start building.

Alright, so in this case, I can start off with my own version of a prompt, especially if it's more basic where I say, I want to create an internal web application where we have an app that we can upload PDFs, docx files, and PowerPoints. And on one side, we have the area to upload with that cloud icon thingy. If you're familiar with that, you must have seen that a bunch of apps.

And on the right side, we will have a chat bot area that allows you to pick different large pages. language models to speak to. And then you can have a toggle that says secure message that will use a secure provider, like let's say Azure OpenAI, which is like a Microsoft instance. So we have some like this, this should be able to at least build some semblance of what I'm looking for. Now the GPT I put together for all of you just to help you out is if you say frame my project, And it's going to ask you what you're looking to build.

It's going to be slightly, it's going to push you back a bit to understand what you're looking for. But you'll see here, here's how we can frame your project. Let's break it down step by step.

And then here it's trying to basically gentrify my chicken scratch. So I can just say this is what I'm looking for here. And then I can copy paste this instead of what I wrote.

I want to build the following. Okay. And then if we paste this here. So we have a file upload interface, we have a chatbot area. And although this won't matter for the LM, I like for my own OCD to space things out.

And let's say I had a look and feel I was going for. So let's say I really like the color scheme of po.com. So if I like this, I like their whole purple scheme. Let's go to like a little chat agent here, whatever. Let's go to one of these or create a new chat.

And I'll just screenshot this. I'll copy it. I'll go to bolt.new.

I'll paste it. And at the very bottom, take the color scheme and general design from the screenshot I provided. Now, if I wanted to make this functional, which we don't for the first one, I would try and give it some hints on how to use the different LLMs, how to actually call them.

And again, if you're worried about having to know how to code, My hack around that is using something like perplexity, or you can now use the search GPT from chat GPT to ask, hey, can you pull up documentation for how to integrate OpenAI into an application, right? Or how to call GPT-4.0 using the backend. And then it should be able to give you a code snippet that you can paste and give it as a clue.

In this case, we don't care for that. We just want to go from, again, thought to an MVP. So if we click enter here, it will start building on the right-hand side. And you'll see it actually go through its coding. And here it's building on a framework that's called React.

Now on their application, you can ask to build in different frameworks. React is typically very well used, very well known. And a lot of AI SaaS applications that you interact with on a daily basis are built on something like React.

All right. And you can see right here, it literally took, before I even talk about anything else, it took the purple from my screenshot and it created this little file upload thing. on the side here and you have you can choose between different llms to speak to and you have this little secure mode toggle you can click on etc so again we went from a very basic idea to having something that we can now have a conversation about whether it be to investors whether it be to a client whether it be to your internal team being able to put a thought on paper or in this case a thought on an interface allows you to have the discourse you need to get to what the requirements should be so in this case if i go here and i say I want the chat interface to look like a Silicon Valley, well funded startup designed it.

Try and be thoughtful about how pretty it is, the UI and UX using the best design principles. So I'm going to send this. And while it actually loads, I'm just going to give you a little bit of a debrief. This tool is quote-unquote free to use up until a limit. And usually to build something more complex, you will need some credits.

So I think it's around $20 a month starting for credits. You can get away with the free one just to kind of test out some very basic concepts. But just prefacing that there that if you want to use this on a very daily basis like we are right now at the agency, we're going to be paying at least a $20 to $50 a month plan. just to be able to go back and forth with this. So in this case now, we have a new rendering where it hasn't changed too much, but at least designed this little style here.

This style of the box compared to the blank one before looks like at least intercom, if you're familiar with that tool, and has that little beaming green button saying you're available. And then it has the ability to attach, attach an image, add an emoji. And obviously it's not functional, but I can say at least, can you make the emoji button functional? So I can pick an emoji. And what other changes I want?

Underneath the file upload, can you show some fake chat history. Now what I'm going to do here is just show you how the prompt standardization or enhance prompt feature works. So if I click on enhance prompt, It's going to go through and it made it again more gentrified.

Add emoji picker functionality to the button and display a mock chat history below the file upload section. Include timestamps, avatars, and example conversations. So it did a really good job in this case. Where you might want to take the prompt for yourself is when you really have very thoughtful, non-generic ideas to add. And you know exactly what you're looking for.

So we'll send this and I'll cut to the part where it actually finishes. And you'll see here I'm happy to see an error because... Sometimes you will get an error.

So in this case, it's telling me something. Let's assume I am not technically inclined. I'll say, okay, there's an error on screen.

Can you ruminate on how to fix it and fix it? I love the using the word ruminate in all kinds of LMS because it's a very heavy word meaning reflect on it. Don't just say fix it.

So sometimes that's my hack to increase the likelihood of fixing it the first time. Now sometimes bugs pop up and it takes one to three times for it to get resolved, assuming what you're asking it to do is one, doable, two, it has the training it needs to accomplish it. So because this is using Claude behind the scenes, it's not necessarily cognizant of all frameworks, especially the newer ones. So that's where it might be helpful to spoon feed it some ideas on what exactly you're going for. So in this case, I got the error again.

So I'll say, please. resolve this issue right now and I'll screenshot it again. Remove the unexpected token. I'm not doing anything smart here, I'm literally just reading what it's saying.

And like I said, third time's a charm in this case. So you'll see we have the recent conversations here that are completely fake. And if you want to add one more thing here just to finish this idea is I can say, when I click on one of these recent conversations, Can you show a fake back and forth conversation?

And I'll say, let's say five messages back and forth. I'll click on the prompt enhancer. Okay, so let me just double check that it actually did what I want to do.

Display a simulated chat with five alternating messages between the user and the assistant. The message should be realistic and context related. So this is a very helpful function.

And again, I would say for your initial prompt, my GPT might be super helpful. to set you up for success and then you can have this kind of lead you throughout the rest of the way so when we click on this because this is more aesthetic with very basic functionality i will expect this to work on the first try but sometimes it can take two to three times all right and we luckily got an error i like to be always positive about when we get errors so i'll say can you ruminate on what's happening here looks like it said unexpected token And that's pretty much all my intervention is typically geared towards just telling it reflect and try to fix. And you'll see sometimes let's say I see the issue. There's an XML closing tag here that accidentally got missed on the app TSX file.

Now, while this is actually running, you can interact with this, by the way. So if you're not technically inclined, you can click on the code and then scroll through and see exactly what's happening where. And if you are technically inclined, this is where you can click on that tab. And even put this code in GPT if you find yourself hitting a wall and asking, hey, what do you think might be the problem here? This keeps failing.

And then you can give that clue from GPT, which has more virgin eyes on the problem, and give it back to Bolt to resolve it. So in this case, got an error again. So still there.

Try another way. And then we got an error again. So I'm going to screenshot this.

Now it's a different error, meaning we're making progress. One thing that is helpful also is you want to see what is it. actually updating. So it is the chat dot TSX files, if you go into here, you go into chat dot TSX, you can assuming that it keeps happening over again, just copy this whole thing, put in GPT and say, Hey, what's the problem in bullets, and then you can say, Hey, here's everything you need to fix. So if this happens, again, I will do that.

So in this case, I'm going to send this same type of error, different token. And I'm going to add one more thing here, super important. Because you're using, let's say, behind the scenes, Claude, in this case, all these LLMs can be lazy. So when you keep hitting a wall and you have this error that pops up, what's valuable is to say, make sure you generate the whole code end to end. Because what I noticed is that sometimes, just like with a normal experience, when you're asking it to build something, it can give you the full thing the first time.

When it has an error, then it kind of shortcuts this response, focusing on just the one area that seems to be broken. And does it? repeat the whole code end to end. So then it breaks.

So in this case, I'll say, make sure you're not being lazy and outputting the whole code end to end every time. All right, and we got it again. So as I promised, I'm going to go to chat and take this, I'm going to go to a new session, I'm going to say, you know what, let's pick a heavyweight model, look through this code, and tell me in bullets everything that's wrong. Having more of a heavyweight model that does truly ruminate on this situation should give us at least everything that's wrong. Give me some analysis and if I want it to be more detailed and I want to go into the actual issue I'll say you know what here's the main issue here's the main issue I want to resolve.

All right so it comes back here with exactly how to fix it. So I'm going to go to likely cause. Yeah, I'm going to go to likely cause how to fix and correct it example.

And I'm just going to actually take this and feed it in. I'm just going to paint this here and then fingers crossed, this should force it to really think about what's happening. So you can see here, I gave the code, I got an error one last time, and then I just said, please fix again.

One thing I noticed also is that I'm going to go to the next one. When you have a very sobering message that makes it reflect, it will sometimes out of memory just hit it with the same error or basically repeats mistake and then when I say please fix in a slightly beggy desperate manner it then finally fixed it in this case when you click on this and load it you can actually see a fake conversation so it's really easy like I promised at the beginning of the video to go from thought to actual prototype very quickly it takes a bit more work to get to you know a very detailed prototype with very nuanced outcomes or nuanced results so you can see here any one of these now brings up a whole fake conversation where it has like even like a red icon. So yeah, that's the one part that is really important.

So that's our first basic use case. Let's go to our second functional use case. All right, so let's start a net new chat here with Bolt. And then in this case, if you remember, we want to go through is we want to build a smart lead list connector.

So imagine you're at a conference, imagine you're on a call, or imagine you're collecting leads wherever it might be. And someone's giving you their name, their email. and then their phone number.

Ideally, you could record those in some form of Google Sheet, have a maybe perplexity step that goes and actually searches about the suffix of their domain. So let's say it's at AT&T.com, it'd go and search and give you bullets on that AT&T summary of the company, what they do, and how you might be able to help them. Now, instead of building a very bespoke and complex backend that I know inevitably, I'm going to have to have tons of errors to work through. I'm going to use a hack to use a workflow automation tool called make.com to provide us a little back-end webhook that we can send. And if you're not familiar with what a webhook is, imagine it's like an ear listening for a specific request.

Once it hears that request, it kicks off a different set of automations. So on the front end, we'll have a very basic, pretty form that we fill out. And then when we click on a trigger, it will send the request to that ear or webhook to kick off with that automation. to do the research and log that contact into a Google Sheet.

All right, so I'll use my voice just to be extra lazy here. I want to create an application that only takes three main components, a name, an email, and a number. And then there should be some form of button on the page that says search and contact or research and contact.

I'll let you determine what the best kind of frame for this is. And then that will send a webhook request to a make.com instance. So I'll just send this and then ideally, if it's straightforward enough, it'll provide me with this little breakdown here with the key features. There we go. And then it even puts together a prompt for you in a code block to make it easy for you to copy paste.

So then it asks you, do you want, would you like to send plain HTML, JavaScript? And then if you're not technically inclined, don't worry about those details. You'll see here, here's a project.

Here's the features. And basically in my underlying prompt for this custom GPT, it tries to really lean down your request so that there's not a lot of fat or noise in the actual prompt itself. So one thing we're missing is just the actual webhook we're going to send the link to. So what we're going to do is I'm going to go into make.com. I'm going to click on create a scenario.

And then I'm going to search for webhook. And if you're not familiar with this at all, just follow kind of the step-by-step. It should work. I'm going to create a new web hook, I'm going to call it bolt, I'll click on save.

Now while it's saving, you're going to see it's going in this wind little wheel here saying stop, it's basically listening for what the structure of the data it should be triggered by looks like. So what we have to do is just copy the address of this ear to the clipboard, go back here and say, Can you add this to the prompt? So in this case, this should integrate this into the prompt we just got. And then this will allow us to easily copy paste this into bolt and then actually execute it.

So in this case, here's the project. Here's the payload structure. And then I'm just going to copy all of this up until here. And then we'll go back into bolt and we'll paste it here.

And we'll see how quickly. we can get to a point where we can actually send a request, because once that request is sent, that's 80% of the job done. All we have to do is just build the request on the back end. We can basically create that workflow, very basic, so it actually does that research and then stores it in a Google Sheet, and then we'll have something that is truly functional and can be used instantly. All right, so we have something like this here, and what we're going to do is I'm going to test it out to be able to send a request ideally to that webhook.

So I'm going to say mark. and then here's my email and then I'm just going to put in a random number here 456789. I'll do research and contact and then it's saying not a valid number so let's try it with a plus. Oh, wow, it's doing validation. So I'm going to put my number here, I'm just going to blur it out.

And then I'm going to click on research is going to say data submitted successfully. So in this case, I'm going to go into make, and you'll see here it says successfully determined, meaning it knows the structure of the data it's dealing with now, which is ideally a name and number. So I'm going to do this again.

But this time, I'm going to right click and click on run this module only. The reason why I'm doing that is I want to test and just double check what it thinks I want as the payload. So I'll just do this again. Research and contact. If I go back into make, now it has an output.

And when I click on this little icon on the top right, I'll be able to see what was collected. So this to me is perfect. I have a name.

I have an email. I have a phone number. So now that I know this works. I will do kind of double time I'll work on the automation while I get this to make this prettier.

So if I go to make.com, I really like their purple color scheme. So I'm going to screenshot it. And then I'm going to copy that to the clipboard, go into here, I'm going to say don't change functionality. But please emulate the color scheme of this screenshot, even the button, etc. So I'm going to do that on this side while on the make side, I can now start building my workflow now that I know I'll be receiving that.

So let's say we want to do some research using perplexity. So I'm going to click on perplexity, I'm going to say create a chat completion. Now I'm already pre logged in, if you've never logged in, you're going to need a connection name. So you can call this perplexity.

And then you need your API key. So where you'd get that is you go to perplexity. And then you want to go to obviously if you haven't created an account, assuming you want to do this is going to be paid. So assuming you want to pay, you can go on to settings and then you can go on to API.

And then at the bottom here, you'll be able to create a brand new API key using generate. And in this case, we can just click on this once and then we should get a key here that we're able to use. And then if we hop back into Bolt, now it's made this into with make. We'll figure that out later, but we can paste this actual key in, click save, and then you should be able to start using it. Then for the model, you can use something that's like Sonar Small 128. That's the name of it.

And then to the messages, we're going to say this is going to be a system message. And I'm going to say, do research on the suffix of this email to see if this is a real. company or just a Gmail or email service provider. If it is a company, summarize in succinct bullets, what the company does and how we can help them. And we can say, let's say we are an accounting and bookkeeping agency.

So I'm adding that in there. taking the role on a business owner on how you can maybe tailor this research to your specific offering. Now it has to know what the email is.

So I'm just gonna say, here's the email. And then I'm going to reference, that's why I ran it before so that I can actually have a tag example to feed in. I'm going to say, hey, take this email. And this is dynamic. So every time this changes, every time this runs, this will always be different while the prompt itself will remain static.

So in here I'll say max tokens, let's say, I don't know, a thousand. I'll click OK. And what I like to do is to just run each part of the process step by step. So it's very clear to me what's happening.

So I'm just going to click Save here. OK. And then I'm going to do the exact same thing. So in this case, I'm just going to enter, let's say, Mark.

And then Mark at PromptAdvisors.com. And then let's just steal. their phone number let's see if that'll work one one five five five five and zero zero zero zero zero that doesn't work then we'll just use mine again so i'll do get started for free now in this case i it wasn't actually waiting for that trigger i believe you So if we, there we go, it says one record is waiting in the queue. So I'm going to turn this automation on.

I'm going to say process old data. And now that it's basically triggered on on, anytime I send a request, it should run. So I'm going to do run. And now we see we got an error, which is always a good thing on a tutorial.

So must have a role user. So I think I'm just going to switch this to a user prompt. I think a rookie mistake there. I'm going to run this again using existing data.

And this is working. You can tell because it's not erroring out right away. And if we click on the result, you can see if we go to choices. And then we click on one. We click on message.

And then content. It makes it really work for it. It goes through.

And it does a full summary on what Prompt Advisors does and how you as an accounting firm or bookkeeping company can actually help this client. So we know this research part works. I would say it's a bit verbose. So the next thing I'd want to do is add a small GPT step to make it very succinct. So I'll add another step here and I'll say GPT and I'll say, let's go here.

I'll go completion. And if you don't know how to get an API key, you just add your connection. In this case, you just need to add a name for it and then an API key.

So for opening AI. Pretty standard, you go to platform.openai.com, go on your dashboard, and then on the left-hand side, you can just go get an API key from here, create a new secret key, call it whatever, and then you'll get a key. Once you paste that key here and save, you'll be able to use OpenAI.

Assuming, by the way, that you have a funded account. So if you don't, then you want to make sure that you go to your usage, and then if you have, let's say, a $5 limit, If you have a starter account, you just want to be able to fund your account by going to settings and then billing and then adding an amount and then paying for it. So in this case, I'm using a different account that does have a credit card on file. I'm going to pick GPT-4 O-mini and then I'm going to click on add a message.

I'm going to say, in this case, a system prompt and I'm going to say, we're going to take that output. So what we have to do is just kind of go down to go to choices. message content and before I'm gonna say Make this super succinct a max of five bullets Okay, so I'm gonna click on OK here and now let's try running it So let's do run and I'll do the same thing again here So I'll send that request and you'll see it's triggered it again. It's triggered that And then we get this GPT step that ideally when I go to choices, one message content, you'll see it's way more succinct than the original message. So now we get the final part, which is how do we add this all into a Google sheet?

So let's add another step. Let's add Google sheet. Let's first create a Google sheet. I'm getting ahead of myself here.

So let's do a brand new sheet and I'll put it side by side. I'm gonna call this lead list demo and we'll make three columns just to make actually four columns name email number and then we're going to do yeah let's call it info about company okay and let's do in this case nothing else we're just gonna bold it and then let's go into Google and see some random number here number for AT&T okay let's pick any number here this should be a valid phone number. So let's say we had a hypothetical person named John. So that's what we're going to do here.

We're going to add a Google Sheet first, we're going to say, when John enters their credentials, we want to look up their email, we want to basically create a new row in the Google Sheet, where we store their name, email and a summary about the company. So if we add a row, in this case, again, you have to just authenticate yourself into Google Sheets by clicking Add an account, clicking Sign in with Google. assuming you actually have a Google account.

And in this case, all you have to do is go on My Drive. You can click on Spreadsheet ID. In this case, I'll just call it Lead List Demos, what I call it. And then it's going to bring up all the different columns that you have once you bring in the sheet. So it's Sheet 1. And in the values here, you can see we have name, we have email, we have number, and we have info about company.

So for name, we're going to just need to go here. because that's where we're getting that from the name is here and then the email is here the number is here. That's pretty easy.

And the last thing, we're going to get the information of the company, at least the synthesized and more succinct version from the GPT step. So if we go into here, and we go into prompt completion, no, I think choices, then message, this is the content we want in that summary column. So once we click OK, we should theoretically, fingers crossed, be clear for this automation.

So if we go back into Bolt, and we create John Doe and then John at let's actually make sure it's a fake one one two three at atn at and t at t let's go dot com and then let's go into this number here we'll take that and we'll paste this and say get started okay so it doesn't like that so I'll just put a t and t I don't know what the suffix usually is. All right, it doesn't like the phone number, so let's do this. Instead of a period, let's get started.

So fingers crossed, that should have worked, and we'll see if it worked from here. Let me put this back to on. Process all data, and you'll see it's running here.

And what I expect is to see a brand new row here with that information. So let's wait. Okay, so it looks like it's successful.

I'm just going to double-click here to see what it entered. It should have entered. If I go to updates, if I go to values, John Doe, email, this. In this case, it actually did the research about AT&T. And if we go into the sheet itself, you'll see here, other than bolding the whole sheet by accident, we have the name, number, and info about the company.

Now, very simplistic use case. But the idea here is we basically created a way to execute or trigger this automation. just from a front end that took us literally a minute to put together, just with that basic set of instructions.

So you can basically put together a whole agent army that you can orchestrate from one central dashboard and execute as you wish. And the one thing that I didn't show in the previous demo is that you can actually click on Deploy here once you're ready to go, and you can use it using a URL. So in this case, I'm going to just switch up the UI a bit.

I'm going to say, can we call it... Lead list researcher. And then instead of get started for free, should say research and store. And then what else?

I think remove fill form to get started. Add cute animations that are floating around the form. Now.

I don't care to actually do that, but I just wanted to show you the different types of things that you might be able to ask for. All right, and you'll see here we have our little floating icons here. We have lead list researcher.

We have research in store. And then all we have to do to deploy this is click on deploy, and then it will take care of pretty much everything. It will generate a URL using something called Netlify.

Think of it as a form of a server that you can implement on and use. And then theoretically, I can use this URL. pretty much wherever you'll see here we have this little tiny fairy URL.

And if we open it in a brand new incognito window, you'll see that you can actually use it functionally. And then you can click on research in the store and it is a, it is a fully functional web application that connects to an existing automation. So again, the reason why I use an automation behind the scenes is to simplify what otherwise would have been a series of back and forth saying, Hey, can you find a way to connect to a Google sheet? Can you find a way to connect to perplexity?

And it just helps ease the process. All right, and to remind you, the very last one we want to put together is creating a very simple CRM that, one, is functional. Two, can actually store contacts in a real database, not something right in front of you, not in a Make Automation or a Google Sheet.

So that's going to be trickier. And what I'm going to do to start planning this design of the system is create a very simple workflow diagram using AI to actually help us with that process. So we're going to go into close all these tabs, deal with more of a blank canvas experience. I'm going to create a brand new chat here.

If we go back and we go to new chat, I'm going to say frame my project. I want to create an unbelievably basic CRM that takes literally name, email, phone number, has a notes field. That way you can add notes that are stored about that client. You can have like a last contacted.

column, and that's pretty much it. So I'm going to send that hopefully understands some of my misspoken words. So basics here, I'm for client management, client info, notes, field, etc.

And then we also want to add authentication and a database. So it's even asking me here, and that's part of my programming is it says, Would you like the data to be stored locally, or with a database, so a Firebase or air table for persistence, I want to actually integrate it with Firebase. And if you're not familiar with what Firebase is, I'll show you very briefly.

Now, you do have to not write any code. You just have to give it some code as an input to really facilitate this. So I'm going to go into Firebase. So it's firebase.google.com, and this will act as our database that's hosted in the cloud, which you can use... out of the gates for testing purposes for free.

Now, if you want to productionize this, you actually want to do this at scale, this will be paid and you'll likely need a few other paid services to make sure you can scale properly. So if we go down here to get started, then you'll see I already have a couple different projects where I did have to just make sure I knew what I was doing before I told you how you can do it yourself. We're going to go to create a project and we'll call this simple CRM.

We'll go on continue for... sake of simplicity, I'm going to turn off Google Analytics, we're going to click on create project, this will take anywhere from five to 20 seconds, and then it will create a new portal for us, where we'll then get what we need in terms of the functionality. Alright, so we're going to click on continue.

And then you'll see a few different options here. So we have authentication, cloud firestore, storage and hosting. These two, we don't need to worry about comma for now, the ones we really care about are authentication.

and the Cloud Firestore. This will act as your database. So if we click into here, you're gonna see it should be completely blank.

There's no entries in there whatsoever. You can click on create a database and then you can click on next. You can keep that location as is.

To do this very simply, just put it into test mode. Now, if you're wondering why I put it into test mode, it's just easier to deploy quickly versus production mode. If you did wanna make this very client facing, then you can do that.

you'll have to see and configure specific things to make this work. So we'll click on create, it will now put together a blank database. And you'll see here, there's nothing to see. But there will be so we'll go back to the project overview.

And you see here you have these little icons. In this case, we're building a web application. So you want to click on web, when you click on this, we'll call this again, simple CRM, we'll click on register application.

And then you're gonna get some code. That code is what you're gonna feed into Bolt to help you actually implement the database in the code itself. So all we wanna care about, again, if you're worried about code, if you hate the look of code, all you have to do is close your eyes slightly and copy from here to here.

That's your app ID, that's your API key. And then say, integrate this into the prompt. So it knows how to add the database, whatever.

And I'll paste this here. Alright, so you can see here you have the project name, the features, we now have this Firebase configuration, we have this UI layout. And the last thing I'm going to ask for is, could you please create a mermaid diagram in a code block representing the flow of this app, although it's simple. So now it's going to generate a bunch of code that to 90% of you will look like complete gibberish.

It will not look like gibberish. And soon as I copy this, and then go into live mermaid editor, so it's called mermaid dot live, it basically helps you put together very quick workflow diagrams without you actually connecting it yourself. So in this case, I'm just going to take the code they gave me, I'm going to paste it here.

And you'll see it puts together a very quick and compact diagram. So you see here, it basically says the flow is the user opens the app. There's a form to add or edit client information. And when you click on submit, it actually sends it to the Firebase store. The data is saved in the database.

The real-time updates are fetched, yada, yada, yada. So I'm going to use this as an input on top of my prompt to increase the likelihood of success. So I'm going to go here. into let's go to the prompt that we have here. So I'll take this.

And we'll copy. We'll then go back into Bolt. Let's create a new session. We'll paste this.

And then let's go back to here. I'm going to just minimize just a tad. I'm going to screenshot.

And I'm going to add this as additional context to Bolt. So I'm going to paste this here. And then we're going to send this all.

I want to make sure we have our credentials here for the Firestore. We do. So we're going to just cross our fingers and this one could get dirty, which is fine because it'll help me help you figure out how to troubleshoot. OK, so this is our first draft.

I'm even scared to try it out, but it took around a minute and a half to just kind of load up. And here we'll give this a shot. So let's try Mark Kashuv and then we're going to try email, whatever. And then we're going to try.

do let's do my business phone number so let's go there and six three nine four all right and then we'll see some notes he seems like a weird person which is slightly accurate so if you add client so that has quote unquote created a record now we'll have to see did it actually create a database entry for that but you can see here oh actions interesting So I don't know what the clock thing is supposed to do. I would imagine this deletes the row. But last contacted was today, contact info, etc. Okay, so what I want to go back to is go into the Firestore and see did we actually have this logged in.

So if we go back to continue to console, and we go to Firestore, I see an entry here, I'll be happy. So in this case, look, we now have a functioning app that even if I were to refresh the page, it should still be there. So if I refresh this, we should still have this entry because it's basically stored, or it persists in a real database.

So the next thing to test is, can we add a authentication account can we create an email and password, which is where that authentication piece comes into play. So let's go here and say, can we add authentication, so that someone can use their email to log in. and create an account as well as reset their password. So before I send this, I'm going to go into Firebase, back to project overview, and then it wouldn't go into authentication.

And then I'm going to click on get started. And it should prompt me what kind of authentication I want. You can do the whole Google sign in Microsoft sign in Twitter sign in, I'm just going to use for the basis of this demo, email and pass old reliable. So in this case, I'm going to click on enable and click on save.

All right. So now this should have been quote unquote created. We're going to click on email pass. All right.

That seems all good. And if I go to users, we don't have any users as of yet. But if we go back into here and say create authentication through Firebase. I already set up the auth on that side. And ta-da, after another two minutes, it created this where I'm curious now if I add, you know, my name or let's create an account here.

Okay, let's do sign up. Moment of truth. Oh, so we got an error here. What is the error? So say some form of error.

The query requires an index, yada, Let's assume I have no idea what that means. All right, so we got now this view rendered. There's some form of logout or login.

So I'm curious if I log out and I log back in with this account I made, if it'll work. So it looks like I can log in, but it still says it has a problem, but it's a different problem. Anytime you see the same problem over and over again, then you probably are hitting a wall.

When you hit a wall, you have two options. You try to go back and forth like the very first. portion of this video in the demo, or you can start a net new chat, taking what you learned into account into that initial prompt. So if you know that authentication is going to be a problem later on, if you add it, maybe it would have added authentication as a requirement in the beginning. So in this case, I'm just going to click on fix a problem.

All right. So we got this version where I don't see that fix a problem, little bubble. So let's create a new account here. Let's create a fake email.

So I go to temp email. dot org will create a fake email. I'm assuming it's not sophisticated enough to know fake from real.

So let's call this sign up. I'll say this. And let's make the password.

Hello. And then the password Hello, click on sign up. Oh, I don't know why I created a fail account.

So let's try. Let's try another email. Let's try this one, for example.

Oh, failed account. So curious what's happening there. It's just wants an email address and yet it's not working. If I go into the simple CRM, the database, I can see my initial one there. But I'll say now I'll screenshot this.

I will then paste this here. And then I'll say, hey, when I enter whatever email, it keeps erroring out. Can you help fix?

All right, so take three. Let's try this again. Let's try just for simplicity.

Let's do this. And then there's an error now. It might be on me.

Here, I'll make my life easier. Hello, world. I'll copy that, paste it here, paste it here, sign up. Something happened, but clearly we have a bunch of new bugs here. So we can click on fix.

All right, and after the second fix, we now seem to be logged into an account, and it seems to be able to successfully create a net new account. So if I made, ideally, hopefully, abc at gmail.com, or let's go to sign up rather, abc at gmail.com, and we made test, test, test, test, test, and we click sign up, it should create an account. And if we go into...

the authentication and we refresh, we should see a new account for abc.com where now there's a user ID. And that user ID basically allows us to track the usage of the user, see what's happening. And they can do, for example, forget your password. So if we go back into Bolt, and now for this ABC account, we added a new person. So let's add myself again.

Okay. And we have some number here and we have he's Really bad at prompting. And we add add a client.

Now, number one thing is if we go back to the database, we should have slightly different database entry. And the reason why is now that we have a user attached, there should be a user ID attached to whoever is actually adding this record. So if we go to the next one, you'll see here now we have user ID, which again, if you're not technically inclined, just allows us to attach memory. of clients in the CRM to whoever's actually logged in.

So, you know, the first email will have a different set of clients, this will have a different set of clients. So when you log in to those different accounts, you should have different actual logins. So now we're on track to making a very simplistic, but an interesting simple CRM here.

So let's go back and log out. Okay, and then I'm going to go back here. And I'm going to say, can we make this CRM look a lot prettier and i'm going to go into here and it looks i'm going to say find me the best looking crms now i'm going to go to images and then yeah let's do something like this where i can copy this i don't know which software this is but i attached the vibe i'm going for as an image keep all the core functionality the same.

Alright, so it's promised us a much sleeker design. So I don't even remember the credentials of my last email I used here. But let's say it's abc at gmail.com. I think the password was test test.

So we sign in. Alright, now wow, we are actually getting a nice looking CRM here we have companies. I don't know if that functions or not.

Let me refresh here. Oh, yeah, so I don't know if these tabs work. I know this has still kept our record from before, but we're definitely making some progress. All right, so when I click on those, it doesn't seem to actually do anything, but we're making some progress here.

So can we make it so that the suffix of the email we enter in contact info? now becomes logged as a company name in the companies tab, that notes get stored in the important tab, that I won't make it too complicated, and that in the other tabs, you can now enter things like deals, and that there are fake reports in the reports tab and fake documents in the document tab. I just want everything to function, but companies and important to be the only ones that actually inherit entered data.

And now this is a good time for me to gentrify my prompt using the enhance prompt. So it's done a much better job than me with mock data here. It's very good at doing that. So I'll do this.

All right, so it's reloaded. And now we have it called SimpleCRM. Looks very legit.

If I click on Companies tab, let's see if that does anything. So I don't see anything. Let me click on Recents.

Nothing. If I click on Messages, nothing. So I'll just tell it, hey, when I click on the tab, the screen goes white. and I don't see anything.

This goes for all tabs. And let me just check documents here. Because there could be one small thing that's stopping it from actually propagating on the front end.

So I'll just send this and oh, looks like I used all my tokens. So I'm going to pay just for the sake of this video. I'm going to pause this as while I do that. All right, we're now back to regular programming.

And I'm going to just go on one of these pages, screenshot the screen, throw it here. I'm going to say when I click on the tabs, other than all the contacts, the screen goes white and I don't see anything. So I'll send that over.

All right. And after I sent this request, now you can click on all of these tabs and see something, at least for most of them. So let's click on deals.

So now we have some fake deals. We have reports. We have documents.

Let's see. Okay. So it's important to give it its feedback. So in this case, let's see.

Does messages work? No. So I'll say important works.

Recent messages. and documents. So important, recent messages, and documents still don't have anything. And you can see above it acknowledge the issue saying it's a routing issue. The problem is that we need to update the app component to include all the routes for the different tabs.

So in this case, we're just going to add that. And then we're going to try to integrate one last feature before we call it quits. Alright, so it ran again.

And this time, we can click on every single tab. And at the very least it loads. Even here it was smart enough to say coming soon, messages, deals, reports, documents. And this literally looks like an actual CRM, but we've built it in a very short amount of time. Now we'll add one more feature here, purely out of interest, and see if we can kind of wrangle it.

And I only want to show you because it'll help you just also unlock another mini skill set that you can use with Bolt. So I'm going to go into, let's say, a brand new GPT session. And then I'm going to click on search the web. Can you look up how to send a request to open AI's gbt4o mini and give me a placehole basically a code Snippet to quickly Implement it now myself. I've done this a bunch of times so I know how to do this off the top of my head But let's assume you did not know how to do that.

So let's take this code here. So Let's assume I can't read any of this. This looks reasonable. I'll quickly check.

Yeah, it looks decent. Now, on your end, if you couldn't do that mini second check and see, oh, is this reasonable? It's all about pasting it, pasting it back into Bolt. If it doesn't work, clearly there's something wrong. So in this case, I'll just copy this.

I'll say on the contacts tab, can we add a feature that lets me click into a contact? And on the contact card, I have a research button that uses OpenAI to search the subject or the industry of the company that I will write as freeform text. to allow me to see a summary of what that person or contacts company does. Now this looks like a mess. So I'm gonna click on enhance prompt, okay, and then I'll say here's a snippet of how to use opening up and I'm going to paste that code that we just got from the search GPT.

And what I'm going to do is I'm going to pause this video, I'm going to add my API key and send the request and I'll show you the result of that request. All right, so now if we click on the contact after running, and I click here, you'll see one, I can actually get into a card. And then now it says the metadata that we have here, we have research, which won't do anything because there's no free form text for me to actually do the research. Now, the way I should have done this and planned out my CRM is I should have a company field, duh, that I can actually use and connect it to the research.

So We can try to give this a shot. Retroactive changes are always harder after the initial prompt. So if I say, can we add a company field to the client contact so that it's not just what we have now, which is name, contact info, notes, and last contacted.

What else do we have? Okay. I want a company field. And for the research button in the client contact card to just research said company.

When I click on research. Okay, and then I'll probably has to add it to the database We probably need to add the company as an entry in Firebase and then what else we need that's all I can think of right now low on brain juice so I'm just going to gentrify the Prompt here. See it looks a lot nicer notice how it made it one two three four and Yeah, I'm just gonna pray. I'm just gonna put this here and we'll see how it goes All right, so now it says it's made all these updates.

So if I add a new contact, let's do John Doe, John at Doe.com. And then let's do some phone number. Let's just do my phone number.

And then let's call the company something more reputable, like Shell Gas Company. And then he's an oil magnet. And I click on add content now.

That seems to have worked. If I go here and click on, at least you can see here, it's now Shell Gas Company. Click on Research Company. This to me will be awesome if it knows to dynamically go to that company, send it as a prompt, and there you go.

Now we have a actually functional, you know, low-fidelity CRM that can use Genov AI to tell us about the company that's here. And you can imagine the possibilities with this are truly endless. We click on that.

then theoretically we could click deploy. Now we could have a link to a CRM that ideally, if we make more improvements to all these tabs, we could have also circumvented paying for multiple thousands and thousands of software. And realistically, what would be interesting here is actually providing this to a team of developers and saying, hey, here's where we're at. Can you make this more bulletproof or scalable? And one main thing and one main reason why I picked CRM is We meet so many clients on a weekly basis that are stuck in their CRMs and always wish or in search for a CRM that's hyper tailored to their needs.

My bet about the SaaS space in general and the software space is that in 6 to 12 months from now, a lot of companies will be able to design their own softwares that perfectly fit their business, have the features they need, and don't necessarily need the support from a support team to add different features or weight for features that don't exist yet. So that's why I went with this because this caught my eye as a really interesting use case and a very disruptive use case for the future. And you can see here, I just finished getting the deployment link and let's try that ABC email and test, test and sign in.

We actually have a fully functional CRM, at least that can add contacts and we could probably spend the next few hours building out the companies tab, the important tab, the messages tab. And we could build something pretty interesting in a very short amount of time. So that is my zero to hero explanation of how to use Bolt.new. And hopefully through watching this tutorial, you can see how potent it is and basically what you need to do to troubleshoot to get to your end result of your dreams. This is probably the worst that this kind of software and these kinds of softwares are going to be, which is super promising because anyone that's non-technical will be able to go from genuinely an idea to in the future a fully scalable app most likely that is deployable custom to them and is perfect for their use case if you found this helpful and most importantly intriguing let me know in the comments below if you'd like me to make a part two of the video and what you'd like me to build because it's actually very fun for me to build these tutorials because i get to one squirm right in front of you and two i get to learn a lot along the way on how far i can push these kinds of softwares so hopefully it's helpful give a like to the video a sub to the channel and i'll see you next time

Transcript for:Rapid Prototyping with Bolt.new

Transcript for:
Rapid Prototyping with Bolt.new