Let’s explain to you how to create a simple web application with Google AI Studio. It is a program with which you can create applications, websites, or other projects by writing the code with artificial intelligence. You simply tell it what you want, and Gemini will generate the web application, also showing you the corresponding code.
However, there are some things you need to keep in mind, so we’ll start by discussing the risks involved in creating a web app with AI, especially in terms of privacy if you are planning to publish it. Then, we will guide you step by step on how to proceed in a simple way.
Before You Start: Dangers to Be Aware Of
Before diving in, it’s crucial to consider that it may not be a good idea to create a web application using artificial intelligence, especially if you plan to publish it. It depends significantly on what you intend to use it for.
With Google AI Studio, you can only build a skeleton of the web page or web application, pure HTML code without a secure and private database for each user accessing it.
As a result, without a login system, you run the risk of all data being exposed on a kind of public board. For instance, if you create a notes web application and publish it online, everything you write could be read by others, and even other users may add elements.
In essence, what Google AI Studio enables you to create are skeletons of web applications, complete with code that you must fill out to add databases and records, and therefore, it is best not to publish them as generated by this tool.
You can ask the tool to generate an application with local memory, which will store data in your browser, keeping it private. However, all input will be lost if you change browsers or clear your cache.
Another significant issue when utilizing an AI tool to create web applications is that there may be bad code that does not function properly, so it is always advisable to review the code thoroughly.
Utilizing AI to Design the Prompt
Google AI Studio operates using artificial intelligence, allowing you to describe what you need in natural language, which it will subsequently transform into an application. Consequently, you will need just one prompt.
However, using an AI to generate that prompt will be much more effective. It acts like a translator, enabling your ideas to be articulated in a more sophisticated manner, which you can then refine.
For example, using another AI like Claude, I described the features and design I wanted in the application. The result was a crafted prompt for creating a web application in Google AI Studio.
Creating the Application
To begin creating your application, navigate to Google AI Studio at aistudio.google.com. Once inside, click on the section Build to commence the application creation process.
Next, copy the previously generated prompt and paste it into the input field. It’s advisable to review the prompt for any desired modifications. Once ready, click on the button Build to start the process.
Two sections will appear: on the left, a chat interface with the tool’s AI, and on the right, a preview. You can now test the application and use the chat on the left to request changes and corrections.
Making Incremental Changes
Dedicate ample time to adjust and refine elements in your application. Work incrementally without rushing, using short prompts for specific changes, as the AI will update the application with each instruction.
You can also inquire from the AI to ensure that the data is saved in localStorage, preventing exposure on the network. You can escalate requests for more complex functionalities, such as assisting with Google Account sign-in and saving data to Google Drive.
Publishing Your Web Application
At last, you’ll find an option within Google AI Studio to publish your web application. Click the publish button in the upper right corner; this action will initiate the publishing process automatically.
In the subsequent step, select a Google Cloud project for the app. You can either create a new one or link it to an existing one. Remember to configure your payment method for Google Cloud, as you might incur costs for API calls or storage space. Finally, just click on Publish app.
And that’s it! You have successfully published your application. Google AI Studio will generate a unique URL for access. If desired, you can buy a domain and link it to this address for a more professional presentation.