The Ultimate Vibe Coding Guide for Hackathons I Jake Hall

[Music] Hey everyone, going to get started now. Uh, so yeah, I guess I just just want to first start off. Who's heard of testdriven development? Any? Yeah, test pretty pretty famous, right?

It's uh one one mechanism of of writing good code. Well, I'm going to be showing something a bit different today. I'm going to be showing something called taskdriven development. Um, and this is a way of essentially writing code using AI powered tools like cursor. Uh, and and providing a similar structure that something like test-driven development does.

Task driven development as we're going to go into uh basically gives like a very very rigid framework for you to start building code using AI and try and prevent it from going out of control. I think I heard someone at the front mentioning it's the barrier to entry is now going lower uh in in in creating m unmaintainable code. Hopefully this makes it a bit easier to maintain by taking sort of a uh a methodical approach. So I'm going to be sort of showing this this this end to end. Uh and I do want to really give a quick shout out to this guy who's created this awesome repo containing these uh these rules that you obviously give to AI.

It's kind of like part of the prompt. Uh I've created a fork which is specific to the hackathon. So, if you want, you can scan this QR code. It will then go to this fork where you can see the the rules. It's basically the same.

I've tweaked it slightly to make it specific to web 3 and to some of our hackathon submissions. Um, but without further ado, I'm going to show you exactly what h how to use it, how you can apply it, and sort of the context for this particular session. Um, I'm going to be using the Hideera agent kit. So obviously Hadira for those of you who don't know layer 1 blockchain EVM compatible and it's also got quite a nice JavaScript SDK and Python SDK. So you can do a lot of cool blockchain stuff without actually even touching Solidity.

Uh I'm going to be using the Hideera agent kit. You can find this online. You can find Hideera agent kit uh on GitHub or an MPM. I've cloned the repo and we're going to basically be extending our Hideera agent with a custom plugin. So I'm going to create a custom plugin.

We've obviously got out of the box plugins. is I'm going to create a custom one which integrates to uh something called meme job fund. Meme job is basically Hadira's equivalent to pump.comfun. So we're the the out the the the objective of today is to use this testdriven development to create a plug-in uh for the Hideera agent kit which allows a user to be able to interact with an LLM and actually create tokens on pumpf fun essentially the the equivalent.

So I've sort of I've started a bit because I don't want it to be too too boring watching every watch just watching uh LLM uh thinking. Um but sort of what I can show is is the first step there's three steps. So the first step is creating your PRD and obviously after you've sort of cloned this repo you've um you you've added these in somewhere into your directory where you can reference them with cursor. Basically all you need to do is you just need to tag the create PRD MDC file. This this is a file which contains instructions how to so you're a AI guide assistant in uh spec like your your job is to create a detailed PRD for a junior developer explains the process take the prompt the prompt which I want to build uh ask clarifying questions it's got a few few suggestions as to what those clarifying questions can be and then it goes to actually implement that PRD and really what this PRD is this uh product requirements document is it acts as the foundation.

This is when you're building a new feature. This is what anchors the AI so it doesn't suddenly go on a crazy tangent and starts doing something that you don't want to do. You keep it on the PRD and then you go to the next step which is generating the tasks. But just to sort of quickly look at what that flow is. Again, I didn't want to do all of this live because it's a bit it's a bit dull.

Uh we're going to go into the actual building live. Um but as you can see, I've basically said use create PRD. That's sort of that that's the system prompt. I want to create a meme job fun plug-in for the Hideera AI agent kit so that a user can create a meme job token using the CLI chat tool. That's just something which comes inside of the repost for for quick testing.

Uh and obviously I tag that and this is really important obviously referencing relevant files. Uh context engineering making sure that you're giving the AI as much context as it needs without without necessarily overdoing it but sort of get giving it sort of yeah giving it sufficient. uh and then also reference these files. So I I've given an example of an existing plug-in that we have. Obviously it can use that and it can model the the new plugins architecture off of one of the existing ones.

