Google AI Studio がビルドモードに「GitHub からインポート」機能を追加し、既存リポジトリを編集・デプロイ可能なアプリに変換

Google AI Studio is rolling out an ‘import from GitHub’ feature inside its Build mode. It takes a repo and transforms it into a runtime-compatible format. You can then keep iterating on it, deploy it, and more. The update was shared by the Google AI Studio account and by Logan Kilpatrick, who leads the product.

bringing your code from @github into ai studio build is as easy as clicking 'import from github' pic.twitter.com/lIyZ1lnpQQ

— Google AI Studio (@GoogleAIStudio) July 8, 2026

Today we are rolling out "import from GitHub" in @GoogleAIStudio Build!!

We will automagically take the repo and transform it into a format that is compatible with our runtime and then let you keep iterating on it in AI Studio, deploy it, and more. pic.twitter.com/F63MjsJQjf

— Logan Kilpatrick (@OfficialLoganK) July 8, 2026

‘Import from GitHub’

Build mode is Google AI Studio’s ‘vibe coding’ surface. You describe an app in a prompt. Gemini generates a full-stack app with a live preview. You then refine it through chat or annotation mode.

The new feature adds a starting point. Instead of a blank prompt, you point Build at a GitHub repository. AI Studio then transforms the repo into a format compatible with its runtime.

The flow has three parts:

Import the repo

Keep iterating on it in AI Studio.

Deploy it.

How the Import Flow Works

Google has not published the internal steps. In plain terms, the importer reads the repo, fits it to the runtime, then opens it in Build. The interactive walkthrough embedded below is a concept simulation, not the real backend.

(function(){

var f=document.getElementById('mtp-embed');

window.addEventListener('message',function(e){

if(e&&e.data&&e.data.type==='mtp-embed-height'&&e.data.height){

f.style.height=e.data.height+'px';

}

});

})();

One documented behavior matters when moving code in. For apps that use the Gemini API, AI Studio configures your GEMINI_API_KEY as a server-side secret. Keys are never included in client-side code.

So plan for the server-side pattern if your repo calls the Gemini API from the browser. The example below shows both sides for contrast.

Copy CodeCopiedUse a different Browser

// Discouraged: calling the Gemini API from the browser exposes the key

const res = await fetch(

"https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent",

{

method: "POST",

headers: {

"Content-Type": "application/json",

"x-goog-api-key": MY_KEY, // visible in the client bundle

},

body: JSON.stringify({ contents: [{ parts: [{ text: "Hello" }] }] }),

}

);

// Recommended: read the key from the server environment, call the API server-side

// GEMINI_API_KEY lives in the server-side runtime, not in shipped client code.

export async function handler(req) {

const apiKey = process.env.GEMINI_API_KEY; // server-side only

const r = await fetch(

"https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent",

{

method: "POST",

headers: {

"Content-Type": "application/json",

"x-goog-api-key": apiKey,

},

body: JSON.stringify({ contents: [{ parts: [{ text: "Hello" }] }] }),

}

);

return new Response(await r.text(), { status: r.status });

}

The endpoint and header above match the Gemini REST API. The point is placement: keep the key on the server.

Use Cases With Examples

Reviving a hackathon repo: You built a Vite plus React demo months ago. You import it, ask Build to add a settings page, then deploy to Cloud Run.

Onboarding a teammate fast: A colleague shares a public repo. You import it, generate a walkthrough UI, and hand back a live preview link.

Turning a script into an app: You have a small Gemini prototype in a repo. You import it, then use annotation mode to add a real interface.

Import from GitHub vs Other Build Workflows

WorkflowWhat it doesDirectionBest forNotes

Import from GitHub (new)Ingests a repo, normalizes it to the runtimeGitHub → AI StudioContinuing an existing codebaseJust announced; details still emerging

Push / export to GitHubCreates a repo and commits app codeAI Studio → GitHubVersion control and external editingHistorically one repo per app

Download as ZIPExports generated code as a ZIP fileAI Studio → localLocal dev in VS Code or CursorManual re-import needed

Remix from App GalleryCopies a gallery app into BuildGallery → AI StudioStarting from a templateNot your own repo

Deploy to Cloud RunShips the app to a live URLAI Studio → Cloud RunProduction hostingCloud Run pricing may apply

The table shows the shape of the change. Import adds the inbound path that was missing.

Key Takeaways

Google AI Studio is adding “import from GitHub” to Build mode, letting you start from an existing repo.

AI Studio transforms the repo into a runtime-compatible format, then supports iterate and deploy.

This adds the inbound GitHub path that Build mode previously lacked.

AI Studio’s runtime keeps GEMINI_API_KEY server-side, so plan for that with client-side key code.

Exact runtime format, private-repo support, and sync behavior are still unconfirmed at launch.

The post Google AI Studio Adds ‘Import from GitHub’ to Build Mode, Turning an Existing Repo Into an Editable, Deployable App appeared first on MarkTechPost.