Client-Ready AI App Built in Cursor Using Vibe Coding

Key Takeaways

Hello, my name is Adam and what you're looking at here is a racy chart app that I created with AI. The reason that I wanted to do this was to demonstrate the power of AI for mid-career professionals like you and I who don't have a technical background but have a lot of things that we've wanted to do without the means to execute them. To create this app, I used mostly my voice and the viable edge creative solution builder kit which is accessible via the link below. So with that, let's get right into showing you how I did this. One of the things that is interesting about AI is that it opens up new ways of thinking about old challenges. If you've worked at a company of medium, large, or maybe even small size, you might have run into the dreaded REI. Reie means responsible, accountable, consult, and inform. And it's a construct designed to help enable process and consistency among roles and responsibilities. In my experience, you get a lot of people in a room. You spend all day creating this and then by the next day that racy chart is in a PowerPoint on a shared drive collecting dust, never to be seen or used again. So, what if there was an app that allowed us to manage the racy over time without having to get everyone back in a room and update a PowerPoint? That was the idea behind this next challenge. So, we're going to use plain language to articulate and define the business challenge. We're then going to take the information and feed it into AI using the app prompt generator in the viable edge creative solution builder kit. And then we'll come out with another prompt that can be plugged into an AI coding tool like cursor. So, let's get right into it. I'm going to use my voice. I'm going to articulate the challenges off the top of my head as if I'm in this situation, which I've been in many times. What's the pain point or process you're improving? My company loves to make racy charts. They take a lot of time and effort and a lot of participation crossf functionally. But once the racy chart is created, it's very difficult to keep it top of mind to provide exposure and visibility to the organization. And it's very difficult to make adjustments along the way when we inevitably find that some of the decisions made during the racy process were not the best decisions. Okay. Does that capture the painoint clearly? I could probably add a little bit more. So, I'm going to do that. By the way, you might have noticed. Whenever I'm speaking, I'm using an app called Super Whisper and speaking my answers. Hopefully, that tool is popping up so you can see when I'm using my voice to dictate. I want to using plain language captures a lot more context than you would imagine in comparison with typing. Let's see. My company loves to make racy charts. It's It'll spell racy wrong. Again, these are things that you do not need to worry about. The AI will be able to understand the context here. You can make these minute mistakes and really it doesn't matter. We want to make Rey actually usable. We want to make a process that has real potential to create efficiencies and clarity in the way that our organization operates versus what we have been doing which is with the best intentions but ultimately very difficult to implement. Okay, that's enough for question one. I'm going to move on to question two. Now question two, what type of solution are you trying to create? A planner, a tracker, an intake form, a dashboard. I'm thinking about a solution that people can look at, can use cooperatively from their computer. So, probably some kind of dashboard and tracking system. Something that is editable as needed, something that can facilitate many different capabilities and processes, facilitate multiple designations. Sometimes we have associates who are both a consult and an inform. For example, I want this to be an engaging and streamlined, aesthetically pleasing experience so people are inclined to use it. I want it to be colorful. I want it to be clear. Ideally, there can be some kind of communication functionality so when there are changes made the relevant folks are notified. Ideas around that will be helpful. Let's move on to the next question. What are the key inputs? What is being entered into the system and where is it coming from? The key inputs include leaders or team leaders, managers who are designating their associates as specific roles within the REI process such as consultant form, responsible or accountable. People who are in the organization will have roles that will need to be understood in the system. We'll need some kind of database or way to have folks names as records in there along with their titles and information about the team they're on and their responsibilities. What other inputs might there be? Let's make a note here for the prompt to provide additional recommendations on inputs that might be needed for this. I left a little note for myself and for the prompt to leave this a little bit open-ended. Let's see if the prompt picks up on this and provides those recommendations. This is a two-way dialogue you can have with the AI to really flesh out some of the specifics and details and surface things you may not have thought of. All right, let's move forward to question four. What decisions or steps happen between input and outcome? Most of the decisions or steps happen within the moment that a racy process is being collaboratively developed. The way this happens traditionally is that a bunch of key decision makers or stakeholders, team leaders or managers get into a room, have a conversation around a process and make determinations and have conversation discussion about things that have worked, things that have not worked and ultimately come to an agreement on who is responsible, accountable, consulted or informed. Some of those designations might apply multiple times. A lot of times there's some disagreement in the decision making. Ultimately an agreement is reached. If there's a way that we can account for things that have some degree of uncertainty that would be very interesting. The output is a racy chart. Let's move on to question five. What does the solution need to deliver? The solution needs to deliver a clear understanding for the organization on the REI process as it would apply to any given function, capability or process that is collaborated with across many folks in the organization. Let's see that's some of it. I feel like I want a little bit more here. I want information sharing. I want to figure out how to share this information. When there's updating, the relevant people are notified. There could be ways we can share on a periodic basis what the racy charts are. We should be able to have them as appendices in specific working collateral that goes around the organization. It might even be helpful for clients to have visibility to races that are relevant to client-f facing business. So there's a lot of different types of output that could be useful here all in some kind of visual manner that is intended to notify what that racy process looks like to somebody. Again, I'm open to suggestions here. All right. And now we have answered our five questions. These questions will be repeated as we flip over to chat GBT and begin working on our prompt. But the reason that I like to have these up front is because it gets you thinking, right? It takes the AI tool out of the equation for a moment. It eliminates the pauses that happen when the AI takes those inputs and then processes. You'll see that it will provide summaries, maybe recommendations. I really want to stay in the mindset of brain dumping all of this information at one time without really thinking about the AI tool. So, it's not to be redundant, but it is to really enable you and force you to stay focused on articulating that business challenge. I've left some open ends and uncertainty, and I want the AI to help guide me on solutions I haven't thought of. It's healthy for building AI fluency to really understand that you can use uncertainty to your advantage. Now, let's move forward to our chat. I've already copied and pasted the prompt from the viable edge creative solution builder kit right into chat GBT and I am going to hit enter and I'm going to flip back to question one and copy and paste our inputs. All right, here we go. Question one, what's the painpointer process? Let's just copy and paste it right in. There we go. Every time you provide those inputs, it will create a summary of what it's reading. It'll bullet out the key items and takeaways. I encourage you to read those. For the sake of the video and the sake of time, I'm going to cruise right through this. What type of solution are you trying to create? It's actually question two. I might have to tweak the prompt to address that, but as long as the questions match up, should be fine. All right, cool. Question three. Dropping it right in. Again, I would normally be reading these summaries. Makes me a little uncomfortable that I'm not for the video, but it's fine. All right. So, you'll see that in the summary for this question here, it said captured that note, right? noted. We'll add that to the final output that I am looking for additional input recommendations. You can see that is working. Dropping in question four now. All right, getting close. Here is the final input from our initial articulation. It's acknowledging that I'm open to ideas and in the final bullet, it is reiterating that. So again, uncertainty is an advantage. pretty amazing. It makes me thinking about my experience being in the corporate world, working at big companies where uncertainty felt like a crutch. It made you nervous. You never wanted to go into a collaborative environment with uncertainty. I love the juxtiposition here of using it to your advantage. Be curious. Now, it's going to move on to some additional questions. I'm going to use my voice to articulate these and soon we'll be at the prompt. Who are the main types of users and what are their roles? Our users will be internal associates, everyone across the organization to be able to look at the racy charts and understand roles and responsibilities for any given process. Additionally, managers, leaders, key stakeholders will have the authority to designate roles, edit racy charts, and be the stakeholders who will govern the creation and management of these charts. We need to ensure that not everyone has access to make edits and changes. So we can ensure the security of the output and limit the potential for mistakes or anyone who's looking to meddle with processes. All right, I felt like I stumbled a little bit through that one. So I'm going to make a note to leave this a little bit open. Let's see what the prompt does. I'm open to suggestions on this because it does feel very straightforward in my mind, but I don't feel like I'm articulating it clearly. So, if there's more clarity needed around users and their roles or you have suggestions, I'm open to that. So, look how it responded to that last note. We'll add smart default in the dev prompt. Not really sure what that is going to look like, but the fact that it knows my uncertainty here or that I feel like I didn't quite get there in answering the question, I think is going to be very helpful. So, this is my favorite part. Moving on to the core features and then you'll see at the bottom of the screen here, it is also going to talk about nice to have features. I always like to ask for recommendations or ideas here and I encourage you to do the same. So, let's just walk through our core features. Visual racy chart builder. Absolutely. That's the core of what we're going for. Ro assignment matrix, permissionbased editing, essential notification and update system, export and embed tools. This seems to really capture the idea that we're going for. What would you add, change or consider as nice to have features? I'm not really sure. Let's see what Mr. Chat GBT thinks here. These nail the core features. I'm not really sure on what would be helpful for nice to have features. Can you make some recommendations? Also, I want to keep the complexity fairly low. I don't want to get too crazy with integrations or complexities like database management or authenticity. We're going for prototype on this initial build. I want to keep the complexity low. Whenever I'm creating prototypes, I like to be clear about this because adding things like what I mentioned with database or other integrations adds complexity very quickly and can be built on. If you're creating a prototype or testing a workflow, you can simulate these things. Then when you determine what's working or not working, move forward to the more complex integrations. Let's see what kind of nice to have features Mr. Chat will recommend. Here are some nice to have features for the prototype. Comment threads on each row and roll. I love that idea. Version history. Yes, I think that's very good idea. So, this means we can roll back to earlier races if we're not happy with certain decisions that have been made. Really great. I would maybe even upgrade that to a core feature. Roll conflict flagging. This is a perfect example of something I feel like I should have thought of but did not. Quick import template. I love the idea. Don't know if I need it right now. Suggestion mode. AI powered placeholder. Add a suggestion roles button that can autofill a racy based on team structure or keywords. Love this idea. I want to hold on to that for later along with the quick import. Let's provide our feedback on these nice to haves and then we will move on to this next question. In terms of the nice to have features, let's include the comment threads. Let's include version history. And in fact, I think version history should be regarded as a core feature. Let's include RO conflict flagging. But if there are conflicts, it doesn't mean that we shouldn't be able to work with that conflict. We want to have that awareness that there is a conflict. The quick import and suggestion modes I love and I want to save those for later, but I don't want to introduce them now. Okay. So I'm ignoring the question here and responding to the nice to haves. So it should circle back around to this question. Cool. So it's reiterating the core features with our feedback and has circled back around to that question, the user scenarios. All right. Couple of user stories or scenarios to lock in how people interact with the system. I think this is a very critical step and this is your final opportunity to provide what's going on in your head, how you envision people using it. This is a great way to think through what that user flow is going to be. And this will likely be a final question before we get to the prompt. So I want everyday users to access the REI through an internal system on their work computer. Be able to look at any process that has been created, whether it's relevant to their department or not. Be able to quickly identify relevant processes for what they're doing. Be able to identify where they may appear in a process. or if someone is working through a process and is unclear on who to consult or inform, be able to quickly reference that. And I want that person to also be able to output a copy of that racey if they need to, whether they need to put it in a deck or just have it on hand or print it out. I want managers and stakeholders to be able to have all of that same capability, but also be able to edit, make small pivots, create new racy charts, and manage users. Let me know if I forgot anything or if there was anything that you would recommend that I didn't think of. Okay, looks like my chat cut off at the end there. I didn't think of. Mr. Chat has enough information regarding the user journeys. It's providing a summary. Again, read through it. I'm going to quickly get through this for the sake of the video. Recommended addition. So, it's coming up with another recommendation based on some of the additional info that we've provided since we've gone through those core features. So, let's see what it's recommending. A dashboard or racy overview page for managers showing recently edited charts. Yeah, so like a log of all the recent changes not required for V1. I like the idea. I don't want to add complexity. Let's see what level of complexity this might add. I love the additional recommendation of having a overview page for managers as you describe. However, I do want to avoid unneeded complexity at this time. What do you think? It's highlighting three aspects of that additional feature. Additional UI for smart summaries, light logic for detecting conflicts, possibly a separate view based on user permission. It's saying it's not technically complex, but it is scope expanding. For a lean prototype, it might slow down the build, distract from getting the core chart creation, collaboration flow right, and require more design and testing of my suggestion. Let's mention the manager overview dashboard of the phase 2 enhancement. I'm into that idea. All right, it sounds good. So, now is the fun part. Let's move on to the prompt. If so, I'll wrap everything up into a prompt. Here we go. I'm aligned with your recommendation. Let's move forward. Awesome. Here comes your fully structured cursor development prompt ready to guide the build of your racy chart system prototype. It's not required reading, but I encourage you to read it. It's great to see how it's laying out this information. It is a good way to start getting more familiar with some of the terminology used around the technology and you'll start to see a lot of the same components of the technology stack in a lot of these UI apps. The front end is going to be built with React with TypeScript. I love React with TypeScript. It's simple, lightweight, is visually appealing, has a clear visual identity. It's used in a lot of different applications, both big and small. So there's some familiarity with it. We are bumping up against the requirements for needing something like a database, which would likely be very helpful in a production version of this app. Integrating a database is not that hard. I've done it before. There are some great turnkey solutions that you could implement. Some of them are free to get started as well. We're not going to get into that right now, but that would be a next step if we decided to move from prototype to a working production. You'll see that it provided a diagram of the architecture. This is also very helpful. It's reiterating some of the user stories, discussing data models and relationships, and then has phased out the development into a prototype and then an expansion. So now what we're going to do is we're going to copy and paste this prompt and bring it right into cursor. So this is cursor and cursor is an honest to goodness software development tool in comparison with the bolts lovables and replets of the world. It will take a lot more than dropping a prompt in to get a working prototype. Those tools market themselves as builders. Cursor is a coding tool for coders and software engineers. And to be clear, it is not for me, but it is inexpensive to tinker with it. And I've learned a lot and through that have developed a whole newfound respect for software engineers who have educated themselves and built a career doing this. I found it to be a great tool to create prototype apps. I've built apps that work and are connected to database and have AI integration as well. I'm not going to claim that the code is great, but I have really enjoyed learning about this. As AI matures, as the technology gets better, I do believe that regular dudes like myself will have a lot more capability to provide working production solutions in a professional environment. So anyway, let's get going. I'm going to drop the prompt directly from chat GBT into cursor. Let's just erase this text at the end. This is not part of the prompt. And in cursor, you'll see that there's a drop-down that allows you to select the mode. I recommend using agent mode, which is the mode that will take a lot of the action that is needed here. And then you can also select which model you want to use. I typically go with cloud 3.5. I'm going to simply enter my prompt. And once I enter this, it will start creating files and directories and setting up the scaffolding for what will become our REI app. and it's going to take a long time. Let's go. As we're going through this, there will be some moments where you may have to provide input. This is running a terminal right inside cursor. Would I like to use TurboAC? I'm just going to go yes. If I'm uncertain about these questions, I will go back to chat GBT and ask. Chat GBT also has an integration where it can actually see what's happening in cursor. I wouldn't recommend diving into that just yet, but it can be very helpful once you get a little bit of experience under your belt. So now it's installing different dependencies. Connection failed. Of course, that you will see frequently when using cursor. I'm also using a VPN, which can sometimes impact the connection strength. If I start running into a lot of connection issues, I'll just disable the VPN. So, one thing that I really like here is we have a readme file. And this readme will continue to be updated and capture all of the key components of this app that any developer would be able to look at and understand. So, cursor can be intimidating to look at. There's a lot of colors on the screen. On the right here is my chat window, this whole panel. And these green highlighted items are new files and code that is writing right now. Normally, if you're a software engineer, you are likely looking through the code to make sure that the agent is meeting your expectations and following your direction accordingly. I do find it helpful to read what cursor is doing at any given moment. It's building the comment system now. it will detect and address errors and this will generally go on for a while. So I will come back when it's ready for more input. All right, so cursor has finished and the only other things that I did was install dependencies. So that's one command that cursor suggests and you can see it up there a little bit. enter that into the terminal window and that simply installs the technology stack that is powering this. And the only other thing that I did after that was run it. And to my surprise, it actually worked on the first shot, which in my experience is pretty rare with cursor. Usually there will be an error that you have to work through a couple of times. So, I'm pretty pleased it's validating for the viable edge prompt at the very least. And so from here, I can tinker with it a little bit. Let's see if I add a process step. What's the step name? I'm just going to say marketing strategy. Looks like our text is barely visible. So that's a UI thing. Let's add that step. Let's see if it worked. It did not work. So I am not surprised to see that. There's probably a lot more prompting that needs to happen before a lot of the capability and functionality is in place. cursor will frequently stop when it lays down that initial scaffolding layer of the app. But for an initial stab, I think this is pretty good. And I'm very curious what the result would look like in bolt or replet. So maybe I'll try that later. But what I'm going to do is go back to cursor and I'm going to ask cursor, what is your recommended next step? I can see the front end. There's a lot of UI things that need to be fixed up. It doesn't look like any of my inputs are being saved in any meaningful way and I'd love to figure out how we get to a working prototype from here. Just like the business case and just like when we were answering questions in chat GPT, I'm using plain language input. All right. So you can see that it is recommending improvements that are based on the core requirements. I'm also looking at the readme which is up here in the middle and the readme has been expanded to include a lot of those core features, the text stack prerequisites and some more information. But be quite honest, I would like this to be a little bit more detailed. And at some point I would ask cursor to create more specific documentation around user flows and development milestones and phases. It's going to think for a while. So again I'm going to pause the video and come back. All right. So you can see that what we have here is a lot different than the first output from cursor. I did spend some time putting in dummy data and to be quite honest, not all of our core requirements are working at the moment, but within 30 minutes, I was able to get this working prototype app that has an interesting and engaging UI for Rey. It automatically saves the trouble of having to create a PowerPoint. it automatically saves the trouble of having to redo changes and have this chart sharable within the organization. So, I hope that this was helpful. I want to create more of these videos. So, if you have any ideas for processes that you'd want to create an app for, if you want to dig into the nitty-gritty of prompting from that first output to this finished product, let me know and I'm happy to do that. love for you to sign up for the viable edge via the link below. You'll get the creative solution builder kit which I used for all the voice prompts. I'm working on some really exciting stuff that's going to follow and I would really love your feedback. So, thank you so much for sticking with me. I hope you like this and I hope to see you again. Byebye. Hey firedge keeps [Music] you hands. And we're smoother.