Google Antigravity + Claude Code 🚀 AI Coding Tips (Adding App Auth)

If you're hitting rate limits in anti-gravity and burning through clawed code, I've been testing a workflow to conserve credits and extend your usage by running claude code inside anti-gravity and adding an automated

testing agent to catch bugs without wasting tokens. Hi, my name is Callum,

wasting tokens. Hi, my name is Callum, also known as Wanderloots, and welcome to today's video on optimizing AI coding workflows using Claude Code and anti-gravity. In my first anti-gravity

anti-gravity. In my first anti-gravity video, I built an RSS reader to automatically organize articles. So, I

thought I would extend that example and go through a practical workflow of adding an authentication system, a sign-in button to my app, showing you how you can make apps multiplayer. I'm

using a hybrid three agent workflow.

Planning, coding, testing. Gemini for

planning the O system and anti-gravity, claude code for building it, and test sprite MCP for testing. That way, we're not wasting Claude or Gemini tokens. I

want to know that this workflow works with any AI coding agent. So, if you're using Cursor, Windsor, or anything else, the tips and strategies still apply. In

today's video, I'll show you how to install and set up Claude code in anti-gravity while planning the O system with Gemini and then executing the code with Claude. Then I'll show you how to

with Claude. Then I'll show you how to set up MCP servers using test sprite as an example to go through and debug the errors before demonstrating the full working authentication system built into my app. If you find this video helpful,

my app. If you find this video helpful, please like, hype, and subscribe as I am working on making YouTube my full-time career. So any support you can give me

career. So any support you can give me is very much appreciated. Now, let's

start building with cloud code and anti-gravity.

One of my favorite parts about anti-gravity, Google's new IDE or coding environment, is that it's not just like Google AI Studio, which operates in a sandbox. Instead, it's a full VS Code

sandbox. Instead, it's a full VS Code fork. And what that means is that we

fork. And what that means is that we have the option to install extensions on the side here. So, I thought that it would be helpful to perhaps show you how you can connect other coding agents within anti-gravity. This is

within anti-gravity. This is anti-gravity here. So that hopefully if

anti-gravity here. So that hopefully if you're running into usage limits, for example, with Gemini 3 Pro or Sonnet 4.5 Thinking or any of the other models here, you could continue coding even

once you hit that limit by using another extension like Cloud Code. So just

before I show you how to get Cloud Code going, I want to quickly mention why this matters. And if we go up to the top

this matters. And if we go up to the top right here, we have additional options in anti-gravity where we can click on MCP servers and we can manage MCP servers. There's a certain list here in

servers. There's a certain list here in the server store where we can add different features. For example, we can

different features. For example, we can connect to GitHub. We can connect to Stripe. We can connect to Notion or

Stripe. We can connect to Notion or Linear or PayPal. We can connect to Superbase for a backend system. There's

a whole bunch of different MCP tools we can connect to. But right now, anti-gravity has a limited list of MCP servers. And that's where Claude Code

servers. And that's where Claude Code comes in because Anthropic, the creator of Claude, is actually the one who developed the model context protocol, which is basically the USBC for LLMs. So

the idea is that we can have different models operating and they all communicate using the standard protocol, the model context protocol to access apps, files and websites. So it makes

sense that Claude Bionthropic is going to have a greater list of MCP servers available and greater configuration because anti-gravity is just getting started. So effectively what we can do

started. So effectively what we can do here and I'll show you this more in a second is we can use claw to extend the usage limits of anti-gravity. And the

key way that I'm thinking of this is to use Google Gemini which has a really large context window meaning it has a large working memory to research and plan so that I use up the usage limit of

Gemini for planning and then use the clawed code extension here to do the actual coding. And part of the reason

actual coding. And part of the reason for that is because we get Opus 4.5 which isn't available in anti-gravity but is currently the best coding agent out there. We can take it even one step

out there. We can take it even one step further where we use test sprite to test and then feed back into cloud code to debug. That way we can serve the cloud

debug. That way we can serve the cloud usage. We can serve the Gemini usage and

usage. We can serve the Gemini usage and we make use of MCP tools. So let's get started.

In my first anti-gravity video, what is Google anti-gravity? I built what's

Google anti-gravity? I built what's called an RSS reader. So I'm able to connect to different RSS feeds and news articles and videos will automatically appear in this feed here. So you can see

I just refreshed the page there. it was

able to pull in new articles and then you could see how there's now colors around it with tags. So I also connected to a local model through O Lama to automatically provide tags so that I can filter by different topics here. So I

