Run Locally

Prerequisites: Node.js

1. Install dependencies: npm install
2. Set the GEMINI_API_KEY in .env.local to your Gemini API key
3. Set the GEMINI_API_KEY in a .env file to your Gemini API key. You can copy the .env.example to a new file named .env.
4. Run the app: npm run dev

Get your Gemini API Key

1. Go to Google AI Studio and log in with your Google Account.
2. Click on "Create API Key".
3. You may be prompted to create or select a Google Cloud project.
4. Your API key will be generated. Copy and save it in a secure location.

Deploy the App

You can deploy this application to either Vercel or GitHub Pages.

Option 1: Deploy to Vercel

Vercel provides a seamless deployment experience for Vite apps.

1. Sign up and Install CLI:

   • Create an account on Vercel.
   • Install the Vercel CLI globally: npm install -g vercel

2. Deploy:

   • Log in to your Vercel account in the terminal: vercel login
   • Run the deployment command from your project's root directory: vercel
   • Vercel will guide you through the process, automatically detecting the Vite configuration.

3. Set Environment Variable:

   • Go to your project's settings on the Vercel dashboard.
   • Navigate to "Environment Variables".
   • Add a new variable with the key VITE_GEMINI_API_KEY and paste your Gemini API key as the value. For Vite apps, environment variables need to be prefixed with VITE_.
   • Redeploy your application for the changes to take effect.

Option 2: Deploy to GitHub Pages

1. Install gh-pages:

   • Install the gh-pages package as a dev dependency: npm install gh-pages --save-dev

2. Configure package.json:

   • Add a homepage field with the URL where your app will be hosted (e.g., https://<YOUR-USERNAME>.github.io/<YOUR-REPO-NAME>/).
   • Add the following scripts:

     "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     }

3. Configure vite.config.ts:

   • In your vite.config.ts file, set the base property to your repository name (e.g., /<YOUR-REPO-NAME>/). This ensures that all asset paths are correct.

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     
     export default defineConfig({
       plugins: [react()],
       base: '/<YOUR-REPO-NAME>/'
     })

4. Deploy:

   • Run the deploy script: npm run deploy
   • This will build your application and push the dist folder to a gh-pages branch on your repository.

5. Set Environment Variable (using GitHub Actions):

   • For public repositories, it's recommended to use a backend or a proxy to protect your API key. However, for simple deployments, you can use GitHub Actions and Secrets.
   • Go to your GitHub repository's Settings > Secrets and variables > Actions.
   • Create a new repository secret named VITE_GEMINI_API_KEY and paste your Gemini API key.
   • Create a .github/workflows/deploy.yml file with the following content:

     name: Build and Deploy
     on:
       push:
         branches:
           - main
     jobs:
       build-and-deploy:
         runs-on: ubuntu-latest
         steps:
           - name: Checkout 🛎️
             uses: actions/checkout@v3
     
           - name: Install and Build 🔧
             run: |
               npm install
               npm run build
             env:
               VITE_GEMINI_API_KEY: ${{ secrets.VITE_GEMINI_API_KEY }}
     
           - name: Deploy 🚀
             uses: peaceiris/actions-gh-pages@v3
             with:
               github_token: ${{ secrets.GITHUB_TOKEN }}
               publish_dir: ./dist

   • This workflow will automatically build and deploy your app whenever you push to the main branch.

Important Note on API Keys: Remember that for client-side applications, your VITE_GEMINI_API_KEY will be visible in the browser's developer tools. For production applications, consider using a backend proxy to protect your API key.