The Ultimate AntiGravity Masterclass (3 HOUR FREE COURSE)

Anti-gravity is the most powerful AI coding tool on the planet right now. And whilst most people are using it just as a chatbot, I found a system that lets you build apps 10 times faster to a way better standard. And by the end of this definitive masterass on anti-gravity, you're going to be able to build six-figure web applications, animated websites, full dashboards, and so much more. You'll even be able to recreate Any complicated workflow from NA10 and connect to powerful tools like Notebook LM. Meaning that you can unlock capabilities that 99% of people don't even

know exist and that you can build essentially anything that you think of faster than your competitors and to a way better quality. And if you don't know who I am, my name is Jack Roberts. I built and sold my last tech startup with over 60,000 customers. And now I run a 7figure AI automation business. Aentic Workflows have changed everything. And this video is the most comprehensive up-to-date master class on anti-gravity on the entire internet. So feel free to bookmark this. I've timestamped everything down below so you can come back to it. And with that in

mind, grab that coffee and let's dive straight in. So welcome to the beautiful anti-gravity masterass. Now, as you may know, anti-gravity is huge. It's a pretty big deal. It is essentially Google's new coding app that launched very, very recently. Now, the best way to explain this is to think that Microsoft Word is for documents. Excel is for spreadsheets. Anti-gravity when we talk about that is basically just about building software and any software you can imagine for example AI apps websites it can be your personal Jarvis AI systems and you also get access to Gemini claude

and chat GPT so some of the world's premier models within Anti-gravity and it's basically an agentic first coding environment that's its kind of main USB now you can build within anti-gravity beautiful UI dashboards and the thing about great UI dashboards is that they are the translation layer between really complicated data or complex data and better decisions. And anti-gravity lets us turn that data into beautiful dashboards as an example. Now, you're even going to learn how to build Gorgeous animated websites. For example, just like this one. Now, this entire thing that you're seeing right now, this

beautiful midnight sky, this button effect here, this hobbit over here, all of this was built within anti-gravity. Every single part of it, even this slider here for the reviews, I come down and this animation right here, again, you might have guessed it. I have no coding background. I did this entire thing in anti-gravity with the exact Same principles that I'm going to show you in this video. And it even lets you create an account on the website using all the skills that you're going to learn in this video. And the truth is that most websites

you see suck, right? They're either tractors, which means they get the job done, but they don't look very great, or they're Ferraris, which look amazing, but they have no engine. They look flashy, completely no value. But we want a unicorn, which is Great design and it's functionality. And we're going to learn how to do unicorns in this video. On top of that, you're going to learn so much more that people don't even know about anti-gravity. And you're also going to learn skills within anti-gravity, which basically means any great work, any automation, any system that can

essentially automate anything you want to. From lead scraping, lead generation, creating content, you literally name it. We can build this With an anti-gravity now. And skills let us make that great work repeatable. It saves us on context windows. It makes them sharable and scalable. The stuff we're going to go into in this video explaining exactly what skills are technically, but essentially, we can create skills for anything. onboarding systems, database migrations, competitive intelligence systems, design protocols. It's just like being in the matrix. And you're also going to use Exactly how to use skills, when to use

skills. I'm going to give you my top five skills as well in the video along with all the resources going to be available down below if you in the description. Now, as you'll know, most coded apps, which do many different things, are broken. They look really bad. They don't work. But we're going to cover a proven system in this video that basically lets you build full stack stuff. Now, you might be wondering, Jack, what on earth is full stack? Well, it's basically the front end and the back end together. So the front end is all

about making it look beautiful and the back end is about making it functional. Anti-gravity does both those things. My last startup for example, we had to hire people who were full stack developers or backend developers, front end developers. Anti-gravity does all of this. And I want to give you just a top level overview here about all the Amazing stuff that we can do with anti-gravity that you're going to learn in this video. And that's not all, says Fry from Futurama. You're also going to learn how to integrate over 150 models within anti-gravity. Some of them

completely from free as well. So you can save money and power up your building and build faster than anyone else. Anti-gravity is a coding app, right? And the best way I want you to think about this when we think about different Models like this is that anti-gravity itself is kind of like a fighter jet. It's like an environment. So there are many different options that you could use. So we're using anti-gravity. You could use something called cursor. You could use windsurf. You could even build in something called the terminal. These are what we call your

fighter jets, but we're choosing anti-gravity for a few different reasons. And the model that we use. So Claude Chad GPT Gemini is the Pilot. So when you hear expressions like Claude code, Claude is just the model. All they're talking about is the fighter jet pilot, not the actual plane itself. We're talking about the plane and we'll use any of the pilots we want to. And so the two models that you get with anti-gravity natively are Claude and Gemini, but using open code, as I'll show in this video, we can get access to 150 different models.

How we build is fundamentally changing cuz there's been A huge shift. We can now essentially create automations with our words. Why don't we take a live example? So, for example, if I want to scrape the number one AI newsletter, what is the easiest way for us to do that? Well, previously we would build a really big workflow. We spend a few hours. We'd watch some tutorials, learn how to do it. And that required both skill and time. But now, you can literally just type it into a search bar and type it and build and get

Amazing AI systems. This is an example of that very thing that I built, just basically talking to anti-gravity. But what is really happening here? Well, if you think about it like this, this is important context to understand the big shift that led to the moment. These platforms here are integrators, okay? And they connect things to other things basically. Now, Claude and Gemini are the executors, right? Said another way, it these connect things and this Actually does a thing. This executes for us. Now, 6 months ago, if you're on YouTube or anywhere else, you would have

seen that workflow builders were everywhere and then we had the rise of Vive coding and now we have anti-gravity that can basically do everything for us. So instead of building out a scenario like this, we just say, "Hey, build the thing, please." And what anti-gravity does, which is really cool, is it connects to all of our applications. And When you connect anti-gravity to anything once you get something in anti-gravity, you can essentially do anything. We can also create parallel agents, which means that we're no longer limited to one terminal. We can have 8, 12, 40,

as many agents as we want to working in parallel building on our projects. And the use cases from NAN and make. Let's think about these actual use cases for a second. It's a way to talk to a lot of services. It's a place to Run things on a schedule and it's a way to glue steps together and also do some basic error handling. But anti-gravity actually does all of those things now plus it thinks. On top of that, you can also chat with it about various different things which is very cool. So with that in

mind, I found the best way to learn this software is to actually build something together. Now the first thing I want to do is get you your first app developed and built. And we're going To do this in the cloud. So you don't even need to touch anything on your desktop because if you've never built an app before, it can feel a little bit overwhelming and I want to get you your first one. So if you've already done that, feel free to jump ahead. But I'm going to build the first one with you online, step

by step in a very quick, easy way. And then once we've built this application, we're then going to head straight over to anti-gravity and start Building. Beautiful. Now to build one online, there are lots of different options. The one that I'm going to show you is one that I actually first got started with, which is Lovable. They're crushing it now on the market. you'll find it really easy. And one of the cool reasons of using Lovable is the integrations they've got natively built in. So, I always say if it's your very first time ever building

an app, I typically say Livable is great. There's Obviously some really cool options, but this is the one that I started off with and really good to help you understand how to build your first app. Now, pretty much all we do is chat to it and it builds for us, which is really cool. So, let me show you the concept of how we build an AI app. Now, what I want to do with this one is build, let's say, a canban board. And again, we're not even going to use any of the systems yet. This

is just to show you how this works And how easy it is. I want to build a canban board. So, let's click on the box and give it a cool prompt. Hey there, dude. What I would like you to do for me is go and build a canban board. I would like it to have the following features. I'd like to be able to have a complete, let's say, a to-do and in progress. And in fact, what I'd like you to do first of all is ask me questions to clarify your understanding just to make sure

we crush the features down. I want the Design to be gorgeous and interactive. I would also like to have an integrated AI chatbot that I can ask questions to at any time. I want to have that in there. And I also want the ability to save this information in a database so I can come back and use it whenever I want to in the future. Awesome. So, I've given it a pretty cool prompt to do this. By the way, I'm using Glido, our speechto text starter, but just launched in beta. It's very cool. So, I'm

say the fastest in The world right now, which is decent. And what I'm going to do is go into plan mode, which again, this is just like building on easy mode. Click on plan mode so we can get back and forth. But before we do that, let's actually give it a little bit of design guidance. So, we're going to go so deep into design this video. I hope you're ready. Like, we got our AI designers everywhere. So, these apps are really good at basically creating a front end quite well. And You'll notice anti-gravity really excels

in building super scalable stuff architecturally. And these front ends things are incredible for these getting your first prototype out. So, what I want to come on dribble, it's basically like a design interface. We can find things. Let's go down for if I type in something like canban. And canban is just a cool easy product to-do list. Very very decent. Let's come and have a quick look to find one that we think Looks really cool. So basically whenever you're building with these apps and again this is just dead simple. It's just an idea. You can pretty

much do anything you want to. We'll try to find inspiration. So I really like the look of this one. I mean it could look a little bit better but I think it's not very high color. So we can copy this image. We can come over to our platform and drop that in. Bam. Beautiful. Then we can go back out of it and let's find Another one. This one's really cool. Yep. Grab that. That's a little bit better perhaps. Come back over and drop it in. And then we say, "Awesome. I'd like you to build it

in the desire in the, you know, use the reference images as your design file." Beautiful. Once that's done, I'm going to hit off and hit enter. Now, fundamentally, when you're building an AI app, I've got a full system to make it very easy. But fundamentally, this level is just sort Of explain the thing that you want, give it design references, and then all you're ever going to do is just spar with it, chat with it on the left hand side, and effectively goes ahead and builds it for you. Now, one of the reasons that I

am using Lovable as your first instance is because you'll get a taste and a flavor of basically Belovable Cloud integration. So, Lovable doesn't require you to add any API keys or any dashboard access. You can connect That obviously. So, it's like a first-time beginner just wanting to get your first thing built. It's easy. And obviously, I'm going to show you everything in this video step by step, take you from zero to her anti-gravity. But, if you've never built before, first thing is first is let's get your first thing live so you understand just the kind

of process and feel of it. and you have what I call this magic moment where the first thing gets live and you're Like okay cool I kind of get it now then we go deeper down the rabbit hole okay beautiful so now we've got a couple questions to come back and you'll notice this is a common feature place this idea of planning so sparring with the AI to build up some what columns do you want our canban board I think to do in progress makes sense what information should each task display title only title description

due date let's go for full details cuz we're we're nothing if We're not specific right what should the AI chat about help you with I think create tasks could be cool let's do both actually let's make it super powerful And then again, we can pick the theme that we want to. I quite like dark sidebar. I think that's really nice. Let's go for that one there. Cool. And then we've got a couple more, which is it's going to be for myself. I'm just building it for my beautiful self. And then click on submit. Beautiful. So

now It's done that. We are now going to be ready to rock and roll, which is why I've now taken him out of plan mode. And now look at this. So let me bring this over so you can have a good look at it. So we've got the enable cloud, which is built-in backend storage or and ready to use, which means that we're going to be using lovable cloud. That's one of the things that they simplify to make it easy. Add an LM to our app. Free start page scale. Sounds cool. Let's just Allow and

get started with that. Again, building your first app is a really cool experience. You get to see the wonders of what's possible and it's very very decent like that. Cool. And they've got some cool stuff like you can edit visually as well, which is really decent. And then as well as building, we can see the progress on the left hand side. So it's built building or system, canban board, AI chatbot, and styling with dark sidebar theme, which is really Cool. So you can see the progress on the left. It's enabled relevant security, which is code

for just making sure and you're going to see in this video as well, databases and how this all connects together really beautifully because when it comes to any full AI system, right, we have the front end looks awesome. We've got the back end does the automations, but then we also need a place to store that data, right? Could be Superbase, could be the cloud, Could be several different locations, but it's a really important component of what it means to build these systems in this kind of beautiful AI future that we're heading into. Beautiful. And now

we've even got a signin bar. I don't know if I asked for a signin bar, but we got going anyway cuz they're adding an extra value. It's cool. So, we can check this out. Let's log in and sign up. Let's call it like Jack R. Give an email. Jack at Well, let's give my real Email and then we can give down a cool password here. Let's give one that we're never going to forget. and click on create account. Beautiful. We'll save that. And then we've got a canban board. Cool. I'm I'm liking this designable f.

That's actually really tasty. And then let's add a task. So come down, add a task. Why don't we call this one something like dog shelter. Okay. Find a best not by and give a donation. Okay, cool. So I'm giving some things here to Do. I'll put that. It needs to be done. Category can be personal. Due date. Let's be bold and say we're going to do that tomorrow. And I reckon that's going to take like maybe 60 minutes to do. And then we create the task. Cool. So does this appear? It does. And we can

drag and drop and put that in progress. Decent. Okay. Nice. Well, we probably want to add one more field, which is cool. I like that. And then we got an AI assistant. And then we can ask it Questions. So, let's just say, "Hey there, dude. What do I have in my to-do list today?" All right. Cool. Let's see what he comes back and says again. I think what's really cool about this is I've not entered any API keys. Very easy. One to do task in a great situation. Could you edit my to-do list? And I

just want to add a dog emoji at the beginning of the to-do list, please. Okay. So, let's test out this AI assistant. See how good he is. And I can Use him to build things. I can yap at him, do different things. I can certainly happy with that. Since my assistant, happy with actions. I'll create a new task for the formatting. All right, cool. So, let's go back over to the board and check out what that looks like. Walk the dog, pet cat. He's created a brand new one, which is awesome. And it's due on

that day. Really freaking cool. I like that. And then basically we can pop out and then I Can give it some things like, hey dude, what would be really cool is if could you add a third category which is going to be complete. What would be decent is if I drop the let's say the actual action into that section. A bit of confetti would be awesome. I mean, let's step up the design a little bit. Let's get a bit of vibrancy. Let's get a little bit of I don't know, some color and just like obviously

something looks tactful, but just I want it to be Gorgeous when I look at the actual cambans themselves. All right, we give it a little bit of something like that. Ready to rock and roll. Oh, I'd also like the AI assistant to be able to edit existing ones if I want to. All right, cool. And send that one off. Decent. And we just send Libble off. It comes work in the background. But you're kind of getting now the idea of what it means to vibe code that you basically yap at things. It goes ahead and

does it and Then we can use it, which is freaking awesome. Cool. So now it's working in the background. The migration status has done. So what it's done now is actually gone ahead and modified the database. So you're going to see now what the incredible place we're at now in 2026 is that you can actually connect these databases to AI. So you don't even need to think about it. It just kind of does it for you, which is crazy. Cool. And then this is loading back up and it Should be done in just a moment.

It's just going to do a little bit of polishing, a little bit of add a little touch of color and flares and various different things. And just like that, we've now got the completed version which is follow my instructions. We can click back off and let's take a look at this. So we've got in progress completed. Let's say that we bought the dog. We bought Dexter and we say that's actually completed and we get the Confetti. Bam. That's what I'm talking about. So, let's come over to the AI assistant and give him a prompt. Hey

there, dude. I have a task for the dog shelter. Could you actually just make that maybe 120 minutes instead of 60 minutes? Okay, cool. So, the idea with this is we could like ask it to do very similar things like build out a to-do list, make different connections, different apps. Like you get the idea of how cool this is. Cool. Let's update the Task. Decent. Let's go check it out. Come over here. Dog Shuttle is now at two hours and it's completely done. I can move things over. Easy. Super duper easy peasy. I just yapped.

I moved things and then it freaking happened. And so now you built your first app. A huge congratulations. Hopefully you had a lot of fun with that. The next thing I'm going to do now is download anti-gravity and begin the anti-gravity magic. But to do that, I have to show You one really important concept whilst we download anti-gravity and everything that you need to be rocking and rolling and to be set up for the future. So if you haven't already, you're going to head over to this website which is anti-gravity.google.com and you're going to go

ahead and download anti-gravity. is super duper important. One of the thing I'd love you to do as well is to go ahead and download the Claude app. If you don't Have on your computer already, it's going to be very very handy for you. And then the other thing that we need to download is and there's only third thing is node.js. If I say download node.js but the good news is anti-gravity can do this for us and as I'm going to show you in a second. This is the wonders of it. Okay. Now once you've downloaded

anti-gravity it will look a little bit something like this. So you click on this and you'll see the wonders Anti-gravity. And when you open anti-gravity it will look a little bit something like this which is wonderful. So in anti-gravity, you open it as like projects. So think of them instead of the cloud like we just built. These are things you're editing on your computer now, which is really cool. So what you're going to do here to open up any workspace is file, open folder. You're going to create a new folder. And then basically you're in

it instantaneously. So I come down to open folder. I click on new folder. I call this XYZ. I click on create and then click on open. And all of a sudden I'm in this folder. But the question is, what if we've just built an app online on Lovable or maybe AI Studio, Google's version, and I want to get it into anti-gravity to edit. Well, how do we do that? Well, great question. So glad that you asked because if I head back over now to our thing here, it's like fundamentally all this Is, and you can

see this here, is code. That's it. You can see all the code on the left hand side. And when we talk about websites or apps, we're just talking about code. So what we need to do is take this code and put it somewhere. We need to get that code onto our laptop. So the way that we would physically go ahead and do this, I'm going to close it for a second. As you see this mysterious cam in the top rightand corner, this is GitHub. So You're going to create a brand new fresh account in GitHub.

You can click on connect to GitHub. I'm going to do this over here. So let me explain what GitHub is in simple language. If you've never come across it before, it make perfect sense. So GitHub, if I open this up and just show you. Basically, if you think about this like it files, when we publish applications and apps online, we need a place for those files to live, a repository, like an Alexandria's library Of of all the cool stuff that's happening. So, the idea is that when we build apps, what we're going to do in

anti-gravity, if we publish it, is store it in GitHub. And GitHub becomes the single source of truth for all of this stuff, which is amazing, which is why we use GitHub, and that's where we get our files. But it also enables us when we build an apps, we throw it into GitHub, we can access it anywhere. So once you create an account with GitHub, you click On connect GitHub. This will open a new window and we basically what we call an oorthth sign in which is we just open and authorize. It's super easy. We're going

to give it access like so. And we click on continue which is beautiful. And click on connect. Fantastic. Confirm transfer two-way sync. We're happy with that. Transfer that anyway. And this will work with any online version whether it's uh Bolt or AI Studio like you know which is anti-gravity version Online. There's a million different ways you can do it. So we set it up as a GitHub repo. We click on view and almost by magic. Does this code look familiar? Well, it certainly should do. So, you come over here. You're going to click on this

code. Now, the only button that you need to know. Now, this is set as private. So, let me show you one cool thing. You're going to click on settings. This where you manage the settings for your things. And you come All the way down. And what I want you to do again just to keep it simple for the time being is click on change visibility, change to public. All right. What this now means is that if I share the link of this repository that we have, anti-gravity can download it instantaneously. Now, the truth is anti-gravity

can download it even if it's private anyway by connecting it. But I just want to keep it really simple for this for the time being and no one's Really going to be searching it in in like the two seconds that we created it anyway. So, all we're going to do now is you're going to click on code. You come over here and I just want you to click on copy and paste. That's it. Then head over to anti-gravity, come into the chat window, and we're going to say, "Hey there, I want you to clone this

repo and then open it up in a local host." And now what do I mean by local host? Well, just because on your computer now, it's Your computer that's hosting it. And so, just paste URL in and then it'll go ahead and do that for you. And one interesting one to call out here, guys, if it has dependencies, like if the online version of the app has built something that this doesn't have, it will go ahead and install those for us. Beautiful. So, now it's just loaded there. Let's give this a click and find out

what's happening. So, open up the local host and then we have a login Section. So, let's click on sign up and we'll give a random name, random email atoutlook.com, and then a random password and click on create account for instance. Give the hot second and then just like that, we now got this local host. So, and so the cool thing is now because this is an anti-gravity, we can make any changes we want to. So, we could say instead of task flow, why don't we call it, I don't know, change from task flow to bing

flow and change Purple to I don't know dark obsidian. Let's see if it can understand what dark a dark obsidian is. But the idea is it will now go ahead and make those changes for us. And on the left hand side guys, you'll see that all the modules that we use in loadable do appear there for us as well. But I will say that if you are building it an online app, you want to use Superbase and configuring Superbase and bring it in versus like native cloud platforms. So you have full Configurability. But again, anti-gravity

can make any of these changes you want to. You basically speak to it and it'll do that. But essentially what you've done now is built this incredible app online. You bought it into anti-gravity. You've installed it and now you know how you can make changes to it based on your local computer which is the foundation of anti-gravity. And we can see now anti-gravity making changes on the left hand side. And then we can check the Updated version. And so just like that, it says it's now running. So let's go check that out. We click this

up and would you believe it? Bing flow and it's completely charged. And that is the premise of how everything works now in anti-gravity. And so the best way to learn anything within anti-gravity is to actually build an app. Now to do that, we're going to use my five-step blast framework which I use for building any application, website, software, you name It and anti-gravity, which is going to take the quality of your builds from this to interstellar. Beautiful. So this is the blast master prompt. So let's go through the idea of it. The identity is that

you are a system pilot. This is anti-gravity. Your mission is to build deterministic self-healing automation in anti-gravity using the blast framework which is blueprint link architect style and trigger protocol and the ant layer architecture. So we start off with Protocol zero. I'm going to put a link for this down below so you can grab it and have a rock and roll good time with it. All you're going to do is literally copy all of this like so. Going to head over to anti-gravity and what we're going to do is just basically cleanse a project. So

let's create a brand new project together. Click on file. Click on let's go for open folder. Click on new folder and let's call this one scraper with loads of ours and click on Create. Okay, cool. And then open the folder. So now we're in a brand new environment scenario. So first thing to bear in mind is that of course as always we can have the conversations with anti-gravity on the right hand side. Little thing you can do in the middle by the way if you've installed this claw thing is you can double click and then

you see this claw thing here. This opens a cloud code instance which is really freaking cool. Now before I post this Prompt in I want to show you one thing about anti-gravity you'll find helpful. So, anti-gravity has two views. We have this view that we've come to love and appreciate. Again, if you ever want to move a position of something, you can right click and you see the position. You can basically decide where you want it to be, which is really cool. So, cool. It's very decent. Let's come down and just remove this guy for

the moment and click off this. So, you've got what We call the main view. And then if you click on agent manager, you've got this view, which is really cool. So, one thing a lot of people don't know in anti-gravity is that every workspace or project that you create basically becomes something here on the left hand side. and you can start on your conversation that and this is where we get to the point that we call parallel agents. So you can have four, five, six different agents all working on your Project at the exact same

time. So for example, I've got dashboard UI here. I can have two different agents doing the same thing. So we're in here. So what we're going to do is start a new conversation in and then you're going to select your thing or on the top left come here start conversation and we're looking now for scraper. So we just type in scraper and we should find that near the bottom. Cool. So might just say hey. All right. Cool. So, what I could do With this, technically speaking, is I could open up as many of these windows

as I want to. So, I could say, "What day is it?" In reality, I might say to one of them, "Hey, do a review of the design." And another one might be, "Hey, quote me a file that does XYZ." And I can have literally almost like as many of these separate conversations as I'm doing. And so, this can go on and on like in add item basically. So, we can have all multiple agents doing things For us at the same time. If you've got like a second screen, which I recommend when you get into this

stuff, you can actually manage them all in the inbox. If I click on inbox, when they've all come back with different questions and stuff, I can basically say tick tick tick. That's fine. Approve it. So you do everything from just one window. And then whenever you want to come back, all you're ever going to do is that you come over here and click on open editor. And That's how you can get between the two walls. Awesome. So now you've got that. Now let's build this one together. So I want to show you something really cool.

So let's come down and you can delete conversations down here. Very, very, very different. So, what I'm going to do is I'm going to use I show you something cool you can do with an anti-gravity team. Occasionally, if this gives you any trouble, it shouldn't do, but if the agent fell for some reason or they're Doing an update, you can just chat with Claude inside. So, what we can do is double click in the middle, click the Claude icon here, and now we've got Claude code roads rock and roll. So, what we're going to do

