How to Vibe Code a Mini App on Celo I Sophia Dew

Hey everyone, I'm Sophia and today I'm going to be showing you how you can vibe code a vinyl mini app. I'll specifically be talking about the three ways that you can start doing something on chain from the most simplest interactions on chain to a bit more complexity all the way to writing your own smart contract. So follow along and after this tutorial you'll know exactly how you can v code um slashmedium code a little bit of functionality your own viral mini app. All right if you want to follow along with everything I'm doing go to cello.org which this is our GitHub uh repository and everything there and then you can check and find a bunch of different repositories.

But what I what will be helpful for you is the discussions. In this discussion, I have an AI category and you can find this whole tutorial under tutorial vibe code, a viral mini app. So, I'll show you um and we'll get into it. Uh a little bit before I get started, I want to talk about why mini apps. So, Cello is the home of real world mini apps.

These are small web apps that run inside of a wallet. They're very easy to build, fun to share with friends, and it's great because it meets users where they already are. So, you get instant distribution from day one. And on Cello, mini apps can run both in Farcaster, which is a social network, and Mini Pay, which is a wallet, a stable coin wallet built into Opera, the browser, Opera Mini, the browser, that millions of people across Africa and beyond use every day. So, this is another great way to get distribution on your mini apps.

So, anyone um Forecasters permissionless, anyone can launch on there. All you have to do is uh create an app and launch. And then Mini Pay is a permission ecosystem, meaning interact with someone from the Cello team to try to get your app listed, but it's a great it's another great place to get your apps and get more attention on apps. A little bit why solo, we have a lot of real world reach. So you can bring your app to over 11 million active users on Mini Pay through a native integration using Opera Mini.

We have cheap and fast gas. You can transactions cost less than a cent. It's probably one of the cheapest L2s when it comes to transaction fees. They settle in less than a second. And you can also pay in stable coins like CUSD, not just native gas.

And it's a super easy upgrade path. When you build a Farcaster mini app, like I'll show you today, you can run that same app within mini pay with minimal code changes. That means you can have one app that serves two growing ecosystems. And then finally, we have a ton of builder support. So you can earn grants, rewards, and funding at every stage, no matter where you're at.

We have proof of ship, which is if you're good for early stage builders, show that you're building something every single month. You'll get rewarded. Proof of impact, you get automatic rewards based off how much gas and user activity you have on your app. Mini app Mondays, we're here to drive an incentive campaign and bring more attention to your app. Presenting growth grants where you can get five to $50,000 in um in grants uh with a little bit of traction and seller builders fund.

These are actual actual venture support for breakout apps. If you want to see the whole list, go check out cellog.eco/programs where you can see all of our active programs that are currently live. Um, when I'm filming this, it's currently November 2025. So, these are the current programs that we have right now, but they will change for each season.

So, go check them out and see how you can get involved. All right, let's go ahead and jump into the actual tutorial. So the first thing that we're going to talk about is building a Farcaster mini app. I want to just show you a high level of everything that I'm going to go through so you get what's going to happen. Step one, I'll be set up in setting up the environment.

I'll show you how to do that. And then I'll be creating the app template, creating the front end, and then finally um we'll be adding onchain functionality. So I'm going to show you three options that you have to doing something onchain. Option one, you can just add a simple onchain interaction by using something like Wagme to do the use connect, send transaction, use balance, different hooks like that that are already in there. This is great if you're trying to do some basic payments, token transfers, wallet connections, anything that just you want to interact with blockchain data.

Um, super super easy, one of the easiest ways to interact. Option two is to do an existing smart contract. This is great for if you need uh if you want to do things with um uh pre-built pre-built audited contract templates. So you can maybe you want to do an NFT, you want to create some token, do some DeFi patterns, things like that and work with already battle tested audited code. So these are I'll show you exactly how you can do that as well.

And then option three is you can write your own smart contract. So, this is great if you have business logic, complex interactions, or you just want full control and you want to write your own smart contracts. Um, I also show you how to do that. I to be totally honest, I wouldn't recommend vibe coding your own smart contracts unless you get them audited. But if you are just trying to make some MVP and you want to test out some ideas, uh, you definitely can.

I would not put a vibe coded smart contract into production, but it's definitely a good way to just uh, play around and test it out. All right, let's go ahead and jump into the tutorial. So, I already installed cursor and I already installed Cello MCP. Um, the Cello MCP is definitely optional, but I'll show you what this is. This is our um composer kit MCP server.

So, an MCP is a model context protocol. So it provides your AI vod your when you're vi coding it has all of this context about cello that it can actually use to interact on chain and then I'll be using cloud 4 or sonnet 4.5 for all my prompts. Um okay so the first thing I want to do is in I'm going to open up my terminal and I'm going to paste the following command. So, I just opened up cursor and now I'm going to go in my terminal and I'm going to paste this command.

