Google AI Studio та Vercel. ~ Nyukers Galaxy

А АFriday, 3 October 2025

Привіт привіт.

Google AI Studio активно пропонує vibe coding з своїм помічником Code Assistant. На виході отримуємо код React (TypeScript).

Але в плані Free Tier ви мусите запускати свій онлайн застосунок з того ж таки гугл драйва. Виглядає це так

При цьому код проекта буде доступний любому бажаючому. Та й саме URL посилання якось не гарно виглядає).

Тому маємо два шляхи, або Deploy проекта в Google Cloud, або Deploy проекта в Github, а звідти розгортання його з Vercel.

Що робимо для Vercel?

1) в Google AI Studio генеруємо свій Google API ключ в плані Free Tier.

2) в Vercel створюємо проект з репозиторію Github який ми задеплоїли з Google AI Studio

3) вставлємо в змінні проекту наш API ключ під назвою VITE_API_KEY

4) повертаємося до Google AI Studio і в проекті в файлі geminiService.ts робимо заміну рядка

const API_KEY = process.env.API_KEY;

на

const API_KEY = import.meta.env.VITE_API_KEY;

5) також в корні проекту створюємо новий файл vite-env.d.ts з таким наповненням

interface ImportMetaEnv {

readonly VITE_API_KEY: string;

}

interface ImportMeta {

readonly env: ImportMetaEnv;

}

6) робимо ще раз деплой репозиторія на Github

7) все, через хвилину наш проект доступний за новим гарним URL

Щасти.

Nyukers Galaxy