Vibe Coding: Tips/Tricks on How to Make Moves

Hey everybody, we'll get started here in just a minute or two. Just letting a few more people funnel in. It's good to see you all.

We typically like to start, you know, about two after the hour just to give uh people time to jump in. Uh while you are uh while you're here, if you want to drop in where you're calling from in the chat, it's nice to know where everyone's everyone's calling in from. I'm currently in Sou Falls, South Dakota. Obby, where you at? I'm in where the northern lights are,

which is also in Sou Falls, South Dakota sometimes, but actually I'm in San Francisco. Actually, there was there was a high chance of it just uh last week, but we didn't I didn't see it. All right, we have one more minute and then we will get started.

We have Italy in the chat. Bon Venuto if that's correct. Got the UK top of the morning to you. If that's what that's supposed

to um all right well good to see you all. I'm sure there'll be more people funneling in, but we can go ahead and start to kick it off. So, I'm going to share my screen and we will get going. One second here.

All right. Hopefully you all can see this. All right. And yes, the recording will be available later. Basically, we

send it, you know, usually comes out like two or three hours after the event. It'll come to your email, whatever email you used when you signed up for the event. All right. Uh let's kick it off. So

today we're going to be talking a little bit about uh vibe coding. This is you know if some of you have been you know you've probably heard heard of it of course that's why you're here and you probably done some of it but we're not claiming that we're the experts in all things vibe coding by any means. But what we do want to do is share some tips

and tricks that have been working really well for us and our team at MRA and then hopefully give you all time to you know you might have some tips of your own that can help others in this group. So ultimately we want it to be a collaborative experience, but we want to share tips and tricks that'll probably take up, you know, maybe half the time. And then we actually want to build something. So Obby is just going to take

us through if he was going to build an app and we can, you know, learn along the way, critique him a little bit along the way, and we'll build something fun and have a good time. So that's the goal of the workshop. So we'll, as I mentioned before, quick history of vibe coding. We'll keep it short because the history is pretty short. It's pretty new. Uh

we'll talk about Vive coding tips and tricks and then we'll build something. So what am I or who am I? Uh Shane Thomas. I'm one of the founders at MRAA previously at Gatsby and Netlefi. I

built a product called audio feed and I've been doing open source stuff for over 15 years now. So please connect with me on Twitter or LinkedIn. And I will introduce Abby as well. He's

another founder at Monstro the CTO and he's also at Gatsby and Netifi with me. and he's never seen snowfall which is just a funny running joke because he's come visited me in Sou Falls South Dakota but he's never come during the winter you know I don't know why and he wants to get MRA to 14,000 GitHub stars

that's his personal goal so what is MRA master is an open source AI agent framework for TypeScript it comes with a whole bunch of things for building AI agents and applications tools memory tracing voice capabilities we have agentic workflow system that you can do human in the loop with a really simple API, you can write evals, it has

storage for rag pipelines and in a local development playground. So our goal with master is it should be opinionated but flexible so it helps you get further faster. But we're not going to be talking much about MRA today. I just wanted to bring it up so you know where

we're coming from. But this is the tweet that started it all. There's a new kind of coding I call vibe coding. Maybe you

all saw this tweet or maybe you just started hearing vibe coding and had no idea where it came from. So, I'm not going to read the entire thing. These slides will also be shared after the event along with the recording. You

know, give it give me a few hours and it'll get sent out. But the kind of the idea, the original idea was you just kind of talk to your computer you and you tell it what you want it to do and you just accept everything and you just correct it as you go. And that's kind of the whole idea that started this vibe coding thing. and now it's kind of ballooned.

It means a lot more than this to a lot of different people, but this was the original tweet uh that that started um basically the the whole the whole thing that is now vibe coding. So, I'm going to start with just a couple quick polls and I think so you can do this, you know, on your mobile device. I think you

should all be able to see this as well. I don't know if I can move this. I can't. Why it doesn't let me move

it? Um, maybe I'll do that. There we go. So, yeah, if you do want to go uh take the take this poll, we've got a

couple people, a lot of people using cursor. Uh, if you're using something else, you know, there's a lot of other things. Definitely drop in the chat if if there's something that we're missing just so we know what people are using. Uh, Abby, what's your what's your

primary code editor of choice? I use wind surf. Actually, I'm a wind surfer. You're a wind surfer. I've used

cursor. I've used wind surf. I've even tried VS Code. Um, but it's like the

beginning of a Pokemon game, you know? You pick you just pick one. Yeah. I so I would say I'm probably a

little unique that on any given day I use both cursor and windsurf and the reason is because I just like to see which one feels better that day because they are shipping both teams are shipping so fast that some days you you feel like you're just really vibing well with one of them and then it kind of starts hitting walls and then you maybe they change their you know system prompt for their agent a