I've also given it a link because uh this is what you can do with cursor and presumably with most AI powered tools. You can just hyperlink it to documentation. Uh so I've just sent over the getting started docs for this meme job SDK and also the uh create token docs. And with that, the AI is able to search it and it's able to sort of take that website context into its own context window. Uh, and and obviously again make it let reduce that risk of hallucination.

It's really important. Make sure that you're giving the AI as much information as possible. In this instance, I use Claude 4 on it. I mean, I I tend to use 03. I find that um GPT03 is is is uh is is very good when it comes to this planning phase when it comes to really sort of thinking about what you need to do.

But it's really totally up to you. I mean I I would generally recommend these reasoning models. So using the strong reasoning models like for opus I mean this one absolutely rinses through cash. I was using this a couple weeks ago and I was spending like $2 a minute. Um but 03 this is a pretty good one and yeah I use for it.

the outcome was still decent because obviously it comes back with these clarifying questions which is again it's it's a mechanism to really improve that quality of the prompt and and really when when we get to the point of creating this PRD it's not just this initial prompt with all of the links it's the prompt plus extra questions and we've really engineered this whole context to be very clear very descriptive little room for error so it comes back with a few questions what's the problem what's the problem statement, target users, core functionality. Here, for example, it's clarified, do you want to buy existing tokens or sell? We could include this into the scope. We could do it in a in a PRD afterwards. If we have time, we'll do that.

Um, but again, you sort of ask you answer these clarification questions. And it's been pretty it's pretty helpful here. I mean, it gives me the question. It gives me example answers. So, I don't even really need to write when it comes to replying.

I'm just like 1 A, 1 B, 2, 3, 2 C D. Uh and then once it has all of that sort of final once it has those answers once it's got everything it needs it then goes to create the PRD. So we can have a look at what that looks like. Uh and again just to remind everyone PRD product requirements document this is the anchor. This is what grounds the LLM so that it doesn't start doing some crazy uh hallucinative stuff which like you haven't asked for ve very common if you don't have that central grounding.

So it's introduction to it gives us the goals, user stories and then the functional requirements. A good foundation to go on to the next step which is the uh generation of tasks. So again out of the box there's this special system prompt I think you can think of it as which gives explanation on how can I then go from the uh how can I go from the PRD into uh a set of tasks very granular tasks that the AI can then just pick up and do pretty much autonomously. Uh so I I do want to does anyone have any questions like on that first step yet or we can say we can save them to the end if there's uh yeah overdo it. Yeah.

Yeah. It's a good question. So So the the the gentleman there, he asked, "How do you know when you're how do you get the balance right of not putting in too much context and also not putting in uh too little?" I think my general rule of thumb is is and I guess you you said you've experienced where you put too much stuff in is um anytime that there's new documentation, anytime you're using some some new SDK uh which probably hasn't really that not much of that has been seen by the AI. Definitely get that in.

Definitely get something which has been released last year or six months ago. That has to go in because otherwise it's just going to hallucinate. Um the it also really depends on the model which you're using. I mean I find again when you're using models like 03 you can sort of afford to put a bit more in because it's got such a big context window. Um I I I would generally say the it's safer to go a bit further more but for stuff which is very very I mean it's like it's been around for 5 years you can probably afford to to miss it out.

And also what I'm going to highlight here is actually you want to sort of consistently give it that context as well as as we'll show when we go into the actual building phase. But thanks that was a really great question and just I think for the sake of time got 11 minutes left. So yeah we'll save questions to the end. Um now as you can see it created the PRD. It's giving me a bit of a blur about it.

We can then go on to the next step which is creating tasks. So again using that PRD create tasks with this system prompt. The system prompt sort of gives a bit of an explanation. First thing that you need to do is generate the parent tasks. Gives explanation as to that.