did a little bit of an update since I showed you the last video. Added the

ability to filter by unread or read and also to save my favorite articles. You

can also generate a briefing. There's a

bunch we can do here, but I thought it would actually be cool if we could introduce an authentication system so that I can sign in with perhaps different profiles or start sharing this with other people and they can sign in and they have all of their settings

already pre-saved. They've got all their

already pre-saved. They've got all their RSS feeds saved. It turns it from a prototype app into a fully functioning app. So why don't we use a hybrid of

app. So why don't we use a hybrid of Google Anti-gravity for planning with Gemini 3 and Cloud Code for executing to actually build in this authentication system and then we'll use Test Sprite

and MCP tool to test to make sure that it's all working in one streamlined workflow.

Okay, so the first thing that we're going to do is we're going to install the Claude Code extension into anti-gravity. You can go over on the

anti-gravity. You can go over on the side here where there's this extensions option. Click on it and search for

option. Click on it and search for Claude. And then we get this Claude code

Claude. And then we get this Claude code for VS Code. And this is one of the major perks of using something like anti-gravity is that it is a VS code fork which opens the door to all of these different tools. So I've used also

clin rue continue. These are different tools that let you bring in your own API key so that you can code within anti-gravity without using up the anti-gravity limit. So it's a way of

anti-gravity limit. So it's a way of extending your limit. There's also the Gemini code assist or the Gemini CLI companion which is kind of the Gemini version of Claude Code here. If you're

interested in seeing me make a video that goes deeper into how we can connect more Gemini tools into anti-gravity, please let me know in the comments and I'm happy to make a video on that. But

today, because we're dealing with MCP tools specifically for testing, I want to use Claude Code. So, let's click install. So, we have to trust the

install. So, we have to trust the publisher. And there we go. It's

publisher. And there we go. It's

installed. That was easy. So, I will note that I have already gone through and installed Claude Code in the terminal. If you go to the Cloud Code

terminal. If you go to the Cloud Code docs, it has all the different installation systems. And basically what that's doing is it's installing it into this terminal here and then it gives you access to it through the extension here

which we can now see we have this little button up on the top here. If you're

interested in uh starting from scratch cloud code tutorial again let me know in the comments. I'm happy to make a

the comments. I'm happy to make a dedicated video on that but it's not too hard to get started. It just takes a few seconds. Next we're going to need to

seconds. Next we're going to need to sign in. If you click any of the slash

sign in. If you click any of the slash commands or click the slash button here it brings up all of the different actions that we can use in cloud code.

And you can see this just opened a new chat window on the side here.

Effectively, it's the same thing as running the chat in anti-gravity, but it has a separate connection to a different API key. So, I'm going to click /log.

API key. So, I'm going to click /log.

And this is where you need to log in to your Claude Code account, which is a paid service. And then I need to

paid service. And then I need to authorize Cloud Code to connect to my Anthropic account. And if you haven't

Anthropic account. And if you haven't signed up here, this is where you would need to pay and connect to the payment.

So, I'm currently on the pro account.

And honestly, I've been using Claude Code all summer. It is, I would say, the most powerful coding system that I've tried. Gemini 3 in anti-gravity is

tried. Gemini 3 in anti-gravity is incredible, but Claude Code has consistently been able to build more powerful tools, whereas Gemini is better at context in my experience. So, the

combination of these two gives me the planning power of Gemini and the coding power of Claude. And you can see here that the free version of Claude does not give you access to Claude code, but protier does. So, I was actually using

protier does. So, I was actually using the max tier for a while and then I've downgraded to the pro tier to try and save some money because I'm also able to use anti-gravity. Cool. So, it looks

use anti-gravity. Cool. So, it looks like I have now signed in. So, let's

take a look at cloud code for a moment.

So, there are quite a few features in cloud code. You can click the slash key.

cloud code. You can click the slash key.

We can open up the configuration file and this brings up the different settings. So, I have autosave turned on.

settings. So, I have autosave turned on.

You can choose if I want to open it as a panel or a sidebar. There's a whole bunch you can go through here and this is all just configured under the VS Code settings. So another thing we can do is

settings. So another thing we can do is we can change the model here. So we can click /model and this brings up the different options. So we can see we have

different options. So we can see we have sonnet 4.5 which is the same as the model that we have over here. And to be honest I'm not quite sure why opus isn't appearing but that's okay for now. I'll

see if I can get that going in a moment.

But we also have the option to do /mcp and click manage mcps. So we can click continue in terminal and you can see this pulls up claude code as its own separate terminal instance. So this is

what I was saying before how this is now running in terminal as opposed to the VS code panel. And when we get brought to

code panel. And when we get brought to the terminal here we can see that we have this option to run /init to create a claw.md file with instructions. So I

a claw.md file with instructions. So I

click /init and claude is now going through and it's going to write itself its own documentation on how it can be configured for operating within this specific workspace. So by doing this,

specific workspace. So by doing this, it's going through now and it's reading the entire codebase that we have here and it's writing its own document that will explain how all of the different

components of my codebase works. So this

is a great first step to get going because it gives it a ground state of understanding for my codebase before we start adding more features. So down on the bottom here on the left, I have this option to make this edit to claude.md.

And we also have the option to allow all edits or say no and tell claude what to do differently. So, it's pretty similar

do differently. So, it's pretty similar to operating with the anti-gravity chat on the side here. And now that we have the claw.md file with the architecture

the claw.md file with the architecture for the RSS reader app, we can actually start to begin planning out the new features. But I was using up my claw

features. But I was using up my claw limit there.

If I go to claude.ai/s

settings/usage, I can actually see how much usage I've had for my week and for my current session, which is every 5 hours. So, I can toggle on extra usage.

hours. So, I can toggle on extra usage.

And I believe this is what gives me access to Opus 4.5, which is Anthropic's latest model. But that goes through your

latest model. But that goes through your usage a lot faster. So, I'm not going to try it at the moment. I might use it later if I still have some credits available. But we can see here that I

available. But we can see here that I also have this weekly limit, which means I've used up 24% of my entire week, and it's not going to reset for another 6 days. I hope this kind of shows you why

days. I hope this kind of shows you why it's useful to not just use cloud code or not just use anti-gravity, but to use several tools together so that we can extend the coding power and not burn

through my weekly limit in cloud code, but begin operating instead with a hybrid workflow. So, with that being

hybrid workflow. So, with that being said, let's start planning out the new features that we want to implement. And

I'm going to use Gemini for this in the side here.

So, I'm going to start a new conversation. And again, I go through

conversation. And again, I go through all of the various features of Google Anti-gravity in this video here. So, I

recommend checking it out if you want to see more how anti-gravity operates. For

example, the agent manager, which is a different way of looking at it versus the editor along with the browser agent and a couple other features. But right

now, I'm in the agent manager, and you can see that I have different workspaces. So, I'm going to add a new

workspaces. So, I'm going to add a new conversation, a new chat into the RSS reader app here, which we can see here.

I can toggle between my various workspaces. So, right now, I'm

workspaces. So, right now, I'm specifically in planning mode and I'm operating on Gemini 3 Pro. I could

switch to Claudson at 4.5 thinking, but again, I found Gemini does a really good job with planning. So, let's see what the plan is suggested by Google. So,

just some general tips is I like to phrase things as use a state-of-the-art research based on the current date to understand the best options here. And we

can see here right now the agent is searching the web. So, we have this following option here to see what the anti-gravity agent is doing. It's now

searching for various authentication systems. And the idea is that we can use up the credits of Gemini 3 Pro for the planning phase and then create a document that we can pass to Claude Code to do the execution. That way we can

conserve some usage for our current session and then also for the weekly limit. I think it's pretty cool that

limit. I think it's pretty cool that this is all able to happen autonomously.

We can see if we expand this that Gemini has been confirming our current stack selection, doing research, and now it has just finished preparing an implementation plan. And if I was doing

implementation plan. And if I was doing something else, it would send this over to my inbox to let me know, hey, the agent is currently blocked. that's

waiting for your permission to do something. So, let's take a quick look

something. So, let's take a quick look at what Gemini gave us.

Gemini came back and gave a few different options. Terso, Superbase, or

different options. Terso, Superbase, or Neon. If we go back to the editor for a

Neon. If we go back to the editor for a moment and pop up the MCP options, I believe Neon is a server that we can connect to with MCP, so that would be helpful. Superbase is also one that we

helpful. Superbase is also one that we can use, but the Turso is not. I'm

asking if we can perhaps use Superbase or Neon instead because I know that it has more compatibility with anti-gravity. And then I'm also asking

anti-gravity. And then I'm also asking it to do a better search for the authentication system because it seemed to just assume that I wanted better off.

And if you're not familiar with any of these terms here, you can use just natural language and you can say, "Hey, I want to be able to sign into my app.

How can we make that happen?" And Gemini would go through and organize that system for you. Okay, there we go. It

just finished again. You can see we got the notification up in the top left. We

can also see that there's a task system here. So one thing that's great about

here. So one thing that's great about anti-gravity and cloud code does this as well is it creates subtasks as it's going through. So it just helps with

going through. So it just helps with what's called context engineering managing the context of everything.

Let's see what the latest update is for the research. We're going to go with

the research. We're going to go with better o and neon for the database. And

we have this entire plan here. But like

I mentioned we could go through and execute with Gemini. We could also switch to claudet 4.5 thinking. But all

of this is going to use up our free limit on anti-gravity. And because in the last video I showed you how we can code with Gemini, why don't I show you how Claude code works? Rather than

having Gemini go through and build this, I'm going to ask it to create a new doc with the road map file so that I can then reference that road map file and give it to Claude. So that lets me use Gemini for planning, for organizing the

context and the specific research that we did here and then give that to Claude code so that it doesn't have to go do the research. It can instead just start

the research. It can instead just start building. Cool. So we can see here we

building. Cool. So we can see here we now have the authentication and database road map. It's got all of the research

road map. It's got all of the research that we needed in here to get going. I'm

going to do a get commit on the side here. So, I can click generate commit

here. So, I can click generate commit message and it will analyze the changes in the file and then it will automatically add a new docs update here for me. So, I'm going to commit that.

for me. So, I'm going to commit that.

Cool. And now let's take a look at claude.

Step one has been completed. We've

planned. We know what our stack is going to be, how we're going to take this app that we have here and add a sign-in functionality and a database back in. So

now I can go to cloud code here and I have a few options here. You can see that we have this ask before edits, edit automatically or plan mode. Again, I

find that it's more powerful to use the plan mode to organize what you want cloud code to do and then execute with the ask before edits mode. So I'm going to say, and this is another tip, please audit the and I can use the at symbol to

reference the specific document here, o road map. So I'm telling Claude Code,

road map. So I'm telling Claude Code, please audit the road map that we just built and let me know what the implementation steps are or if you have any changes. Be thorough yet concise. So

any changes. Be thorough yet concise. So

Claude just created a subtask like I was showing you before with anti-gravity.

And now it's maintaining the context of this conversation within this subtask.

This is all within that same subtask.

All of these different actions as it's going through and analyzing while it's in this blue mode here going to give me a plan on how we can actually make this happen. So we don't need to have Claude

happen. So we don't need to have Claude go and do the web search, do all the research that we had Gemini do. We just

need to have Claude read the road map and let me know what's the difference between our current code base and what the road map says we need. So we can see already that analysis has used up another 4% of this particular session

and a few more percent of my weekly session. Okay, here we go. So that took

session. Okay, here we go. So that took about 2 minutes or so. It's completed a thorough audit of the road map. Huh. And

it's interesting. Claude says that's only about a 3.5 out of five. So this is where we get into prompt engineering where I'm going to go through now and answer clause questions on how we can make this plan a little better and that

will teach it how we should be actually implementing or executing the plan. So I

just went through and answered the questions basically telling the AI to use its best judgment. Also just want to quickly note that if we click on the slash button here and take a look at the model I now have the option to select Opus 4.5. So my guess is that it will

Opus 4.5. So my guess is that it will potentially appear and disappear depending on the usage depending on how many other people are using it or perhaps how much usage I have left in this session here which we'll reset in a

few minutes. Okay, so it went through

few minutes. Okay, so it went through and it created this huge massive plan which is great and it is what I would need for a professional service. But

rather than getting deep into it and setting up an external database and everything, I'm going to instead just use an SQite database which is just running it locally just for the purposes of showing you how this works. If I were

to do this for a professional system, I would go to something like Neon or Superbase for building an actual production database. But for now, just

production database. But for now, just to keep things simple, I'm going to show you how we get the better off, the actual authentication system set up, and then we'll be able to test it easily.

Just a quick reminder to please like and subscribe if you're finding this video helpful, as I appreciate your support a lot. If you're looking for more ways to

lot. If you're looking for more ways to support me, consider joining my membership. Also, if you have any

membership. Also, if you have any questions or ideas for future videos or features you'd like to see, let me know in the comments and I take all of your feedback into consideration. Now, let's

keep building.

Okay, so here's the MVP plan that Claude just gave me. And this looks pretty good to me. I have the option to migrate to a

to me. I have the option to migrate to a full database later, but for now, we're just going to run it locally. So,

assuming everything looks good here, I can choose to either click yes and auto accept, which is where Claude will go through and run everything itself, or yes and manually approve edits, which is where I would have to go through and approve each one. But I'm going to click

auto accept just to keep things streamlined. So here's that same kind of

