WEBVTT 00:00:00.000 --> 00:00:02.399 Forget debugging code the old way, you know, 00:00:02.419 --> 00:00:04.960 reading lines and lines of text, just trying 00:00:04.960 --> 00:00:07.059 to guess what went wrong on the screen. Exactly. 00:00:07.360 --> 00:00:09.500 The really shocking thing about Google's new 00:00:09.500 --> 00:00:12.419 AI, anti -gravity, is that it doesn't guess. 00:00:12.980 --> 00:00:17.359 It literally watches your app run. It has vision. 00:00:17.559 --> 00:00:19.800 It has vision. It can see a button is off screen, 00:00:19.920 --> 00:00:23.699 read the logs, and then just fix the CSS autonomously. 00:00:24.030 --> 00:00:26.089 This changes pretty much everything for front 00:00:26.089 --> 00:00:28.670 -end debugging. It's a huge shift. Welcome to 00:00:28.670 --> 00:00:31.370 the deep dive. Today, we are taking a close look 00:00:31.370 --> 00:00:34.780 at Google Anti -Gravity. It's an AI -powered 00:00:34.780 --> 00:00:37.020 IDE that's an integrated development environment 00:00:37.020 --> 00:00:40.100 that uses a pretty unique Chrome extension as 00:00:40.100 --> 00:00:43.340 its eyes. Our goal here is to pull out the crucial 00:00:43.340 --> 00:00:46.119 insights for you, the learner. We're going to 00:00:46.119 --> 00:00:48.640 look at that unique visual AI, the practical 00:00:48.640 --> 00:00:51.820 setup steps you have to know, and really the 00:00:51.820 --> 00:00:53.679 revolutionary accessibility this whole thing 00:00:53.679 --> 00:00:55.920 promises. Yeah. We're going beyond just what 00:00:55.920 --> 00:00:58.479 it does. We're digging into the why. Why is visual 00:00:58.479 --> 00:01:01.299 feedback such a game changer compared to... You 00:01:01.299 --> 00:01:03.859 know, the traditional blind coding AIs. Let's 00:01:03.859 --> 00:01:06.280 get into it. Let's do it. Okay, so when we talk 00:01:06.280 --> 00:01:08.140 about IDEs, we're talking about the software 00:01:08.140 --> 00:01:11.540 developers use to write, test, and debug their 00:01:11.540 --> 00:01:14.879 programs. It's their workspace. Right. And anti 00:01:14.879 --> 00:01:17.159 -gravity is a fundamental shift in what that 00:01:17.159 --> 00:01:19.519 workspace is. It's not a passive text editor 00:01:19.519 --> 00:01:22.959 like VS Code. It actively participates. It understands 00:01:22.959 --> 00:01:25.280 the result of the code, not just the syntax. 00:01:25.579 --> 00:01:27.799 Precisely. And the key, the thing that makes 00:01:27.799 --> 00:01:30.680 all of this possible is the Chrome browser extension. 00:01:31.219 --> 00:01:33.480 So what's so special about that? What does it 00:01:33.480 --> 00:01:36.879 let the AI do that, say, a normal language model 00:01:36.879 --> 00:01:39.340 can't? Well, it gives it three capabilities that 00:01:39.340 --> 00:01:42.000 all work together. First, direct browser control. 00:01:42.299 --> 00:01:44.359 Meaning it can actually click things? It can 00:01:44.359 --> 00:01:46.599 click things. It can fill out forms. It can navigate 00:01:46.599 --> 00:01:49.219 around. It acts like a human tester, not just 00:01:49.219 --> 00:01:52.239 a code generator. Okay. Second, and this is the 00:01:52.239 --> 00:01:55.680 big one, is screen recording and analysis. It 00:01:55.680 --> 00:01:58.250 understands the visual context of the app. It 00:01:58.250 --> 00:01:59.909 knows what a button looks like when it's just 00:01:59.909 --> 00:02:02.269 a few pixels too wide. That's a critical distinction. 00:02:02.329 --> 00:02:04.549 It's not just reading the code's blueprint of 00:02:04.549 --> 00:02:08.150 the page, the DOM. Exactly. A traditional AI 00:02:08.150 --> 00:02:11.129 can check your syntax for a button. It can't 00:02:11.129 --> 00:02:13.590 tell you, hey, that button you coded is visually 00:02:13.590 --> 00:02:15.870 breaking the entire layout. But anti -gravity 00:02:15.870 --> 00:02:18.449 can. Anti -gravity can see that visual glitch, 00:02:18.669 --> 00:02:21.349 cross -reference it with the error logs, and 00:02:21.349 --> 00:02:24.280 then just fix it. And I imagine the deep integration 00:02:24.280 --> 00:02:27.740 with Google's own ecosystem is the long -term 00:02:27.740 --> 00:02:30.879 advantage here. That's the huge play. The tight 00:02:30.879 --> 00:02:33.780 Chrome and anti -gravity link creates possibilities 00:02:33.780 --> 00:02:37.419 other tools just can't match. Imagine it connecting 00:02:37.419 --> 00:02:39.900 directly to Google Cloud services in the future. 00:02:40.080 --> 00:02:41.699 So it's not just fixing a button, it could be 00:02:41.699 --> 00:02:43.639 provisioning a back -end service. That's the 00:02:43.639 --> 00:02:46.789 potential. So the key takeaway here is this integration 00:02:46.789 --> 00:02:49.129 creates long -term possibilities other tools 00:02:49.129 --> 00:02:51.490 just can't match. It's turning visual problems 00:02:51.490 --> 00:02:54.129 into solvable code problems instantly. Yeah, 00:02:54.169 --> 00:02:55.830 that's a great way to put it. Okay, so for anyone 00:02:55.830 --> 00:02:58.030 listening who wants to jump in, Access is web 00:02:58.030 --> 00:03:00.870 -based. It's antigravity .google. But there's 00:03:00.870 --> 00:03:03.030 a critical step that's easy to miss. You have 00:03:03.030 --> 00:03:05.050 to install the DirectLink Chrome extension. It's 00:03:05.050 --> 00:03:06.909 not in the web store yet, so you need that specific 00:03:06.909 --> 00:03:10.569 link. And why is that so important? Well, beyond 00:03:10.569 --> 00:03:12.650 enabling the screen recording we just talked 00:03:12.650 --> 00:03:16.449 about. It allows for non -incognito access. That 00:03:16.449 --> 00:03:18.550 sounds small, but for a developer, that is a 00:03:18.550 --> 00:03:21.090 massive, massive improvement. Can you explain 00:03:21.090 --> 00:03:24.370 why? Sure. Most automation tools force you into 00:03:24.370 --> 00:03:28.009 a clean, incognito state every time. So if you're 00:03:28.009 --> 00:03:29.889 testing something that requires a user to be 00:03:29.889 --> 00:03:34.180 logged in, you have to log in. Every single time. 00:03:34.300 --> 00:03:36.639 With multi -factor authentication and everything. 00:03:36.939 --> 00:03:39.379 Everything. It's a huge pain. But because anti 00:03:39.379 --> 00:03:41.699 -gravity runs through your normal authenticated 00:03:41.699 --> 00:03:45.139 Chrome profile, it maintains that state. It stays 00:03:45.139 --> 00:03:48.500 logged in across tests. Wow. That's a huge friction 00:03:48.500 --> 00:03:50.900 remover. It's massive for workflow. So once that's 00:03:50.900 --> 00:03:52.819 installed, you start with a simple prompt. Something 00:03:52.819 --> 00:03:55.120 like, create a TypeScript React app with a simple 00:03:55.120 --> 00:03:57.120 landing page. Yeah. Keep it simple at first. 00:03:57.550 --> 00:03:59.689 You select Gemini 3 Pro, probably the low version 00:03:59.689 --> 00:04:02.270 to start, and you hit execute. And what happens 00:04:02.270 --> 00:04:05.189 next is kind of amazing to watch. It really is. 00:04:05.289 --> 00:04:07.110 You're not just waiting for a block of code. 00:04:07.270 --> 00:04:09.909 You see files being created in the file explorer. 00:04:09.930 --> 00:04:11.990 You see live code being written in the editor. 00:04:12.150 --> 00:04:14.490 And you see the terminal installing dependencies 00:04:14.490 --> 00:04:16.910 and starting the server. All at once. All from 00:04:16.910 --> 00:04:19.189 one sentence. It's like watching an entire dev 00:04:19.189 --> 00:04:22.050 team at work in Fast Forward. A quick note, though. 00:04:22.470 --> 00:04:26.319 Using the Gemini 3 Pro low model, it... does 00:04:26.319 --> 00:04:28.439 require a bit of patience. It's not instant. 00:04:28.560 --> 00:04:30.259 You might be waiting a few minutes. For sure. 00:04:30.560 --> 00:04:33.259 But when it's done. You get two ways to see your 00:04:33.259 --> 00:04:35.579 app, an internal preview, which shows you what 00:04:35.579 --> 00:04:37.939 the AI is seeing. And the normal external local 00:04:37.939 --> 00:04:41.420 host 0 .30 view. Right. And switching between 00:04:41.420 --> 00:04:43.980 those two is really useful for debugging what 00:04:43.980 --> 00:04:46.259 the AI is thinking. So just to paraphrase that 00:04:46.259 --> 00:04:48.819 non -incognito access is so important because 00:04:48.819 --> 00:04:51.360 testing can maintain authentication and state 00:04:51.360 --> 00:04:54.699 without repeated user logins. Exactly. It just 00:04:54.699 --> 00:04:56.959 removes a huge repetitive headache from the workflow. 00:04:57.160 --> 00:04:59.180 Let's talk about the main event here, the live 00:04:59.180 --> 00:05:01.100 recording feature. This is the money feature 00:05:01.100 --> 00:05:03.620 for sure. As your app is running, anti -gravity 00:05:03.620 --> 00:05:05.920 is capturing screenshots at regular intervals. 00:05:06.300 --> 00:05:09.060 It's basically treating your app's behavior like 00:05:09.060 --> 00:05:11.360 a video stream of data. Yeah, you'll see these 00:05:11.360 --> 00:05:12.980 little blue bars on the timeline. That means 00:05:12.980 --> 00:05:15.560 it's actively recording and watching. And this 00:05:15.560 --> 00:05:20.019 is where the potential for true autonomous debugging 00:05:20.019 --> 00:05:23.579 really comes in. The one. Whoa. I mean, just 00:05:23.579 --> 00:05:26.829 imagine the AI watching an app fail, right? It 00:05:26.829 --> 00:05:29.490 watches it crash. It instantly reads all the 00:05:29.490 --> 00:05:31.529 logs. It visually understands why the button 00:05:31.529 --> 00:05:33.750 vanished when you clicked it. And then it fixes 00:05:33.750 --> 00:05:36.089 it. It writes the code, continues the runtime, 00:05:36.350 --> 00:05:38.610 all without a human touching it. That's moving 00:05:38.610 --> 00:05:41.290 way beyond just code suggestions. That's autonomous 00:05:41.290 --> 00:05:43.610 repair. It's revolutionary potential. And the 00:05:43.610 --> 00:05:45.870 workflows for iterating on your app are all driven 00:05:45.870 --> 00:05:48.730 by this visual input. The simplest one is the 00:05:48.730 --> 00:05:50.769 screenshot -based workflow. Yeah, you can just 00:05:50.769 --> 00:05:53.110 drag a screenshot into the chat and say something 00:05:53.110 --> 00:05:54.949 like, make this look better. And it actually 00:05:54.949 --> 00:05:57.529 understands that. Make it look better. It does. 00:05:57.689 --> 00:06:00.829 They call it vibe coding. Since the AI has vision, 00:06:01.089 --> 00:06:04.230 it can interpret words like modern or cleaner 00:06:04.230 --> 00:06:07.470 and translate that into actual CSS changes like 00:06:07.470 --> 00:06:11.089 adjusting padding or changing fonts. So you don't 00:06:11.089 --> 00:06:12.850 need to be a designer to get a good looking result. 00:06:13.069 --> 00:06:15.290 Not at all. And then there's the more advanced 00:06:15.290 --> 00:06:17.769 screen recording workflow. You can tell it to 00:06:17.769 --> 00:06:20.209 record an interaction, analyze why it failed 00:06:20.209 --> 00:06:23.279 visually, and then generate new components. based 00:06:23.279 --> 00:06:25.740 only on that visual context. So the whole interface 00:06:25.740 --> 00:06:28.019 must be built to handle this flood of visual 00:06:28.019 --> 00:06:30.800 information. It is. You have the agent manager, 00:06:30.939 --> 00:06:33.839 which is your main control panel, an inbox system, 00:06:33.939 --> 00:06:36.100 which organizes all the AI's updates so you don't 00:06:36.100 --> 00:06:38.500 miss anything. And the file explorer even gives 00:06:38.500 --> 00:06:41.360 you visual cues like green for new files. So 00:06:41.360 --> 00:06:43.850 just to recap that point. the system handles 00:06:43.850 --> 00:06:46.750 aesthetic requests using vibe coding which means 00:06:46.750 --> 00:06:49.050 it translates descriptive terms into concrete 00:06:49.050 --> 00:06:51.790 visual changes yeah it connects what you mean 00:06:51.790 --> 00:06:54.290 your human intent directly to the visual outcome 00:06:54.290 --> 00:06:57.430 okay this is powerful stuff but we need to talk 00:06:57.430 --> 00:07:00.089 about the controls and safety nets you need to 00:07:00.089 --> 00:07:02.269 configure some essential settings before starting 00:07:02.269 --> 00:07:04.959 a real project Absolutely. First is the review 00:07:04.959 --> 00:07:08.639 policy. For just playing around and rapid prototyping, 00:07:08.740 --> 00:07:11.500 set it to always proceed. It lets the AI work 00:07:11.500 --> 00:07:13.420 without asking for permission. But for anything 00:07:13.420 --> 00:07:15.579 serious? For production, you have to set it to 00:07:15.579 --> 00:07:18.019 request review. You need to approve every single 00:07:18.019 --> 00:07:20.139 change, every dependency it wants to install. 00:07:20.360 --> 00:07:22.399 You don't want it pulling in something malicious. 00:07:22.839 --> 00:07:25.019 Good point. What else? For beginners, I'd say 00:07:25.019 --> 00:07:27.939 terminal command auto -execution on it. It just 00:07:27.939 --> 00:07:30.259 smooth things out. Same with auto continue, which 00:07:30.259 --> 00:07:32.339 lets the agent try to fix its own errors. And 00:07:32.339 --> 00:07:34.160 there's one setting that's absolutely critical. 00:07:34.500 --> 00:07:39.579 Yes. You must enable agent web tools. This is 00:07:39.579 --> 00:07:42.699 non -negotiable. Why is it so important? If it's 00:07:42.699 --> 00:07:45.259 off, the AI only uses code from its training 00:07:45.259 --> 00:07:47.500 data, which can be months or years out of date. 00:07:47.740 --> 00:07:50.139 With web tools enabled, it can search the live 00:07:50.139 --> 00:07:52.899 web for the latest APIs, the newest documentation, 00:07:53.139 --> 00:07:56.279 and current best practices. Your code will actually 00:07:56.279 --> 00:07:58.680 work. That brings us to the ultimate safety net, 00:07:58.860 --> 00:08:02.139 GitHub. Yes. Look, I still wrestle with prompt 00:08:02.139 --> 00:08:04.839 drift myself. You give the AI a slightly wrong 00:08:04.839 --> 00:08:06.800 instruction, it misinterprets it, and suddenly 00:08:06.800 --> 00:08:09.300 your whole application is broken. And if you 00:08:09.300 --> 00:08:12.480 don't have version control... You're stuck. GitHub 00:08:12.480 --> 00:08:15.259 is your safety net. It saves stable snapshots 00:08:15.259 --> 00:08:17.759 of your code. Building without it is like building 00:08:17.759 --> 00:08:19.920 on quicksand. you need to be able to roll back 00:08:19.920 --> 00:08:22.339 we also have to do a realtor check here this 00:08:22.339 --> 00:08:25.560 is a version one product it is and the docs are 00:08:25.560 --> 00:08:28.439 honest about it the generation can be slow and 00:08:28.439 --> 00:08:31.199 some features are still maturing that live recording 00:08:31.199 --> 00:08:33.620 feature we're so excited about the documentation 00:08:33.620 --> 00:08:36.240 literally says it's extremely buggy right now 00:08:36.240 --> 00:08:39.419 so besides the slow generation speed the biggest 00:08:39.419 --> 00:08:41.519 friction point for early adopters is probably 00:08:41.519 --> 00:08:43.460 that the first version it builds might be a little 00:08:43.460 --> 00:08:46.340 basic yes It's a starting point. You still have 00:08:46.340 --> 00:08:48.620 to guide the vision and iterate quite a bit. 00:08:48.740 --> 00:08:51.200 So let's put this in context. How does anti -gravity 00:08:51.200 --> 00:08:54.179 stack up against competitors like Cursor AI or 00:08:54.179 --> 00:08:55.980 Replit? Well, the first thing you'll notice is 00:08:55.980 --> 00:08:58.679 that anti -gravity looks and feels like VS Code, 00:08:58.919 --> 00:09:01.740 which is the standard IDE for millions of developers. 00:09:02.039 --> 00:09:05.519 That familiarity is a huge advantage. It lowers 00:09:05.519 --> 00:09:08.340 the barrier to adoption for existing devs. Right. 00:09:08.419 --> 00:09:10.960 But the real long -term advantage... is that 00:09:10.960 --> 00:09:13.700 Google ecosystem we keep coming back to. No one 00:09:13.700 --> 00:09:16.179 else has that deep native integration with the 00:09:16.179 --> 00:09:18.600 browser itself. That's their trump card. And 00:09:18.600 --> 00:09:20.679 what are developers who've used it saying they 00:09:20.679 --> 00:09:23.379 like the most? Even with the V1 bugs, the praise 00:09:23.379 --> 00:09:25.940 is consistently for the UI generation quality, 00:09:26.179 --> 00:09:28.820 the visual design it produces, the layout, the 00:09:28.820 --> 00:09:31.720 spacing, the colors. It's surprisingly good. 00:09:31.860 --> 00:09:34.220 It allows people who aren't designers to create 00:09:34.220 --> 00:09:36.279 professional -looking apps. And that's the revolutionary 00:09:36.279 --> 00:09:38.460 part, really, the accessibility. Let's unpack 00:09:38.460 --> 00:09:41.080 that. Think about the old barrier to entry for 00:09:41.080 --> 00:09:44.559 software. It was years, years of learning code, 00:09:44.700 --> 00:09:47.740 config files, servers, all of it. The time investment 00:09:47.740 --> 00:09:50.539 was just enormous. And now? Now, the new reality 00:09:50.539 --> 00:09:53.360 is that barrier has basically crumbled. What 00:09:53.360 --> 00:09:55.960 you need now is a clear description of what you 00:09:55.960 --> 00:09:58.379 want to build, a basic understanding of the problem 00:09:58.379 --> 00:10:02.019 you're solving, some patience, and basic GitHub 00:10:02.019 --> 00:10:04.120 skills. The time commitment has dropped from 00:10:04.120 --> 00:10:06.980 years of study to maybe hours of learning how 00:10:06.980 --> 00:10:10.340 to prompt an AI. It's a profound shift, and it 00:10:10.340 --> 00:10:13.129 empowers so many people. Entrepreneurs can build 00:10:13.129 --> 00:10:16.009 their own MVPs. Designers can build fully working 00:10:16.009 --> 00:10:18.809 prototypes. Business folks can create their own 00:10:18.809 --> 00:10:21.590 internal tools. So the main barrier isn't technical 00:10:21.590 --> 00:10:23.889 implementation anymore. Not at all. It's about 00:10:23.889 --> 00:10:26.730 understanding what you want to build and why. 00:10:26.929 --> 00:10:29.309 It's a conceptual challenge, not a mechanical 00:10:29.309 --> 00:10:31.860 one. So to pull it all together for the big idea 00:10:31.860 --> 00:10:35.600 recap. I'd say anti -gravity fundamentally shifts 00:10:35.600 --> 00:10:39.659 AI coding by giving it vision through that deep 00:10:39.659 --> 00:10:42.639 Chrome integration. This visual feedback just 00:10:42.639 --> 00:10:45.700 dramatically lowers the barrier to entry for 00:10:45.700 --> 00:10:48.279 building software. The impact of giving the AI 00:10:48.279 --> 00:10:51.120 eyes is just immense. It shifts the work from 00:10:51.120 --> 00:10:53.860 fixing obscure code errors to defining clear 00:10:53.860 --> 00:10:56.379 visual goals. Yeah. And this technology works 00:10:56.379 --> 00:10:59.559 best when you, the user, are crystal clear about 00:10:59.559 --> 00:11:01.100 what you want the final result to look like, 00:11:01.159 --> 00:11:02.620 even if you don't know a single line of code 00:11:02.620 --> 00:11:04.419 to get there. The tools exist. The capabilities 00:11:04.419 --> 00:11:07.559 are real. The only question is, what will you 00:11:07.559 --> 00:11:09.799 build? A powerful thought to end on. Thank you 00:11:09.799 --> 00:11:11.700 for joining us on this deep dive into Google 00:11:11.700 --> 00:11:13.419 anti -gravity. We'll see you on the next one.