now is paste in that entire prompt. So, come down here and paste in everything like so, and it will go ahead and get started. So, it's going to follow the blast framework. Now, section zero on blast framework, we bring it up, as you can see, is to Initialize the project memory. It's going to create a task plan MD so for phases goals and checklists a findings.mmd for research discoveries and constraints what was done errors test and results and then initialize which is a gemini.md just stands for markdown basically as the kind of project constitution so

like data schemes behavior rules architectural invariance and then execution so the idea is it's going to Create folders for us now on the left hand side to build all this stuff out which is really cool and then effectively what it's going to do is then wait for us to come up and ask it to do something. Now, I've just pasted the exact same thing in the right window. So, let's go ahead and use that one for this project. So, it's within the native system within anti-gravity, but just to show you, you can spin the same

thing up with claw by using that Window there, which is really cool. So, now that's complete. Let's get down here and see what we're going to do. So, we got the five discovery questions, Northstar integrations, source, truth, and delivery payload. And then it's got a task list here of things that it needs to do. Cool. So, I'm going to say awesome. Please execute protocol zero once I've given you the blow information. So this is the point now where we're going to give it basically a Prompt of the thing we want to build. Now we can

build anything we want to but I thought it'd be cool if we could build something that would let's say and again replace this with anything you want to in your business for instance what we typically want to do is start with the biggest bottleneck like what's the biggest bottleneck in your business and then actually build processes around that. So let's say for example one of the things that you wanted to understand Was like viral trends and viral outliers. So often times we can use Reddit to do this. We can use various different resources. So, I

think we should build a viral trend outlier and let's get anti-gravity to not only build that but go ahead and get the research for us. So, and then we're going to basically explain to explain this to it in plain English. So, let's see what the questions are. So, the questions are what is the singular desired outcome in Plain English. Awesome. I would like you to build for me a beautiful interactive dashboard and in that dashboard what I would like you to do is to present information from me from various different sources. I want you to

collect for me and display, let's say, the latest articles from the last 24 hours from a series of sources. For example, Ben's Bites or the AI rundown and maybe also on Reddit, but let's just start with the newsletters is just a brief Example. The source of truth, the integrations that you're going to need. I'd like you just to go online and build a scraper for that initially. So, no need to do anything else yet. We will ourselves add further integrations as we build this out and add layers of complexity, but we're just going to start

off with the basics. the source of truth. I'd like it to exist within the website. We are going to connect to dashboard, but we're going to do that Later. That will be to superbase. Again, I'll touch on that momentarily. So, basically deciding all the different connection points that we want for the entire thing. After that, the delivery payload should be I'd like it to essentially run every 24 hours. And if there's new data, new articles, show them. If there isn't, forget about it. I would like the ability to save those articles. And if I refresh,

all my saved articles should be there, as well as all The data that you've brought forward. First of all, I'd also love the designs to be gorgeous, interactive, and look beautiful. Awesome. So, we give it all information and then we just lally send off that like that, which is really cool. And then what I'd recommend you do is put it into plan mode. Uh, at least for this stage, so it can actually spar with you a little bit. One of the things we learned from the founder of Cloud Code, who you basically uses this in

is That having plan mode is really really important. I found that my experience too in terms of really getting out the specifics from anti-gravity. So, this will go ahead now, plan everything out, create the files from the left hand side, and then we can start beginning to create any uh application that we'd like. And whilst it's doing that, let's head back over to Dribble to get some inspiration for our dashboard. Wouldn't that be really freaking cool? One of the Things we can do if we want to, let's say that, you know, okay, you could have,

for example, your own brand like this, which is Glider, which is really cool, our speech tech startup. Let's say that I want to build a dashboard out in their style. How do I get it? Well, if you have your own brand or a brand that you like, you can upload your brand guidelines to anti-gravity. But if you don't have them, one of the things you can do is head over to filecrol.dev. And Again, I'm going to show you different aspects like this in this video as well where we use this in different ways. But if

you come over here to playground like so. And what we're going to do is simply enter in the URL. So glider.com. Actually, let me just come back and do one more. Instead of markdown, let's come down to I believe we want branding, which is cool. And this will basically scrape all of the information about the brand for us like the typography, all That sort of stuff. And look at branding's appeared there. And look at this. This is freaking so cool. So what I can do is literally copy this here. I can come back over here.

I can create a new folder. Just come down and click on new folder. And we'll call this one design guidelines. Like so. And then within our guidelines, let's open up new file. And we'll call this one brand guidelines. Cool. And in guidelines, we popped it down like that. Awesome. And Then why don't we also add in our logo. So we come down here and let's just drag the logo in from our computer. So there you go. I'm dragging this one over here, which is cool. I've got the Glido logo and I'm just going to bring

that into the design guidelines which is really cool. Then what we could do is get something that we think is really interesting from a design point of view. So let's go and find one maybe on dribble or something. So why don't we go For dashboard and then we can have a quick look at all the dashboards that we think are really interesting and really decent and find something that we would like to emulate. And let's have a look. I think this one's really cool, but we kind of want something that's a bit more information, right?

So we want something where we can see the data coming all the way through. So, I think probably something along the lines of this looks quite cool. We got some cool visual Panels. Yeah, I think that's nice, but it's not really too information dense. Okay, so say you like the look of this one, for example. This is pretty cool, pretty interesting. I like the way the panels laid out. So, let's say we want to copy this one. I'm just showing this as an example, right? But effectively find the design inspiration that you like. And then

we should be able just to paste this in. That is cool. And then we just drop in image.png, which is decent. And then we can just rename this to be design inspo, right? So, come down and let's rename. And we call this one design inspo. Awesome. Cool. Now that's all done. We're going to accept to those changes. And then what we're going to say is we're going to an at sign and then we're going to add and there's one thing you can do your file. Right. So if I design guidelines right there, we can now

chat to that. I would like you to build it in the basically ascribe design Profile. So I've given you my logo, my brand design guidelines, and then some design inspiration also. And so as you can see now phase one has been about the following which is the northstar. So our desired outcomes, the integrations that we want to have within there, the source of truth, the delivery payload and the behavioral rules. So before we design any project, you really want to think about, well, what integrations do I need? Is it Slack? Is it Telegram? Is it

Going to be, you know, Appify or Reddit? We can pick those specific ones that we like. And then also behavioral rules. And obviously, we've given it a data first rule, which is you must define the JSON data scammer, the research, and we've given that now to anti-gravity. And it's also ready to go. And so now we've completed the first step, which is to outline the thing that we want in plain English. The next thing we need to do is actually connect it. So, for Example, if you and I building a house together, right, and we've

got the beautiful blueprints, it looks awesome. We're getting our amazing furniture in there, but the house isn't connected to the outside world. It doesn't have plumbing. It doesn't have electricity. We'd probably not really be able to do too much. So, the idea here is that we want to connect anti-gravity to all the resources and tools that we need to enable it to actually physically do its Job. And that's why the second step in our blast framework stands for links. So, to do links, first of all, we need to tell it to follow the design guidelines.

And whilst it starts to work on that, we can now start to think about how we connect everything to it. So now we basically explained everything we want to what we need to do and you'll notice beautifully now look at these findings.md gem. MD progress MD all these wonderful and beautiful things. What we're going to do now is it connections and this introduces us to the very first very cool part of anti-gravity which is called MCP also standing for model context protocol. So the way I want to think about model context protocol is I'll grab

this so I can show you. It's basically like a universal remote control. It's a standardized language that lets anti-gravity or any AI app talk to anything else. So for example, you might Say that the NA10, right, which is a no code building platform, has an MCP. Firecrawl, which looks at your meeting nodes, has an MCP. And when you connect anti-gravity to these MCPS, effectively they can do anything that you can do through an API very, very simply without it being very complicated. So what we're going to do then is click on these dots over here,

guys. And you're going to see once you do that, you're going to see MCP servers. So, a couple of things to Bear in mind is going to a full list at the MCP store. So, we can say whatever we want to connect to here. Now, what we're going to need to connect to in this video is Superbase. So, I'm going to type in Superbase. I'm going to go very deep into all the MCPs, but you can see Superbase lets us connect to projects because if you think about it from this point of view, we're going

to have a front end. We're going to have a back end which kind of automations and Systems, but we're going to need a database, right? But we need somewhere to store that information. You know, Excel is like the primitive version of it. Superbase is like a Microsoft Excel has been hitting the gym and crushing it. So, we want to connect to Superbase. So, this is a dashboard that's worth learning. And when you do that, you're going to see something that looks like this. So, all you're going to do is come down here to configure and

you're going To click on Superbase access token. So, this is a great time to understand exactly what Superbase is and what it looks like. So, once you create account, you're going to see something like this including generate new token. I'm going to call this one something like anti-gravity scraper. I'll put the expiration date for an hour, maybe for a day. But basically, yeah, I'll I'll delete this token afterwards. But you click on generate the token like so. That will load up for us beautifully. And then you're going to copy the token. That's it. And all

you're going to do is swing back over to anti-gravity and then paste this into your Superbase access token. And then click on save. That will then save to what's called your MCP configuration. Sounds very fancy, but if I click X on this and actually we open and basically if you ever lose it, just do command L uh and it'll bring it back. Cool. And if you ever lose this thing on The right hand side, you can just press command L and get it back. When we click on these dots, you're going to come down here

to MCP servers, which is really cool. And now look at this. If I click on manage MCP servers on the left hand side, you'll to see now all of these beautiful things. So this was looking red because I I changed my API key recently. But look guys, we come down here to Superbase. You can see it's enabled and you got access to all these Awesome MCP servers. Now think about it from this point of view. If you come over to Superbase, for example, it looks a little you know what is it Jack? It's like kind

of like very codelled. You know if you think about that you and I might to speak English or French or Japanese or Chinese tables speak something called SQL. Now the great thing about being where we're at right now is that you don't need to know how the complete intricacies. It's worth Learning the basics but basically because we've connected this to anti-gravity now anti-gravity can create tables for us and do anything we want to but a couple of housekeeping things that's worth you know. So on the left hand side you come down here to project settings.

Okay you got all you can access your API keys. Loads of really cool things over here which is decent. One thing I want to draw your attention to though is the bit that you're going To be spending a lot of time is authentication when you build apps which is cool. So here you can see signin providers a worth server lots of cool stuff but if I click on signin providers now when you create an app using superbase one of the things that you can do is basically determine how can they sign in and look at

all these different things you've got like that's when you go to websites like sign in with Apple sign in with GitHub you can do all of Those with superbase. That's how cool it is. One that we're going to turn off right now is confirm email at least whilst we're building because basically when we have users creating accounts we don't want to have to keep going back and forth during the development process. Really cool. Then all your tables live in table editor. As you can see got everything here which is cool. But what we want to

click on and you can see this is the dashboard stats from a Different video that I did. You can come down here to database and in database you can see everything which is really cool. But we haven't got anything in there at the moment. So let's go back over to anti-gravity and we're going to be touching on superbase later. We just wanted to give it the connection. But once that's done, it's got everything that it needs to rock and roll. And crucial guys, check this out. And this is one of the really cool features about

Anti-gravity is that it will show you its checklist. So we can actually, you know, add questions to this. This is the complete discovery questions, research, scraping messages for each source. I could come down here and say, "Awesome. I want these websites, right?" So, for example, why don't we go over to a random website and let's just say we go down to, I don't know, rundown AI or something like that. I think it's this one here. Cool. So, we can just give it This random URL. We come back over to anti-gravity and just give it that

and add that as a comment. So you can dynamically change its plan. And here we can see it's doing the research the research newslet structures and finalizing blueprint navigating to this website to understand how are the articles stored and basically anti-gravity will just figure out for you which is awesome especially when you've got a basically a system that Looks exactly like this. Awesome. So that's now done. Current status update. It's just completed the research on normal newsletter sources what it's discovered. So it's gone RSS feed. It's figured that out. It's a next.js site. is going

to be able to scope and do various different things. Now, let me update the task checklist and create the implementation plan for our review, which is really cool. And just going now through everything, taking things off, Working for us autonomously in the background. And when you explain things to anti-gravity in the way that I did, using this blast framework, it just works for you on autopilot, you tasks, and it just does everything for you in the background. Beautiful. And now anti-gravity has finished that. Let's go and check it out. So, I've opened up and look

the host. And guys, would you look at this? The viral AI agent takes the internet by storm. It is organized Everything in the exact way that I specified it. Look at this. Because here's the interesting thing, right? If you actually go over to the AI rundown, for instance, the apps, they're not organized like this. What's really fascinating about this, like if I click on this, for instance, right, is that each of the things that we've pulled out are separate articles. and anti-gravity has gone ahead and just separated this out for us beautifully because it's Identified

what the title is with the images and we've got this awesome stuff that we can see now and I can down and say you know find dozens of free idols Google labs that's interesting and if I like it why don't I just come ahead and give it a heart beautiful go ahead okay so we need to quickly update this so let's just say we need to go back and anti-gravity and I'm so glad that's happened cuz I can be specific and saying hey there dude whenever I heart Something in the application I get this error

message Please just fix it. It's so hard. It is saved to the database and saved as my saved items. I'd also want the ability to delete when I hit the delete button. And when that happens, it should remove it entirely. And we come down and we just paste in the error code and send that straight off to anti-gravity. So when I come back over here after anti-gravity has completed it. So let's see if I can things. I like The look of that. It's now saved, which is cool. So I head over to the save section,

and I should see the lobster magically appeared when I refresh the page. Or I can just click this refresh button. And there I go. So now it's actually physically gone ahead and fixed it. And I'm really happy now with the functionality. I can pretty much add any ones I want to. I can check all the sources and we've got a really cool format now for how everything looks. Do You see how consistent it is, guys, like between bend bites and I've just got this really nice, beautiful flow and everything's there. So I'm really happy now

with the functionality of our wonderful dashboard. And so now we've completed the functionality and we're very happy. The fourth step in our blast framework stands for stylization. So we've got a beautiful house. We're connected to the outside world. We've got our connections. But the thing is It's looking a little bit better. The walls are white and you and I like a little bit of style. So, we want to refine that a little bit and that's exactly what we need to do in the fourth step. So, this section is all about stylization and refining the UI.

So, we're going to do the payload refinement, format, all outputs of Slackbox, notion outputs, email HTML for professional delivery, and then the UI and UX. So, if the project includes a Dashboard or a front end, we want to apply clean CSS, HTML, and layouts. And then we want to give feedback on what we think about the design. So, let's head over to anti-gravity. Okay, beautiful. So, now we're back. Now, here's the thing. In this video, we're going to go so deep into design. I'm going to show you skills. I'm going to show you things that

used to be reserved only for professional designers. But what I'm thinking we should do here is open up a Little project and just show you just generally speaking what this is about. All right, guys. So, I'm in it now. Now, this generally speaking is the bit I'm going to get into all the design systems later in the video, but I just wanted to outline the framework for you so you understand where we take a look at it and just make some judgment calls on what we think about the general design and you know, what do

we like and what do we not like. Well, one of the things I want to show you we can do very quickly in this video is something called UI sniping. So, what we can do is head over to a website like 21st.dev and we can find UI components that we think are pretty cool and we can just integrate those directly within our website. And again, we're going to go so deep on this guy. I really hope you're caffeinated for this video or have an orange. So, my last video said I'm going to grab an orange

instead of coffee. I Said that there's no place for you in the Jack Roberts YouTube channel with that kind of attitude. So, we've got these things on borders, buttons. Effectively, you can look on the left hand side for anything that you need. Maybe images, maybe maps, whatever the thing is for your design that you like. You can also give just general feedback. But the point is find stuff that you want. Like really go into the detail, have a think about it, be creative. And The cool thing is you're not having to design from scratch anymore.

Do you know what I mean? You're actually able to like take components and interesting things like this and do essentially whatever you want to with it. And so when you found something that you like within basically 21st.dev, dev, whatever it might be. Little hack, by the way, is best of the week. It's so freaking cool. And you can see all the stuff. You can even search by the week. Like look at This liquid gradient for example. So freaking cool. And what you can do very easily and I'm going to I don't want to spoil it

for later in the video, but I'm going to show you we go into depth, but you can just come and grab this stuff, right? So let's say for example, you really like the look of I don't know, let's say this. Say this is something that you wanted on your website. You thought, hey, this looks really freaking cool. What you do is you copy, you click On share component. You come over to anti-gravity and all you're going to do is just say, "Hey dude, I want you to go ahead and grab this component and integrate it

into my website." Okay, you paste it. And then what you can also do is come back over. I recommend you do this also is click on it's where is it now? Copy prompt. Now check this out guys. I come back right and I might just come down here, paste the prompt in, and look at the level of detail. Some say We've never seen detail like this detail before. It's crazy. But just to keep it simple, I might just say, "Hey dude, I love the light green. Could you change the color to light blue for me

on the website?" Just to give you an idea, we're basically coming down and we're just kind of tinkering with it to make sure it kind of fits our sensibilities. And then we're all happy with the design. And as you can see, club code's going ahead now and doing all this Wonderful thing. It's making all the changes, changing all the colors, which is great. Exactly what we like to see. We just again, you can flip between club code and anti-gravity exactly as you prefer. And then when we come back over, guys, you can see we've gone

from green to blue. That's working perfectly. And this leads us very nicely onto the fifth step of our five-step framework, our BLAST framework, which stands for trigger. Now, this is the point where we Basically decide how do we want this to work? What is going to trigger it? So, there's many different ways that this can work. Either say for example, it's a canban board or a project management tool or personal assistant that might just run when we're using it. But alternatively, it could be something that we want to trigger remotely using something called Mr. So,

for example, let's say that we want it to scrape every hour. Awesome. Or excuse me, every Day. But maybe our laptop is closed down, right? Or maybe we're just not able to physically do that. How do we make sure that that happens? This is the kind of thing that you think about when you get to the trigger section of the actual build. So to do that, what we're going to do now is we are going to publish our very first app online. How freaking cool is that, guys? I think that's really cool indeed. So we

need to do that. We're going to basically Basically publish it to GitHub. So let's swing over to GitHub very quickly. Once we're in GitHub, we are going to go ahead and create a new repository. We do this for any project we like. going to call this one scraper with a load of bars. That might not be available. Maybe it is. Don't worry about the description. Come down and then click on create the repo. So, this is going to be a place where all of your code lives, which is awesome. Then, what we're going To do,

you basically grab this kit here, swing back over to anti-gravity. Let's create a brand new window for this again. Actually, I'll pull up the the terminal. And to do that, by the way, all you do is command and L. And then we're here basically ready to rock and roll. Hey, dude. I want you to do a onceover check of the code to make sure everything's cool. And then I'd like you to post it to the below repository, please. Okay, simple as that. And then We control and v and then wham bam. Thank you, ma'am. Anti-gravity

is then going to take all this code and put it onto GitHub, which is great. Then when it's on GitHub, we're then going to push it live and we're going to host it on something called the cell. You're learning so many cool skills in this video. We're just going to go deeper and deeper and so many honestly I'm showing you like the map of all the cool things of how you do it cuz when you understand How to build, how to push it to GitHub, how to host it, the world is your oyster. you can

build things that you used to need sixf figure development teams and I know this I remember CT my last business I remember saying asking a question like how long will it take to get XYZ dashboard up and he said probably 2 to 3 months now we're looking at 2 to 3 hours if you're slow if you're fast and you watch tutorials like the ones on Jack Robert's YouTube channel You're doing it significantly faster than that I mean I I built one for example in like 30 minutes that did everything I wanted that's the level of

where we're at right now it's it's insane and what's very cool is that actually this will do any kind of security audit for us I always recommend that you say hey do a full security compliance order of this before pushing it live just to make sure everything's secure and set up. But it even does a Good job of just testing it itself in terms of credentials and how everything works. All right. And now it is ready to rock and roll. So we're going to head over to GitHub which I think is over in this direction.

So we're going to come back over to Scraper and we should see some files. And we do. Awesome. Now we're going to head over to Versel. Versel is the website that we're going to host everything on which is cool. And just to show you the kind of thing that You're able to build with everything you're learning in this in this video is websites that look like this. the interactive components how everything I mean look at the detail of this guys this was all done using anti-gravity nothing else like it's actually crazy I mean like you

even come down you got this beautiful thing here you can slide you even got this come up I mean it is gamechangingly cool like really really freaking cool but anyway I'm getting Carried away myself you get the idea so we're going to come back over now all we're going to do is essentially come on to add new and click on project and obviously it just automatically connects to GitHub which is cool and you can use it for everything going to come down and click on import your project will appear automatically and then click on deploy

on down there at the bottom like so. So this will be there for a hot second and essentially this will then deploy on Internet. And now the best way to think about this is that GitHub okay and Versel are like a mirror image of each other. So the second that something changes in GitHub it will automatically reflect into basically Versel. If I click on this now you'll see we have scraper.vell.app which means we're now running and rocking and rolling and having a great time. How freaking cool is it? This is a website now. You're live

on the Internet. You're literally live on the internet with this stuff. It's so freaking cool. Now, but what if you say, "Jack, this is cool, but I want to change a domain. I want to change what the domain looks like." Okay, cool. Well, how do we do that? Well, look, we come back over here, click on add a domain. This is very cool. And this is the same thing that I did, by the way, with my agency website. Like, if you're a business, you want to work with me, You do so by coming over to

scale your business. Look at this scalewithted.com. Again, this was built with anti-gravity using the exact systems that I showed you. Like, honestly, like, and all the stuff we're going to get into in this video. It's really, really, really freaking awesome. And then on top of that, we can do websites like this, which is ideas with Jack, which is the newsletter. You come on, you can check things out. Again, all built with Anti-gravity. Very, very cool. So, the point is you can change domains, do whatever you want to. All you do is click on buy, like

so. You come down. I'd call this one jackoolgy.com. It is available. Oh my goodness, I might need to buy that immediately. Oh my gosh, that needs to be my website. Jackiscoolguy.com. You click on that. Basically, go through the process and then you you essentially set it up. Then all you do is reconfigure it. So, just To show you an example of this, you see on Scale Teddy, we're getting 2,000 visitors a week on the website, which is cool. And then again, like everything's managed under domains. I just want to show you like a real example.

Like I actually do this stuff. This is what it works. And all you do literally is when you get skeleton.com, you click on the app name that Vell gave you, you click on edit, and then you click on redirect to another domain, which means if anyone Clicks on this link, they will be redirected to you. Like so. There you go. Straight to the new website, which is freaking awesome. But now we come back and let's say that we have something that we want to trigger automatically because if we were building an NAM, right? We would

have a trigger now node that say run every 6 hours. But how do you do that with this? Well, we're going to use a particular piece of software for this called Modal, Which is really cool. You're going to head over to modal.com. This is so cool. I love this place. They're on their homepage. They have this cool thing where you press the button. It does loads of crazy things. Like I'll show you when it loads up. You ready? Bam. I could sit here all day doing this. It's definitely a productive use of my time. So

look, you're going to come over to the dashboard. What Mod does is think of it like the code lives in GitHub. But Actually what we're going to do with Modle is connect Modle to anti-gravity and then we're going to say, "Hey, I want you to go and scrape every five minutes. Go and scrape my emails every x minutes or go and issue this code or scrape YouTube." I mean, I'm I'm breaking up even thinking about this, but it enables us to run and execute code when our laptops close down. It's basically just a container that

lets us execute code when we're touching it or Not. So, I click on dashboard for example. I think of just having like an employee that runs for you in the background. What we're going to do is, can you see this? create your first app. This is so so freaking cool and you get you get free credits with as well. All you're going to do is you've got this here. So, if you haven't got this already, copy this and head straight back over to anti-gravity. And we're going to give it the following. I'm Going to say,

"Hey, dude. What I would like you to do now is actually run the scraper every 24 hours." And we're going to use modal for this. So, just make sure that you've got it installed first using the below commands. All right. And come down. Bam. Can you see how much quicker it is using Glider? By the way, I must admit it's the only tool that I've used that's genuinely saved me like hours a week. And so building it with a team of pros has been amazing and I've Really enjoyed that and it's so cool. I use