And actually, let me before I do that, I'm going to go into my file just things organized. Um, this is create. I'm going to name it cello uh tutorial v2. This is my second time doing this. So, but you can name it whatever you want.

It comes automatically with forecaster mini app. And then this is just for you uh a new mini app on solo. And then you have all these templates that you can pick from. So this is we're creating using solo composer. This is like a lightweight um uh app that comes with everything that you'll need.

This makes it super easy to build on top of. So you can use a basic template, Farcaster mini app, a mini a mini pay mini app or an AI agent. For this one, we're going to do a Farcaster mini app. Hard hat install dependencies cello tutorial this one's good built on cell for this follow all of that and I'll show you automatically what gets created. So I'm going to give it a second to load.

All right. So, I'm going to just open up my So, I just opened up my project and and I'm going to go ahead and run. And if you don't know how to run and you're completely new, everything's in the read me and it'll tell you also step by step what to do. Now, I'm going to open up my local host here and I will show you what the app currently looks like. So, here is the first version of your app when you don't do anything.

Uh you have this connect wallet, you have this welcome, you're signed in, and then you can add this mini app. It's as a Farcaster mini app, but it's automatically connected, which is really nice um to your stuff. And then you can also, if you want to test it out, you can open up in Fargo as well. And it's all mobile responsive, meaning it looks good on mobile. So you can test that here by clicking here, see what it would look like on mobile.

Click all um mobile responsive. All right, let's go back to my app. I am going to say something like ask it say I just say to update the front end so the user can input a wallet address then have a button so the user can paste uh one CSD on Cello. I am going to specifically use WagMe to do a very simple onchain interaction and then I'm going to tell it if it's not 100% sure about something to ask me before proceeding. All right, let's go.

see what happens. Okay, it's asking me a few questions. I'm going to say use mainet. Um, and then update the UI to remove the show the transaction status and have a link link to the explorer complete. Um, also for your app, please add more prompts to make it very clear what you're trying to do.

I am just doing this really quickly as an example to show you how it can work. So now it's going to update the UI in the page. And for uh if you're new, this is a monor repo. So I have my contracts in this directory and then all the front end in this directory. And then here I have my actual app and all of the page code.

So before I approve everything, I'm just going to go through and look and make sure it all looks good. So let's see this. So it's using um all of these use account, use connect, everything from Wagme itself, which is a React library to interact with the Ethereum blockchain, which is great. I have this CUSD token address. Let me go add that into um Cello scan and just make sure that this address is actually CUSD.

Yes, it is. It's the official token tracker and there so you know that's correct. Um it comes with this ERC20 AI for transfer function. So all of that and then got my stripient address all of these use hooks transaction receipt. Very cool.

So, as you can see, it's they're all just React hooks. Um, and then a little bit of front end interacting with these React hooks, but really the onchain interactions are super simple. This is they're essentially just existing hooks that you can pull from and use. And so, this is great if you're trying to do uh a mini app with just simple onchain interactions and you don't need anything too complex. This is exactly how you can do it.

All right, let's test it out. Looks like it's good. Civil payment flow transaction approved UI. Awesome. All right, let's test it.

See what it looks like. Okay. Pivia address. Let me use a wallet address. I'm going to paste in this wallet address and send 1 CUSD and ask me to confirm.

Tada. And then it's sent. Let's see what it looks like. I can actually see my transaction history. and then from and then to and that all looks good.

Yay. Cool. So, I interacted with the token and then this sent to the actual address I was trying to send to and then um it sent a dollar. Awesome. And you can just double check that that worked by seeing.

And then you go here and you can see I just got a dollar in into this wallet address. Now I have four USD in this wallet that I just All right. Super simple, easy to do. Now let's go back to our tutorial. Next step is interacting with an existing smart contract.

So, one of the ways that we're going to do that today is we're going to open up Third Web Explorer. Uh, what's really cool is it comes with a bunch of popular contracts that are already here. So, we don't even have to write our own. We can just use an existing one. And today, I'm going to be showing how we can launch an ERC20.

So, I'm going to do our own token and do that. and we can create our coin. So, all you'll do is you'll literally go here and you'll fill out all of these descriptions. I already did that right now with mine. So, I'll show you what I just launched.

All right. I'm actually going to show myself making some token. I'm going to call it tips. Call it tip. Tip.

And then tip tips for a tipping app just now total supply going to keep it like this and then I'm going to launch it and then it's creating my contract good all happening on Zello going to confirm my claim conditions and then I can actually view my coin. Let's go check it out. Yay. And then it even comes with this view token page. So, I can click on that token page and someone can actually buy um some of this token supply, which is kind of cool.

