Vibe Coding - Creating a Sample Project



In this section, we're exploring how to create and test a sample project using Vibe Coding. We're using Google AI Studio. Open Google AI Studio and it will show up a text box to start chat or to vibe code an app as shown below.

Create an APP

Enter a Prompt with initial requirement

We've enter folliowing prompt to create an shopping app for algriculture spare parts for farmers of North India.

a shopping app for spare parts for agriculture in North India

AI studio starts processing using its Gemini 3 Flash Agent for 10 seconds and generates sources files. In right panel, application preview is avaiable as well.

source code

By default, AI studio generates code in React.

Preview the Application

In right panel, we've preview and code buttons. Under Preview section, live application preview is available.

Preview Application

Edit the code

AI studio allows to edit code using an online IDE built within the studio. Click on the "Code" button and check the source code. You can edit any file as required to customize the app.

Code Editor

Provide feedback to improve application.

You can provide feedback in chat window as well. AI studio automatically provides many useful suggestions as per domain as well.

Feedbacks

Deploy App

On right top, AI studio have panel with useful buttons to download app to run locally, commit code to github, deploy app on cloud run, share app link and lots more.

Advertisements