it all the time. I literally use all the time. It's so so cool. So if it's installed, it will just say, "Hey, we've installed it. Awesome." But if it isn't, it'll go ahead and install the dependencies for you. Then this is where it gets cool. We're going to swing back over now to modal. And this is really really sick. So we've got this stuff here. Make sure it's all run and rocking and rolling. Decent. Then what we're Going to go ahead and do is wait for anti-gravity to open up. And look at this. It's going

to create a token, which means we can authorize it. We didn't we didn't press anything. I should have filled my hands during that, but basically my hands were right here. Nothing happened. API tokens created, which means that it's now connected. Then we're going to be redirected from this page in a couple seconds. And just like that, let me create a modal app That will run the orchestrator every 24 hours. So, think of it like this. Anti-gravity creates a code. And then we have these digital employees that live in this modal land. They just sit there

and we say, "Hey, you you're going to do this every x period of time without me even thinking about it." And it will just execute for you and work. This is how freaking cool this is. Like, it's so easy. Like I don't have a coding background. I studied law or European International law at university. So I was going to become a lawyer at some point and then I did very different things and I never had a coding background. Like all this stuff I've learned and if I can learn it, you can learn it. Like it's

that freaking cool and wonderful. And after some configury, we've now got everything live which is cool. Code is reviewed and approved. Push to GitHub. Modal automation deployed. What does that mean? Well, let Me show you over here. So look, if you go on live apps now, we have it here. It's all ready to rock and roll. How cool is that? And so you can see how your scraper behaves and you can see exactly when it's doing it. And here's the really cool thing. You can control it in plain English with anti-gravity to do anything. And

when it runs, it'll basically progress and give you updates and tell you everything that you need to know. And you can even say, grab that Information and throw it into Superbase. So you can see it. I mean, think of it like Lego bricks. You're basically building anything you want to. And you can even schedule an immediate run by clicking this, which is run now. And you can see down here at the bottom, it took like 1.92 seconds to get startup. It's now currently running. So if you just want to go ahead and trigger it, you

can do. But this is how incredible it is. And it succeeded and all done. And That's literally how simple it is. And it'll just continue to run on our schedule without us even thinking about it. Meaning we have these digital employees that just work for us 24/7 in the background. And so now you've learned the full framework of how to build any application, website, AI app with an anti-gravity, you are already ahead of 99.99999% of people. Like genuinely, this is crazy. But before I can show you how Incredible and how deep this rabbit hole goes,

what I first want to show you is something called anti-gravity skills, which will take your like abilities within anti-gravity from this to interstellar. So the team at anti-gravity in Google have just released anti-gravity skills and they have a couple of incredible benefits. First of all, when you create something excellent in anti-gravity, we can now make that super repeatable, which means That we can do it every single time on repeat. consistently. On top of that, you're also going to save so much of your context window when using anti-gravity if you use the skills. On top of

that, it also becomes super sharable and very scalable, which means the skills that I build and I'm going to show you in this video, I'm going to give you all of them so you can use them straight away. I'll put a link down below, but you can share it with your Team and it just makes all the environments super scalable. You basically become, if you want to think about it this way, Tony Stark and the skills are like the Iron Man suit. Now, if we think about it technically, well, skills are reusable packages of knowledge

that extend what the agent can do. Each skill contains basically instructions of how to do the thing, best practice what to do, and then optional scripts and resources. And the Skills in anti-gravity are different than claude. And you'll see what I mean in a second. So, you can basically create a skill for anything. Onboarding systems, database migrations, competitive intelligence systems, or even design protocols. It's kind of like the Matrix. You know that scene where they plug him in? is like, I know kung fu. That's kind of what skills going to be like within your anti-gravity

environment. Now, when do I use skills, Right? When would I actually physically do this? Well, whenever you find yourself repeating a prompt, it's probably a good indication that you want to build a skill. So, you never have to repeat yourself. You're at the gold standard once and then you can just call that in perpetuity whenever you want to and improve on it. It's really cool. What about Claude skills, Jack? Because I've seen a lot about that online these days. Well, Claude, if you think about It now, they are very similar, but there's a key difference.

Think about the Claude skills as knowledge, whereas anti-gravity is knowledge, but it's actually more automation. I'll show you what I mean. So, cl code in this analogy is like a worldclass chef. Okay? And he's got a library of cookbooks. These are its skills if you if you will. Now, when you ask Claude code to do something, what it does is goes to this beautiful library and grab that skill And it reads the book. It reads what the skill says and then once it's done that based on the information that it read within the book, Claude

Code will then go and do it. So I'm chef, I'm Claude Code, I've read the book. Now I realize I'm going to run a Python script. I'm going to do something random. Okay, you think about it another way. You have yourself here, which is me in a tank top. And we give a command to Claude code. And Claude code reads the skill, The book, and then it does the actions itself. Whereas with anti-gravity, given the fact that it's an IDE, effectively when it activates a skill, what can happen here is that the code can actually

be part of the skill, right? So essentially what happens there is that it runs the script within the skill. And so each skill in this analogy is like a beautiful pre-made dish and it because it already executes and does everything that we want to. So Claude skills, think About knowledge, anti-gravity, the ways I understand it, I think about it in terms of automation. So Claude must reason, write, and execute, whereas anti-gravity can reason and then execute. And this is based on my understanding from going through anti-gravity's own docs and skills and comparing that with Claude

code. So very interesting. And actually, one interesting thing I want to call out as well is anti-gravity, anytime we launch Any changes, they publish on the change log, but I'll put a link down below so you can check that one out, too. Now, to best understand anti-gravity skills, you need to use them. So, what I'm going to do is run you through five critical skills that you're probably going to use every single week within anti-gravity. I'm going to give you the full access to all the code. I'll put a link down below. But the first

one we're going to start with here, because remember, these Skills are going to make excellence repeatable, which is awesome. In other words, diligence, right? It's going to save you token count and it's just going to be overall epic for your environment. So, the first skill I want you to create is the ability to create other skills. So, here we go. We've got the anti-gravity skills creator. This document, by the way, is based on the information from Claude Docs on all the amazing stuff for creating best practice Skills, as well as all the specifics for anti-gravity

and the unique architecture for the skills there. So, what I've done, I've created it. Very, very cool. All you're going to do is literally come down and create all of it like so. And then we're going to go ahead over to anti-gravity like so. And here we are in the environment. So, I've created a sample project called Skill Master. Just open up a random folder. And then we're going to give it a prompt. And we're Going to give it something like this. going to say, "Hey there, I would like you to create for me a

global skill called Gemini skill creator." And the idea of the skill is that you reference it anytime you're creating any other skill. Make the skill available across all projects. I've put all of the text down below for the skill. Awesome. We're going to come down here and we're just going to paste that one in there, which is awesome. So, the cool thing about the Chat interface, and remember, anti-gravity is an agent first software environment. So, everyone tries to specialize in one thing or another. Anti-gravity really tries to specialize on, you know, being specific about um

being agent first. So, we can actually speak to anti-gravity to create the skills. And this is the whole idea of coding with our language, right? That we don't always have to put button clicks. Anti-gravity can do that for us Instantaneously. But just to give you a bit of an overview of what does make a good skill because you can go very deep on this, but top level from anti-gravity themselves, you name it. You have a description for what it does. Okay, we essentially talk about when it's used, it's review checklist and then how to provide

feedback to it. So you can get some real specifics, but you go so much deeper and this prompt goes way way deeper than that. We cover things in it Like formatting standards, the skill name, we cover things like writing principle, conciseness, so how do you actually create the skills? What are the best practices? And Claude's done such a good job on breaking down all of this stuff and all the specifics, which is amazing. So as you can see, we come back over now. We're going to accept all the changes. As you can see, we've now

got the agent skills, Gemini skill creator, and then we've got everything here, Which is freaking amazing. So, workflow, feedback loops, checklist, validations, lots of different stuff. So, this is now going to be the skill to create other skills. And effectively, the way that you trigger these skills should be based on natural language. So, the idea here is that Gemini will decide when to reach over or whatever model we use within, right? Could be Gemini, could be Claude, could be anything. But the idea is that it decides when to use the skill. You Can also trigger

the skill if you want to be 100% sure that it uses it. But in theory, it should just trigger it by its natural language. And if you ever find it isn't doing that, just say, "Hey, use the XYZ skill." Now, Gemini 3 is the best model on the planet today for creating gorgeous and beautiful designs. They're crushing it. But often times, we can find ourselves copy and pasting the same prompts and messages and design libraries. So, we can solve this with Our second anti-gravity skill, which is going to be brand design. And we can actually

use a framework that goes beyond the brand which makes it way more consistent. So for example in the brand design skill we can actually create a unique architecture. So with this one we have almost like a directory structure where effectively what we have over the top here is the skill MD which is whenever you're doing anything design you can then decide which of the three Almost like subsklls if you like you want to activate and leverage. So we can have one for design which colors colors fonts radi make it machine readable. We have frameworks and

coding rules for like what text you want to use and then copyrightiting guidelines. So this is the bit where we could say for example add in hey if you're writing in the voice of you know glido our speechto text startup you could say look we want it to be these colors or write in this Tone of voice. So it just knows automatically and dynamically when to invoke that specific skill. So let's copy all of this right here. Let's head back over to anti-gravity and give it the prompt which is awesome. So, I'm going to say,

"Hey, using this skill creator, I would like you to create a the below skills for based on the text." Okay, cool. There we go. Pop all that information in. Bam. Send that one off. And then again, let Gemini work in the Background and create those skills for us. And then from your purposes, what you then want to do is actually load up all of your brand guidelines and information. So, for example, what you do is say, "Hey, I want you to edit the information and context within the skills based on the blow information." And literally

just drop it in the chat window. Or if it's a PDF, you can literally drag and drop it on the left hand side and Gemini can read that. Little hack for you as well. By the way, if I actually come over and grab like the Glido brand guidelines, right, I open this up. You can see it's really cool. It's got loads of stuff in typography, all our text, all this cool stuff, right? What you can do is drag this over into the file and then actually when you want to reference it, for example, what you

can do is say, "Hey, I want you to update the information in the brand design Guideline skills based on the information within this document." Okay? And then what we do is we do at like so and then we can tag that document. Right? So this is called glido brand guidelines. I just do glido brand guidelines PDF. Boom. So you can describe that natural text but this literally grabs the specific route to it and you can just add whatever you want to and then you throw it in there which is awesome. Little side note by the

way If you're looking for inspiration on what do I do this? I talk about this often in different videos but if you go to vcrol.dev you come through to playground. Again what you can do is enter in any business website you want to. So what the classic example I always use in fact let's even do glido.com right what you can do with this come down markdown and just come down and select branding this will then basically let you go ahead and get all the Branding information for a particular website to create a mood board and

a vibe to know what you like. So if you like the look of glider you think dude this is a really cool brand you can see our logo you can see our fabricon you can see our OG image and you can even see the fonting that we're using as well as the specific accents. So you could be like, I love this. I want to do something similar. I want to play around with it. And you can do that exactly Just like that. And the other thing that I recommend you do as well is actually upload

your logos to the skill as a reference file. So when it creates things for you for your website, you create new pages or anything like that. It knows what logos to use and when. So we can test this by saying, "Hey, I want you to create for me a very simple simple HTML landing pages. Do it in my brand guidelines and make it just a gorgeous design, very simple, talking About why coffee is the best drink on the planet." Beautiful. We're going to turn that one off and we're going to see how this then actually

pulls ahead, uses those skills and builds something really simple. And as you can see down here already, guys, it's pulling through the skills master agent skills, brand identity, which is awesome. And then it's creating a bit of a mockup with Gemini, which is fantastic. And I also just want to call out that this is one Of the cool things about anti-gravity and the Gemini model being embedded within the chat that when you're doing various different things, it can actually generate for us these images, which by itself, PS, is a skill you can make. If you're

building things, you want Gemini to generate images, say for your website with the SEO and stuff, you can say, "Look, all the images I want you to generate should be in these dimensions and follow this style and Follow this reference image." Meaning, you can build that as a skill. So, you actually automate the creation of these incredible images. And now, it's completed that. And as you can see, I gave it one prompt. It did it. It checked everything for the brand guideline adherence. Again, it leveraged the skill, so I wouldn't need to keep repeating myself.

I can come down and all I asked it for was to open up in local host. So, we click on local host 8000. And then if we full screen this, can we see it? Feel my progress. And what's really cool, guys, it's grabbed the logo. It's followed the exact branding thing. And I even show you now just as a little for instance, I'll come over to Glider itself. Does this does this branding look familiar? Does it look Does it look like a fast speech to text thing? Damn right it does. But you can tell, but

it's it's just automatically and even when I'm Highlighting it, it's gone light green now, which is freaking insane. Obviously, it's just now ready to rock and roll. I just I think this is absolutely crazy. It just saves so much time. So, you can get that consistent result. And here's the key thing about the skills in anti-gravity is that if the result isn't perfect, that is so cool, just go back and amend it and refine it. But once you get that maxle standard, it should never fall below That. Now, as you know from my last video

looking at what the creator of Claude Co, I mean, Claude Co does a billion a year in annually recurring revenue. So, the creator's got some interesting things to say. One of those interesting things, and I've been talking about this a lot, is the importance of the planning stage. Ask stupid question, get stupid answers. In the same way, we can actually improve the quality of our outputs by asking way Better questions. And we can do that by leveraging again a skill for brainstorming and a skill for planning. So there's this amazing repo here which is fantastic.

And again, this is the beauty of skills is that we can all learn from each other and get better as a community which I freaking love. So you can see here we've got some stuff here for brainstorming which is a great way of doing it. You can see this brainstorming skill which is skill by MD And it's got lots of stuff. So, this is about how do you actually create and brainstorm better ideas? And then there's going to be a skill for planning, which is phenomenal. So, what I'm going to do here actually is I'm

going to come over to the main page real quick, which is going to be over here on the code. And then we're going to copy the whole thing on code like so. And I'm going to copy this and head straight over to our beautiful anti-gravity. And Then I'm going to say, hey, using our skill creator MD, I want you to grab this GitHub repository and create me two skills. One for planning and one for brainstorming. Awesome. Okay, come down. And I'm just going to give it a get and let it do all the work of

actually just grabbing it for me. And just like that, it's now completed it. It's done a brainstorming skill and also a planning skill. So I might say something like, "Hey dude, I want to brainstorm some Ideas of how I could grow my e-commerce business." Okay, something random. We send this one off and then we can activate and see how it leverages the skill. And just like that, you can see it's analyzed skill.md, which is awesome. I also want to show you as well on the left hand side, you can go on to skills. We can

see this now under planning and skill.md under planning. And it's given everything we want there. So you can see it's got some interesting Features here. It's an overview. Write a comprehensive implementation plan. Each step is blah blah blah. And it's got this all this great stuff from the GitHub there. And the model itself is now asking clarificatory questions to help us get that and pretty much crush it. Meaning that you're going to have a consistent robust framework for planning and doing anything we need to with an anti-gravity. Imagine you built your dream workflow and you're

pushing the Envelope. You're doing something very different. Invariably at times you're going to run into what is known as a bug or it's just not working properly. And when that happens, we need to troubleshoot it. But the amazing news is that we can actually leverage a skill which has basically been created on all the best practices, the common things that go wrong, which means that anti-gravity can leverage the skill to fix the error way faster. And to do That, we're going to leverage this beautiful skill here from this repo, which explains all the specifics, which

is amazing. Master error handling patterns across languages, including exceptions, uh, result types, error propagation, graceful. So, what we can do is literally come down and we're going to copy this entire repo and we're going to share that with an anti-gravity skill. And this is one of the awesome things I love about the community of Building is that you get to do these things, find all the cool stuff, and basically like leverage all this cool things that we do together. So, if I come over then to anti-gravity, I'm going to say, "Awesome. I would now like

you to forget what we're just talking about, and I want you to create for me a troubleshooting skill, which we'll use to basically troubleshoot any application to make sure that it gets fixed." Fantastic. And then we're going To throw all that code in there, which is awesome. and send that one off. Again, you could just give it the GitHub repo if you prefer, but alternatively, you can just post it and craft these skills yourself dynamically whilst you're talking to anti-gravity. And again, the key here is that anything that you would be asking of these models

or within anti-gravity, if you find yourself asking it a few times, ask yourself, should I just take 2 minutes To write like the best thing I can to get the highest level possible and then I can just use this whenever I need to in any of the applications that I'm building. And that takes us very nicely onto our fifth skill, which is a really interesting one because it's the idea of running scripts within the actual anti-gravity skill itself. So for this one, we're actually going to create some code that does something interesting like scrape a

subreddit for something. And then once that skill's created, we'll be able to just say, "Hey, scrape this subreddit." It will reach over, execute the exact code within the anti-gravity skill, and work perfectly for us. So to do this, let's create a skill. Hey dude, what I would like you to do is to create for me a scraper that would scrape the top three posts of any subreddit Reddit I choose. I want you to create it, validate that it works and let's do it with the NHN subreddit as if For instance. So, I've sent this one

off and the reason why this skill here is actually one of the most interesting and most powerful is because when we validate and prove that you can actually create executable code as a skill, we can know and bank on the fact that we can lean over, leverage that, and use that whenever we want to. Now, I'd like to build these ones in two steps. The idea I've got here is validate the actual execution performance of it. Then, we're going to codify it into a skill using our skill creator, and then we can reach over and

use it for pretty much anything that we want to. So what previously used to have to be a dashboard or a project can actually now just very easily be a skill. And again once again we're using MCPs here. Now think about this. The skills themselves are code instructions knowledge practice. MCP really is about data data exchange and data gathering. So they all Work together. That you know saying don't use MCP use skills is like saying something like don't eat food drink water. Like they're completely different things. It's like they're just absolutely different things used for

completely different contexts and for our purposes it's very cool because we can do some epic stuff way faster. Beautiful. So within one shot it has done it. It's actually interestingly used the old Reddit to do it reliably Without the need for any APIs which is really cool. So what I'm now going to ask it to do is to codify this into a skill. Awesome. I'd like you to turn this into a Reddit scraping skill for me in line with how I explain you need to be building skills in the skill creator MD. Beautiful. Once again,

I don't need to specify skill creator MD. I think that kind of want for it to never go wrong makes us do it. But in reality, Gemini should know this. And the reason Why this saves us so much in terms of token usage is that if all this stuff just existed as let's say for example, folders on the left hand side, which is a way that probably most people are doing it right now because this thing came out like this week. You know, it'd be burning through your tokens and not everybody is on the supermax

ultra mega plan. And the thing about that is like you token usage becomes a key thing. So, what Gemini is going to be doing here is Looking into the skill, looking through the description, saying, "Hey, you know, the Reddit generator skill might be relevant for the thing we're doing. Let's actually go ahead and use it." So, it's cool. So, now it's literally developing this for us. We're just going to head and accept this, which is cool. And man, I must admit, I've had a pretty beautiful, interesting week. We're planning out all the meetups for the

community. So, we're doing South Africa In two weeks. Then, we're doing a meet up in London in March and then one in Japan in April. So, we'd love to come see you. Grab a coffee, say hello, shake your hand. We always have great times. One of the things we do a lot in the community is in-person meetups. I freaking love it. It's so good to see people in person. So, we're going to buck that. Last time we did, I think it was like mini golf. It was very cool. It got very competitive very quickly. We

Rented out this place in London. It was so cool. So, there's now pip and popping in the background completing everything for us. We're just going to accept all to make sure this is all completed. And then we can actually test it by creating a brand new chat window and then just asking it to scrape a random subreddit to get a couple of posts. And I like to do that by testing it in a new window. So, there's no context. It is a fresh, brand new conversation. Now guys, check This out. Can you see now within

the scraping Reddit folder, we've got resources, right? We've got scripts. So this the Python script is within this. So we're not saying, "Hey, use it's like literally within that, right?" So let's come over and create a brand new chat window, which I believe they might have changed where you do this. Actually, I think it is start new conversation. Cool. So, let's get rid of this and let's give it a prompt like, "Hey, can You just scrape for me the top three posts within the singularity subreddit within the last 7 days?" Awesome. Bam. Send that one

off and then we can see if it actually goes ahead and uses, but I know it will use our actual beautiful skill, but I've not told it to do that. It will just then actually have to decide whether it wants to use the skill or not. So, let's have a look. It's analyzing whether the scripting is done. Analyzing skills.mmd, which is cool. So, Let's check it out. And it has decided to use the scraping thing. And again, it's got description scrapes to top a hot purse from specified subreddits. And look, it's even now using the

scraper that's in the Python script there, which is awesome. This is freaking crazy, guys. So, it's examining it. It's a Justin Reddit scraper. It's now running in the background. It's got all this information. This is crazy. And you can see now, say, for example, I'm looking At my YouTube channel. I might say, "Hey, just like remind me what were the top posts that I've had so far this week." I create a scraper for it and it's done. And look at this. We've got the answers. Driverless van in China are facing all sorts of challenges. Atlas

ends the year with a backflip. Atlas has its own moves. How freaking crazy is this? This is gonna sit there for us now on autopilot. I can pull that skill whenever I want to. And this is just one Example, but it's spun up in like 20 seconds. It's ridiculous. And so now you've understood exactly how to leverage skills. The next thing that we need to do then is build out the toolkit you're going to use with an anti-gravity because bear this in mind that the strength and power of anti-gravity in many respects is all determined

by the number of skills and connections it has. And I'm going to show you some stuff that is going to make it so unbelievably Easy to build anything you want. It's going to genuinely surprise you. Now, beautiful, before I show you the very first MCP you should 100% have, I want to do what I call some MCP housekeeping. So, MCP, as you know, stands for model context protocol. It is the universal remote control. I've lost my remote for the analogy, but you get the idea. The idea is this. If something has an MCP and we

give it to anti-gravity, it can do anything within that app. Now, we Have something called super connectors that are going to blow your mind. The first port and call we always do with anti-gravity is we come to these dots at the top and we click on MCP servers. This is a library of existing ones. At the moment there isn't that many of them, but you can connect to anything. The classic example of the one that you're going to use a lot of time and there's a lot of different things like they've got Stripe now which

is awesome. So we can connect to Stripe. That's probably helpful if you want to monetize and do various different things. But you get the idea. So first thing we do is check in the MCP source. So we go for it does it exist here. Superbase does. Awesome. We come down as we did last time. We click on configure. We click on boom. This opens up into new window. We generate an access token. So we may call this one ABC. Expires in 30 days and we'll put it down for 1 hour. Click on Generate a token.

We grab the token and then we just simply input that back into anti-gravity. We come back here. Super base access token. Bam. So step one is we always check to see is it there? But if it isn't, what do we do? Well, here's the cool thing. You have something called your MCP config or your MCP configuration. And if you click on view raw config, you have all this information in file. So essentially what we can do is grab the MCP for anything And throw it in here. And what's really cool is we can actually ask

anti-gravity to do that for us. How crazy is that? Let me give you some game real quick. What I want you to do is head over to this website mcpmarket.com/server. This is crazy. This shows you the most popular MCPs on the planet, which means that you can come through this and think, I would quite like superpowers. I'd quite like playright. What does playright do? Playright gives you the Ability to open up a browser and edit it. Now, that's native within anti-gravity where you get how cool this is. Superpowers, context 7 fetches uptoate documentation and code

examples for LLMs and AI code editors. We click on it, we've got key features, we got use cases, everything. It's so cool. We've even got a readme. It explains everything of how you add it in. It is freaking wonderful. And crucially, you even get this in here as well. So, you Can just copy this in, throw that in as your MCP server and kick butt. So, first thing I'd recommend you do is have a look through this, play around with it, try and find all the different bits and pieces that you like to decide what

it is that you want. Now, what are we going to use? We're going to use Zapia. Why? I'm going to show you exactly why. Now, Zapia is like goated to this stuff. Now, Zapia is actually what I used initially to build my first business. I freaking Love this platform. But the reason why we're going to be using Zapia here is because it is connected to when you compare it to any tender make, no app has more connections than Zapia, which is one of the reasons why we're going to be using today cuz they are freaking