little bit and it works well for some people but doesn't work well for you because of your style. So, I've noticed that quite a bit. So, there are certain things I do in cursor and certain things I do in Windsurf. If you had to ask me

which one I use more, I would say I use Windsurf more. But Cursor is by and far the winner. So, that's very interesting. So, you know, that that that's cool, though. I I think they're they're both

great depending on what you want to do, and they they're pretty similar, right? The goals are the same, but you know, their implementation is of course a little bit different. All right. So, how do I use this to the next poll? All right. So,

now let's go to another poll here. And this poll is, what model do you use the most? There's a, you know, there's quite a few in here. I might

have missed some as well. These are the ones that I've, you know, been using a little bit here and there. So, I try to put all those on there.

Gemini is in the in the race. I've I've actually and you know anecdotally you I talked to a lot of our customers that are you're building things with MRA and it has surprised me how much more and more people are using Gemini. It's you know has very large context windows. It's it's very good quality. So I'm not

surprised to see Sonnet winning but I'm also not surprised to see Gemini. I h I have been testing uh 41 quite a bit and had okay luck, you know, in in Windsurf they have 41 kind of built in and so that's been going pretty well, but I haven't noticed a significant improvement or, you know, it's pretty similar in my opinion to sonnet 37 for

the most part. I haven't noticed significant differences yet, but I would still say I use Sonnet 37 the most as well. All right, so this is another great poll. There's a couple questions in

chat. Have we felt a learning curve? So, I actually haven't used Gemini 25 that much. I've, you know, played around with

it a little bit, but I haven't used it in my day-to-day enough to know if there's significant differences or if there's a big learning curve. But feel free for others to jump into the chat if if you have. All right, so most people are using Sonnet and over half the people, you know, 70 plus% if you count,

you know, the two models. All right. So, there's some polls for us. And I think I can

actually enable. Yeah, we'll we'll enable that later. But we have some polls. We have

some results. We know everyone's using most people are using cursor and most people are using set, but there's obviously, you know, people are choosing their own things. But Abby, I want to kick it over to you for this. Cool. So,

we kind of gone through like the beginning phase where you pick an editor, you pick a model. Um and then vibe coding is just regular coding by the way. Um but it really like you find yourself in two scenarios when you do vibe coding. Uh the first scenario is

you know what needs to be done which we call making moves mode which is you are in your bag where you know exactly the task at hand how to do it. You could do it yourself but you're lazy in a way. Um so in these cases you know you could write very detailed prompts um exactly what to do you can like a good tip that

what we try to do and I think a guy in the in our chat said that they use like Gemini 2.5 for planning that's exactly the right tip where you have this planning agent where you collaborate on a checklist of items or a you know like a rubric of success right and then you can keep going back to this checklist to

like re like re uh just re-engage the LM like we did this step. Okay, now we're doing the next one. So that one that like this all comes down to you knowing what you have to do. Therefore, you're

outlining the steps. You know what the checklist checklist is. You become like the CEO of running whatever task you're trying to do. Um but then there's the other case. You don't know what to do. And a

lot of people don't know what to do, myself included. And this is where most vibe coding actually is uh is taking place. And this is for me the most fun and also the most frustrating, right? So

when you don't know what to do, you have to change your uh your tactic a little bit. You have to explain like what you're trying to do. There has to be some reasoning in the actions that you're taking cuz you've never done this before. And as much as the LLM tries to think that it's so confident, it's never done this with you before either, right?

So, you have to have a plan. Um, a lot of mistakes we see is when you don't know what you're doing and you have your editor write code right away. Should not do that. You should start planning

things. So, you tell the agent, "Do not write code until we agree or don't do anything until I tell you to do so." You iterate on a plan together. uh you still have to use your brain and you have to think like does this plan sound

reasonable and then if there are things that you don't know you can tell the agent to then go uh research it use the internet etc you could provide links you can provide topics for it to understand once you have assembled this plan then you can execute it yeah I'll give one example of something that I I kind of knew how to do but I didn't know how to do so recently I wanted to do something very simple I

just wanted to add Postthog analytic events to a server action in an X.js app. And I knew how, you know, I we already had Postthog, the JavaScript SDK, but I thought there might be like a node SDK for the back end. I wasn't sure, but I've done it in the I kind of had done it in the past. And I could, of course, went to Google and and found

that answer in a few seconds, right? But because I was already in my editor, I could actually just explain that situation in a few sentences. It created the plan and it executed the plan and it of course there was an Node SDK. It

implemented it worked one shot and it we were all good to go. So saved saved quite a bit of time on that one instance. But just by telling it to do the research first, you're you're kind of making sure that it's using external resources rather than just its internal knowledge which is often on outdated documentation which we'll talk about in a little bit.

So oftent times like when you first start using your editor and you're doing things that you do know, you start feeling this really like a boost of productivity because you're just, you know, you're be you're be becoming more productive, right? But then you kind of hit this problem, what we like to call