streamlined. So here's that same kind of to-do list section that I just showed you before in anti-gravity. Claude does

that as well. Needs to add crypto, which is cryptographic hashing to be able to generate the authentication system.

Claude will still ask me to run certain commands that get into actual installation and downloading of software and downloading of libraries and dependencies. So this one is just

dependencies. So this one is just installing the SQite system. So let's

click go. And one thing to keep in mind too is as all of this is running, I still have the option to pop into Gemini. And with the agent manager, I

Gemini. And with the agent manager, I could be running separate elements here.

Perhaps I want to be updating the UI while Claude goes and builds the authentication system. So it's cool that

authentication system. So it's cool that you can actually use the agent manager mode to continue these conversations. I

could send Gemini 3 to go do one thing and then Claude Sonnet 4.5 thinking to go do another one and then go back and check how my Claude code is running. The

goal here is not just to use one of these tools, but to create a hybrid workflow that connects it all together.

That gets improved even more once we start getting into MCP servers that I'll show you in a few minutes for testing.

Cool. So, it's already gone through and completed phase one. And again, it's really nice that it tracks its own to-dos here. It's good practice to

to-dos here. It's good practice to commit after each phase, which I could tell Claude to do as well, but I like seeing what it's suggesting on the side here. And that way, if anything goes

here. And that way, if anything goes wrong partway through, we can always roll it back to a previous version of the code that you can see on the side here. So now let's get into the actual

here. So now let's get into the actual authentication which is better off. So

we can see here that we now have this new O client and O system that's been written. So this is basically a way for

written. So this is basically a way for us to communicate between the various attempts to sign in adding that sign-in button and the actual authentication system that we're currently just running as an actual file as opposed to a full

backend server which basically just means I don't have to pay for running a server. I can just check authenticated

server. I can just check authenticated user list to see if it works. So now

Claude is going through and adding a signup form. So, I'm going to let it

signup form. So, I'm going to let it continue going and then I'll let you know when we're ready for testing.

It's nice that Claude gives me this summary. We can see that we're done

summary. We can see that we're done phases 0 through 4. We didn't get into all of the complexity with the feeds, the saved articles, the preferences because Claude thought, hey, you know what? This might be a good time to test

what? This might be a good time to test everything. And if I go back to the app

everything. And if I go back to the app right now, I personally do not see a sign-in button. Okay, so it looks like

sign-in button. Okay, so it looks like we have an error here. But you'll notice that Claude going through and debugging and trying to fix this. If we go back to the usage, we can see I've already used

up another 6% now of my current session just doing that debug and then also another 1% of my entire weekly limit.

Debugging with cloud can use up a lot of your usage limit for the week, which is why it would be nice to have a separate tool that we can run independently of Claude code to test out the system and make sure it's all working. Conserving

Claude for the key power of coding, Gemini for planning, and then a separate system for testing, which I'll show you in a moment. So, the issue that Claude just ran into is that it didn't add a sign-in button. So, I need it to do that

sign-in button. So, I need it to do that before we can do proper testing. So,

let's add that in. And again, because I'm keeping track of the commits as I add each new feature, I can always roll back if Claude makes a mistake. So,

that's a key element of using AI to code. And there we go. We have a sign-in

code. And there we go. We have a sign-in button. Now, Claude just went and said,

button. Now, Claude just went and said, "Here are a whole bunch of things that I want you to verify." So, now if I go over to the sign-in button and click on it, it takes me to the sign-in page, which is great if blinding. But, like I

mentioned, I don't necessarily want to use Claw to test this. And for me to go through and test this all with each iteration can start to be a bit tedious.

So that actually brings me to the sponsor of today's video, Test Sprite.

And I just want to say thank you to them for sponsoring this video. A lot of people have been asking me on how we can build in authentication systems with databases, but it has been really tedious for me to build this myself. So

I'm really excited that I now have a tool like Test Sprite that I can connect through MCP directly through Claude Code and then have it run all the tests for me. So it honestly saves me a bunch of

me. So it honestly saves me a bunch of time identifying errors and perhaps even more importantly it reduces the amount I need to actually use clawed code for which then conserves my weekly limit and

my daily session limit. So basically the whole point of test sprite is that it becomes a parallel agent that lives inside of your IDE through the MCP server and it understands your codebase and then develops its own tests for

example specifically like user authentication and it can run as many tests as you need to actually validate what the AI wrote. So, as we're using more and more AI tools for coding, I think it's really important to let the

AI code and then use testing services to help make it work. So, that way you can conserve your Claude usage and your Gemini usage. So, let's get this set up.

