From PRD to interactive dashboard with AI tools

- It's time for the fun part. We've aligned on what the dashboard needs to do and we're ready to move into building. The nice thing about using these tools is that we don't have to go through all that wire frame and placeholder process. This is where we can get the model to generate a working version that uses the real data as well as our PRD, and you'll notice that sometimes when we do this, we'll have to make some adjustments and potentially use different tools to solve certain problems. I'll say, using the PRD sample dataset we created earlier, build the first working version of the dashboard include the main sections, charts, and tables that match the acquired capabilities. Use the actual data so everything renders with real values. Now, it may do something like this where it's asking you to reenter the final CSV that it generated earlier. I'm just gonna drag this final file in here and it's gonna upload that final CSV that we generated earlier. When I did that, it's gonna show me some of the data here. The code interpreter will sometimes try to generate a Python solution using its visualizer to show you some simple charts here. Sometimes, you wanna be more specific about what the dashboard output should be. I'm gonna do a couple of things here because I want it to be more of an HTML report. I'm gonna do two things to help it, make sure that it gives me the right kind of output. First, I'm gonna turn on canvas mode. Canvas mode is going to be a helper for either writing or programming, and it's gonna let me preview things like an HTML dashboard. If you want the dashboard to be really interactive, you can ask it to use React. Let's go ahead and send this. When it's done, it's going to allow you to hit this preview button to take a look at what you've done. In the meantime, you can hit this edit button to take a look at what it's doing in a side-by-side view. This is canvas mode and it's going to be an interactive tool that you can use to work with code. Once it's done programming, it's going to activate this preview button, so let's hit it and see what's happening. I can see that it didn't really upload any of the data, so sometimes when working with this tool, we're going to have to give it some feedback and help it make some corrections. I don't see any data. Can you make sure you're using the right data file. Now you can see that it's giving you some feedback as to what it's doing. It made a suggestion to update this to a CSV to JSON file. I don't really want it to do that. I just wanted to use what I gave it. I'll just say, can you just use the CSVI gave you? Let me upload new files and just in case I'm going to give it that final CSV again. Here is the original and I'll hit send. It's making some suggestions thinking about some of the code, and it's really not doing what I need it to do, and so I want to switch to a different tool, ChatGPT is not going to do this part of the project. The best could just be the current version of the model, and sometimes, it's just a session that you're in. Even restarting with the same tool at different time is going to generate the results that you want. So in this case, I'm going to switch over to Google Gemini. I'll show you how. Since we created a PRD as well as a data file, it's actually gonna be pretty easy. I'll say, can you output the PRD for me as a file? I'm going to go to Google Gemini, and I'm going to upload the PRD as well as my CSV, and I'll say, build me a dashboard following the instruction in the PRD included with the data in the CSV. Once again, I'm going to specify canvas. I'm gonna hit submit, and you could see that the canvas mode in Gemini is very similar to ChatGPT. All right, it looks like it's done. Let's switch over to the preview tab. A pretty cool dashboard showing you some of the data. It implemented filters for us. Let me sort by the different owners or the statuses of the projects. It even added an upload, a new document option for me that I can use to bring in some new data. Another nice thing about the chatbots is that the dashboards aren't just available to individuals. They're also shareable by clicking on this share button and you can copy this link to send it to someone else to take a look at the same dashboard. This risk section isn't exactly what I was looking for. Let's go ahead and ask Gemini. We'll say, I don't see much in the risk distribution section at visual cues or summaries that highlight task with the highest risk or cost impact, and we'll hit send. Now we can see a much better risk profile section with the top critical offenders right here and the financial exposure as well. Starting out with a simple conversation, we moved on to a PRD and finally ended up with a working dashboard. We had to make a lot of adjustments along the way, and that's the way Vibe coding works. You don't start with all of the documentation. You begin by having conversations, making adjustments, and then noticing when we need to make a switch to a different model or a different plan. That's the essence of vibe coding. It's working with the tool, not letting the tool do everything, but communicating with AI to get things done.