the intern problem. And this happens a lot when you don't know what you're doing. Like in the current state of the world, as new models get more advanced, they become very eager in this world of the the AI code editors. Um I pretty sure everyone here has seen something go

off the rails, right? where it starts writing a bunch of code that is irrelevant to what you're even asked it to do or it starts introducing new paradigms into your code base because it read something from either general knowledge or something uh you know it read online. So we like to call these eager interns because it's not like the LLM is dumb. It's just very eager to

please you and try to do all the tasks that it should try to get ahead on things. And a lot of times it does stuff without asking permissions, which is why you have to have like these certain guard rails when you're interacting with it. Um, like Sonnet 37 is like a Stanford intern like and very smart but

also very stupid. And then 3.5 is like a smart grunt, right? So like oftent times

I'm like if 3.7 gets too crazy, I go down to 3.5. Gemini 2.5 is kind of like

a neutral intern in a way, which is like more malleable. It's kind of weird. It's just the intern problem. Um, and I

that's kind of the only way we kind of have a good way to describe it. Um, a big tip to get rid of all this doubt. Um, and as engineers, I've always struggled with this too. Um,

like I've realized that like vibe coding and commanding maybe one or many code editors at the same time is really like commanding uh a small engineering team. And to do that successfully, I've learned in my career that you need to command the English language or whatever language your team speaks. In the case of you, your team of you and Windsor for cursor, English is the commanding

language. I mean English the language, right? the language part is the commanding part whether it's English or whatever you speak um but you have to be able to break things down into smaller steps you have to be like an engineering manager or like the project manager not necessarily engineer anymore and you

have to complete you have to really clearly become like a product manager it's like why are you doing that like why are we doing this step like what is like a good result look like right if you see the eager interns doing things unrelated ated changes, all that stuff. You have to like course correct early

just like if you were running a company, right? You can't just let things go. Um, you have to stop early. You have to

redirect often. You are the CEO of this stuff, right? So, the stop button is your best friend. If you really want to be successful at vibe coding, if we

could learn anything is the stop button is your best friend. Cool. Uh, yeah. Let's talk some just

general more vibe coding tips. So one thing we've done because there is a knowledge cut off with all these models right new models come out the knowledge date moves but depending on what you're doing if you're doing something with you know maybe that's been around a while and in libraries that have been around a while it the knowledge is probably

already baked in but a lot of times it's not. So what we did at Maestra and what you know we'd kind of encourage you to do with if you're using open source projects is or you you have one of your own is you should have probably an MCP doc server that keeps updated docs. That way if someone's using your project, you can more easily get accurate information. And this has also been

really good for us because it makes sure our docs have to be correct because it's not only just people using it, it's agents that are using our docs. And so I'll show just a real quick example of this uh in action because I think it's kind of interesting to see. And if you haven't used MCP in your code editors, I think that's another unlock, another

great tip. So this is probably going to be a little bit um hopefully you can all see that. So, I'm just going to create a quick master project just to show how this works, how we've kind of baked this in. So, I'm just going to go through

this kind of speedrun it really uh really fast here. That's a cool link, James. Context 7. I have not seen that.

But so this will just take a second to install everything. Hopefully the internet uh there it is. So I'm just going to basically just go through this really quick and install the defaults and I will add an example. And then baked into our CLI we just ask do

you want to install our MCP doc server? So I'll go ahead and just use cursor for this one. Say yes. Install it for

cursor. And now if I go into this and I open it up in cursor, you see it says new MCP server detected MRA. I'll just enable that. And I can actually just go into my agent and I can say add memory to my

agent. And hopefully it will uh understand that it's MRA and it will use this MCP server. It called the MRA docs MCP you can see here. So I'll run the tool. It'll show what pages it read the memory the reference docs for memory. It's

going to run mpm install memory. So you know I can run that. It should install memory for me. And then it's kind of doing a

more sometimes you got to tell it to do it, you know, like implement it. You usually I'm a little bit more verbose, but you know, we'll try to be be just very straightforward. But now it's going to actually implement memory. Looks good. I

think it doesn't look good. What does not like about this? You could simplify this a little bit. Interesting. Well, we can try to fix it.

Nice thing about uh never tried it without the master keyword. Yeah, I always use I usually use the master keyword to tell it. I'm just doing it here just to see. I and this is something I would not

run. So yeah, I don't know what exactly is wrong here. Must have a package uh mismatch or something. But overall, you

can see like this is actually the right uh format for installing memory. It actually did read the docs. It started with a more advanced version of memory, you know, with all the kind of bells and whistles. We could just go with a more simple version, but that's just a really again trivial example of using

uh yeah using our doc server, right? It's the idea of using MCP alongside your uh yeah alongside your editor to actually get more features that your editor can actually access. That issue is interesting that you saw and this could happen to you when you're importing modules that have a lot of TypeScript types. the TypeScript server needs to be refreshed, but your agent

