Transcription
I accidentally discovered this new AI coding workflow that will blow your mind. Yes, I tried cloud code on Google anti-gravity, and the results were something that you should see. But is it even practical to use Google anti-gravity along with cloud code? Yes, it's possible.
It all started after testing Google anti-gravity for nearly a week. And if you've been following me and my content, you know I'm a big fan of cloud code and I use it daily in my workflow. So I thought, why not use cloud code inside Google anti-gravity and make them collaborate on one project? I thought about the strength of each: Google anti-gravity running Gemini Pro would be ideal for working in the back end, while cloud code running cloudet maybe 4.5 would be amazing for the front-end build. Then, why not try them together in one project? That was the initial idea.
To test this, it would help me learn if it's possible to ditch VS Code for Google and Gravity, since I use VS Code along with cloud code in most of my workflow. As it turned out, this worked so well beyond my initial skepticism, since Google and Gravity had started giving me bad experience after testing it for one week. Watch this video until the end to see what happened.
And just in case you've not seen me before, I am Joe. I test and review AI models and AI coding tools on a daily basis and publish my findings here and on Medium. My current goal here on YouTube is to get to 10K subscribers. And you can help me in that journey. Hit that subscribe button to help us keep going.
Now, let's get back to using code on Google Anti-gravity so that you can see what is possible in this new workflow. This is Google Anti-gravity Editor layout. You can open the terminal from this menu: new terminal. It opens up this terminal at the bottom. Let me create space here. I'll create a folder for this project. I use `make directory anti-gravity-cloud-code-combo`, a combination of cloud code and Google anti-gravity. Then we open this folder to use it as our project folder. Let's open the agent manager. And there's this new notice here of improved quarters. Let's dismiss that. I want to create a new workspace for this project. This is where you create your workspace. You click on "Open Workspace". Then I'll open the folder I created. I've selected the folder that I created, "trust folder", and continue. And now our workspace is set up. Let's return to the editor layout, and we have our workspace here. I'll click on it. It opens up this layout, and on the far right, we have the agent panel. On this agent panel, you see we have our workspace selected. Then we have these modes: planning and fast mode. Here is where you select the models. At the center is where you're going to see your code, or your coding area. At the bottom of this model selection, we have this "higher rate limits" notice. And once I click on "learn more", it opens up this Google AI plans. I'm currently on Google AI Pro. Let's open the terminal from this menu, or you can use that shortcut. Let me close the agent panel so that I can launch cloud code. I'm inside that folder. You can see that path. Open code by typing `cloude`. And it loads up with this warning, which is the default. "Do you want to work in this folder?" Then I have the option: yes and no. I click "yes" to continue, and cloud code loads inside Google anti-gravity. I'll be minimizing this. Then I'll open Google anti-gravity so that they can work side by side. But first, let me test with the `status` command. Cloud code seems to be running very well. I can see the version, can see the session ID. The model is cloud sonet 4.5. It's ID installed VS Code extension, and all these other details about cloud code. And you can see the close similarity between Google and gravity and VS code.
Let me review the prompt that we'll be using to build our test project. We are building a book recommendation app, and we've divided the roles into two: where Google and gravity will work on the back end prompt, and cloud code will work on the front end. For Google anti-gravity back end prompt, we are building an Android JS Express API that uses Gemini to recommend books. So we'll create one endpoint: `POST /api/recommendations`. Then the input will be `preferences` and `user reading test`. Then it's going to output some JSON data. We will use the Gemini API to generate three book recommendations based on the user preferences and return JSON. We're going to enable cross-origin and we're going to run on port 3000.
For cloud code, we'll create a simple book recommendation page using HTML, vanilla JavaScript, and CSS. One HTML file that will have a text input for user preferences, the button "Get Recommendation", then the display area for the three books with a title, author, and the reason. When the button is clicked, it needs to create a POST request to our backend API, send our preferences and the value from the input, and we get back the data to display it. That's a basic book recommendation app that uses Gemini AI to help us get book recommendations.
As I mentioned earlier, the objective of this project is to see how Google anti-gravity can work on the same project with cloud code, each assigned different roles. I begin by setting up the model on cloud code. I use `/mod`, and the default model is cloud sonet 4.5, that is the default and selected. Then I move on to Google anti-gravity and I select Gemini model as the model of choice, and I have two versions: high and pro. So I go with Gemini 3 Pro high version.
Now I'm going to place the prompt for each. I start with Google anti-gravity. I put in the prompt in the prompt input box, and I want them to work within one folder. One to have the back end folder, and the other to have the front end folder. I then place the prompt inside cloud code prompt input. Then now create the folder that they should work on. On this side panel, I create the folder `AI Software Engineer Book App`. Let me now update the prompt. I begin with selecting the mode for Google and gravity. I go with the planning mode. Then I want to update the prompt: "Use the directory named `AI Software Engineer` inside this workspace and create a folder named `backend` for this project." That's my additional instruction for Google anti-gravity. The additional instructions for cloud is: "Use the directory named `AI Software Engineer Book App` inside this workspace and create a folder named `frontend`." Each of these tools will create its own folder and work within that folder.
I've started the process and I've sent the prompt in both of them at the same time. Cloud code begins by creating the folder inside the main project folder, while Google anti-gravity goes into thinking mode and creating the task list. It comes up with this implementation plan, and we can implement that, and the task list that it's going to follow. This is the task list for Google and Gravity. Let's close both of them and now return to the terminal for cloud code. It now wants to run `make directory folder` to create the front end folder. And I have the option to proceed or tell cloud something different. So I click on "yes". And once I open the sidebar, it's going to create the front end folder. And you see it has created that front end folder.
Back to anti-gravity. I want us to implement this plan. I open the task list: "Book Recommendation API Task", and this is what we're going to follow as anti-gravity builds this app. I'll just prompt it to implement the plan, and it begins generating the code, and we'll follow through using this task list.
Back to cloud code terminal. It has already created the code for the front end. It's now ready to create this file. Let me close that panel so that we can view this code. The front end code seems like it's ready, and I have the option to create the index file at the bottom. I accept the file, and it creates this index file, and within minutes, it gives me this message: "Done. I've created a book recommendation page at the front end `index.html`. You can test it. Open in the browser." And it gives me some features and some technical details. Let's open that file to view the code.
Back to anti-gravity. I open the agent panel. It has created the backend folder. I accept again. I click on "accept" so that it installs all the dependencies. It begins creating the files and checking my checklist. You can see my checklist. The project setup is complete. Now we are creating the `index.js` file. I keep clicking on "accept" to create the files. We have the `package.json` file for our back end. It has installed the NodeJS modules, and we are now creating different kinds of files. And up to this point, we have the backend implementation done. You can see the task list has all those check marks, and within a few minutes, we've completed. Since all the checklists have been done, and we are now ready to begin testing this project.
To begin the testing, I want us to start with the front end, where we're going to ask cloud code to run "live server" that helps us to see the front end preview. The code looks okay, both from the front end, the back end, all the folders have the code that we require for this app to be functional. This is the `index.html` file, and it looks okay. Let's now prompt cloud code: "Can you run the live server to test the front end?" For Google and Gravity, to prompt it to test the back end, we can use a prompt like: "Can you run the backend server to test it?"
Back to cloud code, it's ready to run the command `live server`. So I just accept that, while anti-gravity begins analyzing the backend files before it runs the server. Cloud code first runs into this first error, which looks like a port issue, and it quickly corrects it and prompts me again, and it runs and opens up live server preview. We can now see the app, and the server is running. For Google anti-gravity, it's still analyzing the files, and we can see sending the request to the back end is failing. We can see a number of errors that are coming up, and this is not necessarily that the code is wrong. We have not updated our API key, since this app is using Gemini API to get the book recommendations.
After a few attempts, it finally gives me the message: "I have successfully run the backend server, but the test request failed because Gemini API key in the `.env` file is set to 'your API key'." The back end is not running because we do not have an actual API key. The next step is to create a real API key, update it in the `.env` file so that the back end can run, and we test it along with the front end to see if we're able to send the back end request and everything works as we expect it.
To create your API key, you need to go to Google AI Studio/API keys. Then you click on "Create a new API key". Give your key a name like "Google Anti-gravity + Cloud Code Combo". Then you need to have a project set up on your Google Cloud Console, which you're going to select as the next option. If it's not set up, you create a project. Then click on "Create Key" to have your API key. You will use this API key inside your `.env` file to connect your app to Google Gemini API. For this key to work, it's also necessary for you to activate your account on your billing section. You click on that link, then link up the account with your billing.
Back to Google and Gravity. Update the `.env` file with a real API key. Then you can prompt again: "I have updated my Gemini API key. Can you test again?" Google anti-gravity begins testing the back end by verifying the key. Then accept to run this command. It runs into different kinds of errors based on the available models for you to use. You can see it's switching between different Gemini models to see which is available based on your billing details. And after a few attempts, it comes up with this list of the progress updates that it has done, like restarting the backend server with the updated API key, switching the model to Gemini Pro, restarting the server with Gemini Pro, diagnosing model availability, debugging API key format, testing direct API connectivity, updating model to Gemini 2.0 Flash, restarting the server with Gemini 2.0 Flash. Finally, it gives you that message: "The back end is up and running and the test of POST request was successful." It means it's been able to connect to the API and get back a positive response. We now have our back end and our front end running. We get the message that the back end is running on localhost port 3000. We are now ready to test the real app to see if it's working.
Back to the terminal where cloud code is running. We can see everything is running. It's time for us to now test the app. I get back to the app preview and I simply type "AI engineering". It seems like the recommendation is failing. The POST request to the back end is failing. And here is a trick that I use to correct. Cloud code is very good at taking screenshots. Like in this case, we have a failed function. My approach is to take this screenshot and place it on cloud code and tell it to fix that specific error. I save that screenshot. Then I drag it to cloud code. I can give a message like: "Fetch fails in that function. Is it a back end or a front end program?" Cloud code begins analyzing it and it gives me this elaborate analysis of that error, and it shows me exactly what's happening with that. We can also test if Google and Gravity can help with this by highlighting the terminal message back to Google and Gravity chart. And you see it's analyzing very well, identifying the problem. Google and gravity can as well help, but I prefer to debug using cloud code since it's very precise and very reliable.
I go ahead and ask cloud code to fix this and update. But on the Gemini side, I stop any updates since I don't want a conflict of both of them working on the same issue, trying to correct it at the same time. Cloud code immediately updates the file and gives me a very clear message on where exactly the problem was, and after a few iterations, it fixes the problem and gives me the message: "Perfect, I've fixed the issue and restarted the backend server." Cloud code has taken over and even restarted the backend server. So we have the front-end server and the backend server running from cloud code. At the bottom, you can see two background tasks message that indicates we are running both the front end and the back end server on cloud code.
I get back to the front end to test, and I simply type "AI engineering" again, then click on "Get Recommendation", and I get three books that I recommended: "Building Machine Learning Powered Applications", then "Designing Machine Learning Systems", and "Machine Learning Engineering". This app is now functional, and we've been able to build it using Google anti-gravity and cloud code, each working in its own folder and in different roles. This is a perfect workflow if you are curious enough on how you can use the two together working in one project.
And if you'd like to learn more about how to use and gravity and get your skills to the next level, check out this other video that is on the screen. If you enjoyed this video, do not forget to give it a like and subscribe. One like, one subscribe gives me one more step forward to bringing you great content. Thank you, and I appreciate it.