Overview

What You Will Learn

Google AI Studio is a browser-based playground that lets you build, test, and export AI prompts using Google's Gemini models. In this guide, you will learn how to set up an AI prototype in Google AI Studio, get an API key, and turn your prototype into working code for a mobile app or website.

Before You Start

To follow this tutorial, you will need:

• A standard Google Account.
• Access to Google AI Studio.
• A basic website or mobile app project (or a no-code builder like FlutterFlow, Bubble, or standard web tools like HTML/JavaScript) where you plan to connect the AI.

Step 1: Test Your Prompt in the Playground

Start by heading to Google AI Studio. Instead of writing code right away, test what you want the AI to do directly in the web interface.

• Click Create New Prompt (you can choose a Chat Prompt for back-and-forth conversations or a Freeform Prompt for single tasks like summarizing or data extraction).
• Select your model from the right-hand panel (such as Gemini 1.5 Flash for fast, everyday tasks or Gemini 1.5 Pro for complex reasoning).
• Add System Instructions to define how the AI behaves (for example: "You are a fitness assistant for a mobile workout tracker. Keep responses under 50 words.").
• Type sample inputs to confirm the AI answers the way you want.

Step 2: Generate an API Key

Once you are happy with how the model responds, you need an API key so your website or app can talk to Google AI Studio automatically.

• Click the Get API key button in the left sidebar navigation.
• Click Create API key. You can attach it to an existing Google Cloud project or create a new one automatically with a single click.
• Copy the generated key and save it in a secure place. Never share this key or post it publicly.

Step 3: Export Your Working Code

Google AI Studio eliminates the guesswork of writing API connection code by generating it for you.

• In your prompt window, click the Get Code button in the top-right corner.
• Choose the programming language that matches your project: JavaScript / TypeScript (for standard websites and web apps), Python (for back-end servers), Kotlin / Swift (for native Android or iOS), or cURL / REST (for no-code app builders like FlutterFlow or Bubble).
• Copy the generated code snippet into your application.

Step 4: Connect the Code to Your App or Website

Paste the exported snippet into your project where user input is processed:

• For Websites: Route the user request through a secure back-end endpoint (like a Node.js server, Next.js API route, or Cloudflare Worker) so your API key remains hidden from the browser.
• For Mobile Apps: If you are using Flutter, React Native, or native iOS/Android, pass the user's text into the Gemini function call and display the returning text in your user interface.

Tips for Better Results

• Start with Gemini 1.5 Flash: It provides low latency and a generous free tier for prototyping, making it the most practical choice for mobile and web apps.
• Use JSON Mode: In the configuration sidebar, you can toggle structured output (JSON). This forces Gemini to return data in clean key-value pairs, which makes displaying information in app tables, lists, or cards much easier.
• Keep Your API Key Secret: Never hard-code your raw API key directly inside client-side JavaScript or a public mobile app binary where users could extract it. Always route calls through a lightweight server or use secure environment variables.

Common Problems

The app exposes the API key in the browser: If you paste the API key directly into front-end HTML or React code, anyone inspecting the web page can see it. Always make calls to Google AI Studio from a secure back-end server or serverless function.

Rate limits or quota errors: Google AI Studio offers a free tier, but it has request-per-minute limits. If your app handles multiple users simultaneously, handle errors gracefully by displaying a message asking the user to try again in a few seconds, or enable billing in Google Cloud to raise limits.