doesn't know that. So, it'll keep iterating on TS issues that do not exist. It's just an interesting thing.

These are just the little things that happen, you know. That's why you have to hit the stop button. Yeah. Yeah. You can see what it was trying suggestion that it tried to, you know, recommend was not something I would want to do. So there is a there's

definitely if you you know there's a lot of different like people and experiences coming into doing you know what you know this vibe coding thing right like where if you've been coding for a long time you're actually at a significant advantage if you can learn it because you know when something's wrong you kind of have that sense or that you know that

that feeling where if you're newer it is a little harder to develop that. You're going to have to learn the hard way just as we all did. And maybe you can learn faster because you can iterate faster now, but you definitely have to go through that learning curve. This just doesn't seem right. Okay, some other just like quick

tips. Using XML tags, and this is kind of like prompting tips, right? Some some of the stuff you've probably already seen just doing normal prompting, but using XML tags or markdown to provide structure to longer prompts is actually a pretty good practice. I typically just

if I want to show examples, I'll put, you know, example one XML tag around it. So it knows that this is the start and the end of it. Especially when you get into longer prompts, it helps provide clearer structure. Uh you can kind of

some things we typically see in like longer prompts would be an instruction section, examples. If there's examples for like if you want them to call tools and like what kind of output format this is more a little bit more for agents, but also you know in your code editor, you can do some of this stuff and make sure that it provides you the

information you need. If you're working with really really long context, let's say you have like a you you're working you're working and your product manager gave you a PRD or something to drop in and you want to give it all the context around the feature you're trying to build. Well, you should place instructions at the beginning and the

end of and kind of around that long context. And that actually improves the the likelihood it's going to follow the instructions you give it. If you give it a lot of context, sometimes um just at the beginning, it'll forget it by the time it gets to the end. And if you provide it just at the end, it won't know what you're trying to do as it's

reading the context. And so it won't actually act on it correctly. So doing it both actually improves accuracy of results on not every model. Your your models may vary a bit, but with a lot of

models that actually uh improves accuracy of getting the right results with with less uh back and forth. Um, other tips that we've seen, um, just talking to fellow YC batchmates and customers is like showing emotion can help. Um, I've done this ever since someone told me to do this. I've been doing it all the time. I can say that it works for me. Um, I detect frustration.

If I go into what these AI endless loops, if I go into an infinite loop getting led astray, I get very frustrated and I'll voice that to uh to my editor. Um, and you know, I would like to think it improves and it actually does. Um, and then like if you get if you start, this is like really stupid as well. Um, but if you start saying thank you and great job and

stuff, I've al also had just a time that was good and I don't know if that's just, you know, uh, just me. Uh, but a lot of people have said that as well. And maybe it's like, you know, if you're if Skynet is coming, maybe be nice to it today, right? So,

yeah. Yeah. I I will say I I noticed it more with Claude than like 40. And um

again, I haven't used Gemini that much, so I think Claude is more susceptible to the emotion, but I think yeah, different models react slightly differently. Yeah. Um and then just some funny uh things from the chat. Telling it how

disappointed you are in it and threatening you'll bring in a new agent also helps. That's so true. Like it's funny, but it's true, which is the funny part. Um and then and that that's

actually a good point, too. And I don't know if we might have that somewhere later down the line, but sometimes it is a matter of just like you you let it get in it's gotten into a loop, you switch the model out and you run it again with the past context and sometimes it'll see all the things that did wrong and it'll kind of correct, you know, you bring in the you bring in a different intern to solve a solve the task. Yeah. Um I will

be angry at the poor Claude then just like a good CEO. Dude, that's a tweetable thing. Whoever I mean uh Brian, I would tweet that. That's that's very tweetable. Um, shouting works. So,

it is an actual intern. It does. Um, okay, cool. So, let's move on. So, commit early and often. Now, if y'all

have used products like lovable, even cursor has checkpoints as well. Um, if you've used any of those products, like when you're like when you're doing things you don't know, you're like and you're in this like vibe loop where you're like, "Oh, things are working." Like, "Oh, I'm I'm killing it. I am such

a genius today. I am prompting like a machine and everything goes well and then you take one bad turn and your whole project gets messed up and because you've been vibing aka accept except accept you don't know where you are in the project right and you don't know how to debug it and so the best thing to do is to go back to where things were

working and then get like some grounding there. I've screwed up and I've seen many people screw up where you keep vibing your way out of problems and it causes more problems. So, you have to pay attention to checkpoints just like normal software engineering. And if you do get into this like checkpoint hell

where you've created too many branches that are destroyed your work, uh, a normal git bisect could help like just throwing out some old school engineering things. Um, and actually learning the code that you vibed also helps, but you should make incremental changes. Um, I like to do that um, as well. So, some