Gemini usage. So, let's get this set up.

So, the first thing you need to do is to sign in, create an account, and you can do this for free. You get 150 credits per month, which lets you run some basic testing. You can also get the starter

testing. You can also get the starter tier, which is normally $20 a month.

It's free for the first month, so you can test it out and see if this actually saves you time and potentially saves you money by not going through your Claude or your Gemini usage. So, I do have a link in my description, and if you use that, I get a bit of a boost. So, I

appreciate it very much. So, once you have signed in and created an account, you need to install this, which there's a detailed instructions for installation depending on your IDE that you're using.

So, it currently doesn't have direct anti-gravity connection, but we're using cloud code. You can create a new API key

cloud code. You can create a new API key by going over to your dashboard once you've signed in and click on API key and you can just generate one there. So

I've already done that. Once I have my API key, I can copy this installation command and go over to cloud code which I have on the side here. And if you can do this directly in the terminal, but because I'm using the extension, I can

press /mcp and then go to manage mcps and click continue in terminal. And this

pops up with a terminal window for me and gives me some instructions. By just

pasting that in and clicking enter, it pops up with test sprite. So this is great. I can click enter to view

great. I can click enter to view details. I can see here that I have

details. I can see here that I have connected with test sprite and I have seven tools available to me. So if I click view tools here, I get bootstrap test, generate code summary, generate front-end test plan, backend test plan,

generate code and execute and then rerun tests. If I go back to the cloud code

tests. If I go back to the cloud code extension and click refresh and continue. Now if I go to MCP status and

continue. Now if I go to MCP status and click enter, I can see that I have test sprite connected. So, just as a quick

sprite connected. So, just as a quick summary, because I know that can seem confusing, I went to test sprite, got the specific installation instructions, got my API key from over here, and then

went over to Claude Code, typed in /mcp, clicked manage MCPS, and then just pasted in that string that I got from test sprite. And that automatically

test sprite. And that automatically connected Claude code to test sprite, which now gives Claude Code access to all these tools. So, why don't we test out Test Sprite?

So, can you please use Test Sprite to run the authentication test you wanted?

Remember Claude said these are all the things we need to verify. But rather

than have me go through and verify, I'm going to have Claude do it using test sprite. So you can see here the first

sprite. So you can see here the first thing it did is it's saying okay let's bootstrap the test. So if you remember that's the first tool that I showed you before. So I can click yes here and this

before. So I can click yes here and this pulls up a local host version of test sprite that lets me fill in the information needed to actually run these tests. So you can see right now it's

tests. So you can see right now it's waiting for me. It's currently running this MCP tool here which is setting up a project path. The test scope is the

project path. The test scope is the codeace and the type is front end. I got

Claude to add a valid credential to see who gets access to this. So I'm going to take this test@acample.com.

Go over to the testing configuration here and add in the testing account info. So this will let test sprite test

info. So this will let test sprite test the app properly for me. I'm going to take the password as well. Make sure the port is at localhost 3000 which is correct. And then we get into product

correct. And then we get into product specification doc. And basically what

specification doc. And basically what it's looking for is a detailed blueprint for the product outlining the requirements features and functionalities. and it can be a pretty

functionalities. and it can be a pretty basic one to start. So, I'm just going to quickly add in a draft PSD. Depending

on the complexity of your app, you may want to spend a bit more time doing this, but for the purposes of this tutorial, I'm just going to do a very simple one. Then, I'm going to click

simple one. Then, I'm going to click continue. And now, if we go back to

continue. And now, if we go back to clawed code, we can see that the next step has appeared, which is generate the code summary. So, I'm going to click

code summary. So, I'm going to click yes. And we can see this is getting a

yes. And we can see this is getting a code summary for test sprite. Now, we're

using the next tool, which is standardizing a PRD. Okay, that was pretty quick. So, we can see here if we

pretty quick. So, we can see here if we go over to the docs, we now have a temporary file here. And now we can click generate the front end test plan.

So this is all setting up test sprite and once this has been done we will have a full authentication testing system built. So this is one of the situations

built. So this is one of the situations of don't repeat yourself you can build it once creating this testing system with test sprite. It will be saved under the test sprite tests and then anytime we make a change for example I want to

migrate to the neon database in the future which by the way if you want me to do that please let me know in the comments. I'm happy to show you how I

comments. I'm happy to show you how I can extend this example and connect to a proper database, but I won't have to go through and build this all again. I can

just rerun the same test and I'll be able to test to make sure that the data is flowing correctly. Cool. So, test

