Setup Guide

Securely deploy Zova with Cloudflare Workers

1 Get Your Gemini API Key

Zova is powered by Google's Gemini models. You'll need an API key to communicate with them.

  1. Go to Google AI Studio.
  2. Click on "Get API key" in the sidebar.
  3. Click "Create API key" and copy it.
Important: Never expose this key in your frontend code (HTML/JS). We will use a Cloudflare Worker to hide it.

2 Setup Cloudflare Worker

We'll create a simple proxy that holds your API key and forwards requests to Google. This keeps your key safe.

2.1 Install Wrangler

Wrangler is Cloudflare's CLI tool for managing Workers. Open your terminal and run:

npm install -g wrangler
wrangler login

This will open your browser to authenticate with Cloudflare.

2.2 Create Worker Project

Create a new Cloudflare Worker project:

npm create cloudflare@latest chatbot-proxy

When prompted:

2.3 The Worker Code

Navigate to your project and replace the content of src/index.js (or src/index.ts) with this secure proxy code: 

export default {
  async fetch(request, env, ctx) {
    // Only allow POST requests
    if (request.method !== "POST") {
      return new Response("Method not allowed", { status: 405 });
    }

    // CORS Headers (Allow your website to access this)
    const corsHeaders = {
      "Access-Control-Allow-Origin": "*", // Change '*' to your domain in production
      "Access-Control-Allow-Methods": "POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
    };

    // Handle preflight requests
    if (request.method === "OPTIONS") {
      return new Response(null, { headers: corsHeaders });
    }

    try {
      const body = await request.json();
      const apiKey = env.GEMINI_API_KEY; // Secret key from environment

      const response = await fetch(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${apiKey}`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        }
      );

      const data = await response.json();
      return new Response(JSON.stringify(data), {
        headers: { ...corsHeaders, "Content-Type": "application/json" },
      });
    } catch (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 500,
        headers: corsHeaders,
      });
    }
  },
};

3 Deploy & Secure

3.1 Add API Key Secret

Securely store your Gemini API key in Cloudflare (it will be encrypted and never visible in your code): 

cd chatbot-proxy
wrangler secret put GEMINI_API_KEY

When prompted, paste your Google Gemini API key and press Enter.

3.2 Deploy to Cloudflare

Deploy your Worker to Cloudflare's global network:

wrangler deploy

After deployment, you'll see a URL like: https://chatbot-proxy.your-name.workers.dev

Copy this URL - you'll need it in the next step!

4 Configure Your Chatbot

Now that your Worker is deployed, update your chatbot's configuration to use it.

4.1 Update config.json

Open chatbot/config.json in your project and update the workerUrl field:

{
    "configVersion": "1.0.0",
    "business": {
        "name": "Your Business Name",
        "description": "Your business description"
    },
    "bot": {
        "name": "Zova",
        "role": "AI Shopping Assistant",
        "initialMessage": "Hello! How can I help you today?"
    },
    "workerUrl": "https://chatbot-proxy.your-name.workers.dev",
    "llmConfig": {
        "model": "gemini-2.5-flash-lite",
        "systemPrompt": "You are a helpful AI assistant.",
        "constraints": [
            "Keep answers concise and friendly",
            "Speak in the user's preferred language"
        ]
    },
    "theme": {
        "mode": "light",
        "colors": {
            "primaryColor": "#22c55e",
            "primaryGlow": "rgba(34, 197, 94, 0.4)"
        },
        "icon": "icon/icon.png"
    },
    "features": {
        "enableVoiceInput": true,
        "enableTextToSpeech": true
    },
    "dataSources": [
        "data/shop-data.txt"
    ]
}

4.2 Add Your Business Data

Create a file at chatbot/data/shop-data.txt with information about your business, products, or services. The chatbot will use this to answer customer questions.

4.3 Test Your Chatbot

Open your website and test the chatbot! It should now be using your secure Cloudflare Worker to communicate with Gemini.

5 Next Steps

Congratulations! Your Zova chatbot is now securely configured. Here are some next steps: