Recreating NASA’s UI with Prompts | Vibe Off!

Welcome to this vibe off where Scott Wes and I are all going to be competing to see who can do this thing with AI only. We can't write any code oursel and we're going to be graded on three categories and the challenge and all of the categories have been set by producer Randy. So Randy, you want to tell us a little bit about this? As you guys know, if you haven't been living under a rock, Artemis 2 is on its way back from the moon to planet Earth. Show me exactly where it is. Okay, here are the rules. You can use any CLI, any agent, and any MCP server you want. You can Google if you want. There's just no typing any code. So, prompting only. You'll be graded on three different things. Accuracy is number one. So, is the data accurate? Is it all correct? Category number two is visualization. Can you actually see where Artemis is in relation to Earth and the Moon? Okay. And number three, the vibe. Does it look sick? Okay. This is fun, Matt. Wow, Randy. Wow. I'm I'm going to be vibing off for sure. Oh my god. Yeah. Good. Good challenge. All right. Sick. Ready? Yeah. Yes. You have 15 minutes. All right. This is such an exciting challenge. Okay. So, uh how am I going to do this? If I were doing it myself, I would just literally research NASA APIs, but I'm going to fire off an agent to research this. So, I need an API that gives me the exact location of the Arteimus shuttle. Is it a shuttle? Okay. Um, so I think that I will need a I first want to get the data. So, I'm going to write a Node.js script that will visit the NASA website to figure out where the Artemis 2 currently is. So, we're going to run that. I'm using Composer 2 because it is faster and I don't think that this is a very hard task to do. That's really good. So, while we're doing that, I'm going to create a 3JS visualization of the world that will display where the Artemis 2 currently is. The data will be piped in from a server call that I will supply at a later point. Okay, we need a uh we're going to say 3JS app in bun to show where the armus 2 mission is currently. Okay, so I'm using open code. I've got open code web started up here in the terminal and I can prompt it and I'm using cloud opus 4.6 with my GitHub copilot subscription and I'm going into plan mode. So, I'm going to fire that off, see what it can find, but also going to do some research myself. I'm just going to look up like the NASA API, Artemis. Let's see what we got. First research where you can get the data. I have this. Let's see. Get to work. Okay. Uh the model that I'm using is GPT4.5 because the model that I was using was Opus and I am using PI as my harness. So to continue using PI unfortunately I have to use to GPT models which is fine but I'm going for speed and Claude can definitely be a bit more like YOLO on the speed. Oh fetching page. Okay. Read tool output. Horizon's API 2025 June. I want Artemis. Man, this Composer 2, it might not be as good as as some of the Frontier models, but it is fast as hell. And I bet this is going to be my winner here. Okay, so JPL Horizons is probably the way to go. Where do we find that? And how do we get access to it? NASA JPL Horizons. Great. Let's see how my agent is doing. Oh, it's asking me questions. Okay. What is the Aremis shuttle? NASA Artemis. It's real. Yes. Uh, what kind of API do you want to build? No API, just research what exists. We need the data. So, this is fetching the information. Bun create vit might be an easier setup. I told you to use bun, but um perhaps I didn't give you enough instructions. Designing the app architecture. Yeah, bun create vit. Bun create. Why just uh Okay, I need to step in here. Okay, I have started on a simple website to visualize where it is. Can you please pipe the data from this via a API endpoint or something similar into the front end? Period. Open up a browser so I can see what you're doing because I am unable to type right now. You must do all of the work. All right. Planning next moves. not able to click or anything. Oh, okay. So, the research agent has found some stuff as well. Fascinating. Um, so good, good, good. And then an example query request an observer ephemeris of Mars in plain text format. Okay. Um, we probably can just throw this at AI to ask it. Okay, I want to specifically track the Artemis shuttle. And here we go. This the the research agent came back and we're 4 minutes in. So into YO best for real-time position. Uh Celis track no API key needed. Space track official US space source JPL Horizon's high precision emphasis. Okay. Um this is stressful because I got to make a decision like which one of these do we want to use. Okay. I'll I'll I'll ask it to make the decision. So, where do you actually get the Artemis? Artemis to position data. Um, I need like an API. Um, this is doing something. It's saying it's doing a bunch of stuff. There's still no code uh or anything showing up in my quote unquote app. There is just a single dex task which is build Artemis app. So, basically uh it's it's not doing anything. I hate GPT for implementing the server. Boom. Look how freaking fast this is, man. I am going to destroy these guys. Okay. Boom. Boom. Open up the server. Please. I want to see it. Starting installing dependencies. Good. Good. Start briefly. Come on. Open it up. Open the browser. Oh my goodness. The AI was like, "We probably should use this." But no, we're actually going to use this. Okay. Uh here's one cool thing I like about uh open code is it has undo. So you can undo a previous message. And uh I'll read what it actually said. Okay. Implementation plan. Scaffold it out with 3JS. Wire up the data. Polish the vibe. Glowing Earth. Animated spacecraft. Auto refresh loop. Key decision. Okay. Uh, this looks great. Let's set it up. If you need an API proxy because of cores, just use Hono and PNPM. I'll tell it that it's going to update the plan and then it's going to start coding. Now, I actually like to use task tracking um when I'm working on more complex stuff, but I don't think we need a task tracker for this. Like, this plan is small enough. We got a couple of files and an an API integration endpoint. I think this is pretty much all we need. So, I'm going to tell it to um write the plan to plan MD. Include checkboxes for another agent to keep track of our current work. Go. So, I need a realistic moon and earth for 3JS. It's talking about unzipping the data. Is there no art? Let me see if I can find a better source of getting this data. So, latest Artemis updates. So, Artemis content refresh through the local API. Let's see. The spacecraft is so far out that looking at the Earth alone is not enough. I need you to zoom out much further and also add the moon to the whole space layout in 3JS as well so we can visualize where the spacecraft is in relation to the moon and the earth. Okay, that's good. We're ripping that. I feel Man, I am going to win this. I wish I could see 7 minutes left. I think AI can do this. I think I think it's going to be as good as it gets for the plan that it has laid out if we don't run into any issues with actually talking to this API. So, let's see. Ah, it's pretty slow. It's really slow. Is this site even exist? Okay, it does. It just takes a really long time to respond. Okay, I'm just going to mention uh the API is very slow. So, let's definitely build a small Hono API proxy to cache the results, update the plan accordingly. Only 6 minutes left. I haven't written a single line of code. Here we go. But I I trust I trust that AI is going to be able to do this with this plan that it's come up with cuz 3JS I already know um they have really cool like 3D Earth visualizations of sorts. So, it's going to figure out something. Okay. So, uh it does say to use server.js. Of course, there is no server.js because who knows what's going on. It's deciding to do all kinds of stuff. Exploring animation concepts. That's fine. Exploring animation concepts. Are you kidding me? Um I'm thinking about my server.js setup. I could parse. Why aren't you writing the server.js? Why are you just out outputting it? Why aren't you writing? Oh my god, this is so stupid. I got nothing on the page. I bet Scott is like, "Well, I think I'm going to architect a harness and I I have 18 agents running at once and uh it's it's like really really I hooked up my open claw to it and I did all this but I didn't get any real work done. Meanwhile, here I am. Boom. You know this your whole setup does not matter as much as you think it does with this type of stuff. It's all about it's all right here. You got to you got to know what to to type in the box, folks. Go. Okay. So, we got multiple agents going. We got our we got our agent over here. He's building. He is really slow. He's still he's working on the Hono API server. He'll get there though. Uh the Artemis 3D model. Which model would you like to use? Ooh, you found multiple. the NASA SLS rocket block, full SLS Orion stack, the Orion spacecraft lightweight, just the Orion capsule. Um, I'm just going to tell it, uh, we are visualizing it on the way back from the moon. So, that's just the spacecraft, right? We don't need the rocket boosters. It says it's making public textures. Okay. Uh, that's at least Okay, so we have a moon texture. Hey, it's a moon texture and a globe texture. And we got clouds. Oh, this is really starting to get kind of cool. So, it has the texture stuff. Worry about the 3JS. Stop apologizing and get to work. Okay. Um, this this looks like This does not look good. Okay. Uh, it's working. Okay. Um, please add a visualization of the spacecraft instead of just a circle. I would also love to see the orbit of the spacecraft so we can see where it was and where it is going. That's a hard thing to to visualize, right? What else is up there in space? Got a couple Martians or something like that. Yeah. 2 minutes left. I don't know if they're going to get it. I think my agents are I got five agents running. Uh download the model. Yeah, that that should be fine. Ooh, holy crap. It's done. Oh my god. 2 minutes left. Um Oh my god. Holy crap. I guess it's using uh my MCP server. The um this is something. We got a We got a 3D scene with the Earth. I can't see the shuttle. I can't zoom in on the shuttle, but holy crap, that thing finished fast. Okay, let me fix the Oh, wow. It's It's actually able to use the browser. It's fixing the camera position and the zoom level. Fantastic. Okay. Okay. Finally, it wrote a server jot da. So folks, one of the things I had to do to get it to start coding anything, quite literally anything here, was to get it off this X high thinking mode. The thinking mode was a major problem where it's just thinking and thinking and thinking and thinking, and I found that to be a major issue with the GPT models in general, where it just does uh it just thinks and and overthinks. Looks like we're not going to have enough time to get any other models. Um, this buddy is he's fixing the camera zoom. If he can fix the camera zoom in like 30 seconds, that would be amazing. Yeah, the fact that it has the latitude and longitude updating in real time and its altitude velocity is wrong. 045 km/ second, that can't be right. Oh no. Wait, is that is that where it's at? Oh yes, baby. Okay, so there's the Earth. There's the moon. Okay, so let's actually change the settings on this cuz I think uh it's still on XHive. We're going to say, hey, let's go to low thinking and we're going to say, okay, the 3JS app is built. We have a moon and earth. Now we need the data from the API and the space ship. Um I'm going to tell this other agent just to not do anything. I have 29 seconds left. I wonder where the boys are at. I wonder where they're at because um I'm decently Mine is tremendously bad. I'm going to tell you that right now. Oh, this looks cool. Look at the per the purple glow when the page loads. add a cool zoom out. So, you should start at the Earth and then zoom out to where the spacecraft is. I don't know. I don't know. Come on. This should be relatively easy. This is just a little camera pan in 3JS. I bet we'll be able to get it done. 10 seconds. Come on. Load. Load. Uh-oh. Guys, I have something on the screen. So I I have something on the screen, but it's not good. Holy guys. Mine is so good. I wish I had more time. Uh I need more time. Well, I didn't discover through halfway through that like X high thinking was a terrible idea for this cuz it just spent I would say it spent a good 10 minutes just thinking. I didn't spend any time on tooling. I'll tell you that. It was just the AI spent like the it like did not value its time at all. um because I told it to use a really simple setup and I have a beautiful looking earth. In fact, there's three layers. The earth has clouds. It has several layers to it. So, like you actually it's not like there's an atmosphere on this earth. It's not just like one layer. And the moon looks really good too. Um, the big problem is is that the AI could not get it through its uh thick skull that uh there are APIs in here that I'm giving it and telling it to use and it's just like let me parse a zip for you. Is is that actually how far the moon is from the Earth? Because that looks cool, but I don't think that's actually right. I think it's quite a bit further. Yeah, it's it's way further. All right, let's let's go through these uh these criteria here. So, accuracy is the data real correct? Does it refresh and update? Let's give it between one to five. Zero. Okay. Zero. Uh visualization. Can you actually see where it is relative to the moon and the earth? Yes. No. Zero. No. Also, the moon is not relative, but it looks cool. He's going to get a lot of points on vibe. Yeah. I Well, for vibe, I give you 10 out of 10. Five out of five. Highest point. This This is good vibe. Five out of five for sure. Okay. First of all, judges, I need to refresh to show you my loading animation. Ooh. Wo. Boom. All right. So, here we got this is the moon. This is this is the accurate how far the moon is from the Earth. And then here here we've got the Artemis being pulled in. What API did you use for this? I don't know. Your your uh cursor was able to find the API. Yes. And you know what I did? I used composer 2 on fast mode. And that's why I was able to get it so quickly cuz that is fast as hell. And look how cool this is. Look at it. Pulling in all the data here. All right. What are we calling this for accuracy? I'm going I mean I think you're spot on with the measurements. Yeah, I think that's going to be a five. Visualization. Can you actually see where it is relative to the Earth and the Moon? I give him a three. It's It feels awkward. It feels like three. And what are we calling it for vibe? Three. 3.5. 3.5. Three. I'll go three. It's right down the middle. Okay, that brings Wes in at 11 points. CJ, your menu looks sick. Yes. Oh, yeah. Thank you. So, good font choices. Okay, my my AI did it. But, so the AI the API that it's talking to is like pretty slow. Um, and so I have a a hono caching layer that keeps the data there so it doesn't But every now and then you'll see like acquire. Let me do like a hard refresh. Yeah, acquiring telemetry. Yeah, it's a little too fast. I could probably slow that down. But you've got Earth, Moon over there, and then Artemis right here. Um, and then so you get the latitude, longitude updated in real time. Uh, total altitude. Uh, CJ accuracy. I think you got a five on this one. that seems pretty darn good. Uh, visualization. The real time is is the kicker. I think I might be faking this cuz I don't think it that quick. I think it's just extrapolating. I'm impressed. It's extrapolating between requests for data, which is like every minute or so. visualization. I mean, I think I love the menu at the left. It looks sick. I think this is a 4.6. Thank you. And and vibe. Overall vibe. Pretty good vibe as well. A four. Yeah. Uh that puts CJ at 14. Oh man, that was super fun. Let us know down below who got the best one and who had the best approach to this type of thing. And also, I think we should do this again. Let us know down below what else we should be building to pure vibe