This AI App Builder Just Got 10X Better

--- type: transcript date: 2025-06-21 youtube_id: tPICpE0_bNc --- # Transcript: This AI App Builder Just Got 10X Better In this video, I'm going to be showing you how to build out a tool leveraging data button. If you're not familiar with data button, it's a platform that allows you to make applications completely from natural language. So, I had an application that I had in mind that I wanted to build that has a real purpose at the company that I work for. Effectively, what I want to build is an application where we're going to be able to take in a CSV of a number of different contacts and then we're going to scrape and find out and determine what all of the different companies are who are interested in our product. So, what I have gone ahead and done is generate this PRD within Chad GPT. And what I'm going to do for a first step is I'm going to paste in this relatively long PRD directly within data button. From there, you do have the option to include things like user stories, quotes, or any other requirements that you have. In this case, I'm going to skip this step. And then from here, we can go and include any design inspiration that we have. A really great place to find design inspiration is dribble. What you can do here is you can go and you can search for different things in the context of something like a website. You can go and look at different landing pages here. And once you find something that you like, let's say I like this fintech example here, I can go ahead and I can reference this. So in this case, I'm just going to take a screenshot of this page here. I'm just going to drag and drop that screenshot directly within here. You can go ahead and add in multiple assets if you'd like. In this case, I'm just going to upload that one example. And then from here, I'm going to kick off the application process. The first thing the data button is going to do is it's going to take whatever you ask for it to generate and it's going to generate a to-do list. So within here we have create the landing page with the CSV upload build the CSV parsing as well as the email column detection integrate the fire crawl API for domain scraping and finally have the real time pie chart visualization with processing pipeline. So I'm going to go ahead and kick off this task. You can go ahead and just click start task. And as soon as we kick off that task on the right hand side here, we have the data button agent and it's going to go and assess all of the different component pieces that we need to take to actually accomplish that goal. Within here, you'll see that the agent will go through think through all of the different component pieces of what it needs to accomplish that task. And ultimately, once it's accomplished all of those subtasks, we're going to go and get that feedback. As soon as it's done, what it's going to do is we're going to have this note of all of the different steps that it took. And that's the really nice thing with this is you're going to have all of the activity logs, but you can also go within any of the tasks and add in additional contacts if you'd like. Say for instance, I want to add something to this list here, and I'll say filter out common emails such as Gmail, Outlook, etc. I can go ahead and do that. Now, what I'm going to do is I'm going to click the preview tab because this task was specifically focused on the front-end portion of the application. What we see here is our preview environment. We have the ICP segment analyzer. I'll drop in a CSV here. And as soon as I drop it in, I have that feedback in the front end of the application right here. So now that I'm content with what it created here, I'm going to go ahead and mark this as done. And I'm going to kick off the second task. Now I see for this task, it's went ahead and it's created the backend API for CSV parsing. We've updated the file upload component to upload the file to this new endpoint. We have also implemented the email detection and email extraction logic from the server. And then we've also created a component to display the results returned from the API. What I'm going to do here is I'm actually going to go ahead and open this up in a preview window so I can see the entire application and what it looks like. And I'm going to go and click this button to sign up here. So without even asking for anything, I have this authentication all set up. I do see that I have my Google Oath as well as my email where I had one-click login and setting up authentication is generally speaking a non-trivial task. To be able to just have that for free is definitely very helpful. If I go ahead and I upload the CSV, I do see that I have an unexpected error that's occurred. But the great thing with this is if I just hop back to the platform within here, I do see different errors right within the back end of where the request is. That's one thing to know with data button is this is a fully hosted application. What I can do here is anytime you do encounter any errors, what you can do is you can just feed this directly within the prompt and you can send it through to the agent here without any instructions. All that I'm going to do is I'm just going to paste in those logs. We do see that I have the user that's authenticated, but I also have that processing CSV error. Now that I'm logged in, I'm going to go ahead and drop in another CSV into our ICP segment analyzer. I have analysis ready and we have the detected email column which was email and within here we have 25 unique domains that are found. So we have Abbott, Adobe, Amazon, so on and so forth. Then from here I have the start analysis button, but that is going to be a part of one of the next steps here. Now I'm going to mark the second task as done and I'm going to kick off the task to integrate the firecrawl API for domain scraping. Now we see it going through the different tasks here. And the great thing with the platform is when we do need to put in an API key, it will have this little window. We'll reach for our API key and we can paste it directly within here. There are a ton of really neat features of the agent which you'll notice as you begin to use this more and more. But one thing that you'll notice that it will do is it will create tests to actually test the different endpoints within here. We can see that it actually ran through a test to verify that the logic that was just written is in fact valid. Now that the fire crawl API creation is all done, I'm going to go and kick off the task to create the OpenAI powered ICP generation. Within here, we see that we're going to create a backend API. We're going to integrate GPD4 for content analysis. And then we're going to create well-crafted prompts. And then within here, what we're going to do is we're going to have predefined segment lists where we're going to group all of those different emails and domains into those particular categories. We do have the request to add in our OpenAI API key. I'm going to add in that secret and then we can just relax while the agent works through the task for us. All right. So now I see the agent has gone through and without any interruption, it was able to successfully implement the analyze endpoint for ICP segmentation. I see it's leveraging GBD4 mini with the JSON response format to classify the company content into one of 20 predefined segments. So, and finally, our last task here is to build a real-time pie chart visualization with a processing pipeline. Again, I'm just going to kick that off. And if we take a look here, we can see that it's going to be using recharts. We're going to be leveraging those different endpoints that we created, the analyze CSV as well as the scrape and analyze API. And ultimately based on the responses that we get, we're going to create that visualization where it will plot all of those different emails within that pie chart that we have. So within here we have the status of all of the different domains and then we also have the segment here. So it does look like it's working through and we see that it's starting to generate different results for us. So it's processed 20 different domains of the list that we have here. We have Amazon for instance as e-commerce. We have an error on meta. So we can go and investigate that. We have some information from Netflix, cityroup, so on and so forth. We do see it's continuing to stream in those results. Some domains potentially might take longer than others just to load and ultimately process that response from OpenAI. If I go and hover over the pie chart, I have eight healthcare companies, one media company, so on and so forth. Where something like this can be helpful is all of a sudden when you have tens or hundreds of thousands of customers and you're trying to identify different segments of who's actually interested in your product, having a tool like this internally, it goes without saying how helpful it can be. Now, one thing that I do want to mention is if you do run into particular errors, there's a really nice ergonomic button just to fix the errors which will take the context of the backend terminal as well as the console terminal and it will put it within the agent for us. But what I can also do is I can say I am running into a few errors and I can go ahead and send that in and it will begin to work through all of that process. But otherwise that's pretty much it for this video. I encourage you to check out data button. It is an incredibly powerful platform. If you found this video useful, please comment, share, and subscribe. Otherwise, until the next