Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sergio-salcedo-dev/excel-product-manager/llms.txt

Use this file to discover all available pages before exploring further.

Preoc Product Manager reads two environment variables at startup. GEMINI_API_KEY (server-side) and its client-exposed counterpart NEXT_PUBLIC_GEMINI_API_KEY together enable the AI-powered CYPE Precios and Mercado product lookups powered by Google Gemini, while APP_URL tells the application where it is hosted — used for self-referential links, OAuth callbacks, and internal API endpoints. Both variables must be present before starting the development server or deploying to production.

​
Environment File Template

The .env.example file at the project root shows the canonical variable names used by the application:
.env.example
# GEMINI_API_KEY: Required for Gemini AI API calls.
# AI Studio automatically injects this at runtime from user secrets.
# Users configure this via the Secrets panel in the AI Studio UI.
GEMINI_API_KEY="MY_GEMINI_API_KEY"

# APP_URL: The URL where this applet is hosted.
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
# Used for self-referential links, OAuth callbacks, and API endpoints.
APP_URL="MY_APP_URL"
For local development, create a .env.local file at the project root. Because ProductDashboard.tsx calls the Gemini API from a client-side React component, the key must carry the NEXT_PUBLIC_ prefix so Next.js includes it in the browser bundle:
.env.local
NEXT_PUBLIC_GEMINI_API_KEY="your_gemini_api_key_here"
APP_URL="http://localhost:3000"

​
Variable Reference

​
GEMINI_API_KEY
string
required
Google Gemini API key used by the CYPE Precios and Mercado AI search features. This is the server-side name used in the .env.example template and injected automatically by Google AI Studio at runtime from the user’s Secrets panel.
​
NEXT_PUBLIC_GEMINI_API_KEY
string
required
The same Gemini API key exposed to the browser bundle. Must be prefixed with NEXT_PUBLIC_ so Next.js includes it in the client-side JavaScript — ProductDashboard.tsx reads process.env.NEXT_PUBLIC_GEMINI_API_KEY directly. Use this name in your local .env.local file. Obtain your key from Google AI Studio.
​
APP_URL
string
The URL where the application is hosted. Defaults to http://localhost:3000 for local development. In production environments such as Firebase App Hosting, this value is automatically injected at runtime as the Cloud Run service URL — no manual configuration is needed.

​
Why Two Variable Names Exist

The .env.example template defines GEMINI_API_KEY — the name Google AI Studio uses when it injects the key automatically from the Secrets panel at runtime. However, ProductDashboard.tsx accesses the key from a client-side React component using process.env.NEXT_PUBLIC_GEMINI_API_KEY. Next.js only exposes environment variables to the browser when their names start with NEXT_PUBLIC_; any variable without this prefix is available only in server-side contexts such as Route Handlers, Server Components, and next.config.ts. For local development you therefore set NEXT_PUBLIC_GEMINI_API_KEY in .env.local, while AI Studio handles its own server-side injection under the GEMINI_API_KEY name separately.

​
Getting a Gemini API Key

1

Open Google AI Studio

Navigate to https://aistudio.google.com in your browser.
2

Sign in

Sign in with a Google account. A free tier is available with generous usage limits suitable for development and small-scale production use.
3

Open API Keys

In the left sidebar, click API Keys to open the key management panel.
4

Create a key

Click Create API key, choose or create a Google Cloud project when prompted, and copy the generated key string.
5

Add the key to your project

Paste the key as the value of NEXT_PUBLIC_GEMINI_API_KEY in your .env.local file, then restart the development server.

​
Security Considerations

Because NEXT_PUBLIC_GEMINI_API_KEY is bundled into the client-side JavaScript, it is visible to anyone who inspects the page source or network requests. To reduce exposure:
  • Restrict the key by domain in Google Cloud Console under APIs & Services → Credentials so it can only be used from your deployed domain.
  • Monitor free-tier limits in Google AI Studio to prevent unexpected charges if the key is discovered.
  • Never commit .env.local to version control. The file is already listed in .gitignore in this project, so git add . will not include it — but double-check before pushing to a public repository.

​
Google AI Studio Automatic Injection

When the application is deployed on Google AI Studio, the Gemini API key is automatically injected at runtime from the user’s Secrets panel under the name GEMINI_API_KEY. You do not need to configure the key manually in that environment — AI Studio handles injection transparently. Note that this server-side injection uses the GEMINI_API_KEY name from .env.example, not the NEXT_PUBLIC_ prefixed variant required for local client-side access.

Build docs developers (and LLMs) love

Get started for freeTalk to us