So, I'm going to my own wallet is going to buy some of the supply and I'll show you. And then you can even actually see the transactions that just happened on cello.block scout. And you can actually see the um what just happened the transaction details token minting from tips token which is pretty cool. And it's all here.

And then if we refresh that contract we can see we had one we now have one tip in circulating supply. So I just launched my own token. super super easy. But now let's actually get that token into um into my code. Okay, so if you want to manually code this, here are all the code and snippets that you can do.

But one quick way to v code this is you're just going to get the contract address. So it's right here, actually right here. you copy that in and you're going to tell Claude or your uh VIP code IDE that you have this address and the specific functionality you want to do. So I'll show you exactly what I'm going to prompt it. So I just created an ERC20 token on Cello.

I want um you to replace the UI. So instead of the user adding a wallet and sending one to USD, the user can buy one um token token. Please implement and the third SDK and to track with this uh contract. Um if you are not sure about anything please ask before proceeding. Is there my client?

Okay. So I just noticed that and web it says you have to have a client ID. Um we'll ask if I need to do that here, but that's just what I prompted so far. And it's gonna ask me some questions. And I'm gonna clarify that really fast with Claude.

No, the user. Um. Oh. Oh my good. It is a free claim mechanism where they just receive one token.

Okay, so they do need me a client ID. I added my client ID. Oops. So, they do need my client ID. Um, I added my client ID to my ENV variables.

Right now I'm just showing the template, but essentially I put third web client ID here. Um I'm going to say I added my client ID to my name plan ID and then use standard functions. contract and then keep alongside web. Cool. Yeah.

Sometimes the farcaster wall and the third wallet don't exactly connect. So, you'll just want to be careful about that. And then let's see what it comes up with. Okay, it's making quite a lot of code changes. I want to go through exactly what is being changed from before.

So before we just had these few um like React component libraries that came from WagMe that were instead going to swap out for some of these third web uh components like create third web client, get contract, prepare contract call, all of these stuff as well. Instead of doing the CUSD contract, we don't need that anymore. We're actually going to do our custom token address and then it's going to use the third web client to create a third web client. Um, and all of the following here. And so, as you can see, you can review it all.

And if you're completely new, I would also recommend to look at the actual docs of third web and just make sure you have a rough idea of what's going on since that it's not fully hallucinating. Um, but this gives you a good overview of everything. All right, let's see what the app looks like and does. So, I have this app now. We're going to claim your token.

So, it says send clip to. Okay. And then, um, we'll go ahead and see what the latest looks like. So, we're going to send here one token. Confirm that happened and waiting to confirm the transaction.

Okay. And so I'm going to try my claiming my free token. Okay. Got to fix it. some bugs.

So, let me go ahead and clean that out. Confirm and Okay. And the last step, we're just going to write a custom smart contract. And so, we're going to write like a super simple ERC20 and do the same thing instead. All right.

So, deploy it on silet. First, we're going to write our smart contract. I'm going to probably vibe code that and just do it make it really simple and inherit everything from open zeppelin. Um, and then I'm going to configure my deployment scripts and make sure I have some cello. So, first I want to go to our faucet and just make sure and then make sure that we have some in my wallet.

Hello. And then I should have some here. Done. Um, and then I'm going to update my ENV variables to have all of my private keys of my actual wallet so that I can deploy it and it can connect and I can um, run my deployment script. So, I'm going to go do that right now.

Okay. So, as you can see, inside my contracts, I have an env variable template, and I'm going to rename that ENV um place all that. And then I'm going to replace my private keys and everything with my actual skin API key and all of that with my current one, but I'm not going to show you that. Okay. So, I just wrote this tip token contract and just clear your 20 using a lot of the open Zeppelin standards.

And then if you want to just deploy yourself, all the instructions are in the readme. So you'll do install, compile, test, and then deploy it onto here um after you fill out your ENV variable. But you can also just webcode it and tell them to deploy it for you. And it will use hard hat to actual deploy onto code onto Cello and confirm it. Okay, this contract deployed successfully and we can see it.

here on a silos scan. So, let's go ahead and click it up for newi in Argentina right now. So, if you know what that is. Yep. So, you can actually see your tip token contract that I just deployed.

It's not verified yet, but you can um I'm not signed in, but you can add sign in and actually connect to your API key to verify it automatically or just go through all of the verification steps to go ahead and verify and publish your contract source code. Uh but there you have it. That's the three steps that you can do to actually do an onchain interaction from easy, medium to difficult. So excited to see what you end up building and what you create and um yeah, excited to see your projects.