crazy at connectors. And you're going to see exactly why. So, website's very, very cool, very decent. Let's get into the meat. Let me show you exactly why we're going to use Zapia. Because when We connect anti-gravity to Zapia, we actually get the ability to connect to all of our tools in the Zapia. And when I say that it's easy to set up like, okay, I'm just going to show you cuz it's crazy. So, what we're going to do is head over to zappy.com, create account if you don't have one already, and let's go and log

in. Okay. Now, when you're logged in, you're going to see something looks a little bit something like this. So, you can create workflows, Chats to it, that kind of thing. But for today's purposes, what I'm really curious to look at is Zapia MCPS. And you can reach Zapia MCPS by going to mcp.zapia.com/mcp/servers. Now, check this out. Let me delete this cuz we're going to go together from scratch on this. Right, this is actually wild. So, click on new MCP server like so. And you get to decide what it's connecting to. Now, what I'm going to

do here is click on other, which is fine. So, click on other and you're going to see some information. Now, what we do first of all, very simply, is pick the tools over 8,000 apps. I said 6,000. I drastically underestimate that. I click on add new tool. Now, what I want to do here is use Zapia to connect Gmail and Google Calendar and all my stuff. So I can basically say to anti-gravity, hey dude, you know what was that email I had two days ago about Jose and it can go and grab that for me.

So let's just do So basically scroll through and you can literally look at all the apps that you want to connect. So think of this as Willy Wonkers Emporium of incredible apps. And honestly the cool thing is with Zapia, you don't need to create a workflow for the MCP. You just select the tools. That's how crazy this is. So come down and click on Gmail. Really cool. And I'm going to click on all this stuff here that I want. Yes, label's cool. Create a draft. Create draft Reply. Create label. Bam. B, bam, wham, bam. Thank

you, ma'am. Happy with that sort of stuff. You can even go into advance section if you want to and pick out specifics, but we don't need to worry about that just right now. So, let's come down and select all of them. There we go. We can just always This is actually really cool. Okay, so I've selected all of the information down here. And again, just do this for all the apps that you want to connect. Then Click on connect. So, say for example, you've gone through this process. You want Google Drive. If you're doing Google,

I like Google Drive. I like Gmail and I like calendar. With those three things, I can manipulate files. I can check my availability and build like super agents. Really cool. So, we're happy with that. Basically just pick as many apps as you want. Then we're going to click on connect. Now this is where the kind of magic happens in. Now we're Going to generate a token. So we come down here and click on generate token. Click on generate token right here. And what you're going to do cuz you won't see the credentials again is copy

this which is connect to. So we're going to head back over now to anti-gravity and give it the following prompt. Okay. Now check this out. Come over back to H. Hey there dude. I would like you to add Zapia MCP to my MCP configuration. Below is information that you need to do that. Okay. Ctrl +V which is the initial thing. And we come back over and you can copy the token or you can just copy the full URL which is the what to connect to and actually the token. So let's swing it back over to

anti-gravity and give it that information. Just simply replace this with that full information. That guys, the Zapia MCP is now configured and ready to use. You may need to restore your MCP client. So what we're going to do is click on this refresh Button. And if this has worked properly, we will see Zappia appear now in the left hand side. And just like that, we actually have it fully set up. And I'll put the Zapia MCP configuration down below in the description for you so you can copy and paste it so you don't have to

like speak to it. But look at this guys. We've got add tools, edit tools, Gmail attachments by file name, all this kind of stuff. The best way to test this is in a new conversation. But what we're Going to do is reset it. So let's come down here. We don't need to save anything. I'm just going to save the MCP config for example. Going to click on X and restart anti-gravity in a different environment. So here we are. Let's put it to the test and ask it a question about my last email. Hey dude, could

you use the Zappia MCP and just tell me what was the subject line on the last email I received. Bam. Send it off. Now, this is amazing because we can now ask it Questions about our emails, about anything we physically want to. So, we're going to send that one off right now. It's then going to go ahead and use the Zappia MCP. And look at this. Zapia Gmail find email. This is crazy. Now, you look instructions. Find my most recent email in my inbox. Output hint, just a subject line query is in the inbox. Just

like that, someone sent me an email about a paid partnership. And that is literally fully connected that. And that's just not where it's up cuz if you come back over into configuration, we can just keep adding tools here. And so, like, it's insane. You don't need to build scenarios. You just add the tools and Zappy becomes the super connector for anything you want to. Air Table, Slack, like you just add the things that you want into Zapio. Connect that to anti-gravity and then effectively can do whatever we want to. That's how freaking incredible this thing

is. So, for Example, one of the things we could do is add in Fireflies like so. I click on Fireflies. Very cool. And let's say I want to add in all these different things here. Very decent. I can click on connect. I'm going to go through the whole process. I click on connect. So, this now wants us to grab the link and the email, which is fine. just go grab that information and then we open up the page and you can see we just go ahead now and get the API key come down here And

simply copy come back over here throw it in the field and then once you've added in your email address you're done and we just add the four tools now it's just got an even more powerful how crazy is that so as you can see it's all completely connected but and let's say we want to add a different skill like pine cone to give it long-term memory so we need to grab the MCP service let's come over to our website again and type in pine cone like So so we can get the exact config going to

save us a nice step and there we go pine cone developer. That's what we want. So, we're going to click on this guy here. So, enables air coding assistants to interact with Pine Cone projects. Sweet. So, what we want to do is on the read me, and all I'm going to do is literally copy this whole page. Come back over to anti-gravity and say something like, "Hey there, dude. I would like you to add Pine Cone to my MCP config, please. Here's the documentation, and I'll post my token at the bottom." All right, come down

documentation. I'm going to say my token is, and then we head back over and then we're going to head over to Pine Cone itself. Pine Code, if I'm familiar, is all about long-term memory. So, let's just take enormous data, enormous files and store it in a way that we can retrieve it, just the bits that we need, basically. So, let's go ahead and sign Into Pine Cone. It is freaking amazing. Also, anti-gravity will vectorize anything for you. And so, now we're over here going to come left hand side to API keys. And then we come

up here to add API key. And then we're just going to give this a name like tester and come down and click on create. And then you'll see the API key generated. You copy this, close this, come back over to anti-gravity, and then just simply throw it in right there. And just like that, Almost by magic, it's done. Except for it isn't magic. It's working some cool stuff in the background. Now, how do we know it's working? Well, we click on MCP servers. We click on manage MCP servers. We load it up. And we should

see something pop up. So, if I click on refresh, for example, what we should see here on the left hand side now will be our great and awesome Pine Cone. Once that's finished loading, and just while that's loading up, if I come back over To Pine Cone, these are really cool things. So I can vectorize anything, add anything I want to kind of through to my database. We can ask it questions about anything. Little little tip when you set this up, you want multilingual E5 large. Really important cuz it's the best one. So I've got

some information down here from PDF. Let's have a look. Hope to meet you in your company soon at Astro. Awesome. So I think I basically took all of the fields from Alex's how to make Offers so good. People feel stupid saying that. So that's the book that I ingested. Alex Alex's $100 million office. So let's come back over and we should see this loading up right now. And then when we come back over, pine cone will be visible. Little tip by the way, if you ask anti-gravity to do it and it's misbehaving, sometimes it stores

it in a different MCP config. Very quick workound for that. Click on view raw configr C and say, "Hey, I would like you to add the below MCP config to my MCP config." Okay, I'm going to say new config and then type in blah blah blah and then say existing config and then control and v basically everything like this and then say paste the full config back to me. Okay. Then you come over to this, you control A, you delete everything. Then you just hit Ctrl +V, then you click on file, click on save, and

you're ready to go. So let's give it a little test. So I Said, "Hey there dude, could you use my Pine Cone account to check what were the main principles of Alex Mos's book?" And we send that one off right there. Right. So let's see what it does now. So what we know that it's working if it uses Pine Cone MCP. Now, what's really cool with this is you can index anything in Pine Cone to do anything you want to. It's now checking list of indexes and it will come back and actually check that for

data. So, we can throw huge PDFs and Documents and do whatever we want to with this, which is amazing. We can add multiple indexes, which is crazy. And think about this. Any app you're building, we can basically now connect Pine Cones as long-term memory. So, you can see the potential and the configurability of this. It's genuinely crazy, guys. Look at that. Just as I'm saying, it's all coming down like the Grand Slam offer concept, the value equation, business strategy, scarcity, Urgency, all the stuff that we uploaded to Pine Code. It is crazy. We can also

upload any file we want to. For example, let's ask this question. Hey dude, create me a document left hand side called jackmp and I want you to write me five sentences about why coffee is the best drink on the planet and let's upload it to both of those indexes. We call this vectorization. Vectorization is very cool. Sounds very fancy, but it basically just means taking any document Or text and to vectorize it means we turn it into a long string of numbers. That's all we're really doing. The way that I like to think about this

kind of vectorization and and rag which is long-term retrieval augmented generations long-term memory is imagine we had every Harry Potter book right these models have a context window. We spoke earlier in this master class about context rot and it's like every time you ask it a question it takes the existing Memory of the entire conversation and runs it through and eventually it just starts to forget things. AI can sometimes be confidently incorrect. That's the problem. Right? So here's the interesting thing why that's why we need RA because it's added it to our indexes. So let's

validate that that is true. I'm now in here. Let's refresh the page and we should see something pop up now about Jack and his beautiful coffee. So let's come down and like that. Jack coffee is The ultimate elixir that transforms groggy mornings into what? Okay. So let's take this as a instance. Let's come back over now. So what I'm going to do now is I'm going to delete this. We don't need this anymore. Let's completely delete it. Yeah, 100%. Let's open up a brand new window and then let's ask it a question. Hey there dude,

could you complete the blow sentence based on your long-term memory with pine cone? Bam. And put dot dot dot. And You'll know that it's actually searched that based on its index calls. So check this out. Pine cone list indexes. Check everything out. This is so freaking cool, guys. Honestly, this is absolutely wild. Yep, it's got a coffee index and pine cone. You might have guessed. I don't mind my coffee. I love my coffee. Wonderful. It's doing it. I can see my name space. It's doing lots of different tools. So it's almost like, you know, you

have like every every Harry Potter Book. So instead of checking all the contacts, we just chop it up into millions of little mini chunks and then we only grab the thing we need. So look at this. Coffee is the ultimate elixir that transforms groggy mornings into productive powerhouses. I wouldn't have said that about the groggy mornings. We have wonderful mornings over here. But you can see now it's literally done productive powers delivering both energy and focus. Come back over here to Deliver rest energy and focus. It is literally crazy. And that's now at your fingertips

and can be added to any application. And if there's anything you want to add, you just follow that exact same process that I just showed you. So now you understand how to connect any MCP. What about a service that doesn't have an MCP? One of the most powerful tools on the planet today anyone who's super productive is using couldn't be connected to anti-gravity. But then Again, what if it could? Well, I'm going to show you exactly now how you can connect basically anti-gravity to Notebook LM to create the most unbelievable powerful combination. Let's jump straight

to notebook LM can research anything. It can turn content and research into audio. You can learn anything. It essentially is like an unlimited knowledge base. And obviously, as it's no surprise, Notebook LM is exploding right now. So, Microsoft Word Is for documents, Excel is for spreadsheets, and anti-gravity is for building software. It's the best way to understand what this thing does. Now, what happens when we combine Google's anti-gravity with Google's Notebook LM? Well, it turns out quite a lot actually. So, there's way I want you to think about this. Notebook LM is like the reader,

okay? It understands, it reads, it holds massive context. So you're talking 40, 50 different documents, Resources, YouTube videos, everything. And it also thinks and then you've got anti-gravity, which in this relationship is like the builder. So it builds software. It builds systems. It connects things. It can connect to anything. Like it's really crazy. And it also is kind of like your command center, if you will. Now, here's the problem is that if you're using massive files and anti-gravity, maybe for your own personal operating system or you're Building things, it costs tokens every time the AI

has to read those files and that can lead to bad performance and actually cost you money because you burn through your usage and you need to like spend a lot more. But when you connect these two things together, anti-gravity and notebook LM, we not only solve this problem, we actually unlock incredible capabilities. And I'm not exaggerating because you can create unlimited notebooks programmatically within Anti-gravity. You can use that knowledge for projects that you're working on. You can ask any question about any notebook that you have in one chat. You can create infographics, slide decks, reports,

even do deep research and create audio overviews and a lot more all from anti-gravity. And you can do this all at scale. And anti-gravity itself now benefits from this kind of within the realms of a notebook landm this infinite context unlimited deep Research agents that happen outside of anti-gravity which is going to save you money and increase your performance and also I should say that you can upload these documents to anti-gravity and actually add those to your own notebooks with a notebook LM. Now I'm going to show you the incredible capabilities across five levels of

difficulty with each new skill being even better than the last one. None of this will mean anything to you unless you understand The ABCs of Notebook LM. I'll put timestamps down below, so feel free to skip this bit if you've seen it before, but this context is going to make you a power user of Notebook LM and give you amazing context for this video. So, Notebook LM is Google's main software to understand any kind of resource. It is very cool. You access it at notebookm.google.com. I'll put a link down below. And the way it works

is you can, as you probably Know, create notebooks, which is awesome. So, one of the things that we can do is drop in any resources that we want to. That could be articles, could be YouTube, could even be from your own Google Drive or copied text. So, for example, if I was on Jack Roberts YouTube channel and I wanted to learn about anti-gravity skills, I could copy that link, head over to Notebook LM, drop it in there, really easy, and then I literally just hit enter, which is Cool, and it adds that now as a

resource for me. One cool thing you can do in Notebook LM is do fast research. So, I could say, hey, teach me about anti-gravity skills. And what Notebook LM will do is actually go on the internet and compile like a list of 30, 40 plus different resources on that topic. And then effectively what you can do is chat with it. So hey, could you give me a brief TLDDR of anti-gravity skills? So essentially anytime that you Want to learn anything, all you do is add the resources in or get back to do that research and

you can have a beautiful conversation with it in the window. But it doesn't just stop there. You can export this as an audio overview, a video overview, mind maps, reports, flashcards, quiz, infographics, slide decks, and even tables with data. With the Notebook LM, you can actually customize the way that it speaks to you by clicking on these toggles here. And You can say, hey, do you want a conversational goal, style or ro? You can click custom and then give it these examples there, which is awesome. And then with a notebook LM, if I just want

to have a conversation, say with a couple of things, I can untoggle those resources and then just have a conversation with anti-gravity. But the TLDDR of it is that it makes learning and creating resources a million times easier. And not only that, you can Actually chat with your own notebooks within Gemini itself. But the TLDDR of the platform is that you can ingest PDFs, documents, files, research, anything from your drive, any research, put it all together in one really big database and ask it any questions and then turn that into any number of resources to

learn presentations you literally name it. So the first level of our five level system here is to actually be able to create these Notebooks from within anti-gravity. And one of the reasons why you may want to do that is because you can connect anti-gravity to any project you're working on and you can spin up an infinite number of them. So we could say to anti-gravity, hey, I want to learn about creating blue bottles. What would be the 10 topics I need to know? And then we can get anti-gravity to create for 10 expert notebooks on

notebook lan that we can then query and have Conversations and bring into any project that we do. But before we do that, the first thing we have to do is actually install it and connect it to anti-gravity. And the way we're going to do that is by using something called MCP. So if you haven't already, go ahead and download anti-gravity and welcome to the future. Now when you open up panzai gravity it will look a little bit something like this. Now I've created a random notebook here and you can do that By file at the

top click on open folder and then you just create a brand new folder and it'll open up that and that's going to be our workspace. What we need to do is basically connect it via MCP. So MCP stands for model context protocol and all it lets you do is connect anti-gravity or any app to any other app. I always use the analogy of universal remote control because it's really awesome. So if I connect it to notion for example which you can access By these dots here MCP servers I can type in notion I can connect

to notion I can create articles in notion I can do anything. So it lets the intelligence within anti-gravity connect to anything. So the question is well how do we connect to notebook LM? Because as you'll notice there's nothing in the notebook LM store. So how on earth do we actually physically do that? Well what we're going to do is give it a beautiful prompt. So to do that I'm going to shoot Over to my school community and grab this link. I'm going to put this link down below for you as well, just so that you

can just copy and paste this and get it done and you don't need to worry about the fafage or all that kind of stuff. So, we're in notion. All you're going to do is come down and copy this. So, what this is all coming from is a GitHub repo, which is awesome. So, let's come back over here. Come back to the agent and then we're going to paste this In. Now, obviously within this, you have many different models. You can choose Claude Sonet or Gemini or whatever you like, which is really freaking cool. And the

really decent thing is when we're connecting to Notebook LM, by the way, is that notebook LM is powered by Gemini 3. like it's one that's really super powerful model. So, we get lots of cool stuff. So, I'm going to help you install and set up the notebook LM MCP server. Let me start by checking your system and Then it starts to run and do many different things. Now, if you don't have this installed, it will install that for you. So, if it starts asking to install things, it'll just for you instantaneously. If it's consistently asking

for permission, I always recommend that you keep that on initially, but one of the things you can do is click on anti-gravity at the top. Yeah, we're happy with that. Anti-gravity settings. Anti-gravity Settings. And then under here, you can actually determine the frequency at which you want it to permit and do things. So when you're comfortable with it policy, you can do always proceed or ask your questions for your agent, for your browser, and for everything. So let's come back off these anti settings and come back over. Awesome. So it's found the MCP current config

file. Let me check its current contents. So we're going to allow it for this conversation And then just let it install. You'll notice now that it's been installed successfully, but we need to update our MCP configuration. What does that mean? So when you click on manage MCP servers, you can see a list of all the MCP servers that we've got here, right? And you can see notebook alarm mcp's there but we need to connect it which is awesome. So as you can see it's actually opened up a brand new browser. Now the reason why it's

doing this is because I Basically asked it up to sign in authorize. So the way we're connecting to MCP is via the browser credentials. So what this is going to do is open up a brand new window get us to sign into notebook LLM and then that will enable us to connect. And as you can see it's now opened up notebook LM in the browser which is great. And the little blue hue by the way is what anti-gravity does when it opens up a browser to check various different things. And so the Only thing we

need to do now with anti-gravity is go over to this website actually login which is going to be awesome. So let's go ahead and do that right now. Beautiful. And after signing in, it's now complete. And you can see this in manage MCP servers. And look at this guys. I've got everything here. If you don't see it, just hit refresh. And then it will repopulate because what's happened here is anti-gravity has added it to what we call our raw config, which Is where all the data sits that describes what we're connected to, which is freaking

awesome. And we have access to all this stuff. Now what it's done is grabbed the tokens basically from the web browser. And now it's connected to our own notebook element. Now the first thing we want to do really is leverage the capabilities we've got. So in level one, what we're going to do is open up a brand new chat. And what we're going to do is first of all, and I encourage Everyone to do this is if whatever the bottleneck is in your business or the thing you're working on is describe to anti-gravity what that

thing is and let's ask for five topics of areas by the following. So check this out. Hey there dude, I am trying to learn how to grow on YouTube. If I wanted to learn to grow on YouTube, what would be the five areas of knowledge that I would really have to nail down to make sure that I succeed? Give me maybe like three or Four that are specific and one or two that are hyper specialized. And all I want is five topics. A topic and a little bit of an explanation about that. Awesome. So, what

I'm going to do now is chatting with anti-gravity to get five different topics. Again, I could have asked for 50 topics. It doesn't really matter. So, content and strategy, audience psychology, packaging, thumbnails, and titles. I agree that's like really important. Retention is Really important. YouTube algorithm SEO blah blah blah. So in the old world, I would have had to gone to YouTube and said, "Right, YouTube SEO, copy a video, come over here. I have and I have to do all this stuff." What I'm going to do now is I'm actually going to get this now

to create for us five different workbooks and research within Notebook LM. Awesome, dude. I want you to use my notebook LM MCP. And what I would like you to do is to create me five different Notebooks on that. And I want to use the deep research function on each of those five topics. So I have five different notebooks that cover all those different areas. Okay. Bam. Awesome. And how do you know that it's working? Well, what you're going to see in this chat window is the notebook LM MCP happening. Perfect. I'll create five separate notebooks

using notebook MC research function. One for each of those critical things. MCP tool notebook LM. And look At it's triggering up. Bam, bam, bam. So, this is what I mean when I say it can programmatically do all of this stuff. Now, if we were in a folder that had all the context about everything, you can just see like it's almost like Lego how you can build these things together and create anything you want to. So now we're going to have five different notebooks spun up on those topics that we're then going to be able to

ask questions about for whatever we Want. Now as you can see guys, it's now come down. So check this out. Excellent. I've kicked off the deep research for all five YouTube 5 growth topics. Each research will take about 3 to 5 minutes. I will gather around 40 highquality sources from across the web. YouTube content strategy and audience, YouTube packaging, thumbnails and titles, YouTube retention, storytelling, algorithm, SEO. I should also add by the way that I could have specified this. I Could have said I only want to hear from creators like Ed Lawrence. really cool guy,

lives out in Dubai, by the way. Really decent dude. I could have been as specific as I wanted to. I could have had all my contacts on the left about me, which I recommend you do. We call this business context, your business brain that has all the information about who you are, your customers, and that could influence. So, we get dynamic research based on your specific Business. This is in incent. But if I want to click on one as a quick for instance and I open up, you can see now that it's already doing the

deep research for us, which is crazy. And I had to open up a different web browser cuz my default is actually a different one than Chrome these days. But I left the Chrome family, I must admit. But if I come back now to the homepage, I should see five different things. And look at this guys. We've got five YouTube packaging, thumbnail titles, YouTube retention, story time. So it's created for us as many notebooks as you want to. I said five. I could have easily said as many as I wanted to. And this will create for

as now beautiful, wonderful research on this stuff. And look at it's even given the prompt for his YouTube content strategy, audience psychology, understanding, view intent, and selection creating content. Again, if I gave it more contextual information About me, it would have been even more specific. Now, the other thing I want to do here is create a skill to leverage this MCP. To do that, I'm just in the community. I'm going to grab my anti-gravity skill resource here, which is going to be the skill creator. So, a skill is just going to be something that we

use very consistently within anti-gravity. I'm going to put a link for this down below. So, don't worry. All these resources will be available For you so you can just grab them. But basically, this is just going to be a new feature came in anti-gravity recently, and it describes ways in which we want it to act. So, we basically get it to do something very repeatable, very specific, and whenever it accesses that MCP, it can follow a real cool set principles. So, let's come over to anti-gravity real quick. Hey dude, I would like you to go

ahead and create for me an a skill based on the blow Information for accessing the MCP with notebook LM. Please also be aware I'm going to show you all the different things that it can do. I want you to create a skill based on the blow. Cool. Say blow skill template, which is cool. And then I'm going to say notebook LM capabilities. Cool. And then let's come over and just grab that by again come down here. Come to MCP servers. Let's go to manage MCP servers. Come to notebook alarm and copy all the stuff. Now

one of The reasons why I want to create a skill here is because I want to have a lot of control over how this actually behaves. So for example, there's many things it can do with a notebook, but I want to be really specific. So for example, I might say whenever you're creating notebooks, always reference the about Jack section to make sure it's specific. So if I had a file on the left now that said, who is Jack? and it said that Jack is an entrepreneur or Jack likes to drink Coffee and has white jumpers

whatever the thing is you know we can be specific about you need to reference these files before going here. So for example, if I said that my niche is helping businesses with AI systems, for example, one of the things that this would have done when it went to notebook, it said great, I want you to find YouTube niches about business and I wouldn't have to keep repeating the context because we actually codify that into an Anti-gravity skill. And you can do that really conversationally by just chatting to it in the window. And then meanwhile, if

I come back over here, you can see now it's actually got 38 different sources. So at the moment, one of the limitations is it won't automatically import it. But there's two quick ways around that. One is you just click the import button yourself. The second though, if I come back over, what I can actually do here is say, "Hey dude, it's Created all five of the different resources. What I would like you to do is to go ahead and import them on all five of the notebooks. And what I'd like you to add to your

skill.md is that whenever you create these notebooks in the future, after a few minutes, call it 5 minutes or so. I want you to manually open them up in the browser and basically import all of them. So I don't need to do any further actions." Beautiful. So you see now how valuable The skill is because we explain it once we throw it in skill.md which is amazing and then anti-gravity and notebook lm. It basically codifies how I want it to behave. It's got the tools but it's me saying this is how I want you to

go ahead and use those tools. Kind of think of it like it's instruction manual. So now we've covered exactly how to create infinite numbers of notebooks that are specific and tailored to you without you doing anything apart from yapping to Anti-gravity. We've covered how we put those into the skill. The next thing now is how we actually go ahead and leverage and use these skills in any kind of project or something that we're building within anti-gravity because when building them is one thing but then utilizing within a project or a chat interface is something completely

different. Now, one of the things that I want to do alongside this, as you can see, it's just executing all my requests Now in terms of opening up the browsers and things, is what we can do is in anti-gravity, and one of the main benefits of anti-gravity is the fact that we can head over to the agent manager, which means we can have multiple agents working on this project at the same time, which is awesome. So, I'm going to click on open agent manager. So, all you do is you start a new conversation, you select

the notebook you want to chat with, and then This is an additional agent working on the same thing. So, here's the thing I want to do. Hey dude, what I would like you to do on the left hand side is have what I call notebook LM brain resources or some or call it something cooler than that. I just want a quick doc that explains basically all of the different notebooks that I have access to on the left hand side. Awesome. So I'm going to send him off to do his thing which is awesome. So you

can see now on the left Hand side I've got notebook alm. I have one where he's gone now actually. Here you go. He is now working on that for us in the background and it's using that MCP tool to grab a list. Awesome. Then I'm going to spin up another agent to do something slightly different for us. And I should also call out guys that it's already bought in all the resources. I mean check this out. So 49 resources for content strategy and audience psychology. 48 resources. 49 resources. This is crazy. So for example, if

I now come back over to Google Chrome, you can see now that it's basically built in for like 50 different resources. Look at this. This is crazy. And if I go back to the homepage now, let's see it's done it for everything for all these five. There we go. You can see. So best way to test this is now just to ask it a question. So, what I'm going to do is come over here and give it something like, "Hey there, dude. I'm starting a YouTube Channel speaking to basically I want to talk about English

Springer Spananiels. Could you do me a favor? Query notebook LM and find the best most relevant advice to help me start that channel, how to make my first videos, and maybe any tips that would be really relevant for my particular situation. I have the capacity to create three videos a week." Awesome. And whilst that's working in the background here, I'm actually going to create a folder on the left hand Side. Going to call this new file. I'm going to call this one jack.md. All right. And then what I think I'm going to do is within

this skill is describe about me. Hey there, my name is Jack. I have a YouTube channel talking about the English Springer Spananiel. I have the capacity to do three videos a week. I am pretty bad at communicating on camera. My passion to monetize this is to fund the Springer Spaniel Rescue Center charity. That's my whole goal and Objective. Whatever it is, right? So, I've given it some information out about me, what I want to do, which is awesome. And then what I want to do actually is basically tell anti-gravity this skill that whenever it's referencing

the beam, it needs to understand and reference that skill. So what I'm going to do here as well is we're going to go back over to the agent manager. So we can call up another AI tool and I'm going to give it something interesting. So let's come to Notebook LM which is our thing and we click on this plus. Hey dude, I want you to update the skill on notebook LM and just basically say whenever you reference notebook LM, one of the things that you must do is check the information within this folder so that

it is contextual. Okay. And then what we do guys is we just do a shift app and what we can do is click jack MD. So that tells it the file that I'm talking about. So what I've told this guy to do Remember how do you toggle between these two things? Anti-gravity has two windows. Okay, that's all you need to know. You have the agent manager where all the agents live. Okay. And you have the editor. The editor is what we're doing here. Everything we've been using for most of video. And then the agent manager

is this beautiful thing here where we can chat to all of these different things at the same time. And again, I could in theory be working on Six or seven different projects. And some people say that people in white jumpers cut multitask, but we'll see about that. So we come back over, come to editor, and you can see now we're going to have updated the the skill, which is really freaking cool. All right. So now let's come down and have a look at everything that's happening within this window. And one of the things that you

can see, guys, which is very, very cool. So I'm going to save That JackMD. We want to make sure we've got that sort of stuff done. And there's our resources. Again, all the tabs just appear there, which is great. And as you can see, guys, after that question, we can see the MCP's been basically asked the question and the answer we got back from the bookm. If I scroll down here, we've got all of the advice. So, we're niche down. We got weekly content mix, hybrid funnel strategy, hook mastery, thumbnail psychology, build trust and Connection,

algorithm focus, and example schedule for the weeks, which is freaking amazing. And we got all of that from our incredible resources with the notebook Ellen. So, then I might say something like, "Hey there, dude. Do me a favor. Could you make an action plan on the left hand side called YouTube strategy for me based on this information? Awesome. And again, we can go back and forth, ask further clarification questions. We could even If we want to get anti-gravity itself to build and develop a strategy by speaking to the notebook and actually have these self-contained iterative

cycles where the AI here is quering that AI and the resources to build out the plan, which is going to be incredible. And just like that, I've now got this beautiful YouTube strategy down here on the left hand side that I can follow and advise based on the information from anti-gravity. So now we're having Full-blown conversations with our notebooks. We're creating them. We're having conversations to inform strategy. This is the bit now where we can take it to another level, which is why level three is about using the resources and knowledges that we have within

notebook LM to actually create and build something really interesting to build an application with an anti-gravity. So here what I'm going to ask it to do as an example and of course we could use Our classic blast framework for building anything within anti-gravity but I really just want to showcase the capabilities here. So I'm going to ask the model I'm going to say hey I would like you to build me an interactive one pager HTML based on all the information that you can get from the notebooks. Specifically what I'd like you to do is be

interactive and just be as helpful as possible on all of this information. It should be something they can look at Visually beautiful engaging phenomenal. Okay fantastic. Now, as we know from every video I've done on the channel, we can make these dashboards look gorgeous. We can do dashboards that are connected to CRM. We can do basically dashboards and websites that are interactive and kind of like animated. There's so many things we can do. The capability I want to double click on here out of respect for your time is the fact that we're leveraging the notebook

knowledge to Build something. And once you know how to leverage that notebook knowledge, essentially you can build it into any part of the application that you like. So, I didn't just want to build like an app. I want to build something based on all the cool information that we got from the bookm which we can now do via anti-gravity. And what's really interesting here guys, if you actually come in and double click on this, you can see the kind of queries that we've Given it here, right? So take a look at this. So one of

the things that we ask is extract specific mathematical formulas, metrics and benchmarks for YouTube growth, outline ratio, CTR targets and goals. And then we've got the out part. Okay, awesome. Well, what else are we asking to? Well, we've got another notebook here. List power words, psychological triggers for titles. What specific combinations of visual elements, faces, arrow, contrast work Best? So this is going to be about thumbnails. Awesome. Then we've got another one here which is going to be about what are the specific engagement techniques to build blah blah blah. You can see it's quering different

notebooks with different kinds of questions and all this knowledge exists there and we just bring it in when we need to. Wonderful. So now basically anti-gravity's finished designing this and turning this into an interactive Dashboard. I could click on this for instance right now which is awesome. And we got the spring spananiel command center advanced YouTube strategy and operating intelligence system. Cool. Obviously we could do anything we want to with this design. But the primary goal is three videos a week. Vite watch time, micro niche, which is cool. I can connect this to my YouTube

channel. I could do anything. I could scrape. I could do literally a billion things with This. So, let's see. We've got the growth lab. So, outlier ratio, video views. So, let's just say that I don't know, we just get something like 10,000 video views. Top subscribers could be 22,000. Results ratio. Viral outlier detected. Really cool. We got health check down here, which is cool. So, it's a clickthrough rate. Let's say that's 8%, which is really, really high. Average view duration, let's just say that it was, I don't know, 52%. Viral Profitability. I mean, this is

really cool, right? So, it's based on all the kind of things and then we've got a little checklist built in. So, one man rule, we can take things off as we go. We can also connect this to Superbase that will just save all these things for us. We could build this out in any way we want to, right? It's really cool. But the cool thing is it's all designed around the entire knowledge base we've got. So, basically, you can spin up any App or dashboard. The other cool thing you could do if you wanted to

is say for example, you're doing some compliance for a business, right? ISO 9,000 whatever compliance. What you could do is do full research for 40 50 pages then have that built in and turned to apps. So for example, if I have a page on my website talking about ISO 9000, one of the things I can do is basically say hey anti-gravity go to my ISO 9000 knowledge base and just make sure that Everything's accurate. It will pull down a specific questions and then query notebook LM to make sure that every part of it accurate based

on a knowledge base. So you can see the potential with these connections. So now we found that we can build literally any application connected to anything. Level four now is actually about programmatically creating slide decks, presentations, audio overviews, anything. So essentially what we're going to do in level four is Basically once we've create these beautiful resources, we can now from the herman comforts of anti-gravity create pretty much anything we want to that can be created within anti-gravity, excuse me, within notebook element itself. Okay, so this is cool. Why don't we, for example, ask this now?

I'm going to say, "Hey dude, could you do me an audio overview on the YouTube database within notebook LM around hooks? I want to generate one of the audio overviews for That and then also if you can create me a presentation that I can view also." Thank you. Also use the notebook LM MCP to do this. Okay, fantastic. So we've specified it, sent it off. So let me just show what this looks like in reality. is if I click on this as a for instance again you can create audio overviews you can create mind maps

you can report and basically the the MCP's configured in a way that we can do that within anti-gravity so why is that Really cool well it's cool because let's say for example that I want to learn about anti-gravity I want to learn about watches I want to learn about the Jack Robert school community and all the cool places that we're meeting up this year whatever the thing is right I can spill up all these individual scenarios like from all these resources maybe you're moving to Australia or Berlin and you want to learn about the tax

and there's like 10 topics we can do this Programmatically clean anti-gravity, turn it into audio overview, and have all the files ready for us just to listen to. So, you don't even need to come in here manually click things. And look, generating audio overview. You didn't even I didn't even guys, my hands were here. I didn't touch a single key on this keyboard. And it happened almost by magic. Except it isn't magic. It happened in anti-gravity, which is crazy. And look, I come back over here, Guys. We've got the audio overview that's been requested, the

slide deck, which is great. It's like, dude, build me a slide deck. Build me an audio overview. We can do this for all the notebooks we create. Remember, we can create like an infinite number of these notebooks. to the extent that notebook 11 will allow you to create like a billion. I don't know what the limit is, but you get the idea. As many as you want to. Then this very nicely brings us On to level five. So level five is the ability to take any of the files on mass from your own laptop computer

and actually create a notebook from them. So for example, you had several meetings with clients and you want to chat to all of them. Or it could be things in your business that you want to chat about later. Literally any files you got on your computer or any knowledge base local we can actually upload. And that could be text, it could be anything. So I'll show you exactly how to do that. Cool. So now we're in anti-gravity. Let's have a think how we're going to do this now. So there's a couple of different things. So

when it comes to storing this information, we could do many different things. So for example, let's say that I create a random piece of information. Like I've got jack.md here, right? And I've got notebook brain resources. So how about we try something like this? First of all, hey the dude, I Would like you to create a brand new notebook, a notebook, and I want you to add jack.md and notebook_brain resources as two resources within this notebook. Thank you. Awesome. So, first I want to show you is that I can literally tell anti-gravity, hey, this is

what I want to do and just add these two things to it. And look, it's automatically identified what they are. It's going to add it in and do that for us. Meaning that we can essentially take Any text we want to and that is anti-gravity. Okay, so I have successfully created a notebook and added both the resources. So, let's go ahead and check if that's true. So, we come back over. This guy is just finishing the audio overview, which is awesome. Let's go to the homepage and have a quick look. So, if we were to

refresh this one real quick, let's see what we've got. All right, give it a hot second. It's reloading and oh my gosh, I Didn't know we wanted to spring manual. It's a little bit controversial, some might say. All right, we've got it here. It says, let's take a quick look. And we've got jack.md. Hey there, my name is Jack, which is cool. Okay, we like that. We're very familiar with that. And then we've got notebook resources, which is everything we mentioned, which is very, very cool. But what if we had a file that wasn't text?

What if it was like a PDF? So, let's come down and download This one for example and see if it will add that to notebook LM. So, bring this over. Click on download. Now, typically speaking, when you what we call rag, which stands for retrieval augmented generation, I did like YouTube's like biggest master class on it. I'll put it somewhere on screen for you. But the bottom line, it's basically how you store information. Now, typically when you rag documents or text, it's dead easy. But PDFs can be strange. PDFs are Weird. But this is why

anti-gravity is so cool because there's no problem. I like to believe there's no problem too big that we can't overcome with the right thinking and strategy tools. So, I've downloaded this PDF, right? I'm going to head back over to anti-gravity. And what I'm going to do, and what I recommend that you do, by the way, is you right click. You click on folder. Okay. And in this folder, you could just say something like notebook to add, Right? And then you could add a new folder which is notebook added, right? And essentially what we do is

we explain this in gemi.md about what this is. And essentially as soon as it's added, you could think of a better naming convention, but you get the idea. When it's finished, you just move it over. So we have got over here notebook to add. So all we're going to do is come over and drop our PDF into anti-gravity, which you can do by grabbing and just Simple drop right there. So now it's in the environment. And look at this. We've got all this cool stuff. So, I've got anti-gravity skills. I'm going to add it in

notebook to add. Sweet. And it's a window. So, I'm going to say is, "Hey there, dude. I want you to add every file within this folder into that notebook for me." And then let's just tag the folder, which is going to be notebook. Uh, what did we call it? To add, right there, it's got one file in It. And when that's complete, please place the file into this folder. Right. And then we just crr and just do notebook added. Okay. So, I've just said to the complete folder and I've just renamed it complete. I don't

think you can tag it unless it has a document in it. Let's just now send this one off. So, it's got a PDF. So, we'll see how anti-gravity processes that for us, which is going to be awesome. And if it doesn't process that. So, say for Example that you've got something that is like 50 pages long. Anti-gravity can actually create a script to basically translate that into text for us, which is really awesome. And you just say, "Hey, I want you to create me a script for a skill that will transfer it from this into

this." And it'll do that for us instantaneously. Okay. So, this is really good. So, this has struggled now with converting it in PDF. So, what anti-gravity is going to do now is Actually take it from PDF to text. And you could leave anti-gravity in the background to do this for us. We could also turn this into a skill or a script that would just do it for everything where it identifies the file type. Then based on that file type goes and does whatever we like to. And then all you do is just grab the files

that you want to put into a notebook and you just drop it into the section and you'll use this for your business. Maybe you've got SOPs That you want to leverage. There's a million different things you can do where the documents change on a very regular basis. The other cool thing here is that if you're building tools and systems that themselves create documents that you then want to put into notebooks, you can just do this all completely automated with this system. And just like this, guys, what anti-gravity has done since you can't load a PDF

through this method is Converted to text and then uploaded it, which is awesome. So, it's created a Python virtual environ. It's done a lot of crazy stuff, but the TLDDR of it is it's all ready to rock and roll. So, let's head over to notebook now and validate that's happened. And then I've come over, I've refreshed the page, and would you believe it guys, the anti-gravity school creator PDF has finally arrived and we can see all of the information there on the left hand Side. And so generally with this MCP, this is like an unofficial

one. In other words, it's not from Notebook LM themselves. If you ever run into any problems like, hey, I can't get this kind of document type. Anti-gravity can help you troubleshoot that and build a system to make sure you can get any files and documents over there. And if you're not sure how to do something, you can ask the questions and troubleshoot as you go. >> Beautiful. So, now we've cracked all this amazing stuff around Notebook LM. The next thing we're going to look at now is how you build beautiful, gorgeous websites that clients pay

thousands and thousands of dollars for that make you stand out so far from all your competitors. I'm going to go from beginner to advanced. I'm going to show you two systems. One to get started to get you rocking and rolling. And the second one is how we take it Interstellar. Let's jump straight in. Gemini 3.0 is amazing. It can build amazing websites. It can build incredible AI systems. But if you combine it with growth systems, you can get outlier results. We want a beautiful website that converts viewers into buyers will accelerate your business that you

can even sell to clients. It's easy to build and deploy. And you can even leverage AI in it, which I'm going to show you how to do in this video. And To make this magic happen, we're going to use the four-step site framework that's going to take it from ideas into a gorgeous website that kicks butts and gets results. S stands for strategy. Now, a lot of people just skip this step and go straight into creating, but that kind of sets up a false economy. When I've sold websites to businesses, one of the things that

really crushes isn't the design, even though that is now amazing. It makes a huge difference. It's the Fact that it solves the business problem. So, just take a second to think about this before we jump in. What boat we're rowing in is more important than how hard we row. And when we combine that with Gemini's capabilities, we kick. So, strategy. First thing to do is to choose the overall purpose of the website in your endeavor your business. Okay. Is it behind number one which is cold traffic you're sending there? If it is then we primarily

want to give them a Lot of value and do some kind of diagnostic to warm them up, add more value and get them down off. If it's warm traffic, we're looking again to add value but progress more towards getting some kind of commitment on the page. And if it's outbound traffic, in other words, you're reaching out to businesses and saying, "Hey, I want to work with you. We can outbound stuff." It's more important to build trust. And if you in doubt, always treat basically when I had This conversation with Alexis. We had a really interesting

chat about this that if you treat warm traffic like cold traffic, they'll still convert better anyway. But it does change how we position the whole website. And we need to know this. Now, ask yourself one question. What is the viewers state? And by that, I mean, we've got to ask ourselves a couple things. What are their three biggest problems? Because we're going to want to address that in The actual website design and copy. And it all blends together nicely. We have the design and then we have the content to achieve the thing we want to

get. What do they already believe before clicking on our website? What are they unsure about and what made them click? And once you've thought about those questions with a beautiful cup of coffee, it's time to go on to the second step in our site framework which stands for interface. So, at this point, the First thing we want to do in the interface section is to get a mood board of things that we think are cool or look great. The best site that I found for this right now is Dribble. You go to Dribble, you can

pretty much type in any keyword and find gorgeous websites that you like that. The other one that you can use from more of a code perspective, and I'm going to show you some interesting things in this video that you've probably never seen before in Terms of a design that's going to blow your mind and how you can replicate designs in a crazy crazy way. So, you can check out Codeepen. And then another great one is Mobin, which gives you great designs, graphics, dashboards, whatever sort of stuff that you need. Mobin itself, guys, I'm not sure

if I pronounced this correctly to be fair, is pretty freaking wild. Like look at this. They've got cord in there. They've got all these different AI assistants. They've got it for mobile. They've got it for web. You can literally tagle here to go from iOS to web and just take a moment to kind of browse around the shop and see what you like. So you can check out by categories, but obviously in dribble, you just enter any information that you want to. And then of course we've got Google AI studio. And I'm also going to

show you, by the way, guys, how integrating AI into the website itself will actually drive way more sales and Drive your business forward because that was one of the core features I found when I saw my 8,0001. So, what are we going to look at first? Well, I think in this video, what would be cool, and I've deliberately not thought of something ahead of time because I wanted it to be organic and interesting. There's one website that I've seen that I think looks really cool, which is base 10, which we're using for our text to

speech startup glider. And I like the kind of Applelesque feel of it. I like the dotted line feel of it. I think it's a really nice interesting website. So I was thinking for this video we could do one on something like dental agencies. So maybe we want to work with dentists and our business helps them implement systems to scale their business which is a lot of AI work in that. So let's say for example we like this and I want to kind of use these dotted lines because it's a kind of systematic way of doing

Things. So I want to make it look like it is a system for applicable way of doing it. So, first thing you do is just grab the mood board and then you're going to come over to Google Studio and start pasting in. A cool little hack that you can do as well, by the way, is head over to Canva, open up a whiteboard like this, okay? And paste it in and then add a little bit of text underneath it. So, you come down here and you say something like hero section, okay? And We're going to

make that bold and probably a bit larger. So, we're both going to give it the actual information and we're also going to write it down here. So, we can be specific about what we like about each bit and where you want to do what. So, again, Gemini is really clever. Um, but again, you need to give it some specific. So, I like the hero section of that. I think this is decent. Okay, beautiful. I think this is all we need from base 10. So, we'll say Goodbye. Then you're going to come around and have a

little look. So, if I just come down here and I said website, let's see if we've got anything interesting. And you're pretty much just going to have a little look around and browse and find websites that you think are really interesting. So here for example, let's just say we wanted to look at finance because they typically have really gorgeous engaging websites. I love the style of this. I think this Is so nice. I mean if you look at this guys, it's pretty insane. And we one click copy it which is fantastic. You can come down

and have a look and see whatever you want to do. This one really caught my eye here. This Gemini. So I I'm going to do guys is actually copy and grab that. So let's come down and just uh steal it. Steal it with pride as they say for design inspiration for the purposes of this which is really cool. So come back over to UI elements and you Can see you've got everything here. So let's come down and just copy that. Fantastic. Come back over and throw this one over here. Beautiful. And then we come back

over to Google Studio and again we throw that one in there. And then let's give this a bit of a section which is I do want hero section. And actually I'm going to amend this to say this is how I like dotted line and monochromatic. Actually, instead of monochromatic, if We just come down and give it a specific piece of feedback, like I know this can seem a little bit like it takes a bit of time, but you'll save a lot more time in general because we want to oneshot this as possible. And then let's

also add this in for testimonials cuz I think this is gorgeous. So, you pretty much like like a dream list. Just grab any design components that you want. Now, they do follow a very there are there's a structure to creating websites that Does convert. And I'm going to cover on this outside of the design point because that's so important to understand. So, come over here and then we're just going to put this in here. And then we are just going to say design. We come over to Google AI Studio. Drop that core image in. And

then what we're going to say here is just simply testimonials. Testimonials. Beautiful. All right. Nice. Now we've got this. We've kind of paired the Feedback to the image. I'm going to add a bit of a background thing in here just so that it's clear on the dotted lines of Canva what we're looking at. Send this all the way back. Awesome. And then let's make this white so it looks nice and tasty. You'll know when you watch my videos like I tend to get stuck down these design rabbit holes. Like I did it in my community.

It was really funny. So in the classroom for example, I went down I had to have This like dotted connected artwork cuz I was like I spent the whole day doing it and I was like I get these I don't know I get these things sometimes and I'm like dude I just I just think design is just so important to do. It genuinely is. That was one of the biggest piece of feedbacks I got my first tech business actually was that the website was so good and crisp. people just assumed like I had one guy

said oh dude you must have had like millions in funding and I was Like dude we didn't we actually didn't we bootstrapped it to start so it was really funny we get that feedback it that's a difference that it makes so we've got the mood boards which is awesome now we're going to come and give it a prompt and we're going to establish first of all the design aesthetic the sections and then after that we're going to look at the second part which is going to be the copy and what we want to do is

a kind of easy three-part Structure prompt so for example we might say something like Hey, I would like you to design for me a website for an agency that helps dentists scale their business using proven AI systems. Okay, beautiful. And then we want to give it some information about the kind of stylistic guidelines and then reference to this and then we can add more specifics at the bottom. So I'm going to come and grab from here some stylistic guidelines I thought would be really Handy and interesting. So let me open up these and we're going

to need that conversion blueprint in a second. So we've got like a design elements cheat sheet. So these are things that we can add in if we want to, right? Like sol animated background. I think that is really cool. So let's add this one here. Let's go for soft animated background light beam texture. Bam. So if I want to add this in, I'm just going to come over to this uh style To add in these components. Bam. And then we've got the things like intentional micro interactions, everything reacts. I think that'd be a cool one