sprite generated 17 tests and then now we have the option to move to the next tool which is generating the code and executing. So, what this is doing now is

executing. So, what this is doing now is it's going through finding the standard test plan here and it is creating a bunch of files that will run each of these tests. So we have all 17 here and

these tests. So we have all 17 here and it's going to run through all the different examples to make sure that our authentication system is set up properly from the beginning.

So now if we go back to our dashboard for a moment, we can see here that we have all of these different tests that are in progress. So these are the different variations. Sign up with valid

different variations. Sign up with valid data, sign up with invalid, sign in with correct, sign in with incorrect, sign out. So you can see how it's going

out. So you can see how it's going through all of the different variations that we need in order to test out the authentication system. We can keep

authentication system. We can keep adding more and more test lists as we go depending on the features that we're adding. And then we don't have to write

adding. And then we don't have to write the code for those tests again. We can

just send it over to the test sprite MCP and it will run the test for us and let us know if there's any problems. And each time you do this, you use up a few of your credits, which you get 150 free credits every month and then an additional 400 if you sign up for the

starter kit, which you also get one month free. So, I'm going to let these

month free. So, I'm going to let these run for a few minutes and then let you know how it goes.

Okay. Interesting. So we can see here that we had two tests pass and three tests fail and that used up about 10 credits to run this test. And we can see here, yep, cloud has recognized the tests have completed. Let's read the

report and then generate a test report.

So if we go over here, we can read the raw report. And what's nice is we get a

raw report. And what's nice is we get a human readable version of the report to understand exactly what was tested and how it failed. So this can help you improve your prompt and send very directed debugging to claude code

because usually what happens with debugging is that claude doesn't exactly know what went wrong. It has to run a whole bunch of tests itself. Now we know exactly what has gone wrong. We have the specific error and we also have the

visualizations. So for example if we go

visualizations. So for example if we go over here and we click on the pass we can see the code that was run using playright which is a browser tester and we can actually run the code to see oh hey the agent just tried to go and sign

in and it failed which is exactly what we wanted. So it's cool that we can go

we wanted. So it's cool that we can go in and we can see the actual testing that happened and understand that something has gone wrong here and it runs a bunch of different permutations of the test to see how it goes. So now

we have given that test report to claude code and claude understands exactly what went wrong. So we can see here that we

went wrong. So we can see here that we had an issue with connecting better off to the SQLite database which means that we weren't able to validate that the test user we had had proper access.

So this is the final step of the testing and debugging process is that now that we know what went wrong, we can send Claude to go target those specific solutions and implement the fixes. So

I'm going to do that now. And this is where too what's nice about using test sprite is for example, let's say I just hit my Claude code usage limit for the day or for this session because I have all of the detailed documentation in a

very readable report here. I could just go back and open up my Gemini 3 or the Claudson 4.5 thinking and use the anti-gravity's built-in AI to go fix the

system. So this is where we get this

system. So this is where we get this nice hybrid workflow where the testing is separate from the usage limit of either of them so that we can use both of them together.

So that took about 5 minutes or so and Claude was able to go through and based on the output report from test sprite pinpoint very quickly what the issue was and then implement the fix. So, let's go

try it out ourselves. Now, I can go to the signin button up on the side here.

Paste in the test user and example and click sign in. And there we go. We get

the option to save this to our password manager in Chrome. And we can see that we have the test user report here. So,

that worked perfectly. Now, why don't we try the other example? Oh, nice. The

dark mode works. Now, let's try putting in the wrong password and click sign in.

Invalid password. Great. Now, let's try putting in the wrong email and click sign in. Yeah, no good. Can't sign in.

sign in. Yeah, no good. Can't sign in.

So, we now have a fully functioning authentication system where I have authorized specific users to get access to the app, which it's currently running locally, but now we should be able to run rerun the test sprite test to make

sure that everything works even though I just manually did it. So, why don't I do that for a second just to show you how it would work now that we've solved the problem. Also, altogether, that only

problem. Also, altogether, that only used up about maybe 10 more% of my cloud usage, which is pretty solid to be able to run all of these tests and pinpoint the problem and get the authentication working. And what's nice too is I don't

working. And what's nice too is I don't have to go through now and regenerate all of the front-end testing and the actual tests. I can just jump right to

actual tests. I can just jump right to the MCP tool of generate code and execute for test spray. So I'm going to do that. And now we have those same five

do that. And now we have those same five tests running again. And that's going to use up another 10 credits. So for 150 credits, that means you could run 15 tests for free, which is not bad. Like