other useful tips to close out the tips section of this uh, workshop. Um, if you're doing some, we're going to do this in a second, but you can like uh, just put UI screenshots and if you're doing some UI work, you could just tell it to like, hey, make it look like this. Um, and it does decent, so that's cool.

Um, when you notice things go wrong for an extended period of time, maybe it's time to start a new chat. Um, I've also had chats with my Windsurf agent in the same conversation for many days with no problem, but then eventually, and I don't know the rhyme or reason, the conversation goes poisoned, right? or

poisoned in the sense that I'm not getting any productivity out of the conversation anymore. I start a new conversation and then I'm in context buildup mode again and then I have several days of great productivity and it gets poisoned again. I think this is more so a bug and and also more so the context of how this stuff works, but

sometimes you just need to start a new chat and then a lot of times agents don't execute. It'll say like was unable to execute. And don't be like me and think that it's always going to execute. So then you're wondering like, hey, like

what's going on here? You just tell it to do it again. Um, and if it does it if it doesn't do it that many times, then there's probably something wrong. Yeah. So those are some

tips. You have some tips. Go ahead, Shane. Well, I was going to say there's a good question in the chat that I

figured it worth just answering. What do you think of the studies that say it it's the dumbing down of a person? This is actually something I've thought a lot about. I I do wonder, am I getting dumber because I'm not using the same

parts of my brain? You know, you when you engineer, you know, for long periods of time, you you have to you have to get really really good at problem solving, right? And now a lot of those basic muscle memory things maybe go away if you don't use them all the time. I think, you know, there's definitely a chance of

that, right? I would also say that at some point though we don't you know like at one point I knew binary code right I learned that in school but I don't use it and and I don't need to use it and so that that's the kind of maybe the scary part of all this is like I don't think I'm losing it too much because I still

have to it's not good enough to solve all the problems for me so I think I still have to stay sharp but I have worried about that if it gets good enough where I all the basic problems are solved will I even be able to solve them anymore or more so how would someone new ever get good enough to solve those problems and I guess there's

two two questions they either have to you know they'll have to learn it the hard way like we did or maybe they won't need to in the future and that's the other you know maybe scarier you know thought if you are an engineer like like me like yourself you know thinking about maybe won't those skills are less valuable in the future I don't I don't know so time will tell but it's things

I' I've definitely thought about all right go ahead Abby yeah for Sure, like when I first learn started learning JavaScript, I used low dash and I didn't even know what map actually did in JavaScript because there's an abstraction for me. But to become a better engineer, you have to learn how what your tools do. So I think yeah, it's going to be like a split like

a split path for a lot of people. Like do you want to completely vibe or do you want to like understand what you're building? Nowadays, like when I'm doing things I don't know and I'm doing it peacemail using the tips that we kind of like talked about, I'm actually learning new things because like the the the

editor is kind of bringing concepts to me that I would previously had to go to Stack Overflow or Google to go and learn and read docs before I can actually play with in my hands, right? So, it's a different type of learning now too. So, let's not like discount that this is also positive in that way too. uh you can learn through vibe coding as well.

Um but yeah, we could talk about that all day. So, let's keep going. Um editor tips. So, last point here. Um cursor

rules are pretty good. Um I could I know many people that swear by them. So, they have these base set of rules that are in their uh editor and then like it kind of like dictates the vibe. Um, and what I mean by dictates the vibe is like you can encode certain, you know, your

preferences in these rules, certain documentations that are needed. Um, teams share cursor rules with each other. Uh, that's a really cool thing. If you want to like share this like

company context of something that you want all the editors to sync up about, cursor rules is pretty good for that. One one thing on cursor rules though that I have heard a lot about is as models improve your cursor you need to revisit your cursor rules because what worked a you know a year ago might have less effectiveness with new models. So

just know that it's it's something it's an active thing that you'll have to maintain especially if you're sharing it with the team. Yeah. Um, windsurf like is really nice because you can at files. I mean, just like in anything, but um,

and we're going to do some demos in a short bit, but at filing stuff is nice. Um, another windsurf plug is they have like preview server, so you can like do everything within Windsurf. So maybe you don't need lovable or any of those other platforms. We're going to try that out today.

And then last bit and I saw some tips that was in the Zoom chat as well is like writing tests. You could do this thing called a test loop where you have the editor write the test, execute the test, the test fails, it fixes the test, test fails, and he goes through a loop and if you you have to hit you have to be ready to hit stop though. But

sometimes it'll finish the whole loop and you've just written tests without doing anything. Um, so that's just a cool tip. All right, let's butt. I will share my

screen and let's get going. So, today I wanted to just vibe a random app that I've been thinking about. Um, and I'm starting naked here. I want to build one of those flash card flashc

