Demo: Vibe coding a command line Markdown viewer with the Gemini CLI

Key Takeaways

What should we build? Actually, we'll do um like a markdown formatter. MD uh we'll call it viewer. MD viewer UI is pretty straightforward, but you know, if we want to do something there that it'll still increase the build times and things like that because like I'm on a Mac and so then we'd use the command line for um Xcode and all that works. I've I've done various things there. It just like increases the the amount of time. >> Yeah, I know. I know. Yeah. >> So, I'll just start I'll start launching Gemini. I have a version from source so I have a little bit more info coming on. Uh you can see I have a lot of MCP servers. I'm not really using any of those for this. Um but we'll start with uh this. It can be very plain English like I want to build a um command line markdown viewer. Um it should I'll pageate long markdown files. um have some syntax highlighting. Um and I'll I'll say uh does not include any editing editing features. >> I'll just start here. And then one thing I always do with all of these kinds of tools is I say um you know just to start with I'll see what it comes up with. So, I'll say, "Write me a user guide." Um, and save it to user guide. Um, and then I'll say, um, and I use a cap stuff I really care about. I'll say wait for my review. Uh, don't write any code yet. you don't usually have to do this, but I I just got in the habit of doing it all the time. >> And so now it just, you know, it's gonna it's gonna think about what I gave it, which was very high level, and you know, in in a more real example, I probably have more there that I I put um but then we can just start and see what it comes up with. Sometimes I do this just to kind of see what ideas it has. And so here I, you know, uh like the Gemini CLI always lets you decide um how to use tools, whether to authorize them, you know, once or always during the session. So I'll just say uh for the session no problem. And so now it created this user guide in the Gemini CLI. I can just hit exclamation point and then run a bash command. So I love zed which is an editor. And so we'll open up zed. I will um share zed now. So you can see all we have right now is the user guide. Okay. So it's going to say MD view the file path. It thinks it's simple and elegant. I like that as features. Renders the markdown. Okay. I like that. Spacebar. Go to the next page. page up, go to the previous page. Q to quit. Okay, that's all seems pretty nice. I could modify this in some way. Um, for instance, I could say, let's not call it MD view. Let's call it, you know, um, MD viewer or something like that. So then I'll go back to, um, the terminal. Uh, I will now, um, say, okay, I like this user guide. Uh, let's build a technical design. So I'll say, you know, let's build a technical design for MD view. Uh, and here I could s ask it what programming languages to use. So, let's uh let's do that. Let's say um what language do you suggest we use? And I usually I almost always ask for options. So, I'll say give me three options and your final recommendation. Um uh and after I tell you we'll write the technical design. So let's see what it comes up with. And it's probably going to say like go typescript python maybe um rust. We'll see what it comes up with. And often times it'll you know think about this and think about it from like hey what's what's available. So here we can see okay Python because you think things you got like things like rich and pigments uh go is nice the glamour library is really I love the glamour library um and for instance it says hey you know what it's not as flexible as rich from the python world which is nice rust be you know obviously be very fast and performant um and you know there are crates for it but you know it's a bit much and so it says let's do let's do Python I say okay Python it is uh Let's uh author a technical design and save it to arch.md uh uh I'll say like here I'll say be very detailed just you know to reinforce that and then because I'm like a little paranoid about this wait for my review wait for my review before coding I just really like to say those things and you don't really have to but I'm just you know >> I understand I do that often. too because sometimes it start it kicks off before I meant does it. Yeah. >> Yeah. It's eager and and I you know tools and it's you know it's fine. I I like I'd rather just like with someone who I work with I'd rather them be eager and and want to get right to it than >> sure >> uh have to prompt them and push them to do that kind of thing. >> And so now we'll go back to to Zed. >> Yeah. I I do the same with the be verbose or be detail or because you know >> and you you can kind of like you know you can go into a lot of detail with that right or you can be very explicit even about what things you want to be very detailed on okay so we can see here it's going to use Python it's going to use rich it's going to use arg parse that's great gives us the file structure gives us the which components to use and how they're going to work uh you know logic flow it's kind of giving us all these things you know what goes into requirements. Um, this is fine. I, you know, in a more real example, even in the Vibe world, I'd probably have it go into even more detail, but, uh, you know, for for time sake, we'll we'll stick to that. And then I will go back to the terminal. And this is the other thing I do. And again, there's like MCPs that help with this and whatnot, but it's good to understand like the basic flow. Looks good. Now, let's create a detailed task plan. and save it to save it to plan.mmd. And you know, call these whatever you want. I just like arch and plan. That's generally what I use. Um include in the plan.md some workflow. Um general I'll say general workflow flow. Uh let's see update plan. MD when each task is completed with implementation notes and I do this for instance because you know I don't the session itself uh with the Gemini C line will include we'll kind of build up with everything it's done but what if I like close it out and want to come back to it another day. I want as much continuity as possible with what it's done. So, I'll have it uh you know um update arch.mmd with any um design changes etc. Um and then um I will review and then we'll start. Okay, so now it's going to create a a task one and you know this is often where there's a lot of great MCPS for this uh like shrimp and things like that. Um, but I almost always do this explicitly because I want just a a really great record of everything done. And here we can see it's uh going through uh we can says we can review it. So we'll go back to zed and so we have plan MD. Okay, so it has some stuff up up up top, you know, follow the plan, update things, so on and so forth. Um, you notice it'll pause for my review and approval. Um, great. And then number one, you know, the scaffolding, the viewer class, the executable script, so on and so forth. And then, you know, it has a section for implementation notes. Great. So now we'll go back to the terminal. Let's do step one. And you see I'm kind of enthusiastic with it. By the way, one thing that's really fun, and we'll do that, uh, I'll show you in a second here, is oftentimes I ask, um, the AI to talk to me in in more, um, uh, colloquial ways. >> So, just real fast here, you can see, okay, so it did some scaffolding. So, I'll just do ls right within the the browser or sorry, the the terminal. And you can see it's created setup pi, viewer pi, and so forth just like it said it would. Um, which is great. And so before it actually goes, I'll actually ask it to talk to me more collocally. So I'll say uh from here on out um address me as we'll say Kbro and um use puns um uh liberally if you just want to make your your uh life a little bit more fun. And so, >> oh, that's a good advice, right? It it becomes really more fun, >> right? Okay. So, I can say, "All right, Kro, consider it done. I'll make sure my responses are of the highest quality." >> A I wish I could do it with like C++ compilers when they give me those errors that I can barely parse myself then. Okay. >> And even like I love this like we're using the rich library. It says it's time to make this code look rich. So, it's going to save this in the Gemini memory for me. and I'll say yes. Um, which is really nice. And now it's going to move on to task two and that I'll find remarkable. Uh, which is just hilarious. Uh, and here, of course, for instance, you know, sometimes these AI agents will not find a uh will have a problem the first time trying to um edit a file. So, it'll just go fix that real fast. And there we go. Um, and then we're ready to move on. So, yeah. Shall I get that started, Kro? Well, let's first off, let's just look at um one thing I want to show you is what it's done to the implementation file or the plan file. And here you can see it gave a little checkbox next to task one. It gave a little check box next to task two. >> And in the implementation notes, it's it said what it did u which is really nice. We can actually exit again and we could tell it start with the next task, you know, review the plan, review the architecture, so on and so forth, which is really nice. I love it because I I know I use those save chat with a tag things like when I want to preserve the conversation with with like Gemini CLA itself. >> But I love love the fact that you also actually preserve this whole flow in in the project structure. >> I want it all there so I I don't have to worry about um saving the chat and I can go to another computer then right >> I can bring it down and I I can't do that as easily. Right. Um, now for instance, you notice it included the Gemini MD file that it edited to talk to me, call me Cabbra and use puns. >> That also is something I can float around. But that kind of thing is different than like my project architecture, right? >> Yeah, true. >> I can say um go for it and it'll start doing text task three and uh you know it's and we kind of keep going this way. Um I don't know what we have for time, but we have uh let's see how many tasks were there. There were five altogether. Um, so we're on three. That's about done. I think we have time for all five. Uh, let's just keep going. Let's just say, yeah. >> Yeah, I think we're good. >> And it'll be interesting to see if it even works, right? Um, because, you know, the first time it might not. And I I'm kind of hoping it doesn't so I can show you some um some ways to do like error handling. Error handling um like deal with like you vibe something out and doesn't work and all those kinds of things. Um, okay. So, now it's done with that. Uh, am I ready to see it all come together? Um, it's asking about step five. I'll say yes. Uh, and we'll, you know, this is the final stage. >> I'm so curious. >> Drum roll. And there's some things it didn't do, right? Like, uh, you know, it it hasn't set up a a virtual end or anything like that. Um, so, you know, we'll see whether or not that causes some problems, for instance. And so it wants to do um turn MD view into a executable. And now it wants to try this out and execute it. I actually I generally don't have the CLI execute uh in line. And so instead of doing that, I'll just take this command here and I'll open up a new terminal window. Okay, cool. So I'll paste that in. MD view test.md. Let's see if it can break. Oh no, it didn't break. It worked. Um, so you can see here's bold text, italics text, inline code. Um, you know, I can I'm using the arrow keys to go back and forth. I'm hitting space to see all that work. You know that. And so all that just like that. Just like that. >> Just like that. An example of vibe coding something.