Phase two, generate the subtasks. So it's sort of chunking it into two steps. Uh first thing it's going to do is it's going to create these higher level tasks which we as a user as a senior engineer as an architect can look at and go okay yeah that's good that's not so good. Um here for example I had already installed the dependency. So actually as sort of before it then goes on to going into the subtasks, I could delete this line or I could challenge it and go actually um let's uh let's forget about testing which yeah I probably would do as well.

Um but sort of you can this is a good point in which you go right take a look at what it's what it's probably going to do and then proactively adjust it remove something say oh you've missed something out before then going on to the next step which is saying yeah create the subtasks and voila it sort of does that same thing again really important that you check this because this is going to save you time in the long run if you're if you're just going totally yolo code uh you will make the mistake which I've done countless times where you realize oh hang on task 3.3 I didn't actually want that um and sort of again if you spend a bit more time taking in what the AI what what what you're collaboratively working on and you then iterate at this earlier stage it will make it much better uh when it goes down the line when you've got into this total mess of unmaintainable code so doing it again proactively is is very important I would recommend and thoroughly looking through this. It takes 5 minutes. It will save you potentially 30 minutes, 1 hour depending on how how uh how bad uh some of the mistakes could be. Um now I I had a look at this beforehand.

I mean I think in general it makes sense. I did notice again I was using clawude for sonnet here. Usually I use 03 for the planning phase and then I use claude for sonnet for the implementation phase because it's a bit cheaper. it's a bit quicker and it's like doesn't need to have so much uh I guess intelligence whereas for the architecture for the creation I think you need to be a bit more considerate um but what I did notice is actually that when 03 does these sorts of tasks it's much more uh more concise much more concise just an observation which which I saw so I guess what we can do now uh we can sort of take this step by step let's see what time we've got eight minutes 8 minutes should definitely be enough to actually then execute these particular um these particular tasks. And what I'm going to do is I'm going to just do it task task two and then task three.

I I removed task one as as I mentioned earlier because I'd already installed the dependencies, but we can go into into this sort of setting up the the the actual um the actual architecture setting up the actual file. So I I'll do this in a new in a new window just to sort of keep it fresh and I'll say yeah start with task two uh using and then again you want to just sort of tag using uh process task list. So this sort of just goes gives it again it gives it that system prompt so you don't need to be really descriptive on on how to actually process these uh these subtasks over here. So we can see it thinking and I think first thing it's doing yeah it's just sort of understanding the repository probably then go on to actually creating the um creating the files as well.

Here we go. And I mean often what I find is like something which I quite like to do when uh when when this is when it's vibing is looking at the next problem. So it might be okay while it's doing this we can now do a PRD for the next feature that we want. And then you can sort of run that parallelism where while rather than just sort of sitting I'm gonna say yes uh proceed with all of task two without asking uh but you can sort of start parallel parallelizing your workflow while AI is doing this big chunk of work. You can then go okay what actually what what could I be doing in the meantime?

Maybe it's going to be thinking about maybe it's going to be replying some emails. Maybe it's going to be um yeah, thinking about the next feature that I want to add, scoping that out, getting all of the information gathered so you can then start running these things like super efficiently. Uh what I will say, I' I I've I've heard a lot of good things actually about tool about the CLI uh programming tools and I've not tried this particular flow with CLI tools like uh Clawude Code or um I think Gemini just released a new CLI tool. So, I I I've heard very positive things about those uh and and that would be something which I'd be interested in exploring. But I've been pretty happy just with uh with my $20 a month cursor subscription because it gives yeah pretty good pretty good uh pretty good bandwidth.

So, it's going through all of these tasks. This is relatively simple stuff. Uh I think the bulk of it will be in this sort of third task. And to the point earlier about sort of adding context, I mean especially if we're going to be doing this in a new context window for this third task, uh definitely going to need to think about, okay, what extra information do I need to add to ensure that these tasks are done without to and and and reduce that risk of hallucination? And immediately like it sounds like yes, it gives the instructions, but we're definitely going to need to pull in those docs again just by tagging it.