card apps which are really kind of trivial but I wanted I want it to be like a flashc card app where you can put a topic and it'll generate like 10 flashcards for you on the topic and then you can like study or something. Um so let's just I so I'm not a front-end developer by the way like I know how to use React and stuff and I'm a decent

debugger so like I've never like I don't know if Webpack is still a thing or not. So, this will be a good test, right? So, also, can you guys see my screen? And should I make it bigger? Can I make it

bigger? Oh, I can. Is this good? Yeah, we can see your wind surf. All right,

dudes. Let's start. So, I want So, I'm going to just So, I'm going to start doing like this pre-planning thing. This is what I would usually do. I know that I'm supposed to use I know that the hype

thing right now is to use this thing called Vit, right? But I don't know anything about Vit. And so that's where I would start like I don't know anything about this tool vit can you share some information with me on why I should use it over something like what's the other thing people use next.js JS. Um, so let's see. Oh, it'd be h it's

always happy to share information with me, you know, like as such a negative person that I am, it's it's good to have to work with someone so positive, right? Um, I'm just kidding. Uh, so it's telling us the the the differences like, oh, okay, that's cool. Evan, you actually know this guy.

Great dude. Um, cool. Okay. So, I'm

going to build a single page app. That's cool. And then I'm going to use MRA's agents for generating the the the cards.

So, let's actually like Okay, can you make me a basic V project so I can understand the architecture? And honestly guys, this is how I vibe code because I'm doing things I don't know and I'm not trying to like not know stuff, right? So, this is kind of how I do it. Um, and then I do I do

accept all like this because I don't really know. So, I'm like, "Oh, okay. Cool. Accept.

Sure." Okay. Open in terminal. Let me do that.

Yep. All right. Also, Shane, if there's like comments and stuff, just feel free to like in the chat just like blurt it out. I wanted to

make a comment when you said you you know you being a pessimist. Remember, we call it reverse optimism, you know. You're you're you're a resident reverse optimist, you know. Yeah, reverse optimism.

That'll help in uh that helps in the vibe code world. So, it's doing a bunch of stuff. It made the VI vit V demo. And now I can do run dev. Cool. And so, this

is running the server. And it's doing its thing. I can actually hit this. And this is a cool feature of

Windsurf which is the browser preview, right? So I can open it in my editor here. And cool. Okay. So if you notice, I haven't like opened one file yet, which

is dope. Um, which I love this part of Vibe coding. But like once again, I don't know what I just created. So, I'm just going to take a look real quick. This looks like a normal like create react react app type of thing. As

someone who doesn't know anything about Vit. I notice there's a Vit config here, but okay, sick. Like, that makes sense.

Don't know what the strict mode thing is, but I don't really care. And all right, I can keep vibing. And I have this preview here. So, let's first do the UI thing. So I want to make a flashc

card app um using this project we started. Can you let's make a plan on the functionality of an app that um generates flashc cards for students based on a topic of their interest. And I'm just going to go with that and see what we come up with. Yeah. One other thing that I like to do, I don't do it all the time because

especially it's weird if people are around, but I do like to use Super Whisper and just like talk out my thoughts on these things. You know, one, you know, sometimes LLMs actually do okay if you ramble a bit, especially if it's not too much context. So, you can kind of just like talk out the thoughts and then it'll paste in. You can edit the text if

you want to, but depending on your typing speed, you might actually be able to get more information out or get your thoughts out more clearly. you know, kind of just talking through them. So, that's something I like to do once in a while. Yeah. Okay. So, you can see that

it made a project plan. Now, let's just skim it. Okay. Core functionality. Sure.

Display, front, black, flip, animation. Wow, that is something I definitely want. Space repetition. This might be

like some I don't know, some extra features. Progress tracking. Okay. Like

it is thinking bold bolder than me right now. So, that's great. user flow enters a topic interest. Wow,

it ex it read my mind. I wonder maybe it's because flashc card apps work off the same way. Um, and has a cool UI thing. I'm not much of a UI guy, so I don't really care. Data structure, though. I do care about this. So, let's

see. A topic, question answer. Okay, that looks good to me. Topic structure

looks good and it has a plan here. Okay. Like this is all reasonable and that's sounds good. So let's just Yeah, let's just go for it. So what if I just

tell it, okay, I want you to first do everything you just said, but only the UI things. And it's probably not going to Let's see what it does. I might have to hit stop.

So it wants Tailwind CSS and React Router for navigation. Okay, sure. I'm interested to see if it gets this Tailwind CSS thing right. Oh, let's try installing a different

approach. Okay, sure. Uh oh. Are we in a loop? Let's see what's this mpm error.

So if I run this from my own terminal is that even a command, right? Like so did it did it hallucinate this command? Is this a command? Right? So now I'm in this point where I got to go look up tailwind CSS and like how do I

in it? Okay, so this is what you're supposed to do. Let's see if it actually is going to get itself out of this situation. So, what did it do? It created a config

