Transcript
So a little while back, Softr reached out to me to ask if I would like to make a video about a new feature they have coming out. After playing around with it a little bit, I can safely say that this is a true inflection point for Softr. It has the potential to really shift how small business owners and entrepreneurs choose the software, or should I say, build the software that they use in their business.
This is it. You're actually looking at it. It's called the AI Co-Builder.
If you've used Softr in the past, you know they typically ask if you want to start from a template or start from scratch. Well, that's all gone, the entire look of the application has changed, and instead we've got the AI Co-Builder asking what we want to build. Now, is this just vibe coding? Did Softr just add vibe coding to the tool?
I mean, kind of, but not really. This is different from every vibe coding tool out there, and I'm going to show you how. Today, I'm going to build out an entire OS for my agency.
If you know anything about agencies, you'll know they're typically run with some duct tape and maybe an n8n instance. There are a ton of tools that get connected together, and piecing everything together in a fluent way can be very difficult. Let's solve that right now with a single prompt inside of Softr.
[.blog-callout]
Note from Softr: When it comes to piecing together tools for automations, you don't always need an external platform. With Softr Workflows, you can keep your logic as close to the design as possible, helping to consolidate tools and reduce reliance on third-party automation platforms.
[.blog-callout]
But first, I'm going to switch over to Claude. One technique I've grown very fond of is using one AI tool to help me organize my thoughts to output the prompt to actually build in a different tool. This is Claude desktop, and what I just did over the last few minutes was I held down the function key on my keyboard and used Mac Whisper to talk about the tool that I want to build using Softr.
Now I'm just going to send this to Claude and it's going to output a much more organized, thorough prompt that I can copy and paste into Softr. This is not an essential step, it's just one trick that I like to do. I've talked about it before here on this channel, and it makes building more complex apps a lot easier.
It's similar to using plan mode if you've ever done that in something like Cursor or Claude code. I think you'll understand what I mean when you just take a look at the prompt that Claude put together for me to feed into Softr. This thing is super organized and super detailed.
So I've just pasted it into Softr, you can see the entire prompt is right here, and let's go ahead and ship this. Now the first thing that happens with the AI Co-Builder is we get this new screen. It's like an interview screen where they're going to ask you questions about the application you're building.
The first thing you want to know is how clients are going to access the client portal. Well, they're going to log in with their email address. That's generally how I like to do things.
Next, the AI Co-Builder wants to know how team members will log their time. Let's do a timer and manual edits. Do you want the app to include internal only CRM style pipeline views for onboarding in addition to the checklist or table?
I think I'm going to go just with the checklist for now. It's basically like as we're onboarding a client, we're going through a checklist to make sure that we've got everything done. One of the biggest issues when you're vibe coding an app is of course authentication, permissions, and role-based access.
I made sure to emphasize it in my initial prompt. So it wants to know how users will log in, and I'm going to choose email here. Can people sign up on their own? No, I'm going to invite clients, and then staff obviously will be invited as well.
Next, we can choose our navigation layout. There are options here for desktop as well as mobile. I chose both side and top because this is a big app.
It's going to have a lot of options, so I think that's going to be necessary. However, for mobile, I don't like when it has both because then you have a very limited working screen. I just chose bottom for this and we'll proceed.
Next we'll choose our theme. You can always customize this later on, but I'm going to go ahead and choose this one right here. I think that looks pretty good, and we get a little preview of it.
If you want to click around and see some different ones, you can definitely do that. These are going to be really stylish. All of these themes look really good, but I'm going to go with the dark view and the gold color kind of fits our existing brand.
Let's go ahead and create the app. Now the magic happens, and we can basically just sit and watch. It's going to start out by building the database, which is a whole thing in and of itself.
[.blog-callout]
Note from Softr: When having the AI outline your data structure, it sets everything up natively in Softr Databases. While Softr integrates with numerous external data sources, utilizing our native databases offers maximum performance and allows you to manage everything directly within Softr without leaving the platform.
[.blog-callout]
If you were to build out the structure of a database on your own, that could be weeks worth of work. Now Softr is adding in some users with different permissions. In my prompt, I specified that I wanted to have a difference between employees, administrators, and clients.
They're adding in users with different roles here and they're even telling me all about it as we go. You can see all of the tables they just created for me. We've got users, clients, projects, tasks, deliverables, time entries, onboarding checklists, and invoices.
It's even going through and making the relations between the different tables. You can see the updates here as it's working, it's linking invoices to clients and linking invoices to projects. Now it's adding the individual fields to the invoices table.
This is so cool to watch it work in real time and actually build an application. I do a lot of vibe coding and there are certainly times where that's going to work great, but you often have this black box feeling where you're not quite sure what it's building when you're just in the command line. Unless you're going into the code and you're technical enough to actually look at it and understand everything that's being built, a lot of it is just hoping that everything works out.
[.blog-callout]
Note from Softr: While the AI co-builder is incredible at spinning up complete applications, what happens when you need a highly specific, custom element? For that, you can tap into the Vibe-Coding block. Just prompt for the exact custom component you want, and Softr will generate it and securely connect it to your database completely seamlessly.
[.blog-callout]
Here we can see that it's actually building the application the way that I want. Now it's populating some placeholder information with different invoices and amounts. We can see how everything actually flows and functions in the real application.
The app looks like it's almost ready to go. You can see it's building the front end here, and it's super exciting. You can see every screen being built in real time, and it's so cool.
Here's the projects page. They've moved so quick, you just kind of get a glimpse of everything it's doing. In a sec, we'll be able to go into the regular Softr view where of course we can tweak this and we can make it exactly as we want, even if the one-shot app doesn't nail it.
Honestly, it's looking pretty impressive. This is the homepage here, which has two KPIs at the top for our clients and our projects. Then you've got some tabs where you can switch between the clients and the project view.
Oh, the app's ready. We can try it live or just go right into the editor. Let's see it live and then we'll try to tweak some things.
We're in preview mode right now, as you can see in the upper left-hand corner, and I'm logged in as myself. I could switch to different user groups if I wanted to see what it's like for an employee, for example, or a client view. They added some clients for me as well, so let's dig in.
[.blog-callout]
Note from Softr: Being able to preview different user groups makes building internal tools and client portals incredibly easy and secure. You can build advanced project management systems and ensure clients only ever see what you intend for them to see.
[.blog-callout]
I'm currently logged in as the owner and we've got a bunch of screens that we can go through. There are tabs at the top here, so if you switch to the client view, I get a list of all my clients. There are some filters here, so I could see which clients have churned and then maybe as the owner, these are people I want to spend some time reaching out to.
Or I could switch over to the projects view here and see what's in progress, and what is maybe on hold and needs a little bit of a boost to push it over the edge to get it back on track. I also have this dedicated projects view right here where I can see all of the active projects and even open them up in a little sidebar to see what work needs to get done right now. I mean, this is super cool.
I can see everything about the project, and if I need to edit the project, there is an edit button right here. I can scroll down and see all of the tasks that have been worked on, what deliverables we have, and the time entries. If we're tracking our time, we can see how that's actually been done.
If I need to add some more time, I can do that right here. You can even see the connected invoices to know if your clients have paid or if they're past due. I mean, this is crazy.
I know how much work this would take to try to set up in a platform like Notion. I don't know about you, but whenever I'm in Notion, I just feel like everything is very fragile. If I click the wrong thing, I'll break my layouts entirely, but this is a real app.