for us to have as well. Let's add that in there. Yeah. So after we've added this one here as well, you can basically just go through and decide what you would like. I'll show this as a link down below so you can grab it and have fun with it. Just different kind of components that you want like depth Layers, strong typography, whatever you want to. Then the next thing you want to do is give it like an effect or a style to replicate. So we could do it in anything we want to. So you can

decide is there like a particular business that you like the look of that you want to replicate. I think the cell is really nice. So if I just said in the style of Vel, I think that is gorgeous. Let's come back over to over here. And then I'm going to put this one here which is Fantastic. Come back. And then at the bottom, I've got these like design specific prompts that you can use, which is like anything that you want designwise to change that you think are going to be great, just come down here, grab

the ones that you want to add an amend, and you pretty much go and you're going to come back over here. The next thing we need to do is add the structure of it. So before we do that though, let me just specify here. I'm going to say I Would like you to use the reference images that I provided and copy that style first and foremost, then use the below for additional context in your design. Beautiful. Okay, we had this one here. And then what I'm going to say at the bottom in terms of structure

is I'm going to have I would like you to use this website structure. Okay. Now, what we're going to have here at the top is simply this. You're going to start with a hook at the top. You're going to have A promise of value, a value proposition. Underneath that, the next section you're going to have then is going to be a essentially is going to be the value proposition. More details. So, two or three things about the value proposition. Then we're going to have proof. And then we're going to have a CTA at the bottom

of the screen. Now, when you do this, this is all going to be influenced by what you did in the first section, which is going to be the Strategy section. Then, when we're happy with that, we are effectively going to shoot this off and let it build and create some magic for us in the background. And whilst Gemini is building that, I'm also going to show you a new hack that you might not have seen before. Now, let's say, for example, there's a website that you like. Um, I'll tell you, a really good one is

this one, which is designjoy.co. So, this is a really beautiful website. I think it's great. It looks gorgeous. Let's say that you find a website that you want to replicate. Exactly. Now, most people will say all you're going to do is take a screenshot, right? They'll come here and it'll take a screenshot and blah blah blah. What if I told you that basic and you'll know this, but a website is basically HTML and you can download a website. So, what you can do is you basically come over and grab one of These HTML downloaders. So,

if I just say HTML gra um like very poorly explained, but you get the idea. You can go to view page source. So see and download any code from any website. Find a website that you like, grab it, come back over, throw it in the URL. Um, click on view source code and this will be the exact code that you've got for that website. So we're going to come down and then we will do I believe it's stylized code Like so. And then we've got all of this. So simultaneously what I'm going to do guys

is come down and show you a secondary strategy that if you've just got one that you really like, you're like, dude, I just want to replicate that website. You can do something like this. So, what I'll do once I've copied that is come over to AI Studio.google.com/apps. I'm going to open a new one. I'm going to say, "I would like you to create for Me a design agency website using the below HTML code. Make it gorgeous and beautiful." Bam. Okay. Enter the HTML code and then we accompany that with different screenshots. So, you basically come

down, you screenshot, you come back over, you throw that in, and then you just screenshot a few different elements that you like, that you think are decent. And I'll show you how close you can actually get with this. It is pretty wild, but you'll see for yourself in a Second. Now, I'd never recommend that you just lift and shift websites. It's not a good way to do this. But what is really helpful though when you're doing things like this is that there's lots of things that you want to innovate on and be different on, but

website structures that convert viewers into buyers and certain design principles. You don't need to actually innovate on all that stuff. So, this is now working and pipping and popping in the background. Let's come back over to the initial one and see how we're getting on. It's developing it and it shouldn't take too long. and then we'll get our very first example to look at. Beautiful guys. So we have dentist scale. Did you realize fill your chairs on autopilot? So it's got some animations in the background that needs to loop properly. So that' be something that

we need to be specific about the operating system for your growth. This is really lovely. I love This. It's kind of like you can see as I hover over it, there's a kind of orange hue that appears there. Amazing. And then this is really cool. That kind of soft fade and connect collaborate launch measure impact. So we can see some cool stuff here. And then we got feedback. Scale your practice and we are ready to rock and roll. But how are we getting on now with the design joy thing? So check this out. You're not

going to believe this guys. Look at this. You'd be you'd Be remiss for thinking it's the same thing. Look at this. It's not exactly the same, but to be honest with you, just off that like and it's it's even got the same logos, which is crazy. It's got these things coming down here. One subscription, many possibilities. It's literally copying it verbatim. And even down to this, we can copy it like this. It is actually freaking wild how effective that is. And you can just copy the HTML like this to get a good basis If you

want to follow a website structure more closely. The next thing I want to do guys is grab this eightstep conversion blueprint which effectively is all the stuff we want on a high converting uh page basically to turn viewers into buyers. So what I come down here is grab this right here. And as you can see we've got the value proposition, the proof, the fraction CTA, the follow-up, the debug. So I'm going to come back over then and give it one nice Tasty follow-up prompt over here. So once we've refined the design, you're going to go

back and forth. Now, typically speaking, it's better to try and what we call oneshot the whole thing in the sense that you get it to design somewhere near like 90 95% of the design that you want on your first gun because it's easy to a amend. Now, good thing to bear in mind with Gemini here with all these things is that it can take what's existing and change it, but if you're Asking it to reconstitute the entire design every time, it just gets stuck down these rabbit holes, even though it is incredibly effective. So, I

would rather you hit a fresh blank slate if you feel the design's not getting to the right point. Now, the next thing we do in this page realistically is look at the copy. So, you want to change the copy to something that's actually going to resonate. So, we want some kind of hook at the top. We want some kind of Proof and credibility that's kind of easy to look at. And this brings us nicely onto the T section in our site's framework, which is text. When we're very happy with the design and the visuality of

it, we're going to design this website perfectly. We're going to have at the very beginning a hook to grab their attention. There's different methodologies. Effectively, we can use things like a frustration hook, like dentists frustrated that you're not Getting any clients even though you're working very hard every week. Or we could have an offer hook, which is dentist, you know, dentist, we'll get you 20 new leads in 30 days or you pay zero. So, some kind of hook, a little explainer about what we do, ideally a visual image or something in the background. Then, we

want a little flirtation with the logo's and credibility. Then we go straight into the value proposition which is price is What you pay, value is what we get. And you explain that in a bit of detail. Then after that, we kind of want to go through a bit more proof so people know what we're doing and how it works. This could be testimonials from clients, include videos, include images. So for example, if you look at this thing I had a while ago on um my community, this is full of testimonials of people who've been in

the community, either got their first clients, got their first Automations, you know, goes on and on and got all these videos. We're very blessed to have as many success stories as we do because what we do talk about works. You basically fill that stuff into the page to kick some butt. Then once you've done that and you've got the kind of text nailed down, the last thing we want is a what we call a clear next step because you've made a great promise that they care about. You've shown you've explained it in detail. You've Shown

them why you're credible. And the next thing is a very clear next step. And this is where we get to our framework. The E which stands for engine. An engine is the enhancement side of the website. How you take it from this to this. Now, when I saw my last one for 8,000, one of the core criticalities I had in there was a chatbot that would take the email and book leads. Now, what's really cool is that you can integrate any AI component You want to into the website. It's crazy. And I'm going to show

you how you can do two of those right now. The first one is going to be a chatbot. Now, to do that, we're going to head over to the wonderful 11labs.io. So, let's load this bad boy up. Let's log in and kick some butt. So, you can build agents. They can be voice agents. They can be conversational agents. It could be anything that you want to. So, the first thing we do is come and sign up, which Is fine. On the left hand side, let me just come through. We're going to go with a Let's

go with a business agent, which is great. We'll do healthcare and medical, and we'll do customer. Let's doling. That's fantastic. Call this one, Maria. And then our website could be something like, I don't know, monza.com. Your main goal is to provide a helpful experience to the client and to book a 50inute discovery call with Jack, our Head of growth. Awesome. Okay. Chat only or audio? We can be either. We're just going to do chat only for this, but it could be audio. In fact, you know what? Let's do it. Let's make a speak. I'm going

to come down. Okay. Need a https. Okay. Beautiful. And then create agent. Okay. Did I not do this? That is crazy. Oh, I added one t too many for a British person. That's pretty wild. Okay, that's loading up. And once we've done this, guys, we can just basically configure it To do anything that we want to. So, I'm going to show you two different versions that we can do on this. So, there's a new agent configuration that let you scribe in real time. Redesigned agent config and a new widget, which is cool. So, on this,

you've got a personality that you can work through. You've got different voices. Like this is Eric, for example. He can play some different bits and pieces. You can decide which one that you want to. That's what it sounds Like. >> Is riches. Complain is power. Okay, we're going to go with Stokes because Stokes is great. But basically, you can pick any of these ones that you want to if you wanted to have an auditory like, you know, make an audio thing. And then we can have the language. So, we would prefer to have UK English,

I believe, which they don't have. So, we'll just go with unless they have United Kingdom. They don't seem to. That's interesting. Yeah, we'll just go with the States then. That's fine. We'll come down here or we can do Italian. I wonder if actually, my apologies, the accent is actually driven by the voice. That's just English is always going to be English there. So we have all this stuff which is cool and we just click on save when you basically customize this and go through everything you want to and then you can come down to over

here and I think it is under preview agent. Then You can have a conversation with it to do whatever you want to. So you can expect and connect it to all of your apps which is very cool. And to do that you come over to workflow. You can build it workflows. You can do knowledge bases. So you can give it like all the information add documents policy documents things about your website. So if you say hey Jack what do you charge for XYZ? It can tell you that. or like can you give me examples about

companies That you worked with before? It can do all of that stuff. Then it has tools. These tools can then do things like end the conversation, transfer to agent. So if it's having a like chat with somebody and it's not getting enough, it can loop you in and do some really cool things. Then under widget section, you can actually embed this. So what we're going to do here is copy this. We're going to come down here and I think we can save and we're ready to rock and roll. You Can come back over to Gemini

and then you can save this. I would like you to embed this chat widget into the website. Okay. So once you've done all the customization, obviously we cover a lot more about that in the community, all the kind of cool AI tech and how you level it up. But just to give you TDR of respect for your time here, you can just then copy this embed code which is HTML which will call 11 Labs and then install it within the website. Meaning now that You have this gorgeous website which loops we've got all the animations,

we've got everything that we need and then we're going to have this additional chat functionality in there too. Now while this is rendering in the background, I think actually this very second I think it's just complete. It has Oh my gosh, guys, check this out. So, if I come up and I full screen this, let's have a look. You're now going to have this in the bottom right hand Corner, which means that you can do things again. It it could be chat only. It could be anything that you want. We accept and we could just

send a message. If it was chat only, it would just be like a chat bot. I'd be like, "Hey man, how's it going?" Boom. And then it'll stop responding to me and we'll have a full conversation. And then we equip this with agent tools. We can connect this to automations, clap emails, book calls, whatever you want to. So, this is Very cool. But let's say that one of the CTAs that went on the website wasn't just to book a call, but what we actually wanted to do is give them like an order or something free.

One of the things we can do is build a questionnaire into it. So check this out. I would like you to develop for me a questionnaire embedded at the bottom of the form. The value proposition of this is find out how much money your dental practice is losing every month by Not having email systems installed. You're going to ask them four questions. Their email, their number, which is optional, their name. You're going to ask them what their average value per lead is and then how many email subscribers they have and then how many emails they

send per week and then click submit. Okay. Then what we're going to do is actually grab uh an AIP software. So we're going to head over to GoH High Level. Now Gohigh Level is amazing Because it lets us build loads of automation sequences out and emails and texts and loads of cool stuff like this. So for example, what I can do with GoHigh Level is send the information over there to anything. I can send it over to NAN. I can send it over to anything I possibly imagine. You're going to come on the left hand

side right here. Going to come down to this. And then when you're in your account on the left hand side, you're just going to Come down here to automation. And then when you're on automation, you're going to open up a brand new automation very quickly, which is create workflow, start from scratch. And all we're going to add into this is a web hook. And web hooks just connect things to other things. Because what we do here, guys, is grab the information from our app and then bring it over. So, we come over here. We're going

to add a new trigger. We're going to go for web hook, inbound web Hook. And it will give us a web hook address. And we copy it. And then you're going to come back over to our design, which is over here, I believe. I'm going to say send the information to this web hook. And you paste it in. Oops, not quite that one. Let's come in and make sure we get the correct web hook address from go high level, which is here. Right. So, let's come down. All right. Now, we've copied it. Now, we can

enter in and we're ready to go. Send this Prompt off. And then we're going to have a form that will then connect to go high level. And then we can look at how we publish it, deploy it, and kick some butt. And just like that, we now have an update. So let's check out what the form looks like. We're going to scroll down and have a look. And we should see a form on the page. Wow, look at this. How much money are you losing? So in reality, we would want to change the design of

this, but obviously this is Just to get it live and rocking and rolling. So I say, hey, I'd say my practice name is Dr. Teeth. Okay, Dr. Teeth. We'll say it's teeth at Outlook. Phone number, we'll leave it. Value per lead is going to be something like $500. Uh, and then total email subscribers, we'll have 10, two, three, 10,000. Email sent per week will be one. Then calculate my loss revenue. Click on this. It's calculating for us. Calculation is complete. Awesome. Now, If we head over to go high level here and I come down, I

click on fetch sample requests. Let's one second. It looks like it hasn't sent that. So, let's just confirm this one more time. Grab this. If I just say trigger uh mapping reference. Let's see if we can reference payload. Nothing's come up yet. So, what we do is come back over to our scenario real quick and then we just give it that feedback that didn't come through. Hey there, dude. You just need to make sure That you send that information through to the below web hook. When I complete the form, it doesn't actually happen. Also, give

the form a white background so it stands out a bit more and make it top to bottom rather than having questions left to right. And then we give it feedback and send that back off. And then we can try that one more time. So, now we've redone this. I've entered some information and we click on calculate my loss revenue and we'll send This one back off and then we just come straight back over to go high level and then we should see the reference page load. So we come down here and as you can see

it's pulled through successfully and then we've got all of the data. So we save that trigger and then the next thing that we do in go high level guys is we've created the contact which is awesome. Uh one moment. So what we need to do first of all is add a field. So we had a field we select on email like so And all you're going to do is come down here click on this button here find the hook and type email. So this is saying look Jack you've asked me to create an email where

am I grabbing that email from? We're saying look well you're grabbing it from the web hook. Okay then we add another field and the other field might be something like name right so could be full name and again we just select the inbound web hook trigger and then we it has automatically pulled Through everything for us. So then here we could say great well here is their name and you can keep doing this grabbing information grabbing the financial data and then what we can do once we've created that is simply send an email. You can

also send SMS which is cool. So I can send you a text message I can send you a WhatsApp message. I can send you email sequences and obviously you can build that a really beautiful email sequence to do that by clicking Send on email and it goes through the whole process. And typically speaking your email sequences it's great to send at least five. Most people don't respond if they don't get response on the first email. But as you can see, having a system like this where you're setting things back up personalized user message can really

improve conversions and all the sales are happening the more emails that you actually send up there. So now we've got the website all ready and We're happy with it. The next thing you want to do is actually download it. So you're going to come down here and you click on download app so click on save. This is going to download all of these files for us, okay, onto our computer. Then when it's on our computer, we can edit it, get it ready to put onto GitHub, make any final changes, and then whenever we want to

edit it, we have a folder on our computer that says a website, and then we can change it and Do a million different things. So, what I want to do is head over and download this if you haven't already, which is cursor, which is basically a place that lets us edit code on our laptop. You could use things like VS Code. You could use things like anti-gravity, which is Gemini's one. It really is up to you. I like to use a combination of anti-gravity and cursor. Then when you download cursor guys, you'll have something that

looks like this. So the First thing we need to do is unzip the thing we downloaded. So come over to your downloads, double click on it and dental scale AI will appear by magic. Then in cursor we're going to open up that folder to let us edit it. Okay. So come down here to file, click on open folder, select dentist. Fantastic. And then this is our new app. Now what I like to use personally is claude code. So and come down here and click on show terminal. Now claw code you need to use In a

terminal. So to do that, you need to install it. And to install cloud code, it's dead straightforward. We're using Claude, by the way, cuz it's like the most powerful model for editing things alongside Gemini 3.0, which we could use in anti-gravity, but I want to show you everything. So you've got it. So you just come down, you literally just copy this code and paste it into the terminal, and you're ready to rock and roll. So once you've done that, and It's downloaded, you type in Claude. Claude will appear. This thing on the right is how

you chat within cursor basically. But what I'm going to do here is right click and I'm going to align this panel to the right. Cool. So, what I'm going to do if it will actually do that, it's misbehaving at the moment. Panel position. Right. Thank you very much. So, first thing I want to do here is I would like to upload this to GitHub. I would like you just to go Through the files, make sure it's as good as possible, make any amendments you think are valuable, and then I would like you to upload it

to this GitHub, please. Okay. What we're going to do is actually put it into plan mode. Plan mode just lets it think a little bit more detail. And then we head over to github.com. We're going to come down here, click on new, and then we're going to create it. We're going to call this one dental 5000. And then we can hear Like dental website, something like that. Change visibility will be public. And then click on create repo, which is awesome. And then you're going to copy that git. Come over to cursor and then oops, I

need to just read this message cuz I sent that ahead of time. So just undo that and paste this one in. Cool. So we give it the proper paste and then we're going to be ready to rock and roll. Cool. And then cursor comes back some questions. So, we know it is indeed Public, which is fine. And then we want minimal security issues. Moderate security and cleanup comprehensive. So, just answer the questions that it gives you. I think we're going to be fine with we can go with any level we want to. So, we want

to go for moderate MIT license. No license is going to be needed. And then, yes, professional setup is cool. And we submit answers. And the cool thing you can do if you want to take your website from this to this, you Basically say to Claude, you go into deep think mode. You explain the context and the purpose of the website. And you can actually ask it to go through the entire website line by line to improve anything that you want to. And it will sit there ruthlessly going through the entire website and improving the code.

I did this with my text to speech startup Glido. And honestly, the co the copy and the quality was insane. So I'd say before you publish it, spend time with It sparring with it and make it amazing. So we say yes, we're happy to also accept edits. So we don't need to keep it pressing one. Maybe it's good for workout actually. A little bit of a rotator cuff training there. Then after this guys, it will actually then push it through. You accept it and it said it's now published live to GitHub which you can go

and validate very quickly. And now I'm on the GitHub. Let's go over to the code. And if it's worked, we can see Now guys, check this out. It's all the code there. It's perfect. Now the cool thing is whenever you edit this with Claude, this will update for us automatically when we tell it to do that. We call that pushing the changes live. So think of it like checkpoints in a game when you you don't want to go from level one to level 999 without saving it. We need to save it as we go right

through the key. But the cool thing is now is now we've got the code On this repo which is available to everybody. So if you wanted to make this protected, we would turn it to private. The way that you do that is clicking on settings. Scroll down and you'll see here visibility which will be set to public. Where are we at right now? Down here. Change visibility to private. And it'll mean that only you and everyone in your house including your dog and Springer Spananiels can see it. Now it's there. How do I get it

on a website and How do I get a call domain which no one shows you but we're going to cover that. So, you're going to head then over to Versel. Really cool freaking website blown up. This is where bolt.new pushes all their stuff. You're going to come down on the right and click add new and add project. You connect this to GitHub, but it just opens a new browser and signs you in. On the left, you're going to see Dental 5000 3 minutes ago. You click on import like so, which is Decent. It auto selects

the framework and click on deploy. If you try to push this to GitHub directly from AI Studio, one of the things I noticed is it just never seems to load. You end up with a black screen of death. When you take it to your computer and you have an actual model sit around with it, play around with it, move some things around, it just actually physically works. It does all the different changes to make sure it's ready to be website. And I think a Lot of the reasons for that is dependencies. Actually, you need to

install the dependencies and that means it can be visible based on the beautiful frameworks that you have ready to rock and roll. So, we click deploy and hold on one second. And just like that, guys, it is now live and rocking and rolling. And check this out. It's got window this hanging out. There's loads of things going on. You can scroll down. We've got interactivity. We've got loads of stuff Happening. And let me show you. If you come back to cursor now, now this is published. I want to show how cool this is. If I

say, look, book 20 new patients. Let's say I want to say something like I don't like 20. I might just say, hey, change it from book 20 patients to book 27 patients. All right. I push that in. Bam. Now, check this out. It's working in the background. I want to show you how this works because it's crazy. We'll have a little thing. This will update it. This will update GitHub and then GitHub will update Versel automatically for us now that it's live. So, I want to see I want to let you see this in real

time. See how crazy this is as we give it a hot second just to complete that. See, it's edited the code there. 20. It's got rid of that. Anything in red is what it removed and green is what it replaced it with. Right? Then it will say, "Hey, it's now complete. It's ready to rock and roll." And we can go back over and see that it's complete. So, if I come back over to Vel here, you can see we've got everything here. Guaranteed all you pay $0 blah blah blah. Very cool. This is the page

where I can do anything I want. I can effectively if I want to change the domain name on here. So, let me just show you where that is. If I click on domains, buy domain, I can then enter the thing I want. It will let me buy any domain, which is Coolspringerpananiels.com, the greatest website in the world. Add that in. I could change it. And then I can just set it. And now I have a beautiful client website for my business, for my clients. It works well. Then I come over to the page and I

refresh this. Do I see 20 or 27? Buck 27. Crazy. And I'd recommend that when you're building apps that you really like that you do use Gemini 3 and also Claude 4.5. If I open anti-gravity, I Can do the exact same thing by opening the folder. I can open the same thing that I downloaded over here, which is dentist AI. And now I'm just This is exactly the same thing, guys, as we just played with on the actual app, but instead we're doing it and using it in anti-gravity. I like using both Gemini and Claude

because, you know, if you want to have credit to one, you can use the other. And both models are so powerful. Some people say 4.5 edges it, Others say that Gemini edges it. I like to use both for different reasons and have a great time doing it. And so now you've covered the basics. What if you wanted to build something truly spectacular? What if you wanted to build an animated website? Well, turns out we can actually pair together a couple of really simple like apps and technologies to give actually like scroll stopping animated websites. Let's

dive straight in. And so this is the kind of website That we're going to build today. Something that is gorgeous, animated, is going to be beautifully responsive. As you go down, you're going to see it's essentially as you scroll through, it is just gorgeous. It's animated. Lots of incredible things happening. You're going to learn how to build literally all this kind of stuff. You can see the kind of interactivity with these kind of beautiful designs and animations. We're going to show you exactly how you build All of this kind of stuff with an actual back

end where users can create accounts. So they can go [email protected] and we'll look at this whole account right now. Boom, beautiful names. And we can even add an email address, call it google.com, which is beautiful. They can sign up, they can access dashboards, they can pretty much create anything they want to and save that information. And as you can see, everything is super responsive. So with anti-gravity and the Systems in this video, we are going to build websites that look gorgeous that are full stack, which means has a beautiful backend and a front end. You're

going to be able to create loginins. It's going to be SEO optimized, and we're going to be able to do that easier than ever before with no code, I might add. So, this is all possible for two reasons. Now, anti-gravity skills and Google AI Studio. Now, I've tested this. I've Tested so many different methods. I spent a while going through this. I can give you the best stuff that actually works when brand new stuff gets released. But let's just start with skills to explain exactly what I'm talking about here. As we know, skills are basically

like instructions that we can include within our integrated development environments or ids like anti-gravity. It can include code, but the TLD of it is they basically power up Anti-gravity, right? They kind of like if you imagine Neo in the Matrix when he's trying to learn kung fu and they plug it in the back of his head and then he knows kung fu. That's kind of how anti-gravity skills work. And all you ever do with it is you literally just copy and paste or you just say, "Hey, download this and it will add it to your

anti-gravity skills repo, which is really cool. Now, the skill that we're going to talk about in this video is This new skill, which is the UI and UX pro skill. This is to show you how quickly this is blowing up right now. This is code for blowing up very quickly, by the way, which is really awesome with over 20,000 five stars review at the time of recording. And just to give you a sense of what it did, I ran this I basically built a website and I ran it through the skill. And this is just

