Vibe Coding - Using Google AI Studio



Using Google AI studio is very easy. It is ideal for prototyping where we want to visualize our creative idea quickly and share it with stakeholders in a visually appealing manner. Google AI studio starts with a single prompt and creates a live app within seconds.

Step 1: Describe what you want in the application

Open Google AI studio and in main text field, enter the idea and click on build button. Once you run the prompt, Gemini, the generative AI of Googles starts working, showing you the progress of the application code being generated. Once code is generated, it shows the preview of the application in the right side.

For example, set following prompt −

Create an online class website for data structures in C.
Generated Source Code

Generated Source Code

Step 2: Refine App

Once app is available for live preview, use the chat interface to improve further. Gemini suggests many quick enhancements as well under chat interface. You can add features, new visuals and much more.

For example, set following prompt −

Use a light green background and titles should be black.

In our case, Gemini provided many useful suggestions like - Add interactive visualizations, add quizes per lesson, improve code copy block, add keyboard shortcut, add lesson completion feedback.

Step 3: Deploy App

Once prototype is ready, you can deploy app over cloud in single click. You can even share the source code link with other developers. Code can be downloaded and run locally as well.

Advertisements