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. Come on, you tell him what you want and Gemini will generate the web application, also showing you the code.
But there are some things you need to keep in mind, so we’ll start by telling you the risks involved in creating a webapp with AIespecially in terms of privacy if you are going to publish it. Then, we will tell you step by step how to proceed in a simple way.
Before you start, dangers to be aware of
Before we get into this, you should keep in mind that may not be a good idea create a web application using artificial intelligence, especially if you plan to publish it. It all depends on what you are going to use it for.
To start, with Google AI Studio you will only build a skeleton of the web page or web application, pure HTML code without a secure and private database for each user you access.
Therefore, without a login system, you run the risk of all data being exposed on a kind of public board. For example, imagine that you create a notes web application, and that you publish it on the Internet. So, everything you write can be read by othersand even other people will be able to add elements.
This means that what Google AI Studio allows you to do are web application skeletonsa complete code that you will then have to fill out to add databases and records. It is best not to publish them. as generated by this tool.
There is the possibility to ask the tool to generate an application with local memory to be saved in your browser. This will make it private by saving the data in the cache, although everything you type will be lost if you change browsers or when cache cleans are done.
And the other big problem with creating a web application with an artificial intelligence tool is that there may be bad code that does not work wellso it is always advisable to review the code with knowledge and verify that everything does as it should.
Use an AI to design the prompt


Google AI Studio works with artificial intelligence, which means that you can describe what you want with natural language, and then it will translate it into an application. Therefore, you will only need one prompt.
However, It will be more effective to use an AI to generate the prompt. It is like using an AI as a translator so that the idea you have in your head is reflected in a much more complete and complex prompt that you will then be able to review.
For example, I have used Claude and I have explained to him what I want the application to have and the ideas for the design. When making the request I have specified that what I want is a prompt to make a web application in Google AI Studio.


As a result, Claude has created me a multi-paragraph prompt in English, also including the color code I want it to use. In addition, he has thought of an interface to do it, and has designed the prompt explaining it so that Google AI Studio understands it.
As a small noteremember that this AI has Claude’s Artifacts, which are like internal applications. Therefore, you will always be able to say something like “create an artifact from this prompt”, so you will be able to create an internal app and verify its style. This will not be the same as the one from Google AI Studio, but you can use it as a test.
We start creating the application


To start creating your application, enter Google AI Studio with the web aistudio.google.com. Once inside, click on the section Buildwhich is used to start creating an application.


Now copy the prompt that we generated before and paste it in the writing field. I recommend that when you do it check the prompt in case there is anything in it that you want to change. Once you have it, click on the button Build to start the process.


Now, Google AI Studio will generate your app. When it does, you will see that the screen is divided in two. On the left you have a part that is like a chat with the tool’s AI, and on the right the preview. Once you finish, you can test that everything works to your liking, and use the chat on the left to request changes and corrections.
It is very important that you now take your time adding and changing elements in the application. Do it little by little, don’t be in a hurry and make short prompts with specific changes to progress progressively. With every prompt you type, Google AI Studio will remake the app.
You can also ask the AI that generated the app questions, and based on the answers to ask it to make changes. For example, you can ask him make sure the data is saved in the localStoragein the computer’s memory, so that they are not exposed on the network.
You can also ask for more complex things, like helping you set up a system for signing in with your Google Account and saving your data to Google Drive. In this case, the AI that you have on the side of the project will guide you step by step through what you have to do and giving you the credentials to do it.


By default the tool will show you a preview of what you are creating. but you can click on the tab code to preview the internal code of the web application. You also have a download button to download the code and then be able to use it whenever you want. Your application is complete.
Google AI Studio allows you to publish the web application


Finally, you should know that Google AI Studio has an option to publish your web application. To do this, in the upper right part you have to press the button publish. This will start the process to publish it automatically.


In the next step, you will need to choose a Google Cloud project for the app. You can create a new one or add it to an existing one. You will also have to configure your payment methods for Google Cloud, because you are going to pay for possible calls to the API or your space. When you have it, simply click on Publish app.


And that’s it. With this you already have your application published, and you can start using it. Google AI Studio will generate a URL to access it, long and unique, and now it is up to you to buy a domain and link it to this address if you want.
In Xataka Basics | How to create a game with multiple choice questions on any PDF to study with the help of artificial intelligence



GIPHY App Key not set. Please check settings