Build a Full-Stack Web App With Google AI Studio

Start the App

Google AI Studio will handle both the interface and the server-side AI flow for this app. Open Google AI Studio, start a new app in Build mode, and use this prompt. The example app is called SiteBrief AI — it turns a few answers into a clear website brief.

Build SiteBrief AI

Build the first working version of SiteBrief AI as a full-stack app, with the Gemini request handled securely on the server.

Build a polished full-stack web app called "SiteBrief AI". The app should help someone create a clear website brief before building their website. The user should enter: - Business or project type - Target audience - Main goal of the website - Main product, service, or offer When they click "Generate Website Brief", send the request through the server-side part of the application and use Gemini to generate: - Recommended pages - Homepage section structure - Main call to action - Key content ideas - Important features the website may need Requirements: - Build this as a full-stack web application. - Use the frontend for the interface. - Keep Gemini API calls on the server side. - Do not expose API keys or secrets in client-side code. - Keep the first version focused and simple. - Use a clean, premium, modern interface. - Make it responsive on desktop and mobile. - Do not add authentication, payments, or a database yet. Build the working first version and show it in the preview.

Test One Generation

When the preview loads, fill in the four fields with a real example and click Generate Website Brief once. You only need to confirm that a brief comes back — the next step checks how it got there.

Example input

Business or project type: Dental clinic Target audience: Local families Main goal of the website: Get more appointment bookings Main product, service, or offer: Routine checkups and teeth whitening

Confirm the Request Goes Through the Server

Before adding anything new, have the app check its own setup.

Review the Full-Stack Flow

Check that the Gemini request runs through the server and that no API key or secret is exposed in the browser.

Review the current application before making any new features. Make sure the Generate Website Brief flow works like this: Frontend → server-side logic → Gemini → response returned to the frontend. Check that: - Gemini requests are handled server-side. - No API key or secret is exposed in client-side code. - User input is validated before processing. - Server errors are handled cleanly. - The frontend receives and displays useful error messages when something fails. Fix any problems you find. Do not redesign the application and do not add unrelated features. Test the main generation flow after the changes.

If it reports changes, run one more generation to confirm the app still works.

Polish What Already Works

The app works, so now make it feel finished. This changes how it looks and behaves, not what it does.

Polish SiteBrief AI

Improve the interface, loading states, errors, results, and mobile experience without adding new features.

Polish the existing SiteBrief AI application without changing its core functionality. Improve: - Form clarity and spacing - Loading state while the brief is being generated - Disabled button state while a request is running - Empty and error states - Result readability - Mobile responsiveness - A simple Copy Brief action - Clear visual separation between the form and generated result Keep the design premium, minimal, and professional. Avoid unnecessary animations, gradients, decorative effects, or extra features. Do not add authentication, payments, a database, or additional pages. Keep the application focused on generating website briefs. Test the main flow when finished.

Try It Yourself First

Run through these five checks in the preview before asking the app to verify itself.

Normal website brief

Missing information

A second request

Longer input

Mobile layout

Run the Final Check

Now have the app verify the same workflow and fix anything real it finds.

Final Check

Test the core workflow and fix only real issues before saving the project.

Perform a focused final check of this application. Test the core Website Brief workflow and fix only real issues you find. Verify: - The form accepts valid input. - Missing required information is handled clearly. - Website briefs generate successfully. - Multiple requests work correctly. - Loading and error states work. - The layout remains usable on mobile. - Gemini functionality remains server-side. - No secret or API key is exposed to the browser. Do not add new features or redesign working parts of the application. Keep verification focused on the core workflow. Do not add excessive test infrastructure.

Save the Source to a Repository

Google AI Studio can save your project straight to GitHub. Do this once the app works, so the finished source is ready for a later deployment guide.

Your app in Google AI Studio Save to GitHub

Authorize Google AI Studio to access your GitHub account if you have not already. Choose a new repository, or pick an existing one you want to use. Confirm the save so the full project is uploaded. Open the repository on GitHub and check the project files are there.

Putting the app online is a separate guide, so nothing here needs to change for hosting.