GMFC Bonus episode: Prof vibe codes a mini app with @linda

no that's not true at all i i only started vibe coding like two weeks ago for many apps so anyone can do it i'm not an engineer so we're gonna walk you through it today

oh sorry i'll i'll clarify yeah

nice

in terms of getting start with github so okay github itself if you just create an account you are going to create a project repository so this is just where all the like you know files are gonna be synced and you're gonna be able to have like a place where others can even contribute to your project you want so yeah create a repository create a repository yep and then just call it whatever you want to call it

then public or private so basically do you want this code like available for anyone to see or private i for for my purposes of vibe coding i put private because i was like i don't know what i'm i

yes yes you can change

yeah and

yeah you you're good you can just create a a

yeah so what you're gonna do is now you wanna have all this these like folders of where your code lives like synced so it's gonna have you sync that with your computer so it's going to create folders and this is where all the files live so there's a few ways to do it i'm going to try the easier way and see what we can do here so we will come back to this page if it doesn't work we'll have to do terminal but let's try to avoid that first so v zero is the next one i would go to so v zero is yep exactly so this is created by vercel so vercel is is like a way you can deploy different apps they built this like really nice front end where you can just chat like how you would chat gpt and you can basically build out like a really nice web app v zero is really great specifically because it builds really nice front ends so they aren't just like really ugly like little apps like they they actually like reference a lot of like if you scroll down they reference a lot of other things that have like nice designs so you can see these are actually like quite nice looking and so that's why i like to start with it first versus like having to go through like something where i'm kinda building it all from scratch so yeah this is where i would literally start typing

your game

and like what you want it to be and want it to look like

and the great thing is that you can also adjust the prompt as you go so it doesn't have to be like a perfect prompt right off the bat so if it makes you know changes based of what you want like you can just be like no i wanna update this so just this is more like a template

if it works i i probably would suggest also like just for the purpose of the livestream to keep it like the simpler side

so we're just trying to go through like the process and then you can like update

yeah the more we add the more it has a potential of having like bugs and issues

yep and it's gonna walk you through like what it's doing so it's also just a really great way to like learn a little bit of the basics like i've been using that to just like understand like okay if i wanna do something like what are the processes behind it so i actually really like reading like what it's doing and saying so yeah so we'll wait for this like actually vibe coding a lot of it is just like kind of like waiting for it to do things

and anything where it's like you're giving something to a dev to be like hey i'd love to see this built out so you're going to wait for the loop in this case it's really fast but it's also like can be buggy sometimes so sometimes you go back and forth and like no it's not exactly what i wanted so yeah this is

pretty cool it just looks good on there

yeah so see anyone can do this right okay

that's awesome update we'll update from there unless there's anything like super egregious that you're like okay this is absolutely not even close otherwise

yep so from here there's a few different paths so i'm gonna just kinda lay it out for you the first one is because it's this v zero is made by vercel it actually syncs up you can it like you can see in the top right corner it'll say publish so you can actually publish directly as a mini app and deploy it

exactly it was

yeah so it will be synced up so that's really cool so if it kind of like you feel like v zero is actually doing a really good job and it was like oh actually it's like 90% there i would just stick in v zero for now and then publish directly through vercel the other path is okay it builds a really great front end but the back end's like super wonky and i'm going to need to spend more time building that out so then you actually so if you hit code in the tab at the at the top

yeah so this is where there's like all this code right so you basically can download that code and and it will give you like a a way to run this in terminal and you can pass that on to the other ai tools that are a bit more sophisticated with back end i would say and so the tools that people use so cursor is one of them the one i had you get set up and then the next level i would say like if you want really sophisticated like ai tools for like the developer side is is cloud code so i actually use cloud code now i find cloud code and and a lot of people have told me it it just hallucinates less like that's usually the best

the problem is that we have to like add some extensions which will kind of take some time in this call so i'm going to mostly stick to the basics and then if you're like oh i love this and i want to keep doing really sophisticated back end stuff i'll add cloud code so basically the paths right now to me are like okay v zero to vercel pipeline or remove it into cursor and have like more advanced stuff so in this case like let's try and see just vercel and see how how that see

first question the leaderboard stuff so i was able to do that without neymar you could just feed in the context of the farcaster docs the reason why that works with leaderboard is you have sign in with farcaster that's done through our side and all you're doing is logging like who signed in okay if you want like more advanced like oh ingest all the casts of this user like that's where you're getting into like

add so we'll add that and i would say this is where i would prefer going into cursor because cursor is way better at like reading docs in context from my experience and so we can if that's what you want in this call we can start heading to cursor and see how that goes