file. It created this index CSS. Okay, sure. And now it wants to make some assets and pages. Okay, let's just keep

vibing. Um, I'm getting some code smells right now, but nothing we can't recover from. So, I'm just going to accept stuff. Um, yeah. And it's also possible, you know,

depending on the version of, you know, Tailwind, it's, you know, it's familiar with, it's very possible that it's trying to do something that maybe worked at one point, but it doesn't work anymore or it's using old docs because that's what it was trained on. Look, our all our CSS went away. No.

Yeah. The other thing would be to ask it to go out to the Tailwind website first and research how to install Tailwind. Yeah. So, this is what I'll do after it. We got lint errors. You know, things

are happening like it's doing a lot of things mediocrely. You know what I mean? Um, it's already doing the homepage.

So, I'm just going to let it I'm going to let it keep going and then I'm going to course correct. Let's because I want to see what it's what is this what is it working on right now. Yeah, in in the chat someone said the stop button is your friend.

I know it is my friend, but I I'm just curious, you know. I'm just curious. Yeah. And then someone said, you know, I've had the issue. Most of the models

are using Tailwind 3 by default. You have to tell them to use four, you know. Yeah. So, it is a version again. This is

why Tailwind should probably have just, you know, server MCP docs. Okay. So, now it's getting back to the app.jsx. Okay. Also, it wrote everything in JSX,

dude. Oh, we have a new app. It looks like crap, but that's okay.

We're going to do two two things after this once once it's done. Hopefully, it's done soon. Oh my god. Isn't it just wild that you can

just like I like we've been like in this loop for like maybe 3 minutes or something and it's still going. I do want to hit the stop button. I really do. But I just want to see it keep going.

Um after this maybe I just want to see can it course correct itself. The answer is probably no. Oh now let's fix tailwind. Is this

even correct? Okay. Okay. And it didn't restart the

terminal for me. Okay, so let's do a couple things before before we restart it. Um, I'm pretty sure you hallucinated, Tailwind, you doofus. Um, what's the I I don't want to be too

mean to it in public because I would say other things in private right now. Um, knowledge is power, bro. Knowledge is power, bro.

read this and shape up your life. Yeah, Obby, if Skynet's coming, you're you're in his top you're top list. So, it always agrees with you, too. You're absolutely right. You know, it it always agrees with you. It's the

best. It's the best working relationship. So, now it's going to go read and see. Oh, now I'm absolutely right again. Wow, I'm so right. Um,

okay. Let's Let's see. And if you do have questions or if you have other suggestions that you think would be useful to share, please use the chat. You know, the odds of this this thing's probably going to go over the next 15 minutes. We'll just see how far we can get. But if you ask questions,

I'll I'll stop and try to answer some if I can or or Abby can. You know, obviously you we're helping each other out, too. So, feel free to jump in and answer questions in the chat if they do come in.

I think that's what this is one of the interesting things is seeing it's kind of interesting just to see how people do uh things differently because of course I would probably be doing things slightly differently I'm sure you would as well but it is interesting to see what works for people as we've kind of learned you know the way I write code today is way different than two years

ago I imagine for you all it's the same there's one benefit of this approach like I have a basic understanding of a react. Let's say it's also trying to do this init command again. Oh my god, it's going to fail. Okay, so once again, continued issues.

Okay, we should probably stop, but I'm going to give it one more chance. Um, this is interest. This is pretty. Okay, now it's literally No, we're stopping. Okay, so this is interesting because

like to use all these libraries like Tailwind and stuff may be trivial for some developers, right? But as you can see there is a bunch of configuration you have to do. Imagine without an LLM assistance you would have to discover these things like you know we started 15 minutes ago. I mean like we got pretty far um especially if you don't know what

you're doing. Um, but it's these type of issues where it goes into loops that really like uh stunt the growth of if of what you're trying to do, right? So, let's actually go read some docs real quick. Um, I think we did this

already. Yeah. and just grab this, which is what we already have. So, that's

good. This CSS thing. All right, let's do it.

Um, index.css. That's already here. Okay, sure. And I mean, it's complaining about

the post CSS, but I really kind of want to understand So like we hallucinated post CSS in the first place, right? Like or did we like when did this this came in through this came in through the vibe code here? But do we have to use it? Um,

also let's look at the air. Also, if anyone knows in the chat, help me out, too. It looks like you're trying to use Tailwind CSS as a post CSS plugin. Um, sure. Let's just do this, which I

thought it did install. Oops, not that. Oh, you can't. Okay. Uh, George dropped

uh something for your config in the chat. If that doesn't work, pick a look up real quick. Oh, okay. But you probably I'm assuming you still need to install that plugin.

Yeah. Tailwind CSS post CSS. Where do I put this plugin? You got to drop it into your Tailwind

config, I think. Uh in here. Yeah.