that definitely saves some time where I don't have to be going into Claude and directing Claude to make changes or burning through my usage limit for the day or for the week. Instead, once I made those targeted fixes and I think everything's working again, I can send

it back over to test sprite and rerun it. So, I'll show you how that looks in

it. So, I'll show you how that looks in a moment.

So, just while the tests are running again, I do want to mention that anti-gravity is able to autonomously run some tests itself through the browser sub agent. But by using that, I'm also

sub agent. But by using that, I'm also using up the Gemini limit. So, again,

all of this is about creating a workflow that is optimized for your own limits based on what you're willing to pay for and based on what you're prioritizing.

For example, getting Gemini 3 Pro and Claude Sonnet at 4.5 Thinking to prioritize the building of the app rather than the testing conserves a lot of credits and that rate limit for me to

build the more complex features of my app while offloading the testing to something like Test Sprite. So, that was just something I noticed is the more I use the browser agent for testing, the quicker I tend to blow through my limit

in anti-gravity. So, I'm excited to

in anti-gravity. So, I'm excited to continue exploring Test Sprite. And I

want to note too that this is just for front-end testing that I've done so far, which we can see here to make sure that it has passed, which it looks like it is. So, if you are interested in me

is. So, if you are interested in me running some backend testing and perhaps setting up that Neon database that I was talking about before, or Superbase or something else, let me know in the comments and I'm happy to make another video that shows you how I implement a

full backend through anti-gravity and possibly cloud code and using test sprite if you're interested. So, just

let me know. There we go. All five tests are passing with a 100% success rate.

So, if we go back to test sprite, we can see that this is true. All of the tests have passed and we only used up another 10 credits which means I still have quite a bit left. And we can see here we have the test sprite AI report. So this

is great. It's showing us the test status, the fix that was applied specifically that's working. So this is a great way to not only go through and iterate through all the different permutations to make sure it all works, but also we get this full analysis

afterwards that explains the entire report and everything that was done correctly or incorrectly if they fail.

So this then gets logged in our documents. And this can be really

documents. And this can be really helpful. For example, let's say I go

helpful. For example, let's say I go through and make some changes when I'm introducing the backend. Perhaps I've

messed up the schema again, how the account or the user tables are operating. So, it's good to have a

operating. So, it's good to have a record of what ended up working to fix it. And then, of course, we should go

it. And then, of course, we should go through and commit to make sure that we get a snapshot of this working version.

Okay, so the authentication MVP is now complete. So we now have an option to

complete. So we now have an option to establish a bigger and better database to actually deploy this app to its own custom URL so that other people can sign in and use this and start testing out my app. So there's a lot that we can do

app. So there's a lot that we can do here. If there's anything that you would

here. If there's anything that you would like me to add in another video, perhaps deploying an app from anti-gravity or cloud code, setting up a backend database and then connecting it to the authentication system. Please let me

authentication system. Please let me know in the comments. There's a ton of features we can do with cloud code that I didn't even start touching on. For

example, we have the option to configure sub aents. We have the option to add

sub aents. We have the option to add plugins. We have the option to bring in

plugins. We have the option to bring in specific skills. We can go to the

specific skills. We can go to the cloud.mmd document and for example, I

cloud.mmd document and for example, I can give instructions to claude that change kind of like system instructions how claude operates within the architecture of this particular application with this environment. So

there's a lot we can do. And the cool part is that I didn't even hit my session limit for this particular session. So I can go continue building,

session. So I can go continue building, continue testing, and I've conserved some of my weekly usage. If you want to see again how I built this initial app, I recommend going and watching the what is Google anti-gravity video as I explain all of the features in more

depth.

So that's the workflow. Plan with

Gemini, code with cloud code, and then test with Test Sprite. Each tool focuses on what it does best so you can conserve your usage across all of them. If you

want to try out Test Sprite, I do have a link in the top comment and in the description. If you sign up, you get 150

description. If you sign up, you get 150 credits free per month and then the first month you can also get on the extended starter plan. I recommend just testing it out and seeing how it can help optimize your workflow to hopefully

extend your usage of the more powerful coding agents while letting Test Sprite deal with the testing. If you found this video helpful, please like and subscribe. I really do appreciate your

subscribe. I really do appreciate your support. Also, if you haven't watched it

support. Also, if you haven't watched it yet, I recommend checking out my series on Google AI Studio and anti-gravity as I go through more examples and strategies of vibe coding or coding with AI. So, you might find it helpful.

AI. So, you might find it helpful.

Thanks again for watching and I will see you in the next video.