yeah i would so i haven't spent that much time in v zero beyond front end so i tend to just prefer going the cloud route so it for me like i really just use v zero for like pretty and like just basic okay and then everything else i'm like because i've had cursor and cloud generate front ends and i was like wow this looks like an ai built this

so

that's my experience

so yeah if we wanna make some adjustments so let's practice here so if you exit out of this like a pop up flow and go back to the original area of

yeah so is there is there a way to like condense the screen so that people can see the left side of your screen there we go

oh okay

nope i don't

so now on the left hand side this is where you're gonna be chatting directly with ai right and then on the right you can see the live updates of what it's doing so i would just start writing like okay you wanna change the color like let's practice writing a prompt now

ask to follow-up with that text

and then

okay i was like i was specify which colors

in in this case like what is a category just so i understand

got it

mhmm

yeah so that was like crazy quick right like now now let's just try to get this deployed so if you hit publish on the top right and you can always update later so once it's like published you can always change it

yes yeah deploy to production so this is where it's gonna create an actual link that you can send to other people

and so this is where it's now a web app there's additional work that you need to do in order to get it to become a firecaster mini app so we'll walk through that stuff but at the very least you can send this to any of your friends and they can start playing this game yeah

on the website yeah it'll be like a vercel link and you can like vercel allows you to like pay for custom domains so you can always be abstracting away the vercel part and it looks just like you built this so pretty cool yeah and then i would just from here any time you're trying to make updates because now it's already in this concept of deployed like it's live oh yeah let's hit hit hit visit site now

this is now a link that you can share with anybody awesome it's yeah so you've already built a web app you've vybe coded a web app

see i told you anyone can

it's it's just getting started so then just just teaching you how to like update this with v zero again so if you go back to v zero what's going to change a little bit now is is that because your site's already live you now have this state of okay what's live and what's currently not deployed right and this is your changes so anytime you want to have a change go live you now need to deploy it so you basically commit and deploy again every time

redeploy yeah

yeah so here it's a really nice interface in v zero because they just make it really easy if you ever use something like a cursor later you can write literally like commit and deploy again or okay deploy again like it so so you do have to remember that concept of like what's live versus not

yeah then you just download yeah download the code code and then it will give you instructions on basically how to import that the other way to do it also is you can yeah well i'll let's start with that one i don't wanna complicate yeah so so now i'm

exactly so now let's take the link of your url of yep so let's go to farcaster now

oh yeah no problem

so you are going to i don't know if you have developer mode on it looks like you don't so now we're gonna go into developer mode so i

you go to settings on the bottom left

oh the other i think the the bigger okay

yeah good good so it should have been bottom left i believe at the very very bottom and then if you go there there should be a developer section and then you just need to toggle it on

yeah

yeah

so there's like two settings like i like i saw it on your

so there's like bot like the very very bottom left that you had clicked like an icon the settings icon but that was for channels you have to go like right

this is a whole another world and this is this is abstract away to like most users since they're not developing but if you go to on the left hand side it's the i don't know what they're called they're little like triangles at the bottom like this

yep and then

new area so there's three things here okay so preview tool is where we're gonna just paste in your all and you can see what it looks like in a mini app and this doesn't mean that it's published and set up as a mini app it's more just like hey i wanna see how it looks so that like i can start making adjustments

new tool

yep

yep and so this is where okay now let's let's first hit hide splash screen for now i just wanna like show you what it looks like

okay so if there's any like changes here you basically the process is you go back to v zero or whatever tool you were using and then you update you know however you want and then you can redeploy if you wanna be like more like if you have a ton of stuff you wanna work on there's this idea of a local dev environment so this is where i don't know if you've ever seen like local host or yep

that yet so this is where as you make updates it will be live without having to redeploy constantly and so okay can get you set up in a local dev environment later if you have time and that'll allow you to just like make changes out that like annoying redeploy kind of thing and so yeah this is what the mini app would look like now in order for it to show up properly we have to now start feeding in like farcaster documentation context so the the like docs themselves if you go to how do i share link

the oh yes scroll that and then hit mini apps

yes there's the so this is like the docs and like you're welcome to just like read through it and everything if you if you actually go to getting started

so you're on a oh

on or search there's a building with ai section and this is just a way that like you can yeah so this is a way that it can be like friendlier to give information to the ai to read versus being like here's the site read through everything and parse it it might not be as good so you see that number two it says use the llms full text step here yep so you click on this text file this is what context i give to ai for it to understand everything so i take that link and and i've never done this with v zero so we can see how well it does i've only used that in cursor or cloud you can say okay now i want this converted into a farcaster mini app please only use this document for reference or for contacts