some of the stuff that it did for me once it ran through all the Changes. It did all this and this and also this. And I didn't have to do anything. It did over 50 individual changes uh to improve accessibility, UX, SEO, and performance improvements. It has 100 design plus rules, 57 UI styles, so your design looks amazing. It does SEO optimizations so you can get more traffic and conversion intelligence so you can get more customers and also UX and UI frameworks so more people can use it. I'm not affiliated with these in any Way

at all. And before I even wanted to do a video on this, I wanted to test specifically does it actually make a difference and will it build a better website? And if it didn't, we wouldn't touch it. All right, Jack. So, what is happening? What what what does all this mean to us? Well, this is where Google AI Studio comes in, which if you're not familiar is basically Google's online version of anti-gravity. And there's a reason for this. And it comes down to The design philosophy differences between anti-gravity and Google a studio. And I'm going

to show you how you can leverage both of them to make way better gorgeous applications. So the design philosophy behind AI studio is to make something that looks really impressive. Their approach is to basically throw the kitchen sink at it. And again, we can improve this in a second. And the result really needs to be visually striking and wow factor. But Drawback to this is the fact that it's not necessarily constituting a web. It's very scalable for a website. like it might break if you try to add things. So, it's not very like well structured,

but it's visually gorgeous. By contrast, let's talk about anti-gravity and how this thinks about designing websites. Its design philosophy is to make something professional and maintainable. It is to make incremental improvements, best practice, accessibility, and then Polish and functional, but less flashy. And so, in this video, we're going to cover all these best practices for creating actually gorgeous websites that aren't coded with just one sentence. And then we're going to combine that with two core concepts which comes down to basically the sequencing and the anti-gravity skills all to build a beautiful design operating system. So

what this means in this video we're going to build a beautiful website with The design operating system skill and we're going to be able to create a login so users can have an account and we're also going to deploy it so you can edit make any changes that you like. Now to create this beautiful gorgeous website that enables users to sign in and is interactive and is SEO optimized we have to do only three things. Now, the first step is to create a beautiful front-end website using AI Studio. So, this is the AI Studio interface.

We're going to use This to whip up an initial first shot that we think looks kind of cool. We just want this to be more like 80% correct. And then we can refine it within anti-gravity. Now, what I recommend that you do, if I just shoot over to my school community and grab this mega prompt here, this design framework, and I'll put a link for it down below so that you can use it straight away. Basically what this design prompt does is it draws on all The expertise from the GitHub in terms of all the

individual UI and UX components just to make it simple. So for example the way this looks like it kind of breaks down the design into five components and when we integrate that with anti-gravity it will break your website down into minor chunks and just hyper optimize it. But at the design creation stage we can actually come down here and use this to help us to think about how we want to design our website. So for example, you've got pattern and layout, the style and aesthetic, the color and the theme, typography, and then any animations and

interactions. So for example, if I come down to patent layout, you can think about the kind of website that you want to build. So for instance, ooh, like do I want to build a SAS? Well, okay, cool. Well, typically the pattern is hero section, features, social proof, and CTA. And I would completely agree with that is the Typical SAS thing having run a couple of SASes and I know that's the fact. Then you've got things like e-commerce, fintech, crypto. So we can kind of come down through this document and use it to grab things like

you know the style and aesthetic like is there a specific one that you want or you don't have to think of the key words like look at this soft shadows sort of gradients rounded corners monochromatic tactile technical box shadow insert and outset. So you Don't ever want to make the prompt too long for AI Studio. You want to kind of give it a little bit of free but we want to be really specific. So you can just come down here and copy and paste the different elements that you like. And while that's happening, let me

just give you a little hack as well with Google's AI Studio is that you can actually recreate websites because websites, if you think of them, are basically just code. So, this I think is a really cool Website, but if you come down and check it out, they've got this really gorgeous, they've even got all this stuff going on there, which is awesome. They've got this really gorgeous animation down here on the pricing, which is at the bottom. You can see there's all this really cool stuff. So, if you wanted to recreate that, you can actually

copy the website URL. You basically head over to Google and then you just type in HTML website extractor Like so and then you're looking for view page source. When you click on this one, give this a second to load up and you will see some of the wonders what it can do. You literally click on this. You type that in like so. And click on view source code like that. And then what we can do is download the website basically onto our computer. So you click on download like so. Download comp. And then what you

can do within any of these websites is you can actually add this File just like that. And if you give it a prompt and just say, "Hey, rebuild the website with this HTML." It will actually understand some of the HTML assets. And so, for example, this is one I did earlier. Like, as you hover over it, it's got that gorgeous, beautiful animation. You can see the spacing. It's just such a good and beautiful design inspired by the other website. So, you can use that to level up certain parts of your HTML. I never ever recommend

That you just like copy a website. What you want to do is take inspiration and be inspired by. And if there's specific HTML components you think are cool, you can use this to help like grab and kind of like develop those aspects of your own website. A cool thing you can do as well within Canva, and it doesn't have to be Canva, it can be anything, is to create kind of like a bit of a mood board. So you can head over to different websites, grab it, and then what I Recommend you do is just

number them. Come on left hand side, type in say for example the number three like that. Grab a three or just type three. I mean, this is a pretty wacky three to be fair, but it helps you explain it. So you could say, "Hey, I want the hero section to look like this." Like hero like this. And then you may say something like XY you know testimonials like this right you know whatever the thing is right so you can actually help basically AI Studio understand that then all you do from your Mac just command shift

5 get a screenshot and then you can literally just copy that and throw that into AI studio to get a really good prompt and then you might wonder where do I get inspiration from well let me just grab and show if I'm in the community just to show you a few examples of this let me come over and grab all these different websites where basically you know you can just open up and find website Inspiration of things dude I love the look and style style and feel the feel of that and you kind of go

through and you can check out these different websites, these different designs. Dribble's a really cool one for websites and dashboards generally to give you some cool inspiration where you just kind of type in the thing that you like and you can come down and yeah find websites that you think do not do that kind of really reflect kind of brand Identity that I like. Like you may think, hey, this looks really freaking cool. So this is a gorgeous website. So you may say, hey, I want my hero to look like this. And then you simply

come down and you might screenshot that and use it as inspiration whilst keeping your own brand identity. So, for example, then you come back over to AI Studio and you paste that in and say uh hero section like above. And then if you're not sure on like how you want your brand Guidelines to look, but you know a certain brand has something that you want inspired by, if you head over to fircroll.dev, one of the things that you can do in fcral.dev on playground for example, is actually enter in a specific brand. So I could

type in for example glido which is the thing that I speak with on my videos. Beautiful speechto tech startup. So I come in, I type in glido.com and then format. Come down, type in branding, and then click on Start scraping. And then I show you our website for instance, glido.com, which by the way, completely built using the system. The exact same thing for free, five times faster. You see got nice little hover animation. It's got a very specific style. So for example, I come back over here. Now, what this will do when you come down

and click on branding, it will show you not only our logo, our favicon, the original image, it will show our entire color palette And the fonts that we use. And then you can use this to prompt and guide AI studio to give you designs that look really cool and obviously like all this sort of stuff which is really freaking decent. And I really like this kind of vibe here, this kind of style. I think it's like really freaking cool. So if I come down to this building website thing, one of the things I would really

like is this for like a SAS. So it's to say we want to do a little bit of a SAS For example and let users log in. Whatever use case is we just copy this and then come back over to AI Studio and then we can literally come down here and throw that in. And then we want to give it a little bit of an inspiration. So, hey, I'm building a website design agency that helps viewers, basically helps our clients turn viewers into buyers. And the way we do that is building gorgeous, beautiful websites that

actually convert. And then we can Just lent here, which is really decent. And you just kind of come through the document, add bits in you want, add your mood board in, and just kind of free flow style with it. And if the first version isn't perfect, completely cool. Just open up a new chat window and spin it up. And this is completely free to use. So, you're not even spending any credits to do this. And so as you can see from this website I have learned on you might have guessed it glido brand Guidelines. So

you can see how you can pull in different aspects elements. So we build gorgeous websites elevating digital presence through scientific design. We don't just build sites. We engineer conversion engines and we got this beautiful starite animation. Secure your order. Really really cool. Scroll down. These are some of the brands that we work with. Got a nice transition engine for performance. So six different things that we do. Very cool. Ready to Convert. Secure a slot. I like it. Free AI conversion critique. Okay. We could play around with that but you get the idea. And this can

analyze a website. So it's got a really cool inbuilt feature. Plans at scale. And let's see. Ridiculously cheap. Totally free. Serious business. Do you know I I really think it's it's pretty cool, right? And then you come down what our partners say. And I can just see as many or as few as I want to. And then we got the Thing at the bottom. Really freaking cool. All built with AI Studio using the techniques I just showed you. So then what do we do after this? Well, what we're going to want to do then is

actually post this onto GitHub. So how do we do that? Well, first thing we do is exit out of here. And then what you want to do is click on this save to GitHub thing by clicking on this. I'm going to give it a repo name. We'll call this one something like, I don't know, Let's call it gorgeous websites, right? And we can just do the same thing for description. We'll make this public for the time being. Come down and create git repo. If you're not familiar with what git repo is, it's basically just a

online site where we put code. It's just it's like it's like a Dropbox. You just store your files into it. It just keeps all that different things. And it's cool because if you create a git repo for a website and you want to share that with Somebody else, like we have some of those resources in our community like all my personal AI systems that help me scale my businesses. You can go into those GitHub repos and download it. Meaning you don't need to create it yourself. So, it's really freaking cool. So, we've got all these

cool things. We stage and commit changes. It just means we push them live. And the cool thing now is that this is now in our GitHub repo. So, we could share this with Others if we wanted to. But most importantly, what it's going to enable us to do now is let our anti-gravity download and grab that, which is really freaking cool. So, how do we know it works? Well, you just click on this. It opens up. And would you believe it? Here are all the exact same files. How freaking cool is that? Now, the only

thing we're going to do is click on this code. And you're going to come down and you're just going to copy this. Awesome. Then the next thing we're going to do is go ahead and download anti-gravity.google if you haven't already download it down to your computer which is cool. So basically all we're going to do ask it is to clone the repo. As you can see you just paste it in and then essentially it will come down. It will grab all the information and look at this. This repository has been successfully cloned. It looks like

a react typescript project. Here are the Files blah blah blah. Here are directories. Awesome. So as you can see everything now is in rocking and rolling and downloaded with an anti-gravity. And so now we have the project in anti-gravity and we've got our first shot of what our website looks like. This is the point where we take it from zero to hero. We're going to go through the entire thing and basically get like an AI operating designer brain. Now, this involves heading over to this GitHub repository. As you can see, it's got everything in here.

UIUX Pro Max. And this kind of explains everything that it does in a website, all the specifics. Now, this isn't really necessarily just about the design. The biggest asset of this actually is also about user experience, accessibility, making sure it's got all the different relevant features that make it epic. And you can see the level of effort and specificity. 66 67 UI styles. Loads of Really cool things here. Look at the general styles it's got. Look at the landing page styles. Look at everything it's got. It's really freaking cool. So, how do we actually go

ahead and grab this? Well, couple ways you can do it. One is you just copy everything, which is a really easy way to do that if you want to. But effectively, what I recommend that you do is simply arrity skill. Awesome. Now, you don't necessarily need to pay for all this Sort of stuff, but it is really easy to do this kind of thing. And then what anti-gravity is going to do now is grab it. So, bear in mind, we have these different design philosophies with these online builders. They make it look epic. Now, what

we're going to get anti-gravity to do here is to actually make it functional and scalable so you can build multiple websites. It's very scalable. It can be mobile optimized. It can tick all of the boxes so you can get More clients or help your clients with the designs itself, which is awesome. And I think one of my favorite things about this plug-in, which is really cool, is the fact that it'll actually go through from an SEO point of view and make loads of changes to it, which is really freaking cool. And just like that, guys,

look at this. So, for example, it's now added it. If I bring this out, so you can see we've got the gorgeous website, which is our website. But then, if you come to this Gemini skills UI Pro Max, you can see all these workflows. It's got the markdown file that explains everything. It's got this Claude skills. It's got astro.csv, Flutter, HTML, Tailwind, Jetack, NextJV. All these different things are all now fully available to you from this one skill and all you said is just install it now. So the first thing that we want to do

now is just basically optimize the website in accordance with the design And sort of accessibility guidelines within this skill. So for example, awesome dude. The first thing I want you to do is in accordance with this skill is to improve and audit the website to make it better. So it basically aligns with all the design principles outlined in the agents UI skills. Fantastic. And then send that one off and let just go through the entire checklist. And then what we're going to have it to do afterwards. Awesome. I'd like a just a General checklist of

all the improvements that you've made once you've completed also. Great. Just so I can know exactly what it's done when it's completed. I'm beautiful guys. Just like that, it has now gone through and analyzed absolutely everything. So check this out on the right hand side. Analyzed everything. And here's what it's done. UI UX improvements, visual enhancements, added a scale animation, implemented glass formortism on the Background drop, hero optimization, increase glow intensity from 30 to 60%. It's just like the thousand very small micro things that a designer or you know an accessibility specialist would do on

your website. navigation bar improvements, pricing cards, polish, audit tool refinement, global styling upgrades. It has enhanced front rendering initializing and this is the power of anti-gravity skills and you can stack an infinite number of these skills To use within your software. That's how freaking cool this is. Bug fixes, fix toe and syntax error and then all these design principles it's applied and the impact amazing. So it's now running on local host 3000. So let's click on it and check it out. We build gorgeous websites elevating digital presence. We've got the thing in the background. We've

got the secure your order which is cool. We've got this hover which is amazing. Ready to convert secure a spot. We can have that, remove that whenever we want. We've got our different layouts here, which is decent. Free AI conversion critique, which is fantastic. And then we can add that in, give it a website, do some really cool stuff, and we could build that in as an AI system. Super easy. And then we've got this. Look at this, guys. This is gorgeous. This is really freaking cool. We may just want to have one as a

border to kind of bring you into ridiculously Cheap, but I think it's really freaking cool. And then we've got what our partner site at the bottom with all those mini micro improvements, which is cool. So now we've done that. The next thing we want to do really is just kind of pick something that we want to improve before we let our users have let's say a login and they can like have let's say for example here where they give this website we wanted them to create an account and within that Account we give them a

list of breakdowns and to-dos of things they could do on their website. That would be really cool. But before that what if we were to just kind of like actually improve the website itself a little bit. So let's think about this button here secure your audit. What if we wanted to improve that? Well one of the things that we may want to do is head over to let's say we go over to 21st.dev dev and I want to find this and I call this Section UI sniping. An idea of it is that you can basically

find UI components. We can also head over to a place called code pan which is cool. Code pen is just gives you the code directly. You can just like grab that code and pull it off where you can search for components and buttons or whatever you want to. Like check out this liquid gradient. This is gorgeous. Okay, that's a little bit kind of maybe like I don't know fantasmagoric trippy Type of vibe. But effectively within copen for instance you could type in things like button or whatever you want and it'll give you resources for it.

Some things it's better than others. Like button is a little bit maybe not as good, but you kind of get the idea. You can kind of find these beautiful things or you just go to trending if you just want general inspiration. Again, not I'm not affiliated with these in any way. I just think it's really freaking cool That they have these gorgeous designs. Like look at this. How cool is that? And then all you do if you want this, by the way, is like, okay, this is freaking so cool. Like check this out. Look how

freaking cool this is. And just kind of deletes it. Like that's a really nice scrolling animation. So we could try and play around with that if you want to. For example, if I want that, I might just come over, copy this, head back over to anti-gravity. And then Anti-gravity, what I'm going to do is open up a new window. And I'm doing that just so I get like I don't get context rod. So these have a context window, 200,000 tokens, whatever it is. But if you speak too long, the performance goes down the longer you

speak to it. So whenever you do a task, open a new window. Hey dude, I want you to add this into the website, please, down below underneath the testimonials, please. All right. And then we just give it the Code. Actually, come and grab the code. So here, right, copy this and come back. So I we wouldn't include this on our website, but I kind of just want to show you an example of how it works. So you can get the idea of the power of how freaking powerful this actually is and how cool this works

and the kind of things that you can do in these softwares. And we just send that one off. Cool. So whilst this is now working on our project, let's actually head over To something that we would use. So for example, if I come over here to buttons, for example, on the left hand side, I can search for anything I want to, right? We've got this button. Do we like this button? It's a very simple button. Maybe I want something with a bit of a gradient on it. You can just pick anything that you want to

literally scroll through, find something that you like. I like that one with a bit of a gradient. So, I wonder if I come down, I Type in gradient. Let's see if we can find something cool. So, there's a nice gradient. You can essentially just snipe and find the different buttons that you want. Like this, for example, here I think is gorgeous. Look at this. Right? I think this is beautiful. Say I wanted this on the website. What would I do? Well, I would come over and copy the prompt, which is really cool. We're okay for

the moment. Thank you very much, 21st Dev. And then we come back over to Anti-gravity and say, "Hey, dude. I'd like you to add this functionality for me please onto the web page. And then you literally just paste in the prompt and it gives you all the information that you need and it is freaking beautiful and gorgeous. And then I just literally hit enter and it goes off there for us instantaneously. And that will now run after the previous prompt is complete. Beautiful guys. So now it's completed. Let me give you a little tip As

well. If you ever find that it doesn't do on its first try on 21st dev, a little little hack for you by the way is literally click on share component. come back over to anti-gravity and say, "Hey dude, I want you to head over to this website and make sure you can import this and copy it line by line or give it a prompt along those lines and then you literally paste it and then it will head over and extract the component exactly." Well, let's check that it's Actually done that right. So, let's head over

to the website now. Now, check this out, guys. This is going to blow your mind. You ready? We're going to refresh this local host. Here we go. Beautiful. If I scroll all the way down to the bottom, do I see this? Does this look familiar? Look at this. How freaking sick is this? And obviously, these can be anything. And we can put this anywhere we want to. Like this is literally amazing. Like this is Ridiculous. Then if I scroll up, does this look familiar? Look how epic. This is actually ridiculous. And if you scroll left

or right, it just basically crushes all of it. It's actually insane. So what I'm going to do now is basically tell it to remove this ready to convert thing and put these put this component somewhere that makes sense. So let's go back over. I'm going to say, "Hey dude, could you remove the book a call pop-up in the bottom right from the page? Could You put that beautiful button animation somewhere on the website that makes sense and looks epic?" And then maybe add some text above the card animation that we've got that says something like

no need to burn your credit card money or something like that. So the animation makes sense and it's all connected together beautifully. Perfect. And we'll anti-gravity work on that in the background. And so now you basically have a website that is gorgeous and Takes the world's best UI components and it's been completely assessed by this incredible intelligent fist design system. The next thing that we want to do then is create what we call a backend. Somewhere where customers can actually create accounts. They can add information. all that information gets stored. And to do that, we're

going to leverage a database. But I can tell you this, it's really interesting. We're connecting something called an MCP, Which stands for model context protocol, which is basically just a way, it's like a universal remote control basically that lets anti-gravity talk to anything. You actually don't need to know loads of information about it. And it means that anti-gravity can create all these databases for us. We give it the credentials and it's effectively ready to rock and roll. So the way that we effectively accomplish this and I can see anti-gravity is making some cool Changes in

the background is you click on additional options and click on MCP servers and the one that you're going to look for very simply it's just something called superbase really cool you click on that mine is installed now if you haven't installed it all you're going to do is going to come down to configure and you see superbase action access token you click on this button now superbase you can make an account completely for free which is cool I Think you have two environments then all you're going to do is come down to generate new token

I'm going to call this one website expires in how many days that you want to. I'll put mine for an hour for argument sake. Click on generate token and then what it will do is generate this token. Then I want you to copy that. Okay? And then what we can do is just obviously delete the ones that you don't need. You won't delete this because you don't need it, but you Get the idea. Now once you've done that, you're going to head back over to anti-gravity and you're going to paste in your Superbase access token

right there and click on save. Okay. Now this is saving to your config, which is just the configuration. And when you come to MCB config, you'll see Superbase there on the left hand side, which is fully enabled, which is amazing. And that basically means you can use it. Now, Superbase is just basically think about Microsoft Excel, but on steroids. There's a many incredible things you can do with it. But crucially, since you've now connected it, you can speak to anti-gravity in plain English and tell it what you want it to do. And this will manage

everything from storing images and text and login. You literally name it. But there's one setting I do want you to have a look at in Superbase. This is one thing that's really worth you learning because understanding databases Is an incredible skill. It's going to make you amazing. But let me break it down the the kind of 2080 of it. Right on the left hand side, if you come over to authentication, and I recommend that you do this just as you're building the app, just to make it easier, let's say you want to have like an

email sign up. You can click on sign in providers here, which is cool. And you can let them all sign up by email, by phone, by Apple, by Gmail. There's a million different Things that you can do. It's so cool. What you can do here is confirm email, which means that we're not going to allow you to sign up for service unless you're heading to email and you sign. That's a little bit cumbersome when you're testing it. So, typically speaking, what I do when I'm testing the project is I'll just turn that off. That's what

I'll generally do. And you can always see your databases and what exists by on the left hand side coming To databases, right? And we'll see on in a second. You can see this is everything I've got there already. So, one for YouTube videos, trends, metrics, whatever it is. And you know, you but you can speak to anti-gravity in plain English and anti-gravity will make these changes which is really cool. And so let's actually go ahead now and give the command to anti-gravity. Hey dude, what I'd like to do is add for me a login section

with an email, a name, and a Website. And then what I'd like to do when that happens is create me an account where they can basically log in with that information. It saves it on Superbase. And then in that, I'd like them to have the ability to enter some information about that website. So do me a dashboard in the same style. Let's say for example, they could be their goal, their income, and how many clients they have. And I'd like all this to be saved. So if I were to refresh it, all the Information would

be there. and I'd like to connect it to Superbase and let me know when that's complete, please. I will make the form look gorgeous. Awesome. So, we send that off. Now, check this out. It's going to leverage the Superbase MCP if it doesn't know already. It should exactly have to do that, but you're going to see that do that in a second. And actually, we wouldn't need to do any other configuration to get this set up than That. I'll just say here superbase MCP just so it knows exactly what it's talking about. And as you

can see, guys, right there, it's now using the Superbase MCP tool to do that, just like we thought. Now, as you can see, guys, anti-gravity is now complete. So, check this out. This is gorgeous. We've got this animate thing in the background. We have this beautiful basically like island that falls us down. We can hover over this and see all these different Options and access whatever we want to. Trusted by industry leaders with all the companies that we're working with. Scientific precision. Look at this animation. You hover over things. This is gorgeous. This is that

beautiful bento style that we've got. Free AI conversion critique. This is our free lead magnet. Analyze that. Now it's got that beautiful glow. Invest in ROI. So we can pick our different growth packages as we like. Scroll down and Then we've got all these great testimonials. And can you see how well it's adhered to the brand guidelines? And actually, if I just come back up and show you this. This itself, by the way, can do so many different things. We can capture emails with this. But if I come back down, you can see start burning

cash on bad websites. Look at this, guys. Like, this is amazing. This is like actually crazy. And then towards the bottom of it, we've got a beautiful Signup journey where we can actually capture emails and they can create accounts. And then we've got all of our links at the bottom with this beautiful, phenomenal design. So, let's test this one out, shall we? So, I'll call this one alexalook.com. We'll give it a password. My name will be Alexson. Maybe I should say Patty cuz Patty's fighting this weekend. And then we got a weekend a kind of

like a website.com for all our beautiful MMA fans out There. Then we click on access dashboard and look at that responsiveness. This is so gorgeous. I click on access dashboard. Remember it's alexal.com. Let's copy that so we can test it. Yes, let's save the password. And guys, look at this. This is By the way, I just said build me a dashboard and it's done it. So we can I mean this is sample information to show you what I mean. But you could upload photos here. You could do anything you want to. Hey dude, my Goal

