Claude Code - In the Browser

Key Takeaways

Hey, good morning guys. This is Ramon Williams from the AI Standard. Thanks for joining me today. I wanted to go live because um well, frankly, I just wanted to talk about what I've been doing. Uh, one of the cool things that I've learned um, since using Claude Code was that Claude is uh, not only a phenomenal tool uh, super intelligent tool, but it's in integrated with so many different things and the integrations that are possible and uh, that you're able to do with Claude is amazing. Uh so one of the things that I love uh that me and my team practice uh is to just model success. You know if there is something that other people are doing [clears throat] that have created success for them, why not model it? Why try to reinvent the wheel when you're already at at a disadvantage when you're trying to push the envelope forward uh in terms of your idea, in terms of whatever you're innovating, whatever [clears throat] you're creating that is changing how people think, how people interact uh with technology or in the marketplace or uh making them rethink decisions. uh it's already difficult enough to try to push people in that direction. How do you give them something that makes it easier? Uh and one of the best tools to me uh are that's that's out there is uh Claude Code. I love Claude Code. I I use it pretty much every single day. Uh one of the things that I've noticed about Claude Code uh is that you can now use it in the browser and you can also use it from your phone. So, there are vibe coding apps that you can build an app from your phone. Uh, I've used at least two of them so far. Uh, the best one that I've used is the Vibe Code app um by Riley. Uh, that one is actually pretty good. I actually was able to build an app uh from there. nothing that I was able to publish, but I was able to at least produce something that I believe used a couple APIs uh from Google uh and chat GPT and was able to make something that that seemed like it could be useful. Um and so yeah, so I I just wanted to share that uh Claude Code now also works from your phone. Uh, so you can actually pull up a repository that you may have been working on. Uh, and one of my things, uh, I get a little obsessed with building. Uh, if I am in the middle of building something and I have to start moving, I can actually send in a prompt while I'm on the go. I know what my next prompt usually is, and I usually have them laid out and structured, and I can usually send my next prompt out while I'm on the go. I can see it get uh finished and completed from my phone and then I can send in the next prompt for the next job to go in and uh complete the next task. Uh codeex from Chad GBT which I did not enjoy the first time it came out. I didn't enjoy that experience. Uh is actually pretty amazing now. Uh I I actually really enjoy it. Uh, so I actually built a web app uh not too long ago and I built it all with codeex uh and I want to see if I can pull it up. Uh I think I have it over here. But yeah, I I built a um I built a web app with codeex uh that I want to potentially turn into a mobile app. And what I'll do is I will share my screen. >> [snorts] >> So this is the web app that I built with codeex. So I'm just putting it in the mobile view so that you can kind of see how it feels. I don't really love how this looks up here at the top. Uh and I I'd say it took me it took me about a day to build this. Uh so I am a Christian. Um but one one of the things that I wanted to do was uh just create a walking app. Uh so I used to be a part of uh and I still am a part of this uh movement ministry that I used to do every morning and I was inspired to make this app just based off of our interactions uh in that ministry. And every day we walked there was no real agenda. We just walked, we prayed and we did it, you know, to open our days. I figured why not make something that kind of reminded me of that. Uh I live in Michigan so it is cold right now. Uh I will say I'm I don't have the fortitude right now to walk early in the mornings in the dark and in the cold. Uh it feels uncomfortable. But at any rate, Walk his Journey is uh a walking app. It just talks about all the different places that Jesus walked. Uh, and so once you go in here, you start walking, uh, it allow it asks you to allow it to track you. And once you allow it, uh, it just keeps up with you as you go in your distance uh, in in whatever walking challenge that you're in. There's a live feed down here that gives you some insight on Jesus's journey on whatever whatever uh challenge that you're in. [clears throat and cough] So each one of these uh little blurbs here or cards here has a challenge that shares what Jesus's walk was like. So you have Nazareth to Bethlehem. This was not Jesus per se. This was Jesus where he was inside of Mary's womb. And this walk, I believe, was roughly 75 to 80 miles, right? So 75 miles is what we have here. Nazareth to Bethlehem. Uh it gives you some key scriptures in here. But as you walk, more details of this if you're in this inside of this challenge will will display uh as you walk. All right. Okay, I turned it off. Uh, it was very cool. I wish I recorded it while I was driving. Uh, it was pinging very fast uh across there. Uh, another thing that I added in here was uh a journal entry. Uh, so that after you're done walking or even while you're walking, you know, maybe you get some inspiration uh about anything, you know, inspiration about your faith, inspiration about, you know, a reflection to discuss and and jot down about your life. Uh you can come in here, you know, choose which whichever one was the one that you know you were walking in and just talk about life and you can talk about your faith walk. So this is uh something that I built in a day. I built it um on a day off and was just kind of inspired uh to build it. So, this was also a uh this was also a course that I taught to some children uh in my church. Uh and I really just enjoyed just the lesson just talking about Jesus and his movement throughout things. But, uh yeah, this was all built with codeex in a day. Um so, yeah. So, [snorts] um, this is this is pretty cool. So, if you ever want to check it out, walk his journey. I'll give you the walk his journey. And I deployed it through Versel. Walk his journey.app. And yeah, so that is Oh, they didn't show you my accounts. I wanted them to show you my accounts. That's interesting. That's cool. So, the I the way I was able to get it into mobile view was I turned the inector on. Um, but the only thing that they're showing you is the actual [cough and clears throat] walk walk with Jesus, walk his journey uh part of it, which is cool. Which is cool. So, you know, for anybody that's uh you know, out there that wants to build anything, uh you can literally build from your phone. Uh you can start a repository on GitHub. I don't believe that I don't believe that you can uh initialize a a GitHub repository from clawed code in the browser or from codeex. Uh honestly, it's just easier to initialize one on your own. Uh, and you don't have to do anything. You can just literally add a file uh an empty file to to initialize it or add a photo or just something something that's added to the repository. Uh, it doesn't have to be consequential or you know significant uh to the to the project. Uh just anything added to the repository uh essentially will initialize it. Uh once you do that, it's it's something that's live that you can easily connect with clawed code or codeex and you can easily pull it up uh inside of your workspace. So, I can show you another one where we have um let me see if I can pull it up. I want to be able to show you my claw code. clawed code inside of the terminal, [clears throat] but I I really want to show it to you from from mo what it feels like it could look like from mobile. Um, so yeah, let's let's do this. So I will share a different screen. And so this is what Claude Code uh looks like almost. Uh this is on my computer, but I have it in like a mobile view. Um [clears throat] so this is this is pretty much what it looks like. Uh and and I absolutely love this thing. It it's amazing. Uh, one thing that I don't like is that you are you're allowed to add an image here on the initial prompt, but if you were to go into enable notifications, of course, let me know when the job is done. If you were to go into here, you you there's no way to add a photo inside of here uh from the desktop. it it may be a slightly different from the phone but from the desktop you you can't do anything uh from here. So what I would encourage you to do uh is obviously stick the stay the course but put in your photos uh at the beginning uh the initial prompt I think from the phone you can do it uh but it's worth double checking it's worth checking out this uh DevOps visualizer uh repository this for a lot of you that uh have joined the AI standard uh and have downloaded some of my apps This is the app that I am looking to upgrade. It is the techstack app and it basically walks you through what a tech stack is uh for mobile apps uh for web apps and what it takes to build one up. And it just gives you the building blocks and gives you some understanding, allows you to ask questions or be asked questions, take quizzes, uh, to to play some games. I I built a few games inside of there. But what I'm doing with that particular app, and I'm working with the University of Michigan on doing this as well, is I'm looking to upgrade the UI UX, and I want to build a Dualingo style app. Uh, so I already built out some of the UI for it and how it looks and how it feels. Uh, and I've already enhanced a lot of the opening screens. Uh, if you if you will. Some of the main pages are revamped and reworked. Uh, and so this will be going out later this year or later next year. Uh, I'm I'm looking at probably later next year. uh once we get through this next semester of school. So, I'm I'm getting some support uh from U of M staff, faculty, uh and students to uh help me build out this educational tool. And I really want it to be fun. I [clears throat] want it to feel fun. I want it to be uh gamified in a way. Uh right now, it's more like a networking like, hey, let's talk about vibe coding app. uh and also just like an educational tool and I want to I want to take it a level up and I want to make it super fun, super addictive. Uh I'm excited about building it. I'm excited about seeing it be uh being in the market and uh I I want to be able to share with everyone like that when you're thinking about building with an AI code builder that you're not just thinking from the perspective of uh the AI does everything. And so that's why I built tech stack, that's why I built AI stack, and that's why I built the prompting uh guide book, which is not a really good name, but here we are. But the reason why I built them was so that you could have some type of working knowledge. Uh if you are serious about building and you do want to get to know more about what you're doing and how you're doing it, uh I want you to be able to uh go in go in give yourself some some type of experience and understanding, you know, and and make it more palatable when you're working and you see an error. when you're working and you see that the that Claude, that Codeex, that Gemini, that Kiki.dev, dev, which is one of my favorite app builders. Uh that if any of those were to make a decision on what type of uh what type of router system that he uses that you wouldn't you wouldn't feel like you had to just go with whatever it it said was the the routing system uh the router system that it was going to use, but that you would have an opinion about it. uh and and you can say I want you know I I want to have a routing system that's [clears throat] done uh in through expo router uh rather than uh React Native uh any any type of router that React Native would have uh and there are differences in how they look when you're inside of the repository and how they work. So uh it's it's important to know how things are laid out and then also how you can make changes you know how you make your app how you make your app interact uh with the user as as they interface with it [clears throat] and what's that experience like how can you create a seamless experience and how can you understand how your app is being built >> to recreate that experience what is actually happening and so that's that's where you want to have that insight and that knowledge for that. So let me see I'm going to share my screen now for another uh project. So Codeex inside of So Codeex feels a lot different uh inside of the browser than on the phone. Uh but it pretty much works the same way. So you you can come in, you can choose any repository uh that you have. Uh and once you choose your repository, you send in your prompt. Um and every time you create a new change for your repository, it creates a new branch for you. And uh in codeex uh there I I don't believe that there's a automated uh merge that will happen in claude code. Claude will push uh your changes to your your main branch for you. Uh so you would want to let Claude know that if you don't want these changes to be implemented right away that uh you can create a branch uh from Claude code. I want to show you one more uh app. And so that one you can literally use from your phone. Both of those you can use uh from your phone. >> [snorts] >> which I love. It makes it so convenient. Uh makes it um it it makes it fun. It makes it exciting. You know, if you're if you're anything like me and you like to stay busy, you like to stay uh going after it. Um yeah, it is uh it can be a lot of fun. So, I want to share with you guys uh one of my favorite favorite ultimate favorite tools and that is this guy here, Kiki.dev. Kiki.dev dev is by far my favorite app builder and and to be to be very specific this is a mobile app builder. You can build web apps from here. Uh you can build websites from here. It is best for a mobile app builder. And the reason why is the framework that it uses is React Native. React Native is best as a mobile app. Uh so as a native mobile app, something that you're going to uh push into the app stores, this is the place where you want to be is kiki.dev. Uh so it it has an environment that's suited for that. Codeex and claw do not have what Kiki.dev [clears throat] has in terms of making it a mobile experience environment. it it this is designed for mobile apps. Okay guys, uh one of the best things about Kiki though uh for me uh is how well they built it. So they built a really really strong um builder. This [clears throat] this context window here this this can this can parse through a lot of information and this was from the first time I used it which was almost a year ago now. it can it can take in a ton of information at once and do very very well. So, one thing that I can do uh as an example, I will use my I will use my prompt guide that I built out. [clears throat] I built my prompt guide out specifically for uh Kiki.dev. And what I would like to do is let's go [clears throat] let's come up with an idea real quick. I've been thinking about this idea and I don't mind sharing this idea with anyone. Uh because ideas are nothing without execution. So, I have an idea for a vending machine app, and the concept is still a little rough, but let's uh let's spitball a little bit. I have a vending machine app that I want to build and I'm thinking about it being similar to vending machines where it's something uh that you would need right away, something like quick, something in an area where you want to make, you know, uh an agile decision but not a full commitment, right? You get a snack but not a full meal, right? They do have pizza vending machines now, just FYI. They have coffee vending machines. They've got all kinds of vending. I think I seen a cotton candy vending machine the other day. Anyways, like beyond all those crazy new vending machines, vending machines are meant to be convenient in a place where you're probably not going to have food uh relatively soon or, you know, it's some like it's bridging the gap for you, right? So, I'm thinking about what kind of what kind of tools what kind of things could I build that could be like small things that bridge the gap for someone very quickly and I can also charge a smaller fee. So rather than paying a full subscription for something for $20 a month for in no shade, you know, for a QR code, I don't need to pay $40 a month for a QR code to be activated. I've I've been getting got I I've been getting got for the last like six months by a company. Not going to name any names, but QR code is in the name. Anyways, they have been getting me for keeping a QR code alive in this day and age where I can build my own QR code generator. Why am I paying them for this QR code? I don't need it. I don't need it. It's not a service that that is is super uh niche, right? It's not something that is like I need this to be done. I I literally built a QR code generator in five minutes, one prompt, and now I have something that rather than [clears throat] charging someone a $40 subscription, I can charge them a dollar one time, and they can do as many links as they want. So, every time you want to get another link with a QR code, whatever, you can literally just come to this little web app that I built and do it. So that's one idea, right? Vending [clears throat] machine uh uh vending machine, a vending machine for small, you know, oneoffs, but you get you do a small microtransaction, right? So let's So I'm using my uh prompting uh guide book app, which you can find in iOS. I didn't build it for uh Android uh users. I'm sorry. Uh the other two apps I did, but this particular one I did not build for Android, but it is on uh in the app stores, the Apple app stores, [clears throat] and it will give you a prompting guide um framework uh that will be substantial. And uh what I'm going to do is I'm going to take this idea and you know, in fact, let's use the microphone here cuz that's just so much easier. I love to type it. It feels good typing. It's almost like writing now. Um anyways, I like to build a vending machine app that uses um small web apps or small microervices within the vending machine. And I'd like to make it so that it has like a snap or parallax uh scrolling feature where the user can see all the different ser microservices that are available inside of the app. I want a very simple UI uh where the user just sees what are the services that are available. Something beautiful, something shiny like a vending machine. Uh, and I'd like the cards to have some type of like glass effect over them. And what I want to do is allow the user to choose their micro service, make a payment, receive whatever they're getting. And I'd like to make it feel a little animated, almost like they're at a vending machine. And let's build let's build this idea out with my prompt guide framework. for kiki.dev. So, the prompt guide framework app is primarily designed for kiki.dev. Um, but you can use it anywhere else, but I specifically built it for Kiki.dev. Uh, one thing that Kiki.dev has done is they partnered with a company called basic.te. And basic.te Tech is a cool company. There's some pretty cool guys. And [clears throat and cough] one thing that I love about basic.te uh is that uh it it is a it is your uh database that uses um a lot of the same a lot of the same things that you're you're accustomed to seeing uh from Superbase or uh from Firebase. Um, but with basic.te. Um, okay. Okay. I'm I'm just kind of seeing my prompt pop up. It's very important that when you're using AI that you read over what it gives you. It can come up with its own ideas. Sometimes they're great, sometimes they're not so great. At any rate, uh, basic.tech tech. Uh they have uh some aspirations to and I I don't think I can pull them up right now. Uh they have some aspirations to build out a technology for a database where the user where the user's data lives closer to wherever they are and with that the user owns the data. So the user has access to their data without having the there's no downtime in terms of uh like a Cloudflare outage that happened the other day. Uh this wouldn't happen with something like basic.tech if you're running something that is for you. Uh so basic.tech Tech works. Their their idea is to create a database system that is a personalized database for you and you own your database and anywhere that you go within their ecosystem. You can plug in, connect to it, authorize this app to have access to your information, whatever information they need that may be from another app. You know, if you're interacting with your, you know, let's say the Walk Your Journey app or Walk Jesus's Journey app and you have so many steps that you've done that day. Well, now you're in your weight loss tracker app and you need to know what was your physical activity for the day. And it can pull that information if you give it access, which they'll more than likely want to know. You give it access and it can pull that information for you. And so it can build a really you can build some really really cool things in terms of an ecosystem uh within basic.te. And um yeah, so I'm uh I'm super excited for what what that could be. What could that what could that be like? So I'm reading over my prompt for kiki.dev dev. Yeah, let's just do this for all of those who have. Okay, let's send it in. Okay. All right. So, this is the first prompt. And we're going to we're going to let kiki.dev go to work. And this UI is an upgraded UI. I used uh an original version of Kiki.dev. At least I think it was original. It was called Applesella at the time. I don't even think I'm saying it right. Forgive me, Henry, if I if I chopped that up. uh and and messed up any historical uh artifacts uh about Kiki.dev, but Kiki.dev is much easier to say. Uh but it was called Appella. I don't even I don't even remember what the the if it was.dev.app. I don't I don't even remember, but it was Applesella at the time. And it was green and black. And I thought it looked cool. I thought it looked cool, but I ended up uh bailing the first day. Uh I think I ran through my messages. I didn't feel like I got too far. And um for some odd reason, uh what's his name? Betto. My guy Betto. Shout out to Betto from uh Expo. If you guys are building mobile apps, you need to follow Expo. And uh I am biased to their creators over at Expo. Uh I actually only like Battle. Uh so he's uh he's amazing. So um yeah, he he taught me a lot uh about about building uh apps uh with Expo. And um so [clears throat] he mentioned them. He mentioned he mentioned Kiki.dev uh or Appella at the time. And uh I I knew about four or five of them at the time. And I successfully built my first app on bolt.new. Uh but my next three apps uh I built on Kiki and uh I I actually just built an app yesterday uh while building uh another web app uh that I'm I'm working on for my company. So I actually built two products yesterday. Uh, I'm looking to have the app that I built on Kiki yesterday, uh, out in the market soon. So, it's a Tik Tok style app and but it's not designed just for, you know, doom scrolling. It's designed to um, be a tool for a specific group of people. I don't want to I don't want to connect too many dots here. I want to surprise you when it comes up. But at any rate, um I built it on Kiki. Um and yeah, so Kiki again does a fantastic job. It it's not letting me scroll because it's it's it's demanding that I watch it work. But Kiki will take that entire this entire prompt this entire prompt and push it out. So yeah, so I love using Kiki. If you ever need help using Kiki, let me know or you can jump in the Discord. Um Henry is usually pretty pretty available. Um and um yeah, the team is great over there. So [cough and clears throat] yeah, you guys should uh check out kiki.dev and uh definitely definitely give it a shot. So, I do have see what time it is. It's 9:40 my time and I have I have a couple meetings that I have to jump into. So, I think I'm going to let this prompt finish and then once this prompt finishes, I will call it a wrap. [snorts] So, we have the read me being done right now. and okay so we're creating our main routing file [clears throat and cough] it's creating it's creating quite a bit and now it's fixing these screens uh the app tsx is your navigation file. It just made that and now it's updating everything. So the current view that we have here uh inside of Kiki, this is a mobile web browser view and which is different than a mobile app view. Just so you know, mobile web browser view is different than a mobile app view. Um, it can almost look the same, but it will definitely not work the same. So, yeah, this is important to note. There's a toggle up here at the top where you will choose mobile view. And this is where you need the Expo Go app. So download the Expo Go app and then you'll be able to scan this QR code and render your render your app directly from your phone which is exciting. Always exciting. So, they are checking for any errors right now to see what's going on. I'm excited to see what it produces after one prompt. It should generally create most of your main screens. And you want to as you build, you'll want to go into your detail screens and plan and work through a lot of your detail screens. Um, that is the next thing. So, I'll drop kiki.dev into the chat. And it's working mighty hard over there. We're getting our bang for our buck on this uh account. Uh this is a new account. Kiki [clears throat] gives you five messages uh up front. Um, I guess while this is working, while this is pending, I will show you give you a little tour of the place. So, one of the best features, one of the best features about Kiki, and I'm just going to start high level here because a lot of the other stuff becomes part for the course. But this is something that no one else has or no one else does as well as Kiki. Uh, and and I and I mean this. I mean, there are a lot of other good app builders out there, but this one in particular takes the cake. This this small feature, but there's a chat there's a chat thread here that you can control. And with this chat thread, you can essentially add new chats once you're working on new features, uh you're working on a new branch or whatever you you want to basically it allows you to have uh control of your environment and you don't want to um impact any of your work over here uh and any work that you're going to do next. And the important thing to think through on this is the context of this entire chat thread. It becomes overwhelming at a certain point for the AI to work with and it can lose itself. It can lose itself. So it's always important to start a new chat when whenever you're working on a new feature. This is looking like it's not working. So, I'm going to refresh the page. Let's see what it does after I refresh. Okay, I think it's stopped. Uh, looks like it stopped. The last edit block is incomplete. Can you finish it? Okay, let's see what it does. How's my experience? It's always fantastic. It's amazing. That's amazing. That was an amazing animation there. Wow. Um let us let us look at what we have. Okay. So there are some issues that they didn't have. I think the navigation was the last thing that I thought through. Uh I don't know if navigation was mentioned in this first prompt. uh it generally is not it has some logic on [cough] [clears throat] how it should be set up but it it doesn't necessarily have the full it doesn't have the full expressions. Okay, now I have my brother calling All right. Um, we have have a lot going on which is exciting. Which is exciting. All right. Vendy's stack is complete. The foundation is complete. Who is ready for Vendy Stack? Uh, sorry, basic. It does say superbase inside of there. Um, [clears throat] but let's see. Let's see if it uh let's see if it if it renders anything. Oh, no. Errors, errors, errors. Let's see. Um, if I refresh it. Uh, I'm curious to know if it pulls up from my phone. Let's see what it does, guys. If it pulls up from my phone, I will show it to you. It looks like it's loading up. Oh, no. Let's uh let it know. Uh okay. So So, it's asking for a key and I don't want to give any keys right now. Uh, mostly because I just want to see it. I don't want to um Yeah, I just want him to see it. [clears throat] Uh, let's go back to chat window. Yeah, let's just create a mock version. I don't want to actually set this up right now. This is for the people they asking more questions. I love my guys. I work with a great group of guys. Uh and that that's across all fronts. I I have um people that I work with in different businesses for different reasons. Uh even my wife um and everyone I work with is is great. um they all bring different energy and it's it's great to be around them. So, [clears throat and cough] excuse me, just being sentimental here. Uh it's good to have good people around you. So, yeah. So, we are pretty pretty close to this preview being ready. And it looks like while this code finalizes, voila. And we have we have life. Okay. This uh is not the best. Um I I will say uh I don't like emojis as my icon or as icons. Uh emojis as icons are not exciting. We'll say that much. But we can always work on that. So uh just so you guys know, I do have it pulled up on my phone. It looks exactly like this on my phone. Uh, and just to prove it to you, I will share my phone screen. Oh, you know what? I will share my phone screen. And it doesn't look bad there. But this is um let's see where we are expo. Oh, duh. Sorry, guys. I actually might have to refresh this this window. Let's do this. Let's try it one more time. One more time. Okay, it's not working. It's not working. All right. Well, you got a chance to see her. Um, as a matter of fact, let me see if I can pull it up real quick. Okay. I don't know why I didn't just pull up the first time. Huh. Interesting. [clears throat] Okay. Well, you guys get to see this vending machine has a premium link that you can buy. Uh, this swiping mode is no bueno on the mobile view, but I will show you from uh actually it doesn't work on my phone either. So, it's not it's not the mobile view. It it's it's actually the app itself right now. So, this is what [clears throat] Vendy Stack produced in the first prompt. Uh, you kind of get the idea. I think you get the idea. I don't really get the idea. Uh, it can be much better. Let's just put it that way. So, but it's exciting. You're on your way. You're on your way. So, guys, feel free to reach out to me. I'm very accessible. You can go to my website, astandard.app. Uh, and you can email me raonistander.app. Uh I am accepting uh new clients. I am a consultant for tech startup founders. Uh and I al founder of three startups uh myself. Uh if you guys have any questions, if you have any any concern to think about, talk to about uh in your business, in your work, uh in in your tech, in your uh in whatever you're doing, I'm here. Uh I I am uh what I have coined as a non-technical uh developer. and I love building apps and web apps and just love building. [cough and clears throat] So if you like building cool things, feel free to reach out to me. I love to talk to other people who are very very fascinated and interested in this space. Um, so cool. Well guys, have a great day. Peace out. Take care.