yeah and i would say and i would specify only because what i've experienced in the past it will like search the web and then it finds like frames view one stuff and it's like yes

again i've never tried this in v zero so we'll we'll see how that does but it's a good example of like these tools like some are really good some are not with certain context it is like it is covered right now i don't know if you want people to

and so what it should be doing is it should be setting up all the various like how to publish and like creating like files so we'll see how good it is i i actually don't know for sure and so once it's done you're basically gonna now like deploy it again because you wanna redeploy and like publish all these changes and then once that is deployed and i'll show you how to check that it's deployed on vercel you can then paste that link back in and and see how how good of a job it did okay and so and am

did you say convert into a farcaster mini app

oh and then i would ask it to okay convert this into a mini app i so i i don't know if it's i could take the next step i didn't see the text it was given

you can actually simultaneously like like like it can be like building stuff and you can start

yeah but i i i can't see what you're just typing

i don't

convert this into

yeah into a farcaster mini app

and then just specify only use you you did you specify only use

i hope so too but yeah in the future like just specify because otherwise it hallucinates sometimes

well if we just go back to versa i'm just gonna teach you a few other things

so yes okay so if you refresh

just wanna make sure that i'm on the latest okay so this is farfetch as your mini app clone is that your what you had set up

okay so if you go to the deployments tab at at the top yep so this will be the status of different things you're building and so you actually can keep track of when it's deploying and and going i am wondering though if this is the same thing okay yeah it's it's eleven minutes ago okay so it should i was like where did this name come from i was like

okay

so this is where you can check like when was the last time something was deployed this will just make it easier to like track different versions so if you go back to v zero it should hopefully be set up

yeah this one that's why i was like i'm not sure how good v zero is

so we'll take a look the other

about it okay the other piece that we might i just wanna like teach you so like i've i i probably my my my gut feeling is that v zero is not really great at this spark castor mini app stuff so what you will have to do is take the code over to cursor

i'll just show you how to do it so that if you run the issue you'll see so if you can open up cursor this is just yeah the lay of the land so do you have it downloaded as a like on desktop by chance

just download it in the meantime yeah

i would just go back to like page

let me mhmm those are my i

okay so this is and i'm just gonna kinda like describe the process so on it's gonna be like a different interface on the right hand side is where you're gonna be chatting and talking to the new cursor on the bottom is terminal so this is where you're like running commands and and then on the like top left is where you're gonna see all your files so this is where it's like okay like you can see all the code and it's like start making edits directly and things like that so that it's you're more kind of now in like a let's say like a developer environment versus like v zeros like a little bit more abstracted away so just don't be like intimidated if you see cursor and so yeah once you get that set up we're gonna try to import the code base and then i mentioned the idea of like local host so we're actually gonna get set up with local host through cursor and that'll allow you to just open up like local host 3,000 or whatever and then see your changes live from there without redeploying every time and then i'm gonna now just explain what ngrok is just so you understand

so i would skip oh okay this is oh whoops boarding

software architect

yeah

so here is where if you scroll down it's gonna just teach you how to use it okay it's very very straight

this is an installation but it's really quick you can see there's like very little instructions so the point of ngrok is when you have your local host and you can see your local dev environment and all the changes you're making as you're doing it in order for that to be seen in farcaster as a mini app you can't actually paste local host 3,000 into your preview tool because it's not going to know how to connect those two so ngrok is a tool that actually will make that connection so you basically run that and say like hey like ngrok make local host 3,000 as its standalone url that i can now paste in and have it see all the local dev environment and so that is just what the tool is for because otherwise you can't see that and it's mostly like you can actually technically like not have to do this if you're just deploying everything live constantly and then just checking from there but this just makes it like easier so that you can like test stuff without deploying you're like oh i wanna like make this change does it look nice or not without having it live

yeah this so this is what can you go down and see the chat of where it's getting stuck because i can read it

okay but so

it's weird because it shouldn't have a loading like it should just look like a web app and the only yeah version of it

you can try i don't know if that'll solve the issue but you can try i'm less familiar with v zero

yeah so my thought is so why don't we do this why don't we say undo like literally type to v two to like undo the okay marsh caster mini app conversion okay then we can like fix the code so yeah so so i think like yeah it still stands like v zero is just good for front end and then like okay

better for back end stuff

yeah it's taking me back to that version because like i don't know what it added and like all these other things and so now if you can figure out how to screen share cursor that'd be great mhmm

let's try this so this should be the easiest one and we'll see if it works if you hit clone repo