is to compete and take home the UFC lightweight title this weekend. Okay, awesome. Monthly income. Let's put that at $150,000 Rooneyies and active clients can be two million clients, whatever. And we can save those changes. Changes saved successfully. Cool. So, we got our goals, got everything we need to website, all this data. Now, here's really cool. If I log out, for example. Okay. Yeah, that's fine. Then, let's Just say, for example, that I refresh the page again. Now, what if I want to log in? Well, I click on login. It takes me down here past

all of our beautiful cards. I actually think this is so freaking cool. Stop burning cash and bad websites. It's like your credit card getting crushed and stuff. It's cool. I'm going to put all the link for this website in the community. It's so freaking sick. But look, we got alexal alex.com. We can come down here. I click On login and let's see if it's got my information. And would you look at this guys? Monthly income goal active clients. How freaking sick is this? And we can also validate this in Superbase. So if I head over

now to Superbase this is in Chrome. Let me come over to a different web page which is going to be this one right here. So we've got users which is cool. What we can do on the left hand side is click on tables which is sweet and test this all out. So if I Come down to I think it's going to be users down here. So we click on this button here and click on view in table editor and we should see Alex right. So just to show you how this is all connected. I've got

Alex.com. Look at this guys. Alex alex Alexen website.com. So if I change this to Bellator.com right will that be reflected? Well let's test it out and find out shall we? So if I come back over to web conversions and I refresh this I'll just uh come back Into the dashboard real quick and we see beltor.com. How freaking cool is that? And again, if I go monthly income is now $1. I save changes. I come back over to here and then I refresh this. I don't think we store the actual dollar amount here, but like yeah,

you'll see that this is now going to be reflected. So if I come back over to it should be on user dashboard, for example, we will see the $1 mark appear. There you go. Income is $1. So obviously we'll need to add role Level security to this. Make sure it's protected and kicking both. And the way that you do that obviously is you click on it for example and you click on RLS disabled. Just enable RLS for this site. That enables role level security within the superbase. All right, cool. So that's all enabling. Very very

very cool. We got for our tables and we are ready to rock and roll. And so now we've created this beautiful gorgeous responsive website that users can create Accounts with. They're kicking butt. The next thing that we need to do now is actually host it online so that people can actually log in, buy our services, and see it whenever they want to. And so the first step of that is actually pushing it back to GitHub. So we're going to come over here and say, "Hey there, dude. I want to push this live now to GitHub.

Could you make sure that the files are in order and that everything is appropriate so I can Actually push this onto GitHub? I then plan to host this on Versel. So, please do any necessary amendments and push this back to GitHub, please. Beautiful. We send that one off. Fantastic. And then what we're going to do after that is then host this onto Versel, which will take all the code that we got on GitHub and let it be a beautiful website and from Versel, we can do anything. We can do things about we can track metrics,

we can track views, page speed, Pretty much anything we want to. Then going forward, anytime I ever want to make a change to this website, I just do it here in anti-gravity. that updates GitHub and then GitHub will because VELL is and I'll show what VELL is in a second. It's just a reflection of GitHub. That's all it is. It's just reflecting the code and it just gives you extra access to do various things which you'll see in a second. So, let's head over to the cell now and check that One out. So, good. The

build works there, but let me duplicate the keys in here. XS. Let me fix this quickly. So, it's doing everything, all the relevant checks to make sure it's all ready to rock and roll and we'll work with Vel. So, what on earth is Vel? Well, let's head over and find out exactly so I can show you specifically. So, we head over to versel.com. I want you to create an account. And all you're going to do is connect your GitHub. Okay. And then what You do is you click on add new and you're going to come

down to let me just move this out the way. Add project. And what you're going to see is the thing that you created, which is Gorgeous Websites, which is really decent. And then you click on import. That was a few hours ago cuz I just went to the cinema to watch 28 years later part two. Amazing film. Highly, highly, highly recommend it by the way. So, this is very cool. But I want to make sure that GitHub is updated before I deploy it onto the cell. Okay, beautiful. It is now fully committed to GitHub, which

is fantastic. So, what do we do? Well, you might have guessed it. We head over to the cell. As you can see, the hobby plan, their free plan is very, very generous. So, let's come over. We've got it. I'm just going to refresh this page and then we are going to hit on the deploy, which is awesome. So, come down here, hit deploy, and we are ready to Rock and roll. You might notice environmental variables. That is the kind of thing that you would use if you are connecting this to chat GPT or maybe you

have various different things you need to do. Now, we're most likely going to need to connect basically our superb base to this. So, we are going to need to add environmental variables. So, this isn't going to load in the first instance, but what's really cool is you can actually connect a versel MCP to, You might have guessed it, anti-gravity, which means we don't actually need to mess around with it. But, this seems to have loaded perfectly. So, let's open this up and check it out. All right, I'm rocking and rolling. And look at this, guys.

Gorgeous website at bell.com. This is amazing. I'm just even turning the brightness up now. It's how powerful this is. View our work. Look at this. This is freaking gorgeous. Come down. And again, we've got everything now. And So, it's now hosted on its own website, which is beautiful. We're going to come down again. We've got this beautiful animation. Let's now create an account together. So, let's go down and create one. Let's go for a different email address, which is cool. We'll add a bit of a different password. The name will be John Doe. And then

a website can be let's just go with YouTube.com. All right. Sweet. Come down. Access dashboard. Fantastic. Give that a hot Second. Great. We'll save that. And now we are in John Doe which is awesome because our main goal income active clients bada bading come down here save changes. Beautiful. Again obviously this is just like a sample example but you can kind of get the idea now that basically come back to dashboard and everything is still loaded there for us with all our revenue, our active clients and our main goal. Okay, beautiful. So that's all locked

and loaded but I want To secure this. And the way we're going to secure this now is we're going to make sure that the environmental variables for superbase are actually added through into this. But it's amazing that it's live. This is how we're now going to go ahead and secure it. So click on continue to dashboard. Now this dashboard here is where you can check everything. You can check your deployments and just see how effortless it was just literally uploaded first Time. You are going to get it to do that a lot more if you

basically just say to it, hey, I'm going to publish this on Versell. Just make sure that everything's in order for me to be able to do that. So you can see everything that you need within here. You've got things on analytics, which is really cool. One of the things I like to add is basically this thing here for page views, which is really cool. So you can enable web analytics. You click on Enable which is fine. We can do this in the hobby view but basically just cannot exceed 50,000 views per month. We click on

enable and basically what this lot is doing is it gives you some package. And so all we do to get analytical view and our cell dashboard is you literally copy this. You come to anti-gravity. You throw it in and then all you do is copy this. Come back over to anti-gravity. Do the exact same thing. That will save it and push it to GitHub. And then Underneath here, you'll get your full web analytics and you can see page views, your bounce rate, all that key data. But the first thing I want to do is make

sure that we lock in superbase with the environmental variables. Remember, but anything like that, we put in the environmental variables. And guys, I actually have the Vel MCP within my store. And look at this. It's called the list. So I don't even need to touch the environmental variables. Anti-gravity has done that for me. Or should I say Claude Sonet 4.5 with anti-gravity. And so I don't need to do anything. So if you click on this button here, click on MCP servers. I click on manage MCP servers. You can see there's the beautiful VEL. Now the

ones that I have activated and I'll show you how you activate it first. What I've done for you in this document here at the bottom, I put a VEL MCP guide. So the link get API key. Basically just replace this Here which is insert VEL API key with the token that you create. And then I just want you to copy and paste this text right here. Come over to anti-gravity. Post it in and it'll work for you. Now it's got 150 connections. The 10 I use are 1 6 12 13 14 15 and then I

use these ones down here also as you can see the number the last one the last four I use are right there which is really cool and then it'll be able to do the changes for you and you can validate That by coming over here heading back over to Versel and basically guys let me just run you through how you actually use those code so on here you have all your projects you click on the one that you like which is gorgeous websites all you're going to do is if I click on for example let's

say I want to get speed insights or maybe you want to get analytics let's add this in so install the package copy this. Come back over. Let's go back to the agent. I'm going to Put this in here, which is cool. And then we come back over here and then let's copy this as well. And then throw that in also. Beautiful. Now, that will then deploy and after 30 seconds, we'll start getting visibility. So, you come on to settings. Again, it's just like kind of WordPress. And then on the left hand side, what I want

you to do, if you come down here to environmental variables, we should see superbase. And just like that, you can see I've got Superbase. And it actually shows the keys right there. And then when I come back over, you can see it's now adding in the speed component so we can start to get website insights. And that's basically exactly how easy it is. And as you can see here, guys, we've got Versel analytics. It's been successfully added. So that's all completely now and baked in there. And we can track these whenever we want to within

Versel. And then when I come over to Vel and I click On analytics and I refresh the page, you should see now, well, we shouldn't have any page views, right? Because we've not gone live yet, but you get the idea. We'd actually be able to track it all here just like you would do in WordPress. And so now we've covered exactly how to complete all those websites. The next thing I'm going to show you does genuinely change anti-gravity. What if you could get unlimited usage with an anti-gravity Using one of the most fastest growing open

frameworks, fastest growing AI open frameworks on the planet? That's exactly what we're going to learn right now. Open code, which is the world's fastest AI coding agent. And I'm going to show you why that is significant and how that might affect you in this video. Now, what it does when you give it access to Open Code is it gives you access to over 150 different models that you don't get access to with an anti-gravity, which Will basically help you save money and power up your building. So, if you hit limits, you're able to continue developing

with an anti-gravity. Now, as we know, anti-gravity is a coding app. And the best way to think about anti-gravity, your kind of coding app, is as a fighter jet. Think of it as a vehicle. Okay? Now, there are many options or many different fighter jets that you could be. And the model, the person who flies in that fighter jet is The pilot. And the two pilots, if you like, that we have access to in anti-gravity are Gemini and Claude. And you can use GPT, Chat GPT, but it's a very, it's not very strong model. It's

only good at very kind of specific things. The point is that we have access to two brilliant models. But what Open Code does is it gives us access to a full pilot army. So when we power up anti-gravity, we can use any of these models that we want to. And you can use These crucially from free which is one of the main benefits especially people who aren't on the top tier plan who may run out of credits you can actually use these to to save cost basically. So instead of you running out of tokens which

means that you stop building you can now continue with the introduction of this and you can even use local models. If you've seen this image before you you'll know where that's funny. And the cool thing about it as well is you Can use all the GPT models using your chat GPT subscription. So traditionally we used to have to use our our API token so you could build on token usage. But what open code lets you do is actually your existing chatgbt plus subscription in it to code and build anything you want to within anti-gravity. You

can use it within any of the co-pilots or any of the even your terminal basically. So it's really comprehensive like that. And at the end of the video I'm also going To show you one of the mechanisms that people are using anti-gravity technically for free if they hit their rate limits. But I'll touch more on that towards the end of the video. So let's start by looking at what open code is. So, as it says, it's an open-source AI coding agent. It actually ruffled some feathers with Enthropic who cut off access to this, but OpenAI

have embraced it quite strongly, and it is, as I say, it is so fast growing. And a couple of Their stats you can see, actually, if you come down here, over 70,000 GitHub stars, which is code for internet updates. People really love it. 500 contributors and 650,000 monthly devs. So, it's built for privacy first. There's a privacy first initiative, which is really interesting. And obviously as you look at very sensitive data it becomes quite a different thing because when you're building in these apps it's within their kind of Environment. So lots of different things but

the tilda to take away from this is open code is an open-source agent that helps you write and run code within any AI model. So think about it opening up the whole army of fighter jet pilots and it's available as a terminalbased interface desktop app or you can use it as an IDE extension which we're going to be using inside anti-gravity. So, now we're going to cover exactly how you can get access to these state-of-the-art AI Models for free and how you can get a zerocost alternative. And we're going to add this together in anti-gravity,

but it will also work in any of these idees or even your terminal. And then I'm also going to show you one of the integrations with anti-gravity that you can add at the end of the video. Awesome. So, we are on the Open Code website. All we're going to do is come down and just click copy on this code right here. And then I'm going to move To anti-gravity. I've created an example environment called Open Code. What we need to do now is use a terminal. So as you're familiar with in anti-gravity, most of our

conversations happen on the right hand side, right? We pick the model, we pick we want fast or planning, but we're going to use a terminal for this because the other environment we may use and remember anti-gravity is an agentic first coding platform, right? So we often use the agent manager and we Open the agent manager and we have all our projects on the left. We can do conversations and we've got kind of playgrounds etc. But when we're using open code, we're doing that in the terminal. Now the terminal is something we can use on our

computer as you can access by unmark command spacebar and type in terminal. And essentially as you can see right now it will open up for us and then this is the terminal. We can do various different things and and have a Great time with it. But we're going to use this within anti-gravity because this is the user interface that we're familiar with. So I'm going to come up top click on terminal. So you got file edit selection view go run terminal. Click on new terminal. This opens up the terminal pal. And you can see guys

you've got the terminal which is basically communicating with your computer. And actually in the right hand side we can delete these. We can just Literally add a new one, as many as we want to by clicking on the plus. And we can add as many different, meaning you've got multiple parallel agents running simultaneously. So, we're going to come down. We're going to paste in that command and hit enter. And as you can see, mine is already installed cuz it said, "Hey, Jack, it's already installed." And if you want to make sure it's installed or not,

you can enter this code here, which is open code Space- version. And this will tell you the version of Open Code that's already on there, which is cool. And it says, "Hey," basically comes back and lets you know the specifics. So the way that we access this just like everything else when you install claude code for example if I wanted to use claude I would type in the word claude and all of a sudden claude code would start to appear in the terminal and now I'm talking to claude code. Awesome. So as you can see

open Code is now appeared and we got this black interface but maybe we don't like it down below. So what we can actually do here is rightclick and panel position and put this on the right hand side like that right which is looking better. Now if we want to get rid of the agent for purposes of this we can do on a Mac you can do command L I believe and that sends it away. That does cool. So now we've got open code exactly where that used to be and you can ask it anything You

want to. So the first thing we want to do with this right essentially is now we can get access to all these cool models is you can do command shift which goes from plan and build very very simple. So what we can do here is we can go down and we can type in models like so and it shows you all of the models that basically you have access to and you can view all of them by control and A. So if you come down control A you can see all of these different models now

That you have access to. So let's say for example we wanted to use the most powerful open air models. We can do this just with our typical chatb subscription or I could just pick one of the free models or I could connect it to open router which itself is connected to literally everything. So the way we do this guys very simply to get to the model is right click and I'm going to go for connect like so. So connect to provider. Let's pick the provider we Want to go for. So let's just say you want

to do open AI. And by the way there's an anti-gravity specific plug-in for this that connects the email addresses that I'll get to. And we say do you want to do your manual API key which is just your API key or your chat GBT pro or plus. If you've got a ChatGBT account, it just runs off that. So, if I click on this one, for example, here, which is awesome. And all it says is basically copy all this information. So, Let's click on that link, open it up, and this should take us through to our

Chat GBT account. And then we just simply sign in right here. There we go. And then basically it pops up with sign into Codox ChatgPT. So, we say, hey, we're happy with that. And we click on continue like so, which is awesome. Authorization is successful. We can now return to open code. So, we come back over to open code. And that should all be done. And now we've got all these Beautiful models. So, now we have GBT 5.2 into codeex with an anti-gravity. So one of the key takeaways here is you can use open code

when you run out of tokens or you want to use a different model because remember all the models are specialized for something different. So even if you're using Gemini or claude for like 99% of the stuff it's really good for you to have the ability and the skills to say you know actually this brand new model just launched I want to Use it. We can now use open code to do that and you've got the skills to do that now because you have access to over 150 and crucially also open router which as you can

see from that website gives you access to everything and this basically means know that you're not beholden to any one specific model for whatever you want to do. And so now let's actually give it my anti-gravity master prompt that I use whenever I build anything out. I'll put a link for It down below. You can have it completely for free. I spent weeks building and focusing on this refining it but you just so you don't have to basically. So all you do is literally copy all this stuff all the way down. concept to come over

and grab it without moving it over, which is really cool. And what we're going to do is come back over then to our beautiful thing here and we're just going to paste it in GPT 5.2 codeex just so you get a sense of How it works. And we hit enter. And you can see already that the interface is really cool compared to the terminal. And again, you can run this in the terminal if you want to just while that's thinking for a second. Going to control command T, type in terminal. One second. Actually, come down

here. I think I've already got it open here. Again, you can just come down if you ever want to use your terminal. You can do open code. This is one of the things That the founder of Claude Code said that they really like using it in the terminal because it's a little bit faster, but again, you don't necessarily need to use it. And just like that, guys, it's basically come back now with everything I suggested. And if you remember from my last video, again, I'll put a link on screen X specifically. What this does, it

initializes the project. And what it essentially does before it does anything else is creates Gemini.md on the left hand side, which is all the core project files. And what we essentially do first is what we do the north star. What's the thing we want to do? Our desired outcome in plain English, the integrations, what are the services we want to connect to, the source of truth, the delivery payload, the behavioral rules, and all that sort of stuff. So, all we're going to do the first part of our project is essentially answer these questions. As you

can see, It's already created for us now a bit of a project map. So, what I'd like you to do is I want you to go ahead and build me a LinkedIn post generator. I'm going to give you some copy and then from that copy I want you to create for me three LinkedIn posts that follow the best practices that I give you. No need for any integrations source of truth essentially just going to be the best practices that I give you for LinkedIn. I want the final product to be on the Website and I

want to look quite visually engaging and quite cool and yeah no other constraints just all on one page for me there. It's a very very simple challenge just had to go and build that just to get a sense of how this works and interacts. And the really cool thing with this is that anytime I want to bring in any of the anti-gravity models or cloud code or anything, I can do that really straightforward, which is super duper cool. So you go, it's gone Down that it's got that before I can proceed. And a few details,

I can refine the pay blueprint. The source copy you want post generated from. So let's head over to my LinkedIn and grab some example copy. And to do that, we're going to add a file on the left hand side. Let's go new file and we'll call this one LinkedIn content example MD. Beautiful. And then we can start pasting all the stuff in there that we want to. Of course, we could just simply get it To go ahead and describe all the stuff from LinkedIn if we wanted to. Cool. So we've got some example posts on

the left hand side and what I can do here is say hey the LinkedIn posts are here and actually what we can do is basically do an at sign and you can type in the name of the file which is LinkedIn content example MV and just say just follow it and create everything in this tone of voice and style. Awesome. And in terms of the website designs I want you to Leverage best practices for beautiful websites UI design patterns all that sort of stuff. Obviously we get way more detailed. I just want to show you

the basics of how to actually build something using this stuff. We'll send that one off like that. And again now chat GBT can go ahead and do all the thinking for us there. Then in terms of design for the dashboard, why don't we come over to Dribble and grab a little bit of inspiration. So we could just say Something like, I don't know, like a dashboard and let's see what dribble can grab for us so we can find something good and decent to give it as a reference image. This I think here looks really cool.

So why don't we just give this a quick copy again. Normally we would just mood board this. So we'd get like four or five images and describe the style and detail depending how detailed you wanted to get. So going to come back over and let's just paste that Into the file. Yeah, let's paste that image.png and I'll just sort of say use this as the design reference for the dashboard. Cool. and then an at sign and let's go for design image.png. Beautiful. And let's send that one off. So what's really cool now is actually built

out all the information for the data schema, the blueprint. And if we're happy with it, we just say, "Hey, that sounds good. Let's go ahead and do it." And what's really cool, guys, with this Stuff, like you do just get free models. So all I could do if I wanted to is click on this plus here for example for a new terminal, I could just go open code. And then what you've got here, if I just go for for/models, I've got these free ones. So I can just say, I've got the big pickle or we've

got the miniax mm2, we've got grot code fast, whatever I want to. I can just ask it to start doing stuff if I want to completely for free. No concern about tokens at all. And obviously you've seen the Ralph Wigum thing that people are doing and all that sort of stuff. If you did want to do that and that burns a ton of tokens, you could run things like that or just like low-level tasks that don't interfere with the main projects on these free models if you want to. I do think the bigger benefit though

is the fact that you kind of get access to all the models. But again, if you're on the more premium subscription anti-gravity, You wouldn't necessarily have to do that. What's cool here is come back and ask for some different add-ons. So it said for example, what do you want? So do you want to share copy buttons for each post? Export all post to CSV. Titan generation structure. Let's say that I want to be able to let me export CSV and let me copy the post with a nice copy button. And let's do confetti after I

copy it. Okay, give it a little challenge, something kind of like add a Little bit of edge to it. And while OpenAI is working in the background, I'll also show you how you can get access to Claude and also Gemini within Open Code. So to do that, we're going to head over to this website. So to do that, you're going to head up to Open Code anti-gravity orth. Now, the way that this works is you'll have a Gmail account and what this is doing is using the author you use in the browser to access the

models. This is something I Genuinely think that Gemini is probably going to patch. I mean, it happened to Anthropic actually and Anthropic like Claude Code, they shut that down. They changed their terms. So, this is something I don't think is going to exist for too long in the future just because if everyone's using their email basically, they're probably not going to be paying for their usage. But, it does exist at the moment. And the way that you can get it in anti-gravity if you Want just so you understand what is available is you can literally

copy this. So you essentially come back over and give it a prompt like this which is install the open code anti-gravity or plugin with the anti-gravity model definitions to my global config using this URL give me the Google author later hit enter and after you've done that what anti-gravity open page you can select the account that you're basically doing it with. So the Google account Like so you click on this one. Then it asks for permissions to connect and it says also you've successfully authenticated with anti gravity. You can now return to open code and

then you can close this tab or head back over to anti-gravity itself. And when you come back you just click on accept all and then everything should be available within open code and you can validate that by coming down on the top to terminal click on a new terminal like So. Let me just delete this one down the way for example. And if I just type in uh let's come here and enter in here open code we should get the full browser and then you should be able to see something from anti-gravity. So if I

come down I do models as you can see now I've got claude opus 4.5 thinking anti-gravity sonet 4.5 and also all the Gemini models and that's basically just using your Google signing credentials. Again I'm not using this. I've got the Pro account and I do think they'll patch it but just so you're aware of what is available and the kind of like options out there to connect certain things to things. But what I want to show you now which is really interesting. Now all this code has been built by basically chatg in any model we

want to. I think the use case that I would probably lean on the most with this stuff is if you're doing an insane amount of code we can leverage some of the free models and Then we can bring in Gemini as kind of like essentially to kind of make the design unstoppable. Now personally speaking I'm always going to be using Gemini include to build everything out. But if there are really specific mundane tasks that don't require a big brain approach to think about it, I would just whip up open code, get it to deploy, get

it to work on something really specific without that. But if you are someone who's like in a position where you're Really trying to stretch and think about your token management, these are really incredible options. So what I can say with this is, hey dude, what I want you to do is go through the design and essentially improve the design and layout of the entire dashboard. Make it excellent, make it gorgeous, and do a sense check of all the code to make sure it is in a beautiful position and ready to go. So we can use

Gemini now to review everything we want to and do Whatever we'd like. One of the I guess limitations of open code I'd say is that you don't have access to the browser like you do. So when you come and leave the anti-gravity section, you don't get access to the agent manager and you don't get that inbuilt browser thing that you can use within the anti-gravity environment basically. Beautiful. And now it's done. Let's give it an example. So I've got some information here about anti-gravity. Let's come down and click On generate posts and see this turned

into a couple of LinkedIn posts for us. Give that a hot second and see what it'll do for us in the background. There we go. Imagine XYZ ready to level up. Build fast with some options. scroll down and I could literally come down here, copy it and then paste it onto LinkedIn. And obviously we can make that way better by being really specific on the hooks and give it loads of information. But you get the idea of the Kind of system you can build now with this then also coming to the terminal new terminal and

then leveraging here open code whenever you want to use any of these 150 models that are available within open code. So you can now use this alongside anti-gravity at the exact same time. And so now we've covered everything about videos. The next thing we need to do then is learn how to leverage every skill that we've learned in this video to take it to the complete Next level, which you can do by joining me by clicking the top link in the description.