Definitely going to need to pull in those docks to give it sort of that reminded by the way this is this is the API. This is actually the example script. This is how you should do it. So that will be something that that I will be doing. Looks like it's done all of task two.

Uh five minutes to do the final one and we should be able to get some testing in as well. So let's accept all. Uh let's just stop it from there and then we'll go okay continue with task three. Uh

do all of them without asking me for confirmation and refer to these docs. So I'm just going to pass in again this create token docs just to make sure that uh well because because it this is a brand new chat. This is a brand new chat. So it doesn't actually have any of that referencing before. It's not really described it in here.

It's given good instructions, but it's not given the documentation. So just adding it there. This could equally be done in a new chat window as well. Um but uh I think on the other side of things because it's very tightly coupled to the previous step, uh I I would personally keep it in the same chat window. often.

Yeah, if you're doing something which is slightly different, maybe you're doing another micros service or you're doing sort of another something in a totally different directory, that might be where you go actually, okay, yeah, I'm going to do this in a new chat window, keep it so that that context is highly um personalized to the particular task at hand. But again, in this instance, it's pretty similar. Uh so yeah, wouldn't necessarily need to to sort of do it in a new one. So let's Okay, we'll run that.

Cool. I have no there's sometimes there's a there's a bug on cursor which is a well-known bug. It doesn't it doesn't continue after you execute a command and I think it's something to do with the I think it's something to do with the terminal that it's using.

But as you can see it's going sort of step by step.

Next thing it will do is it'll be creating the tool. also be creating the tool which is again uh may maybe here do you know what what I'm going to do ju just again I'm going to jump in here and go um refer to I'm going to show it the the other the reference tool just just to make sure it doesn't slip up refer to uh

following steps And this is something which is is it's is very worth doing. It's like yeah keep a track on what it's doing and then you can sort of stop and then you can jump back in and when you stop it still remembers everything before. It's not like it sort of wipes away when you stop. It's still going to see this previously. It's still going to have this inside of its context window.

Um but yeah, again I was just it hadn't in this context window hadn't seen the plugin. So, bring it back in and uh and make sure that uh make sure that everything is crystal clear to it. Running low on time here. I'm hoping we can test it.

Maybe could have used uh I think 4.1's maybe even quicker than Claude Fonet than Claude for Sonnet. So, maybe we could have used that, but we'll be uh tight against the clock.

Okay, cool. So it's done the tool. Uh then it will create the plugin. The plug-in is sort of a collection of of similar tools uh within this Hadira agent kit architecture that you then sort of yeah you pass into um

which you then pass into into that Hera agent. You sort of list all of the plugins that you want. So these are combinations of AI tools. They're they're lang chain tools actually. So you can even use it with other langraph agents.

Okay. Okay. What's it done here? We got one minute. We're going to have to go quick.

Come on, baby. You got this. You got this. You got this.

Okay.

It's figuring out how to get the private keys. I don't think we're going to get this done in time, unfortunately. But, uh, I guess ju just as a recap. Um, yeah, definitely check out, you can see the repo over here. I highly recommend it.

I mean, if has anyone used this this this particular repo before? It's it's become quite popular. Has anyone used this approach by any chance?

Yeah. Do you like Good. Yeah. Yeah. So, I think ju just again ju just to recap, step one, create that PRD and work with it collaborative collaboratively with AI.

Don't do it all yourself. Get AI to sort of prompt you. Um, next step, generate those tasks on constantly check in. Make sure that the AI is not going off course. Hold it accountable.

And once you're happy with those tasks, once you're happy with those subtasks, just let it fly. And uh again, still check it. Don't let it fly too much. Uh but giving it that grounding really does help. So unfortunately, that that's everything done here.

Uh it did seem to it did seem to keep on going in the background. May maybe we can if you want to come afterwards, I'll keep it running and we can see if it works out uh after this. But yeah, really appreciate everyone for for joining and uh I'll just stay until they kick me out. [Music]