nothing oh it says new update available i'm wondering if

so it doesn't look like it's popping up clone repo because normally if you hit clone repo it'll pop up with like here enter this website in so i'm wondering if it's a version issue

okay so let's go to the like more complicated route and try

let's go back to github and you remember when i was like okay like let's see if we can do the easy route or the hard route this this is exactly what i was talking about and when i say hard it's really not hard it's just more you're interacting with terminal okay and i'm gonna go hold on interacting with terminal okay

okay

okay

so if you scroll down it'll say create a new repository in the command line so this is where you can actually set up all the folders within your within your computer so that anytime cursor you're asking cursor update it's automatically like syncing all your files

so this is this is the more complicated one i would say so if you go to a terminal like search a search for a terminal on your computer i'm also like not as familiar with windows so

so this is like for your actual computer

you're gonna type so you see like how there's like all these like commands so you're you're gonna basically go one by one and enter this in terminal

and all this is doing is it's creating these files on your computer

you can't copy paste the whole thing because it needs to

so if you don't go to your just general computer and you search in just search for terminal okay that is where you're going to bring up and again i i don't know i haven't used windows in so long

because on a mac you can just do like a global server

yeah try typing

yeah

and i am doing that okay interesting

i will i don't know how to do

but you see a terminal app then

mikado i might i may need your hop on windows because i i have not seen windows in a a bit

this is where like chappy gbt is really helpful so i can take a look but otherwise i don't wanna get stuck on this point because it's more just like a windows mac thing and we can always help you just have to download terminal from windows apps oh seriously that's wild that's a wild concept we're gonna ignore that then because we're gonna now yeah

i don't know windows

it sounds like you have to download something so i would just i'm gonna just show you back let's go back to the firecaster tool kit and i'm gonna explain what these things are because once you once you move this all to an ai tool that is like more powerful with back end you just really need to just understand concepts so okay so if you scroll back up to the farcaster dev tool

yeah okay so i'm just explaining what these are so the preview tool i already showed you there's one thing that you need to do for it to you you remember when you pasted the url and there was like a screen that popped up it was like oh you need to still do this if you give the ai tool context like in all the llms text that i showed you that is part of the docs and it should be building that for you without you even having to specify okay because that's part of the instructions and so hopefully it will just run you through it

yes yeah and that's what happened with me i was actually able to it it did the sdk like call ready stuff which is removing that little pop up screen so it should do that but if not we can help you now i'm gonna explain what embed tool and manifest are so this is actually where i'd say people maybe get stuck a bit more and so we actually improved quite a lot of stuff so manifest is how you publish the mini app so this is how it shows up when you like do a search for a mini app this is where it shows up on the leaderboard you see there are different mini apps this is how we know that these are different mini apps this is how base knows there's different mini apps right and so this is something you need to do for every mini app in order to publish it so if you actually click on it what

yeah so if you take the link of your web app let me try that yep there we go i'm i'm more gonna walk you through because you don't have the files because we

yeah and it will like seriously like cursors like in cloud code are good so this is sono i am giving feedback multiple times so remove the https

yeah there you go okay and so fetch yep so okay this is where it's saying like okay here's all your manifest data and this is where you're like what category am i like all of this information okay so there's two routes to do this so one route is it's called hosted manifest and that's where you see create hosted manifest the like the little button

okay yeah so this is new this is as of like a few weeks ago this is trying to abstract the process away a little bit easier and so you might be able to just go through this process and this is where if you click on it it will show you what are required fields that you have to fill out so this will be like what's your app name what's the you know description what's the the

and then any like you know required information i left a lot blank that isn't required so i was kinda just like i just wanna get this out so this is where you would just fill out the different fields

and there are some things that aren't required by firecast or be required by base and so we actually made the requirements stricter of like okay for example category we're requiring even though firecacher it can show up without a category but it doesn't show up in base in that one so that's why it's like required so that's the reason for this you only ever have to do this once okay and so i would go the hosted route because the whole purpose was to make this easier and you didn't have to like have this all in like a text file that is in okay code so i would try this the second route is so if you go back the second route is you know you're doing it yourself and it's not hosted by us and so that is where you would have like the docs that you feed into the agent and it's going to start generating stuff for you it'll ask you questions like okay what category do you want sometimes it guesses but you can even be like let's walk through all these categories okay i would try your best to just skip that and go to host you out the whole reason we added that was to just make it easier

