How I Quick Plan Vibe Code Projects from Scratch (copy this to save time)

Hey, I'm Parker Rex. I led technology for a startup that sold for 23 million bucks. After that, I tried my hand at building Airbnb for music. I don't recommend it, but it lit a fire underneath me to learn programming full-time. So, I did that for a while and then Chat GPT came along, changed everything. I turned away all opportunities to go all in on AI, learning how to leverage it across business, media, and coding. On this channel, I do a daily update. That's what this is. There is another channel called the main channel that is starting to pop off. But the way that these videos go is we do five questions, five pieces of news that are relevant. And then the evergreen section is strategy. So for me, it's planning a website today. So the title of the video is planning a new build from scratch. Something along those lines because we've got a lot of interesting things coming down the pipeline. So, on the question side, I put out a video on my main channel and we got 200 subscribers in a day, which is cool. And you see these little fireworks. It's awesome. But we got a couple of questions around. In this video, I went through my cursor setup. And it's not just a couple settings. It's all about the different tools and tactics that you can use. Text expanders, doc groing, which is the ability to turn any URL into a one pager. It's awesome for context. Got a lot of requests for the doc rocker. This goes into the build that we're going to be planning. So, make sure you watch till the end to understand how I'm approaching that because it's going to be a very high quality website very quickly. Same same sitdown, same session turnaround. So, you want that stick around. The PRD is something I released. People are excited about that. Someone asked, can I use task manager or task master is what it's called through open routers API instead of enthropic? Not yet, but it is coming. There's a PR out for it. What do you think of convex versus superbase? I think that superbase is more featurerich and only because well they might they might be equal in terms of like numbers of features but I like stuff that's based on primitives proven software that you're not dependent on if something changes. Superbase is based on Postgress. It's been around forever. It has tons of optionality and you know how to use it. I love that. I think it's great. They have other things obviously but convex from my understanding of it which is small I use it in a hackathon it's putting a lot of the work that I think is worth learning onto convex and so it feels a little training wheelsy to me but that's all what kind of psychopath has his cursor in light mode me. I'm that psychopath. I have a floor to ceiling window next to me, so dark mode's not possible. It just doesn't work. But as Shad Cienne uses it, it's good by me. You lost me at text expander at F1. Okay, sorry, bud. Learn how to use those. And let's see. I would love a mini guide on how to use NIP and cursor. NIP is it kills code that's dead. You should check it out. But if you just type in nip.js, JS. It declutters your projects by going through and finding areas that are not being helpful for you. So, it's able to basically find dead code and it's really helpful. I think that was five. If you guys have questions, please leave them below. If you want something on NIP, definitely leave a comment or otherwise, I don't know if I'll be making a video on that because there's there's not too much of an audience for it. On to the news. So, some good stuff came out. A couple things. First off, I have to just call us out. The founder of Taskmaster is in our Discord now, which is really cool. That's starting to pop off, which I'm excited about. We've got a lot of people that joined our community yesterday, so I'm really pumped on that. And he's actually in the channel answering questions for people. So, that's awesome. And he's been really, really helpful. If you haven't heard of Taskmaster, you can also check that video out on my main channel. Just take the letters for daily off of my account. Just go to Parker X. Next up is V0. If you're not familiar, it is my favorite UI, call it a training wheel sort of app just for quickly prototyping things. You can just jump in and quickly make things. And it's trained on Nex.js. It's trained on shad CN. If you're not familiar, Nex.js bought out Shad CN, which is the most popular component library. Totally customizable. It's not even a library really. It's a collection of primitives built on a set of other primitives. So, it's radex wrapper. But this is coming to Vzero. will be really helpful because there are areas in projects I find myself running into that need this where I'm debugging something and the nature of Nex.js JS. One of the memes around it is that they change so many things and there's so many pieces of jargon that you need to know like PPR, ISR, SSR, SSG, and a lot of these acronyms exist in other areas, right? Those aren't new things at least besides PPR. But it does cause issues because they update so often that the LLM won't know it. And if LM's don't know it, that means that you don't know it because you're asking the LLM. So it's just tough to keep up with all the changes. So having v0ero as an option, even if you're a great developer, even if you just know like most of things, it's really really nice for debugging Nex.js specific things. Not a big deal if you're an Astro or if you're using Vit and Tansteart, which is what I'm actually looking at. So that's coming out soon. Next is this Google protocol. So similar to MCP which allowed any developer to build a connector between an L and an app that doesn't have LLM capabilities. This Google protocol is their attempt at going after the enterprises and it does not replace the MCP. It actually augments it. It makes it better. So let's just read through this. They launched a new internet protocol. It's called A2A, which is agent to agent. And because of their distribution and the scale that they operate at, they're one of the largest cloud providers, they're number three, but they just because of the scale of the company, they have infinite connection, meaning that they have partners including Salesforce, Atlassian, and SAP. If MCP came along and said, "Hey, will you use this thing?" and they try to go bottoms up, which I've explained in a previous video of the way to approach sales and companies. Bottoms up would be something like Figma, where you're selling in to the individual designer and then they start to share it with all of the people on their team. That wouldn't really work for something like this at a Salesforce because agentto agent stuff is core workflows. It is automation. It is a set of tools. An agent is just a set of tools associated with an AI that can go autonomously. An agentic workflow is very different. I always say start with agentic workflows and then work on them so much that they get so good that you have the confidence to then make them agents when they're around critical tasks. You can do small agents, sure, but it designed to let agents collaborate across companies, platforms, and clouds. This is what it means for the enterprise. They're everywhere, but they don't speak the same language. It changes open protocol that lets agents interoperate across vendors, systems, and tools. It's built with 50 enterprise. Yep. Cool. So, it standardizes how they talk to one another, not just an agent or an LLM talking to another app. That'd be more so MCP. I think that's the biggest difference is this is agent to agent. So, Salesforce is going to have its own agents. And for there to be a protocol that bridges the gap between the way one agent works and another is really nice. So it enables real-time collab. It supports memory memoryless agents, multimodal UI. So that means images, videos, text and longunning workflows. So a longunning workflow would be something that needs to be open for a long time. It's not going to work on versell basically. It's a long-standing connection that could take time, could be dependent on something, and it optimizes for data. It uses key primitives like agent cards, tasks, and artifacts, which are goal- driven execution, UX negotiation. Very cool. And it's genius design. So, this these are all just details. I just wanted to kind of highlight how it works. But basically, in this use case, recruiter agent books interviews via a scheduling agent. Very nice. you know that things are mostly multi-agogentic. Like if I go to perplexity and I type in what is a grand slam in golf? Sure, that's the first one. So when these things show up, there's not just one agent that's doing all of them. There's an agent that goes and gets rel related links. There's an agent that does this summary. There's an agent that does the related tasks or the related searches below it. There's an agent that does the rewrite. If I click on rewrite, it's going to have a different agent that handles a different or sorry, a different model that handles the prop for that summarizer, that rewriter. So, there's always different things that are going on behind the scenes. It's not just one. And that's just important to to remember as you're as you're kind of learning and navigating this space. Up next is this up-to-date docs. I think this is something that I'm going to be testing out today, which it's called Quilipy. And the problem that it solves for is the knowledge bases that you have. So if I open up cursor, let's make this bigger for you guys. When I open up cursor, there's a couple ways you can get docs into your project, but it doesn't work that well. So the standard one that everyone does is they open up their cursor settings and they go into features and they scroll down and then they add a document. But you'll notice that they sometimes fail and then a lot of the times based on how large the knowledge base is, it's not going to be all that helpful. Like this is the only 13 pages, so it's pretty decent. But I actually prefer to use what's called a doc gro agent or a doc gro workflow that just takes in one singular URL and then turns it into a nice one pager with examples of the methods and kind of the usage as well as anything that you would actually need. It just optimizes for that one thing. And it turns out that that's a lot better to go specific, go narrow. So, this is kind of a trick where it's really cool and it I'm sure it will get better over time, but for instance, like the Google calendar one, not so great. It's just too large. But what what Quillipy or what is it called again? Sorry. Yeah, Quilip is is going to solve or attempting to solve is just that problem where it's an API that you'd integrate with and it would allow you to have an MCP as well such that anytime you need documentation, it's already up to date and it's always going to be up to date. And that's a big problem because LLMs are trained on old information. So augmenting it with new stuff is great. So if I went in here, you can see that it was last indexed five days ago, which isn't great. That's actually kind of disappointing. No offense. Something could have changed on Monday. This one was changed yesterday. That's cool. But you can see that they have support for things you can do. Let's see. Add documentation. Yeah. I don't know actually as I I I hope that it's good. I'm going to have to use it. I don't recommend it because I don't recommend things until I use them, but it does seem like a good idea. It's just basically going off the fact that a lot of the time things aren't going to be as upto-date as they could. So, at minimum, if you could just manually have it go and say, "Hey, we want to make sure that we have the latest stuff," then that's pretty good. But that's just something I wanted to call out. Next up is this awesome LLM course repo. This just has a lot of different resources in it and one that I found particularly interesting if you just go and like this are star awesome LLM and AIGC. It has a ton of different things in it around frameworks and one in particular was the ability to know if something is AI generated or not. There's a lot of examples in there and that would be something that you'd use if you're making content pipelines or aentic workflows for new content. Then you'd have that in part of the flow so that it can humanize things. It can call out, whoa, this clearly doesn't read like it's someone that it's human. It's just a massive collection of different things in there. The next one up that I found interesting was lm's text is something that I've talked about before, but this allows you to turn any website into one of those text files. If you go to superbase.com and you just do forlm.txt, txt. I've shown this before. It will just take whatever the reference SDK is and then turn it into this massive file that is optimized for LM readability and you put those in your projects and then you reference them. So there's a lot of ways that people are addressing this problem of outdated docs and that's one of them, the LMS.txt. So the idea again would be with this offering, you can essentially just drop that word in front of any URL. So let's give it a go. Let's go to back to Quilipy. Let's type in llmtxt dot. And it should not work. That's funny. Let's see. Maybe they need a bug reported. Drop that in front of any URL. That's tough for them. Doesn't even work on the demo. It's a good idea, but it didn't work. And the last one I had, let's see what this was. Something about node. Oh, yeah. So, this is just yet another It's so funny when you're in a new paradigm shift with the way that people are coding. A lot of people are trying to figure out the alpha. How do we get better documentation? How do we understand our code bases better? So, with code GBT, we traverse your entire repo with a knowledge graph. If you're familiar with knowledge graphs, you know that they look like a giant tree of nodes that connect to one another. You can also use a graph database to manually like this is how it's done. If you use Obsidian or Rome, then you've seen these. But the idea is that it captures relationships between classes, modules, and dependencies and allows us to generate robust accurate docs, which sounds nice, but again, you need to see it. So, I think we've seen this before with us trying to visualize the way that a codebase operates. So, you can just really target things. It's like a visual way of doing it, but at the same time, you can just do a search operator and you can just tag the files that you want to have context in. So, not sure that this will be a longstanding thing, but I just wanted to call that out as well. So, lastly, we're going to jump into some strategy. So, the next 15 minutes or so, let's plan out this website because we have so many people that want to learn more about what we're doing at Vibe withAI. They want to learn more about all these freebies that I'm giving out. So, naturally, we need to have a nice site for them to land on instead of me pasting a notion link back to everybody. I want to paste in ivibewithai.com and start driving traffic there. And I'm going to be building this on the main channel using Taskmaster. That video will go out most likely later today. So when I look at this, anytime I'm doing a new project, I try to think to myself, okay, what are the jobs to be done? What's the thing that people need to do on this website? And then I list those out. And then that informs me on the routes that need to exist. So the pages and then I do a process called the breadboard. Breadboarding is something done in electrical engineering or mechanical engineering where you basically like a breadboard would be the actual chip. So in that case like a breadboard would be a square and it's like oh we're going to take this thing and it's going to connect to that thing and there's the two chips. That's what breadboarding is. In our case with UI, it's really similar where you basically write out it's just a simple framework for thinking about how to do your different pages. I keep trying to use this new whiteboard, but apparently the space bar doesn't click. So, what I do is I'm thinking those jobs to be done. So, I know that people need to be able to copy and paste the different prompts that I have. So, we'll obviously have a homepage and then I draw a line underneath this. This is the breadboarding thing. And then underneath that, I'm going to write out what are the things that need they need to do on that page. So, they need to be able to copy a prompt, but I know that when I do a copy, I actually want to get their email so that I can reach out to them later. And that will be an anonymous signin. So it's not too annoying. And the prompt, the the modal, the dialogue that appears will be, hey, I know you're probably annoyed that I'm requiring you to give me an email, but guess what? You're going to get an account the second after you get this so that you never have to enter one again, and you have all of your save prompts in one spot. So when they click that, that's going to go to a dialogue. So I'll draw that. And then underneath this this will be input and anonymous sign on. Anonymous sign on is what you see when you go to a website and it has some of the time it's it's a Google thing on the top right hand side that just says continuous Parker that already knows that you are the person and it's just one click. So, it's not much to actually get done. It doesn't seem like it's uh it's not annoying for users and it's easy to get done rather. So, I know on the route that they need to be able to copy the prompts. I also know on the route that they need to learn about Vibe with AI. This is what the name of the website is. It's the name of the community that we're building the brand with AI. Cool. When they copy the prompt, I'm going to breadboard this, right? So I have the different routes and then when I have different jobs to be done within each I just draw a link to match what it's going to do. Right. Cool. So you can copy a prompt. You can learn about Vibe with AI. You can join Vibe with AAI v AI. So it's going to be a route and then that will go off to most likely just this school page for now. Yeah. So that would just go to trying to think if I should have a separate community. I I think that's better. I think having a separate page that I can explain the benefits. You have to question every requirement because what I'm wondering here is do I want to drive them directly to the community or not? I think I want to I think I want to drive them just directly to the school community. So this actually would not be a new page. So this is just an outward link, an external link away from the website rather than if I put a line underneath it, it would indicate that this is going to be a new route. So it's not that. So they need to be able to copy the prompt. They need to be able to learn about it. They need to be able to join the thing. And I think that might be it. Lastly, maybe you'd have an account page. So, oops. Still learning how to use Canva apparently. Yeah, I think an account page would be not required, but let's I I need to investigate what kind of work this would be because the whole point of them signing up was they'd have a profile and then on there be saved prompts. Cool. I think that makes sense. And that's really it is you'd have these three pages. So next, now that we know what we need to build, let's find out how we're going to build it. So I'm going to go to cursor directory. This is going to be the one that we are remodeling because this is a really popular one. You can see that the market has decided that it's good. This plugin is called similar web and it shows you the monthly active users. So they have 138 monthly visits. So clearly they're doing something right. And it' be something like this where on the site when I scroll over one if I hit this then you see copied to clipboard rather than copied to clipboard it would open that small dialogue. So I'm going to be using that as the basis for this project. So I'm going to open that project up and just kind of see how it's done. And then I also know I have another project that I made that's called Kitchen Pal and it has nothing to do with the concept or sorry the content of what's on the website but the formatting is similar. It has anonymous sign in. So I'd open up that. This is kind of the benefit of when you make projects I always frame them am I making this to learn or am I making this to try to make money and they're very different. I've done the one of trying to learn for so long because I didn't know how to code for a long time and you just have to do a lot of these projects. So, this is one of them. But, I'd be looking in here and I'd just type in email. So, I'd look and I'd see, okay, where, you know, I haven't touched this project in a while. Is there something in here that shows me? Oh, off dialogue. Cool. So, I can come in here and I know now that I have this code snippet. That's kind of the benefit of when you build a lot of stuff is you have old stuff you can use. I haven't touched this in 3 months, but I can see this is the exact one that I want and I know what this looks like. It's coming back to me. When I go and I try to do something, I try to share a recipe or take action on stuff beyond the first, you know, layer of functionality. In this case, it was saving recipes. I can go and I can save one recipe. If I want to save a second one, that's when it says, "Oh, hey, you should save an account." And then it has a bunch of the benefits in here like oh never lose a recipe autogenerate these recipes from you know lists generate your meal plans generate your go your grocery list all those things so I'd be taking this off dialogue which has the pieces behind the scenes for the database and I have superbase in here I can see what the types look like in this case obviously I don't care about grocery items but it open up outline a lot of people don't use this and then I can just quickly kind of see like where things are in here. I can see, oh, like we have table for grocery items. I'd be looking in and I'd be trying to find the user. So, yeah, it's just a really simple user. Looks like it just has three fields on it, right? And then second, I'd be opening up the curs directory project, which I think I have on here, but let me just check. And I'd be just trying to find the pieces in there. So, that's how I'd start this. I'm going to go build this on the main channel. And I already have looked at this ahead of time, but that's kind of the high level of how I approach different projects. I save a whole lot of time by leveraging existing things that I've built, identifying the patterns in them, and then bringing them together and remixing them. I highly recommend you do the same. If you're earlier in your journey with programming, definitely try to learn from open source projects. If you want any of the links to these projects, like the kitchen pal, then you can drop the word kitchen pal below and I'll actually host a lot of the projects on iviwithai.com. I can actually now go and add something to the breadboard. And then as always, I have to ask you to like and subscribe because it means a lot to me. It helps out the channel. And if you want to learn more about the community, all the awesome stuff that we're doing, then you can go into the link below and check it out. A lot of good stuff's happening already. All right. Awesome. Enjoy the rest of your day. See