NEW: Databutton AI Coding Agent🤖 Bolt.new v0.dev Lovable.dev Cursor Windsurf Alternative?
In this video
- 00:43Diving into Databutton Features and Setup
- 00:55Exploring the Databutton Website and Example Apps
- 01:37Pricing Plans and Comparing to Bolt.new and V0.dev
- 02:12Unique Features of Databutton and Free Credit System
- 02:55Dashboard Overview and Creating a New App Demo
- 03:48Documentation and Integration Options in Databutton
- 04:28Building an App Using Databutton's AI-Driven Prompts
- 05:18Generating Starting Points for Apps with AI
- 05:48Reviewing Initial App Generation: Light and Dark Modes
- 06:34Customizing UI and Viewing Generation History
- 07:14Task Management and Credit System Overview
- 07:47Adding APIs, Backend Features, and Custom Storage
- 08:38Creating and Testing a CRUD API for Contact Management
- 10:04Debugging Email Validation and Iterative Improvements
- 11:22Autopilot Debugging with Databutton's AI Agent
- 11:55Reviewing Pricing and Credit Usage Efficiency
- 12:38Troubleshooting API Issues with Databutton AI
- 13:10React App and Fast API Integration Demonstrations
- 14:06Autonomous Testing and Debugging Features
- 14:34Generating New Tasks and Adding Pages Dynamically
- 15:12Building and Customizing Task Management Features
- 15:52Task Page and API Integration Challenges
- 16:19Fixing TypeScript Errors and Adding UI Components
- 16:53Debugging Task Form Functionality and Agent Iterations
- 17:30Reviewing Final Task Page Functionality and Errors
- 18:32Pros and Cons of Databutton: Features and Limitations
- 19:34Pricing Discussion and Comparison to Competitors
- 19:56Unique Features Databutton Could Inspire in Other Tools
- 20:42Final Thoughts and Outro: Join Stride AI Academy for Free Resources
- 22:10Sponsored Segment: Stride Agents AI Appointment Setters
Links from the video
Transcript
4,348 wordsWhat's going on guys Josh Bok here now recently A lot has been happening in the AI IDE AI pair programming agent race and we're seeing all these different new tools come up we just recently covered lovable. deev we've covered wind serve cursor VZ boat. new the list goes on and on and in today's video we're going to be taking a look at specifically a tool that is somewhat more of an alternative to bolt. new it allows you to easily prompt run
Edit and deploy full stack applications within your browser this tool is called Data button we're going to test it out and see what it's made of and see how it actually compares to some of the other tools like bolt. new and VZ with some of its recent updates without Ado let's dive right into it all right guys so here is data button's website I'll leave a link down below so you can test out if you want I'm not going to go
Through the entire website here but just I'll scroll down so you can see here are some different apps that they say are built with data buttons so you can check out some of these apps right here we have like a uh e-commerce type app right here tagify ai ai powered video tagging for every need uh priv uh do privac AI um absolutely not twitch so a twitch clone here postify probably um a social media posting app fast deck AI probably generates
Like slide decks and whatnot with AI so you can see some information about their team and their pricing so they do have um a pricing plan here this is an open source unfortunately um I'm currently just on the free plan I I'm probably not going to use one of these paid plans I'm just going to use CU I already have bolt. new VZ and whatnot unless this is subst ually better over time than something like bolt. new or VZ um then
Maybe I would upgrade to one of these plans but as you can see here 50 bucks a month it is more expensive it's like double the price of Bolt to um so that right there obviously isn't the best um but it does have some pretty cool features and that's why I wanted to Showcase it here on the channel um they have some FAQs down here they do have some docs Discord and a about section and the reason I'm showcasing this whether
You use it or not um one you can test it out and there's like free credits but also too I think a lot of these tools like as we're seeing all these different tools pop up some of them even though I may not use them all the time I think they have some specific features that I think some of the tools that I do use all the time um should integrate which is you know what we're seeing right now with all
These competition in the AI space so anyways I'm going to go ahead and sign in and actually start building okay so once you create a free account this is what their dashboard looks like you you can see here we could go visit the docs here join the Discord and see all apps my apps and shared with me apps right here I created a demo app earlier but we're going to go ahead and create a new app also too if you go
Over to their docs um their docs it looks like they have pretty good docs you know it covers a lot of different things um FAQs Core Concepts prompting app UI prompting up your API within data button uh connecting UI with backend uh UI component authentication integration such as Firebase integration or superbase database integration with those two uh stripe integration workspace data storage secrets so they have all this within their UI um place for their secrets um version history console um so
This is this is all good stuff right that you tend to want to see in one of these type of Bolt apps um package installation keyboard shortcuts invite collaborators which is actually really nice that they have that media uploads um so this is good too app Theme um so there's that chat with website working with data sources build AI agents with using open AI API um they even have porting a bolt app to data button working with storage files adding images
To your app getting streaming to work uh a bunch of different stuff I think you get guys get the point if you want to check out some of those specifically go check out the docs so here's how you build the app app um this is actually kind of cool that they do have it like this um where it kind of gives you like a form that we can fill out so let's just say want to do a CRM application okay so
For the pitch we got a CRM app for managing contacts and also has a built-in task manager for app description we have a clean modern UI fully functional light mode and dark mode add additional features to impress me and make it a world class app then for target audience where we put in our primary user group I'm just going to put business owners here and then you can put main screen size so you can um you know set it up so
It's optimized either for desktop mobile or tablet out of box mainly um I guess the dark uh default theme right here I guess so I don't know if it'll be able to do light mode and dark mode we'll see because I'm putting dark mode here but whatever the case is you can put that there and then design guidelines so your style preferences branding elements color schemes typography Etc yeah I'm just going to keep it pretty basic clean UI future font if
Not available then popins and then modern application okay so next I'm going to click on generate starting point with AI generate starting point hold on this should take just a moment generating starting part Point analyzing guidelines so initialize app extract design guidelines generate plan and right code so it's just going on with that once that's done it's actually happening pretty quickly but um once that's done we'll pop back in okay and here we go this is where we're at with the
First generation so we can see here got a dashboard total contacts active deals tasks uh meetings today okay light mode and dark mode works right out of box so that's actually pretty cool we can okay so add task doesn't seem to be working add new contacts doesn't seem to be working um but this is actually pretty good for the first prompt um literally the first prompt you could open preview up here so this is actually one of the reasons why I
Decided to do um a review on this tool just because um I found that the you know right out a box it has a pretty good generation can click edit code here to actually see the code that it generated um we'll come back to some of this in just a second if we go back to their UI they have a bunch of different options so you can preview on tablet so it's actually optimized for that preview on mobile actually optimized for
That too um but we'll stick to desktop you can see your history up here so we'll maybe check that out once we actually do some more changes again go back to my CRM application so down here in the right I'll show you what we got here we got great dashboard page so it kind of is giving you different prompts um add task list to task manager build contact list and contacts prepare for deployment you could send a message to agent you
Can create from image you can add tags um you can generate ideas right here you can see your uh how many credits you have um with a free account you get 20 credits so not too too bad but like I said you know not um the greatest now if we go new thread here you can do a new thread over here is where you'll see kind of your build right here so we can see we got Pages UI components UI files
Back end all right so your app has no apis media so public uh Media or media files right here okay you can add media you can do new API right here add a new backend you could add internal storage right here files um you can add new UI component all yourself manually if you want um but we're going to go ahead you can click on view tasks here so you can see here kind of gives you like a to-do of certain
Tasks you could also click generate task to generate more Tas but um this is actually really nice I think out of box that it gives you so kind of gives you like your next prompt so here's one for example CRM as a user I want to create a fast uh I want to create a fast API uh API for managing contacts so that I can perform cred operations from contact data all right so we can go ahead click Start task as
You can see here now it is actually going ahead with the AI agent over here and we can see it's saying I'll create a f uh a new API with contact management endpoints here's my plan all right so we got a planning agent so you can see it's thinking it says that now it's listing the files here so it's actually a new source for/ apis contacts. py with crud endpoints for contacts here's my plan great Panic models with uh for contact
Data including Fields like name email phone company Etc Implement endpoints for get contacts list all contacts get contacts SL uh ID right here get single contact Post contacts so create contacts update contacts with a put delete contacts right here use db. storage . Json for storing contacts would you like me to proceed with this implementation I'm going to go ahead and say yes I don't know exactly what the 15 credits are I don't know if that's I guess maybe over time
A credit gets used as you can see we've been sending a couple different messages here and we're still at 15 credits so it's not a credit isn't just like one message um so that's good at least all right so now we can see here that it is writing the code okay so should be done in just a second all right creating contacts backend reloading back back end so now we can see here back end we got contacts right here so code
Written for credit operations now it's writing some more code as you can see right now it says fail to import python module email validator is not installed run pip install Panic uh Panic email let's see if it fixes that so I've completed the contacts API with the following features crud data validation using identic models with Fields name email phone company title notes persist storage using DB storage I'm just putting over here it says fail to import python module email validator okay
So it says the package has been installed even though I still get that error here um it's saying that it's going to uh validate that it has been installed and the apis are working correctly okay so it's running the python code to check python code executed I notied that we need to wait for the apis to properly be registered in the system the error we're seeing seems to suggest the email validator installation needs to be persisted let me try a different
Approach by modifying the contact API to use a simpler email validation okay so it tells me what it's done so it's written code and replaced email string with string pattern validation for emails updated contacts backend I've updated contacts API to use string pattern validation for emails instead of email string uh this should resolve the import issues the API now uses a reject pattern to validate email addresses maintains all the same functionality doesn't require additional dependencies Okay so asking if it wants
To verify that it's working I'm going to say yes yes verify so it's calling the API end points right now so called successfully for creating contact reading logs logs red so it's good that it can actually do all this like reading the logs and troubleshoot this I think that's actually very useful I like how it kind of can go on autopilot and it's pretty smart with this agent in terms of like actually getting tasks done it's actually pretty good to be
Honest the main issue I would personally see is just kind of the price point for the credits I don't know I mean I haven't used this tool extensively but this just doesn't seem like it would I mean depending what you're building if you're just using it I mean like we've been building this we've used five credits so far um to get a front end as well as a API setup right here we're not done yet but I just feel like uh
You know in terms of what we've seen in the market with like stuff like Bolt And even um level out there V zero looking around that 10 20 you know $30 price point is typically where you know we're looking at um for the value that you get okay so code written add proper airror handling and logging to create contact endpoint failed to update contacts backend so now it's rereading code so it's good that it like can run these tests itself and
Kind of see that it failed and then iterate upon itself okay so it gave us a progress summary here now it's saying next steps I will continue to refine the endpoint here by ensuring implementation is complete and handling proper errors after that I will test and create contact functionality again to see if the issue is resolved I'm going to continue with the current course I'll just go ahead and say yes okay so I'm just noticing that the second task is for
A react app that uses interface with fast API um so this one is just using fast API so similar T right here um I guess some of them would probably be similar and give you options to choose from um so yeah there's different options just read through the different task if you're using this it looks like it got an error up here but then it Rewritten some code and then it ran the same thing and looks like it didn't get an
Error again so that's good it can iterate and actually solve the issues which is actually nice that's one of the strengths I would say with this tool that's pretty good with iterating the agent itself um how it's just running on autopilot I actually kind of like it um opposed to some other tools it's pretty good with running on autopilot and even running t like it's successfully testing these a API end points and everything automatically which is actually really really useful like
It's kind of autonomously building itself right here and running the test you know troubleshooting which is actually something I really like okay so now it says the contacts API is now working correctly I verified so I verified creating contacts listing contacts the data is properly stored and retriev all the required fields are present in the response the uuid is properly handled would you like me to test the other endpoints get contacts update contactsite contacts as well maybe we'll do that in
A bit um I just want to go ahead and build out some other additional things in this app I'm going to go ahead and do new thread here okay so if you go tag here you'll be able to tag either tasks or API apis Pages um data files right here contacts um so that's useful you can also um in the new thread it's going to prompt us with this so test contact creation debug contact listing deploy the app at air handling
You can also click generate task up here so describe what you would like to work on next I'm just going to say just going to say improving app adding more pages fors functionality components Etc generate these tasks here this is useful because if you ever don't know what you should generate next you can just kind of generate new tasks and have it generate them for you so it generated five new tasks we can see here yeah we can say as a
User I want to add a page for managing tasks so that I can view and edit task related to my contacts let's go ahead and start that task okay so it's thinking listed files files listed now it's going to develop a plan right here so here's the proposed plan first create a task uh create task API with end points for list task create task update task delete task get task details then create a task page with a clean UI using Shad
CN components finally integrate it with contact system would you like me to proceed with the task API first I'm going to going to say yes okay so now we've created the task API with all the necessary crowd operations let's fix linting errors and then we can proceed with creating task page I did that now we have the task API set up let's create the task page I'll show a modern clean UI blah blah blah blah blah let's go ahead and just
Say simply yes so I'd say this app or this tool is actually really good with their autonomous side of things the way it works um with the agent I think that that is something actually kind of unique I mean I haven't seen too too many that are able to do it this good okay so it's actually been going now for maybe like three four maybe even five minutes here so it added task page with task form and task components and then
Toast components and fix typescript errors in task page so it picked up those typescript errors which is actually really cool and useful got an error here so apologize for the error let me fix that by first reading the current code and then making the changes read code for T so I didn't like give any other prompts other than that and now I added toast components fix typescript errors um for toast UI use toast UI toaster UI failed to update tasks red
Code for tasks add toast components and fix typescript errors okay so we had some issues here it troubleshooted them automatically read the code for tasks uh updated task page to correct Imports and API calls and then updated toast components and fix API parameters names if I go to task page here it should load okay now we can see our tasks I go new task right here we can add a new task like test task right here priority to do this is
Like a Shad CN component create all right it wasn't letting me create so I'm saying it it won't let me create tasks after filling in the form and the homepage add task button should go to the homepage all right now we can see that the agent is revising this okay so added a navigation task page so let's go ahead check our homepage all right so if we click on add new task and it brings us to the task page here now
We click new task do test test medium to do create okay still not working so I'm saying the t uh create button on the task form component isn't working okay for some reason uh it won't create the task which is kind of annoying uh you could go ahead deploy it you could go ahead and open a preview as you can see when I'm trying to create a task here it's not creating which is annoying all in all I think you know
It's good at creating an app uh with one prompt pretty good um like out a box as you can see here got a nice graph here it's functional or somewhat functional um we got light mode and dark mode which it got right and I do like some of the features of the interface it is kind of cool how it has everything uh structured out here the only issue is I don't see a way to export it the only way I see
That you can actually ort the code is going into the code and actually editing the code and then manually copy and pasting the code into your IDE which I definitely do not like they do allow you deploy to deploy it to a custom domain here or or to a subdomain for their uh domain right here uh they do have the feature to upload from an image which is pretty nice and I do really like the agent as well as the task
Functionality that it has in here within the UI but other than that you know I think it does have potential um I think the features I do like some of the features but I personally wouldn't be paying for this tool 50 bucks a month for 200 credits just doesn't make sense to me when I could use something like bolt v0 Etc now I do think it does have some features that are unique to it that something like bolt vzer or whatever
Could incorporate like that agent feature how it autonomously is able to iterate andove check for typees script errors check for log errors and all that good stuff that's pretty cool and all in all it does do a pretty good job but I don't think that you're going to get enough bang for your buck that's my personal opinion um but if you guys are maybe a fan if you've used this tool before maybe I'm missing something let me know in the comments
Down below if you try this tool out and uh have some success with it let me know what your thoughts are about it other than that guys let me know how you think it compares to some of the tools like bull. new v0 Etc does it beat them is it on par or is it just a lot worse in your opinion let me know what your thoughts are in the comments Down Below guys if you're new to this channel we upload
Videos all the time on AI marketing sales AI coding business Etc so if you like that type of content you got some value here make sure to like the video comment down below and subscribe to stay up to date with the uploads there's been a lot like I said of different AI tools coming out so this is just one of them that I plan on covering got some more on the way so stay tuned for those videos also too guys if
You haven't already joined our free community stri community.com I'll leave a link down below stri community.com for our free Facebook group and Discord Channel and then also too guys I recently just created a new community called The Stride AI Academy where there's free resources free courses free tools a bunch of free stuff I've been working on it non-stop for the last few days so I got some really cool stuff coming so I'll leave a link down below I just changed it
Actually if you're wondering from Strat Community to strat academy because it's going to be filled with both Lo both loads of educational content and knowledge and courses so make sure to join that currently it is for free uh in the future there may be a price point to it so join while it is for free um other than that guys if you run a business and you need help with your systems your marketing your sales implementing ai ai agents Ai call
Center appointment centers into your business then book a call down below at executiv stride. apply other than that guys I will see you in the next video keep hustling keep grinding and of course guys accelerate your stride take care re tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of elite sales agents booking qualified appointments for you around the clock no more wasted time on training no more frustration with performance and
No more draining your budget on inconsistent and expensive call centers introducing stride agents AI powered appointment centers that work 24/7 never get tired and book appointments while you sleep trained on thousands of successful conversations our AI agents outperform human teams at just one tenth of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire sales process
With cuttingedge AI technology it's time to accelerate your stride with AI agents