What I Built With Caffeine AI
I'm going to give you an in depth tutorial for how to use Caffeine ai to build applications just by chatting. And these, you can build them directly on the blockchain with the extra security and verifiability that goes with that. And you get to integrate all crypto features like ICP, being able to deposit and have ICP, CKUSDC, all in there with that. So I'm going to assume you already understand Caffeine ai. I'm not going to sell you on it. I'm just going to show you how to use it in this particular video. So the website is Caffeine ai, and I've built two websites with Caffeine ai to show you my experience here.
And what's cool is I've completely redone this website several times. So here's an example of something you can build. I built most of this basic website with a single prompt in Caffeine ai, which is amazing. So this is a website that has, you can schedule a video. You can record a video with me if you're on Jerry Banfield ai. That's what my website has. And this is a great one page website that is perfect for anyone that's like coaching, consulting, that has traffic that you want to convert into a sale. And that's the first website I made with Caffeine ai. And this one was much more advanced where creators and advertisers can work together to have advertisers pay creators to either clip or create content.
If you want to see more of how I work with the Internet Computer, check out my my ICP Crypto playlist.
And this one, I did 70 plus different versions of the website. This took a lot more learning Caffeine ai and getting this to work to make it function successfully. So this is what I built so far. This has fully integrated crypto payments. For example, you can deposit ICP. It gives every single user a unique address. Then you can swap it with one click from ICP to USD, CKUSDC. And then you can withdraw that CKUSDC in here. This has, has campaigns, submissions, messages, an admin dashboard, et cetera. So this is just what I've built personally with Caffeine ai. And I've had to learn a good bit to get all that to work together.
Getting Your First Prompt Right
So some of the basic things with Caffeine ai, and I'll tell you from experience first, I would recommend for doing your initial prompt to get a very clear idea in your head of what you want. And then get it, it to put output a specific prompt just for the AI. That's what I did to start off both of my websites. I went in, in detail and then had it, I told it exactly what I wanted first and the very first prompt. And I then put it through ChatGPT to refine it and give that output from ChatGPT into Caffeine ai. Now you can just use Caffeine ai to write your own website.
I don't know if you've ever done that. I don't know if you've ever done your website directly yourself. If you want, you could just turn the audio on and start speaking. The thing is, the more clearly you can describe and visualize and communicate to the AI exactly what you want, then it will output it faster. So it's ideal if you can be as detailed as possible in your very first prompt when it builds everything. And then what you're going to have to do is go through and iterate and bug test. You just tell it, you make the initial prompt and you want to think about things like color scheme, pictures, buttons, what do you want it to look like? If you would rather talk the idea out loud before you ever open Caffeine, you can schedule a one-on-one call with me and we will shape that first prompt together so the build starts clean.
What you can even do is you can go through and iterate and bug test. And then you can use screenshots from an existing website that you like. For example, if you like mine, you could be like, take a screenshot of it and then go paste that in Caffeine AI and say, I want it to look or have a layout, something like this. Alternatively, you can just see what it puts out and then you can tell it what to adjust. When you have a static one page website like this, where there's no login, this is pretty easy. And then all you have to do is take screenshots and tell it where to change things.
That's pretty straightforward. I published this on the marketplace. So the easiest thing you can do, if you want to get a headstart on an app, you can see I have a profile here. And if you just jump on the app marketplace, you'll be able to just jump into apps that other people have already used. And then you'll be able to drastically speed up your workflow. So if you click on explore all, you'll be able to see all the marketplace apps.
Picking the Right Plan
Now let's look at the pricing to get an idea of what you need beforehand to really use this. The starter plan with 40 credits a month is only going, it really, you need the $29 a month plan. This, you really want a custom domain. A custom domain is one of the biggest things that makes your website look legit. You could build that, at least the, the you'd have enough credits for it, but you, it just looks like crap if you don't have a custom domain. So make sure you at least get the $29 a month plan. This should give you plenty of credits here to get everything you want built.
And then you integrate a custom domain, which I'll show you how to do later. You can even email your users and the app insights are really nice. The app insights means you can see how many people are using your app right now. The affiliate program, I'm wait listed for that. It's not active. I definitely have a link. And I just figured I'd try it on a $29 a month monthly first to see how it works. So when you, you pick out the right pricing for it, then you'll, you will have enough credits to build what you want because you can roll through the credits. And that, went fast.
And that's because I redid the entire website, like three different times to focus on previously. I had like coaching that I made like private and public, videos. So now I just simplified it to this, but I've redone the entire homepage, like the text massively on here several times. And it's only cost 50 credits. So if you just have a simple website, the $29 a month plan will work great for you.
Checking Page Speed and Debugging
When you want to get in there and start building your app insights, start debugging your website and testing it. There's a lot of different things you're going to run into. So what you can do is go into Google page speed. You go into Google page speed, and then you send it screenshots. Like I did of Google page speed. I'd go in and just taking screenshots is one of the best ways to interact with caffeine AI. Like it, it didn't, I didn't like how it laid this out. So I, I took screenshots of it and pasted it. And that, that helps it figure out exactly which changes it needs to make and what part of the website to make on earlier versions of this website.
It loaded slow. And you can see when I redo the website, I do one gigantic prompt all at once. So earlier today, I redid my entire website. I did the same workflow. I told you, I dictated all of it rambling, like 15 minute dictation into chat GPT. And then I had chat GPT put up. I did the same workflow. I did the entire thing here. And then I dropped all of that at once into caffeine AI. So in one single prompt, you have everything you want right here. So the more detailed you can get it, the better. Then when some of the page speed was slow, what I did is I would take screenshots from Google page speed, and I would paste it in here.
For example, you can see right here, I took several screenshots where I said, look, the pages loading slow, fix some of this stuff. Now it wasn't able to fix all of it. But it was able to get the page speed score much higher by making some optimizations. So if you always want to check the page speed, because sometimes it'll code stuff sloppy and slow. And if you go in and check the page speed, and then tell it, look, fix these page speed things, it'll do what it can. And some things it still is stuck, like the cache is four hours, but then it will make other modifications where it can to speed it up.
And I've actually got it running at like 89, or so mobile page speed, which is great, it'll do things like optimize your images, the technical capabilities, this are amazing. Now, sometimes it'll give you silly things like it'll tell you to hard refresh or open an incognito window, and it just is not doing it correctly. So you're just going to have to make it edit it. And again, other times, it will if the canister runs out of cycles, the back end will break. So sometimes if you publish a new version of your website live, you just have to wait for it a few minutes, give it a few minutes, because sometimes it just won't work quite right.
If you have more advanced features.
Publishing and Managing Versions
Now, let me show you how to publish your website live and look at the different versions of it in here. So what you'll get every time you publish live, it'll tell you that you've got a new version of the website. If you click up on here, you can see in the upper right, when you click your version, you can see all the different versions of your website. And what you can do, you'll see the current one. And the live one generally should be the same. But if you make updates to the code, the current one will be on top and the live one will slide down.
When you're ready to publish it, you just go into the upper right and you click on the version you want live or on the version here. You click on live and under here, it'll normally say publish new version, but it's not there right now because the live version is the same as the current version. But you click live and click publish and then they'll say live the next version is successfully published down here again, give it a little time. Sometimes it won't. The canisters take a second to upgrade. The new thing won't load correctly and you give it a few minutes and then it should work.
Now, sometimes it'll break the website and it won't load correctly. You've also got the specs and the code over here when you click on each of these and you can drop in and look at all these another thing you want to do after you get a version you're pretty happy with or at any time you can do tell it you want to do a security audit you tell it you want to do a security audit and it will look through and it will try and fix issues that could be potentially you know like if you've made an admin for example and there's some problems with it.
Possible exploit or way to go around it. It'll try and find different security issues. You can also take the code and put it in another AI platform like Claude and have it check there, and it will fix that for you. Now, you may have issues like where it rotated my face wrong in the picture, and sometimes you may have an issue where it doesn't get it right several times, and you just have to tell it over and over again. Try not to get frustrated. It's like, okay, it's still turned. Fix it, and this is why screenshots are so good. You can see here, it supposedly fixed it, and then it didn't, so then I pictured it.
I go deeper into pairing the Internet Computer with Claude in ICP and Claude Code Is the Best Web Hosting Setup Online.
I said it still shows up like this, and then it rotated upside down, so I gave it the correct picture again, and then it came out correctly after that, so you just need to be persistent. These AI agents are pretty smart and will consistently get it right lots of times if you can give it the right information. You can see I made tons of changes to the different versions here. I fixed all the different errors I had. Now, you can make an admin dashboard. I had it make an admin dashboard, but I actually don't recommend that because you can just, unless you have some admin that you want working on it for you, if you're just doing it yourself, don't bother with an admin dashboard because if you use internet identity sign in or something like that, it'll slow your whole website down, and you're probably just going to make changes with the Caffeine AI anyway, so there's no reason to have an admin dashboard.
Word where you can sign in on, so keep your website as simple as possible. Don't overcomplicate it with other stuff, so I'll show you here. Look at this original prompt. This is the original prompt I did right here on April 7th. I said I want to build a landing page for myself as a YouTuber, and you can see this one, I actually didn't even put through chat GPT first. I learned after this one that I should make a better, that I should put it through chat GPT and get a very clear prompt, so this one was pretty sloppy, and because I was sloppy, I was going to put it in a little bit slower.
I didn't even know what I was doing. I was just going to put it in a little bit slower, and then I had to fix it, and the first thing I checked, the very first thing I checked was the Google page speed on it because one of the most annoying things is if your website loads slow, and I didn't even learn to put screenshots in, so I just copied and pasted it in here. It fixed several things here, and then it was amazing, though, how good it did even with that sloppy prompt. Now, let's get into some more advanced stuff over on Jerry Banfield Rewards, like mapping a custom domain.
That was confusing until I figured that out, so this shows you a different version than you're going to see on the live version. This had a bug where it wasn't adding up the total deposits right, and that took a lot of back and forth to figure that out. It also was using a CKUSDC test canister instead of the actual canister for sending transactions, so it took like 10 prompts to get it to remove, to figure out that it was using the test network instead of the real network, and get all that figured out. So the basic workflow I did for all that is I just tested one thing at a time, and every time I found something broken, I then worked on fixing that specific issue, which ended up taking several days, close to a week, of going through every different part of this platform.
For example, I started on the profile, like let me sign in and make a profile, and then that would break or have something not work, so it fixed that, and then I'd go over to the wallet, like 18 different things. There are 18, 20 different prompts to get the wallet to work and swap correctly. So I finally figured out, after trying a whole bunch of times to get it to generate a unique CKUSDC deposit address without a memo, that it wasn't going to do it. So I just said, fine, just generate, I tried, just generate a ICP deposit address. That worked. And then I had it do the swap straight from ICP swap, and it actually built that out correctly, and it put buttons in to refresh the balance.
And then the fund withdrawals, I had to bug test that a whole bunch of times. But just play around and test everything you think you should be able to do and try and find all the bugs for it, and then give it exact screenshots, tell it exactly what's not working. Like on the performance, here's one where I sent a performance at a 42, and then it bumped it up a little bit. And then I had it do the swap straight from ICP swap, and it actually built it from there, which is good. You just keep at it. This just takes persistence and patience. Sometimes if you give it a lot of information, it'll take five or 10 minutes.
Here's an example of where I did a security audit. It found these high severity and medium severity things and went and fixed all those. So always intermittently do security audits to make sure that something unexpected isn't messed up. You can see, you can even do this on your phone and check it on your phone and watch and do the prompt there. So with this, it's just going to be, in most cases, a matter of persistence. Now, the challenge is trying to figure out, am I building something that's too complicated for it to get right? And what I can see, if somebody else has built something that's working, that probably means you can too.
So if you'll go look around on the app marketplace and see what other people have already built and just remix that, that will greatly speed up the, here, if we look at the market and you look at, here, somebody's already got a micro app, thousands of people have remixed it. Family organizer, flashcards, little games, word search, et cetera. So if there's even a dating app. So some of these people have already built, it'll be much easier usually to jump into somebody else's and change it instead of starting your own from scratch. The only thing is if you have a very clear vision, you probably do want to start from scratch so that you can make the app and have it fully work how you think it should work.
There's, family journals, packing lists, markdown, study timer. Like there's, there's a decent collection. There's a lot of collection. And I imagine there's going to be a lot more of these, like a private messenger, et cetera. So start on a marketplace first, or if you're willing to do the work, go through. So this is a lot of mental visualization, like picture, what should it do? How will each single detail of that work? And then if something's broken, why might that be broken? I would like in here, I deposited to ICP and if you can help it, help it by giving as many details as possible, exactly what happened.
Like I deposited to ICP, tried to withdraw, got an error, undefined error, and then, just play around with it and test it. Then it finds several fixes here, fixes all that. And then I try and withdraw the CKUSDC, that fails. I reduced the balance, same error. You see how many times you may have to go back and forth with it to get it all ready. And if you can have it output, specific error messages, if you're not seeing why something's wrong, tell it to, hey, add an error output. And if something doesn't work, flash it up on the screen. Like sometimes your profile will just hang and load. If you get stuck on a build like this and want a second set of eyes, you can book a private one-on-one call with me and we'll screen-share straight through whatever is breaking.
And the more you can get specific error messages out there, the easier it can be to diagnose. And once I got it to do that, then I could see, oh, it says, it says insufficient balance. Then you can give it better information. I'll go through and fix it. You also can use the dashboard on internet computer to look at my exact canister. So for example, here, I looked at my exact canister and you can go through and see all the different functions that are on here, the different code in the interface and look at it yourself. I try, I didn't spend a whole lot of time doing that.
I spent most of my time in the interface here.
Custom Domains and Analytics
Now, once you've got the app actually working, now you're in a position to publish it live and put it on a custom URL and look at the analytics. So I love the analytics on here. For example, if you look at my Jerry Banfield calls website, you can see there's 250 unique visitors. And you can see the page views. You can see the country. Now there's not a lot of stats in here compared to Google analytics, but what's nice is you don't have to install anything like Google analytics to see all these stats. Now, in order to get your app on a custom domain, what you'll do is go in the upper right and click on domains.
Then you'll see where you have attachments. I actually haven't used that yet. And by default, you'll have this caffeine domain, what you want to do. And you have to do WW domains. So what you can do on the domains up here, if you click domains first, you need to buy the domain or you can buy it within DFINITY in the app here. They have it once it's configured, it will look like this, but before it's configured, you'll, it'll have a field up here where you can buy a domain or bring your own domain. I clicked on, bring your own domain. Then I put them in there.
Then you'll need the DNS configuration. You'll need to go. I have mine in Cloudflare and in Cloudflare, you just put the CNAME, the text and the CNAME here, but then you also need to do a permanent redirect rule for the top level domain. So it sends all the traffic over to the WW dot domain. That was pretty straightforward to set up the permanent redirect. Actually that, that took a little, messing around with the AI. I, I'm good. I'm Gemini to see how to redirect the 301, but that's all you need to do is to get the, the domain like this connected and then redirect the top level domain.
And then that's there. And it's, I think it's essential. Get a real domain. Don't use like something like dot caffeine dot X, Y, Z, or something that, that just looks ghetto. So don't, don't be ghetto with your app in your settings.
How Credits Work
Now we'll talk about credits. So in your credit usage, you get five, five free credits on the plan I'm at. Plus I got like a hundred subscription credits or something. And then like top up credits also, and you can top up right now, it's a hundred credits for $25. And that scales evenly up to a thousand. You can then see your balance on all the different things you've used over here. For example, you can see I'm having a canister top up right here. And then I had a canister top up a few days ago, and then there's a canister top up, but these are, are small.
Amounts of credits. So I'm not, but I imagine if I had a lot more web traffic or a lot more users, I might start draining more cancer credits. And I imagine the more intensive you make your application, the more you can end up getting a lot of canister top ups. These are where you're essentially paying your web hosting bill. But if you consider that you can get, if you look at the credits to top up a hundred credits is $25. So that means one credit is 25 cents. And therefore two, that's two canister minus for top up is essentially like 50 cents. And if you, if you calculate all that I've had with, the hundreds of people I've had come through the website and all the different builds and all that I've looked at it myself, you have a total of two.
So that's like 50 cents, a dollar, 50 and $2. And this one now I was using it a bunch, right around here. So then you got like a dollar 50 that day. So you can see all total. I've maybe, essentially drained like $5 or so worth of canister top up credits. And these, I got all these on demand credits, but you'll notice before I actually started building the apps that much and you get charged per prompt on here. So the more prompts you do, that's why it's better also to fire off as much as you can in a single prompt. It'll conserve your credits. And you'll notice I didn't even get charged a canister top up.
I got one canister top up in my first week using this. So I've only spent out of my credits that I get each month, a pretty small portion on topping the canister up based on my application. And you get the daily free credits, which is nice. So I like to kind of check in, every day or two, if there's anything I need to edit and you can always top up if you need to.
Publishing to the App Marketplace
Finally, you can publish to the app marketplace, which is really nice. If you want to promote yourself or publish something you've done, you can just go to your profile. On the app marketplace, then you got this profile button. Then you make your profile public. You put your app on here and you click publish app. You just put a thumbnail on it and a basic description and some tags, and then you publish your app to the app marketplace. And then it'll be there. And other people, you can see I've got four likes and four remixes on my app already. And using your app on a marketplace can be a good place to get people to discover you or, maybe want to work with you.
Or pay you to help them build out an app that you already started. So this is the majority of what I think you need to know with Caffeine AI. I'm really impressed with what Caffeine AI has been able to build. I love having my website. It's the best website I've ever had before. It looks so much better than anything I've ever had myself. Now note on my website, I actually use a third party software to do my booking, which costs more than Caffeine AI at $39 a month. Maybe I'll integrate the two of them. But the third party one's already hooked up with my Google Calendar.
And building that functionality out with Caffeine, it could add potentially significant difficulty versus the way I've already got it set up. But maybe one day I'll be able to drop that or I'll explore trying to lock it in with my Google Calendar. If you sign in, in theory, if I sign in with Google, maybe it'd be easier to work and have all that connected. For me, signing in Caffeine AI, I use Internet Identity. But if you use the Internet Identity login, it can significantly slow down the speed of loading the entire website because of that. If you have any questions, just drop something in the comments.
We can talk about your app on Caffeine AI, which would be a perfect place if you had an app you wanted to show off to people. And show what you've done. I'm sure people would love to see it. It'd be a great way for you to support the channel and a great way to get people discovering you and using your app.