and then after the after you do that process then and it looks good it you would hit generate account association that's where you're like signing so you're like this is my account i'm signing all this data and then you'll just need to it'll give you instructions but you'll basically need to add that file of what you signed back into the code and it's very easy you would just tell cursor and be like hey i just signed this or here's my account association just add this and then you deploy it so that will like create the whole process of like okay this is a published mini app and again it it sounds like a lot but like cursor will handle so much of this this for you okay

i'm using a cloud code extension within cursor so cursor is actually more of like the dev environment like i mentioned you're chatting with on the right there's terminal at the bottom and then you have your code file so it's more of like like a tooling right whereas in chatgpt like i only just have the chat interface right

yeah so so this is just like better tooling and then you can actually adjust the models within cursor of what you want used and so this actually has like like a ton of different models it's not even like just openai it's not even

okay so you can adjust that where i find and have had a lot of people tell me like cloud code is is pretty much the best in the game right now when it comes to coding and so i have an extension that i added so it's basically like like i pay for cursor like i i pay for a plan and then it's it's like $20 a month or something for the one i'm using and then i just like tack it on it's kinda like a browser extension where i'm like oh like just add this on so that's actually what i use as you can see v zero got stuck right so it's just more powerful where it just gets you less stuck

it usually cuts through so yeah this is the manifest information and you can also reference this video back when you like go through this process

okay i was like i'm gonna just explain what these are because this is where people get

and then and then one more thing and then that's the remaining one is the embed

so because you probably like two sections yeah

if you just hit the top yeah there you

been i was just hit

okay yeah there we go so the embed tool is this is this is how it shows up in the feed so when you read thumbnails whenever you see like custom like like mini word what your custom score is this is all the data

was that because like publishing a mini app is more about like oh what's all the information about your mini app so that we can index it and we can put it in the leaderboard we can service it across clients and this is more about like how do you want it to look and so the embed is where also it's like the same thing where if you give that whole tech stock you can then be like okay here's like please

the only thing that you need to create and this is actually like this probably took me the longest because this is something i had to create myself was a thumbnail so oh right a thumb a nice thumbnail for what you're building yep i just i just told cursor i was like hey like do this for me and it created like a just not great looking one but i just used it for my purposes because i got stuck trying to build like a really nice one and i'm like i'm not a designer

so you can literally work with cursor to basically be like okay here's the file i want and it will give you the instructions of like this is how you get set up so i think like the whole tldr is like now you have all the tools that you need and you're now just going to use a more powerful tool that can take in all this like farcash or mini app context and then actually like build all the stuff for you because we need that setup

please please say only these docs yeah because i've i've had it pull other stuff and that's pretty much the setup but and

yes so you you

and but what's really cool here and i just wanna like really emphasize is like you built a web app right

very quickly

you can build web apps all day now if you think about it like how quick is that you can send links to all your friends be like test

like do this and so now it's just a matter of like okay it needs mini app context to just surface everything and look nice so it's it's actually now you're on the like latter step of this

yeah like can you make that i'm gonna explain so so what i did was i literally just told cursor and i said like hey still reference these docs i said please add sign in with firecaster so that each user is logged in and then also add a leaderboard where

we're storing this data i'm gonna explain one more thing that you're gonna have to do if you wanna do a leaderboard that i didn't think through like i didn't realize when i was doing it you need a database to store all this leader

so so because i initially did it and i was like hey guys everyone it's live and i like put i like shared it and then people are doing it and like it like no scores were getting stored so it was just like right we see sign in but then it was just like there's nothing so you actually use a database and it's it's all through cursor you can just write it i use neon with vercel that's what it's called i just typed in cursor and i was like set me up with a database it'll give you

it gives you a lot of different options too but i just use one that like daniel was like yeah neon's pretty straightforward

and anytime

yeah not with for and

there's so many other options okay i think they they reference it as neon with versal but it's for versal yeah i see that there okay this is what the reason i liked it it was it's it's actually integrated directly with vercel so when you deploy it's automatically like handling that logic for you okay me and cursor so i'm not having to like manage some separate database so that one is just yeah yeah like just so you know like storing anything requires a database i didn't like i'm on a free plan and like that hasn't been an issue at all

you

so yeah anything that has like memory like yeah database to store this information and so yeah that's that's the only additional setup

exactly but remember that you can say that to kyndall yeah so that is your buddy too yeah

they never get annoyed so yeah that's true that's true

mini apps yeah

give us a shout out is gonna be on today oh great we're gonna chat about and then just like showcase different mini apps and like updates in the ecosystem for developers so me and horsebacks do that every friday at 12pm yeah

yes yes great so yeah but these you have all the tools available and i'm available with any questions awesome see it's it's not that hard like you can do it

anyone can do it awesome okay this has