How I Built a Client Onboarding App Using AI in Under 30 Minutes (Vibe Coding Walkthrough)

Key Takeaways

Hey there. I thought it would be fun to try a live vibe coding exercise using the prompt in my Viable Edge Creative Solution Builder Kit that you can download if you visit viable edge.com and sign up. And what we're going to do is try and use only plain language to create a functional app. If you follow the guidelines in this document, you'll see that there's a heavy emphasis on really being able to articulate the problem and the business use case before you even start thinking about AI tools. What I've done here is come up with a realworld scenario. Boutique marketing agency that specializes in paid media for e-commerce is struggling with their client intake process. A lot of emails, it's hard to manage assets. there's not a consistent level of data being collected which can cause delays. You get the picture. I've copied the questions from the planning template directly into this Google doc. One thing I highly recommend is getting into the habit of using voice to speak your answers because you'd be surprised how effective that can be when you're just speaking naturally at creating context. So, here we go. What's the pain point or process you're trying to improve? My clients get very confused during the onboarding process. I'm an e-commerce agency. There's a lot of chaos and delays and we don't have a streamlined onboarding process which has been a huge pain point when we're first working with clients. We need to improve this, make it faster, more streamlined, less chaotic, and more clear and straightforward. As you can see, I just used my voice and spoke the answer like I would if I was speaking to a person. We're going to continue answering the questions like this. What type of solution are you trying to create? I need some kind of tool or web-based experience that can facilitate the client onboarding process, enable us to collect the inputs, collect any of the creative assets that are needed, and facilitate some kind of checkpoint process where account managers can look at what's coming in and either approve it or reject it. Just going to unbold this because I'm OCD. I'm just speaking and I'm coming up with this off the top of my head. And you can see I'm not bothering to edit the output that is coming from my articulation, right? You can see just my vocal delays and trying to think of what to say. I'm not even worrying about that. What are the key inputs? What's being entered into the system? Key inputs include information around the client's business as it relates to executing e-commerce and performance marketing. A lot of this entails goals and objectives, KPIs as it relates to a consumer journey or funnel. We service clients who are targeting cost per acquisition, cost per conversion, cost per leads, lifetime value, and the entire funnel that would precede that are all relevant to the inputs. We're also capturing logos and creative assets, paid media assets, that sort of stuff. Next question. what decisions or steps happen between input and outcome. When a client starts submitting onboarding materials, it's reviewed by an account manager. That account manager will usually weigh in to say this is acceptable and fits the requirement or if it doesn't fit the requirement, there will have to be a communication to inform the client that they need to try again. Sometimes those communications will be an email, other times in meetings. This is where a lot of the chaos can come in. We need to get the client from onboarding to onboarded with fewer steps, less communication, and very accountable to a timeline. All right, finally, let's see what we got here. What does the solution need to deliver? The solution needs to deliver a streamlined, easytouse, quick process that clients can use to understand the onboarding requirements clearly. Submit those into the system. Have the account manager have visibility to that activity. Provide feedback in the form of rejections and approvals. Provide clarity when things are rejected on what the necessary actions are. and then approve the entire onboarding process and signal to the organization that the client is ready to activate. All right, so we've gone through the template and have come up with answers to all these questions. The next step, and I encourage you to read through this, I'm just going to skip through it because I wrote it, is the prompt. So, copy and paste this prompt just as is. everything below the bolded line. Make sure you don't capture this tag with my email in it. I've already done that. Let's flip over to our chat GPT. Okay, so I've already entered the prompt and I hit enter once. So, it's asking me for the first question. And this prompt is going to lead you through a series of questions. The first questions will be exactly what you input in the planning template. You can see the question is the same. What is the painoint or process? All we're going to do is copy and paste this directly in. I'm using chat GPT4.5 only because I ran out of 40 for today. I'd recommend 40. It's usually faster and very good at this. All right. So, it's summarizing the key points asking me if I want to continue with the next question. You have an opportunity to clarify any of this. I'm going to move on. Continue. Like I said, 4.5 can be slow. What type of solution are you trying to create? All right, there it is. Simply copy and paste it right in. I would encourage you to read through everything because AI can frequently get things wrong or pick up a meaning that you did not intend. What's next? Shall we continue? Yes, let's continue. All right. Sometimes in forro the chat will move directly on to the next question. Sometimes it wants to confirm that you're ready. What are the key inputs? We already did this, right? Again, I'm not even editing out any of my natural language articulation. Just keep it all in there. It's not worth your time to deal with. And the AI will be able to actually get the context better sometimes because it can detect that uncertainty, right? It understands that you might not be completely convicted in your intentions or understandings and it will use that information to create a better prompt. All right. What decision or steps happen between input and outcome? That is the next one which I should probably just go yes on for the next question. Now we can answer that one. What does the solution need to deliver? We've already covered it. Great. All right, let's move forward. Now, it's going to ask additional questions. I encourage you to use voice. Answer these with plain English. If the prompt is not getting enough information or specifics, it will clarify. The main users are clients who will be using the onboarding system to submit their required materials. that enables our agency to then activate on their campaigns. The other people using it will be our internal staff, our account managers and supervisors who will then be receiving the onboarding materials and either approving or rejecting them. And we'll want to have our senior people be able to manage users including client. All right. So the prompt will then take a look at all the inputs and recommend core features and in a lot of cases it will make recommendations on nice to haves as well. I encourage you to ask clarifying questions. Ask for ideas or advice or recommendations on things that you might not have thought of. Right? Okay. See now it's asking what are the nice to have features. Let's take a look at what we got. A guided onboarding intake form. Absolutely. Approval and feedback workflow. Real-time visibility dashboard, user enroll management, activation signal, and notifications. These are all core requirements. Would you like to add, change, or consider as nice to have features? What do you recommend as nice to have features? Are there any other core features that we haven't addressed that you would recommend? Great question. Automated reminder systems. Okay, that's a pretty good idea. centralized asset repository. I think that's a good idea. Also nice to have features integration with communications tools, notifications or reminders for Slack. That might be a little complex for now, but I think a lot of our clients use Slack, so that could be really useful. Progress and timeline visualizations, I think that's actually pretty essential. Commenting and discussion feature, that could be very helpful if we want to capture feedback alongside the different discrete requirements for onboarding. Client friendly knowledge base. I don't think that's necessary right now. Analytics and reporting dashboard. We have a real-time visibility dashboard. I think we'll want progress and timeline visualization. We'll want a commenting and discussing feature. That's great. We don't need a knowledge base. We do want the analytics and reporting dashboard and the additional core features you recommended, the automated reminder system and the centralized repository. Let me know if any of these introduce a lot of complexity. One thing I really like to do in these projects, especially when prototyping, is be very clear about keeping the complexity low because in the case of where we're just doing a proof of concept or we want to test a process or user workflow, these kinds of things where you're talking about databases or asset management can introduce a lot of complexity very quickly. You can usually simulate this capability if you're deploying the app locally on your machine. All right, our core features, guided onboarding, intake form, approval and feedback workflow, real-time visibility and dashboard, activation, signal and notifications, automated reminder system. Yep, all looks good. Let's see. Some complexity, very manageable. Good. Commenting discussion, slight increase in complexity. Manageable. I've done commenting systems before. They have not been too complex in my experience. Analytics and reporting dashboards, moderate complexity. Yeah, again this is the kind of thing that you can start small and then build over time if you want. Automated reminder system minor complexity centralized repository slight complexity a minor slight not too bad. These features are manageable and align with a prototype or MVP. Could you share a couple of user scenarios or stories to help me understand how you envision people using the solution? Okay, this is a critical step and again just going to speak my answer. I'm a client and I want to be able to log on. I want to have an understanding of all of my requirements, the status of my onboarding, and I want to understand what the timeline is so I can track to that deadline. I want to be able to easily and quickly submit everything, have that confirmed, and understand quickly if anything is rejected, why, and the actions I need to take to address it. I want to know when everything is approved. If I'm an account manager, I want to set up an onboarding process for a client. I want to monitor their incoming onboarding materials. I want to be able to review them and provide a rejection or approval and provide context if needed on any actions around that item. I want to be able to manage the timeline, both track it and edit it if needed, so I can hold my client accountable to that timeline. And I want to be able to signal when everything is approved and the client is ready to move on and have that signal visible in some way to the organization. You can see how much easier it is when you're speaking things, right? If you were typing all this, it would be pretty tedious and you'd probably be inclined to get through it quickly, which can really be at the expense of valuable context. We clearly describe the user stories. That's fantastic. All right, it'll summarize. Highly encourage reading the summaries. Now we move on to the prompt. If you're using chat GPT, sometimes it'll open up a canvas, which is pretty helpful, and write the prompt this way. Other times it'll just be in the chat. 4.5 seems to use the canvas more. 40 seems to use the chat more. That's fine. I prefer and recommend 40. It's just faster and tends to streamline the questions a little bit more. To be quite honest, you don't have to read this. If you want to, I recommend it. It's interesting to see what the output looks like. There will be technical recommendations in here. It's not critical that you know them, but it is, I would say, very helpful if you just take a look and start understanding these words and what these are. The whole point of this is to try not to get too technical, but just sort of understanding what these things are is helpful, right? Some of the core concepts, the very basic, there's a front end and a back end, right? The front end is the user interfacing part. The back end is all the technology that does the work and there's connectivity between them. Understanding that dynamic, understanding which technologies apply to the front end and the back end, I think is a good baseline level of understanding to get comfortable with. Again, I'm not going to read all of this. All we have to do now is copy and paste this into an AI coder. So, I'm going to go ahead and copy it. And I don't know why it does that. It usually copies anyway, even when I get that failed signal. And then for this exercise, I'm going to go with Replet just because it's a little bit easier to use than cursor. It is web- based, so you don't have to download anything and it usually does a pretty good job of having a interactable experience on the first shot. So, let's go ahead and drop our prompt directly into Replet. It pasted as a document, but there are too many characters that will do that. And I'm just going to give it a little bit of an extra prompt here. Uh, let's build this. All right. And we are off to the races. Now, this takes a long time. This can take several minutes, sometimes a half hour. It depends on how complex your app is, you know, how much traffic is happening at the moment. So, it is important to just let it cook. Basically, you'll see that it'll be coding. It'll open up a web preview and once it gets through the app, it'll ask you to use it. Replet also does a great job of these additional clarifications. Build the initial prototype. Check. Would you like any of these additional features? Automated reminder, central repository, Gant chart. Yeah, Gant chart sounds pretty good. Yeah, these are some of our core requirements. Threaded commenting could be helpful. Yeah, centralized repository. Yep, that was one of our requirements. Automated reminder system. Let's just approve the plan and start. So, yeah. So, it's estimating 2 minutes and 10 minutes here. In my experience, this is probably a generous estimate. I would expect this to be a little bit longer. Okay, let's go. Designing the app. You can see that it's actually creating the UI right in front of you in real time. It'll create dummy data. You can't really start playing with it yet. Not that you'll break anything, but a lot of this is not built, so you'll just hit errors. It's a good opportunity to grab a cup of coffee, listen to some music, play some music. All we really did was give this plain language input, and it's creating an app. Pretty amazing, right? This never ceases to amaze me. We have a pretty impressive looking app so far. I would say a lot of these vibecoded apps are built with the same front-end technology. So they do look alike, but it is a professional and clean looking interface. This is React. It works and it's got a visual identity that is easy to understand, is consistent with other things in the marketplace. It's lightweight. It's fast. So it is a pretty great solution in my experience. and it typically is what is recommended when you're working with AI prompting like this. All we did was speak the answers to the questions in the planning template and have a pretty decent looking prototype. You can see in the bottom right above the chat input, it's sharing the status. You can pause it. I don't recommend it. And this will happen for a while. You could walk away for a minute. Just don't let your computer shut off or internet. All right. I'm gonna pause the video and I will come back when this is usable. All right, and we have a prototype. Replet has finished working. I did have to prompt it a little bit to clean up some broken links. Authentication wasn't working. I used plain language just to explain those issues and it took some more time. But we have a prototype that we can navigate. We can evaluate how the features and user experience lines up to our business challenge. And so I'm hopeful that this really helps unpack the opportunity for people like you and I who probably have a lot of ideas and have not always had the means to execute them. There's a lot to learn here. It's easy to get overwhelmed by the technology, by the rapid pace of AI, but if you just keep it simple, if you focus on one thing, use your voice, you'll build that comfort, and eventually you'll start to stay up at night just brimming with ideas after you go through exercises like this a few times. So, thank you for sticking with this. Sign up the viable edge, viablege.com. Would love to hear your feedback. And if you want to talk or schedule a time, please reach out. Thank you so much.