Okay, I need this comment too. Oops. I guess so.

A bunch of backend engineers doing front end engineering. Seriously, dude. I don't know. Okay,

let's just see if it works. Um, yeah, let some kind of type error export error. It looks like vibe coding post CSS. Yeah, I might

post CSS config.mjs. Do I even need this though? That's the question. Can I just

remove this or should we just roll with bad UI for now? Because that's what I would do. Um, let me just remove this. Does this change anything?

For the sake of everyone, you got to maybe do a default export instead. Maybe that's a JS file, so Oh, that should be fine, actually. Um, that's cool. This is what happens. Um, let's

run dev ourselves, too. Whoa, dude. This thing how this is what it looked like the whole time. What are we doing, dude? Oh my

god, I'm so frustrated. Okay, this looks pretty sick, dude. Okay. Wow. Okay. Um, let's

create flashc cards. Okay, let's just test this. Um, yeah, Lionol Messi sounds good. We didn't add any. Okay. Wow. I'm pretty impressed

because this was hiding from us for the last two minutes. So, um, that's great. Let's just keep going then. Okay. Oh,

it's here now, too. fun. Okay. Um, now let's do some Monster

stuff if we can. I don't know if we have time because we got hit with this freaking CSS issue. God, CSS sucks, dude. Um, I want to add MRA to this project in source

MRA, which is also vague, but I do have you have the doc server, right? Doc server. So, it's going to start reading getting started. Says it's not able to

find that for some reason. Weird. Oh, I think I have an old version of the doc server. Oh, it's a was a looks like it was able to find the other ones. Yeah, I found a

quick start source agents. Let's do it. Okay, we're going to install all that. I'm cool with

it. Very nice. Okay, dude. It's making the agent as

well. Holy snap, dude. The power of the doc server. Like imagine if I had the Tailwind doc server. I would not have gone through

that pain. So if you're using open source projects, y'all, you should tell your maintainers. Like because look how honestly I know we created this but like to see it live in this live demo coding thing that it just made the flash card agent that's sick. Also it made a workflow too which I don't know what

we're going to use this for yet but now that it's there I can like look at it and like kind of learn what it did. So that's awesome. Yeah, someone else mentioned or maybe multiple people mentioned this thing context 7 which is kind of cool. Looks like there's a whole bunch of different, you know, documentation that you can use with your for a whole bunch of open source

projects. So maybe something like that would have helped us a little sooner to get through this initial Tailwind loop. Yeah. So let's see what it did. So it's this is not going to work because it's calling it's calling MRA like on the

client side. So what I can do now is like actually MRA is a server only library. Isn't there a client SDK or something? Because I'm

running a client only MRA client SDK. I mean, and I'm absolutely right, dude. That's the best part. I am absolutely right. I'm not just right. I'm absolutely right. Okay, install it.

And I'll like we'll go through one more loop. I think you all know where this is heading, right? Like it's going to work um surprisingly. Um which I'm very happy about. And so like the app was pretty

far in 30 minutes, you know. Yeah. Maybe we can maybe we you know if you spend another 10 minutes we can we'll we'll we'll add this to GitHub and share it with everybody. So if they want to see where we where we got And now go ahead.

Yeah, now it's integrating the client SDK as it should. Well, Obby, now you know what I'm going to ask. We just you spend another half hour. We'll get this up as a master example. You know much.

Yeah, I'll uh you keep going. You want you want to stop screen share and I'll just do a few roundup slides and maybe if we do have any last minute questions, we can try to answer those as well. All right. Well, thanks everyone for going on, you know, going on that journey. Anytime you do live demos, you

never know what, especially with with this, right? It's even less controlled because we don't get to choose what, you know, what the model decides. But that's kind of part of this whole thing, right? This whole uh the way we write code now

is is a little bit different. And so, we're all learning. Hopefully, you enjoyed this. Please, you know, provide

some feedback. You'll get the recording of this after the event. You'll get uh we'll we'll link to the slides. We'll

send a link to the repo once we get it pushed up wherever the end state is, you know, pretty soon here. If you haven't already, please give MRA star on Git GitHub. We'd appreciate that. We also

have MRA cloud platform. We currently, you know, just have a wait list, but it's in beta. Some links to connect with us or to learn more about MRA. Join our Discord if you want to chat about building AI agents and AI applications.

And we have future events. This one's a little different. We tried to make it more just fun. A lot of them, a lot of the stuff we do is around how to build

workflows with MRAA or how to build agents with MRAA, things like that. We do have a lot of those events coming up as well. So, with that, if you do have any questions, definitely uh let us know. And just appreciate you all coming out. Yeah, thanks for bearing with us.

Thanks, Leds. Yeah, thank you. Also, uh, thanks for helping out all the time on Discord, too. Very helpful. Thanks, guys. Yeah. Yeah, for sure.