Gemini (Google AI)

Integrate Google’s Gemini AI into your Noah projects. Build multimodal features that understand both text and images — all through simple prompts.

What You Can Build

• Multimodal chatbots that understand images and text together
• Image analysis and description tools
• Document scanners and handwriting readers
• Content generators and writing assistants
• Visual search and product cataloging

Prerequisites

1. Enable Supabase

   Gemini integration uses Supabase Edge Functions to securely handle your API key. Make sure Supabase is enabled in your project. See the Supabase setup guide if you haven’t connected it yet.

2. Get Your Gemini API Key

   Visit Google AI Studio to create or copy your API key. Keep it private and rotate it if compromised.

3. Add Your API Key

   Add your Gemini API key as a secret in Supabase so your edge functions can use it securely. See Secrets Management for how to add secrets from the Cloud tab.

How to Integrate

Describe what you want in the chat. Noah automatically sets up the Supabase Edge Function, frontend code, and wiring.

Text Chat

For standard text-based conversations with Gemini:

Add a Gemini-powered chatbot that answers user questions about my product

Build a content generator where users enter a topic and Gemini writes a draft

Multimodal (Text + Image)

Gemini’s biggest strength — understanding images alongside text:

Add a chat widget where users can attach images and Gemini responds with context from both text and image

Build an image upload feature that uses Gemini to generate descriptions and alt text

Streaming Chat

For real-time streaming responses:

Create a streaming chat interface using Google Gemini with real-time responses

Prompt Cookbook

Copy-paste these prompts to build common Gemini-powered features:

Use Case	Prompt
Image Description	Add an image upload that uses Gemini to generate a detailed description and alt text
Visual Search	Build a visual search where users upload a product photo and Gemini identifies similar items
Document Scanner	Create a receipt scanner that extracts line items, totals, and dates from uploaded photos
Content Writer	Build a blog post generator where users enter a topic and Gemini writes a draft with headings
Image Chat	Add a chat widget where users can attach images and Gemini responds with context from both
Social Media	Generate Instagram captions and hashtags from an uploaded product photo using Gemini
Diagram Explainer	Let users upload a diagram or flowchart and Gemini explains each step in plain language
Product Catalog	Auto-generate product descriptions and categories from uploaded product images using Gemini
Handwriting Reader	Build a tool that converts handwritten notes to typed text using Gemini vision
Quiz Generator	Create a quiz from an uploaded textbook page using Gemini to extract key concepts

Tips

• Multimodal is Gemini’s biggest strength — if your app needs to understand images, screenshots, or documents alongside text, Gemini is an excellent choice.
• Image size matters — large images are resized automatically, but keeping uploads under 4 MB ensures the fastest response times.
• API billing is separate from Noah — Google charges based on token usage and input type. Image inputs consume more tokens than text. Check Google AI pricing for rates.
• Noah handles the backend — you don’t need to write Edge Functions or API calls manually. Just describe what you want.