在 Google AI Studio 中建構應用程式

本頁面說明如何使用 Google AI Studio 快速建構 (或「隨意編碼」) 及部署應用程式,測試 Gemini 的最新功能,例如 Nano BananaLive API。Google AI Studio 現在支援全端執行階段,讓您透過自然語言提示,建構具備伺服器端邏輯、安全密鑰管理和 npm 套件支援的強大應用程式。

開始使用

在 Google AI Studio 的建構模式中,開始直覺式程式開發。您可以透過下列幾種方式開始建構:

  • 先輸入提示:在「建構」模式中,使用輸入框輸入要建構的內容說明。選取「AI 晶片」,在提示中加入圖片生成或 Google 地圖資料等特定功能。你甚至可以透過語音轉文字按鈕說出想搜尋的內容。
  • 「好手氣」按鈕:如果需要靈感,請使用「好手氣」按鈕,Gemini 就會生成含有專案構想的提示,協助你開始創作。
  • 從範本庫重新混音專案:從應用程式範本庫開啟專案,然後選取「複製應用程式」

執行提示詞後,系統會生成必要的程式碼和檔案,並在右側顯示應用程式的即時預覽畫面。

系統會建立什麼內容?

執行提示時,AI Studio 會建立完整的應用程式。根據預設,這項工具會建立全端環境,其中可能包含:

  • 用戶端:網頁前端 (預設為 React)。
  • 伺服器端:Node.js 執行階段,可進行安全的 API 呼叫、資料庫連線,以及使用 npm 套件。

選取右側預覽窗格中的「程式碼」分頁,即可查看產生的程式碼。Antigravity Agent 會智慧管理堆疊中的多個檔案,確保變更正確傳播。

The Antigravity Agent

Antigravity AgentGoogle Antigravity 的主要 AI 功能,現在也是代理程式架構的核心元件,可支援 Google AI Studio 的建構模式體驗。不只是產生簡單的程式碼,還能維護整個專案的脈絡、管理多個檔案,以及瞭解複雜的指令,建構穩健的全端應用程式。

主要功能如下所示:

  • 脈絡感知:保留先前提示和檔案狀態的脈絡。
  • 多檔案管理:處理多個檔案之間的依附元件。
  • 驗證執行:驗證程式碼更新,減少產生錯覺。

全端功能

Google AI Studio 充分發揮現代網路生態系統的強大功能,讓您不僅能建構用戶端原型,還能:

  • 伺服器端執行階段和 npm:使用大量 npm 套件程式庫。代理程式會自動識別並安裝應用程式所需的套件 (例如資料視覺化或 API 用戶端的特定程式庫)。如有需要,您也可以要求特定套件。
  • 密鑰管理:在「設定」選單中安全地儲存 API 金鑰和密鑰。這些值可在伺服器端程式碼中存取,避免在用戶端曝光。
  • 多人協作:直接在 AI Studio 中建構即時協作體驗。伺服器端執行階段會管理使用者互動所需的狀態和連線。
  • Firebase 整合:自動佈建及設定 Firebase,包括 Firestore 資料庫 (持續性資料儲存空間) 和 Firebase 驗證 (登入流程,特別是「使用 Google 帳戶登入」)。代理程式會處理整個設定程序,甚至在應用程式中編寫這些服務的程式碼。

進一步瞭解如何開發全端應用程式

繼續建構

Google AI Studio 為應用程式生成初始程式碼後,您可以繼續調整:

在 Google AI Studio 中建構內容

  • 使用 Gemini 疊代:在建構模式中使用對話面板,問問 Gemini 進行修改、新增功能或變更樣式。
  • 直接編輯程式碼:開啟預覽面板中的「程式碼」分頁,即可即時編輯。

在外部開發

如要使用更進階的工作流程,可以匯出程式碼,並在偏好的環境中作業:

  • 在本機下載及開發:將產生的程式碼匯出為 ZIP 檔案,然後匯入程式碼編輯器。
  • 推送至 GitHub:將程式碼推送至 GitHub 存放區,與現有的開發和部署程序整合。

主要功能與特色

Google AI Studio 提供多項功能,讓建構過程直覺易懂且視覺化:

  • 建立及反覆改良全端應用程式:只要提供提示,即可建立全端應用程式,並透過對話或註解模式反覆改良。使用註解模式,醒目顯示應用程式 UI 的任何部分,並說明您想要的變更。
  • 分享及部署應用程式:您可以與他人分享作品,進行協作或展示成果。接著,應用程式準備就緒後,即可部署至 Cloud Run。
  • 應用程式庫:應用程式庫提供專案構想的視覺化程式庫。 你可以瀏覽 Gemini 的功能、即時預覽應用程式,並重混應用程式,打造專屬版本。

部署或封存應用程式

應用程式準備就緒後,即可部署:

  • Google Cloud Run:將應用程式部署為可擴充的服務。 系統可能會根據用量收取 Google Cloud Run 費用。
  • GitHub:將專案匯出至 GitHub 存放區。

限制

本節列出 Google AI Studio 建構模式目前的限制。

API 金鑰安全性

  • 用戶端:切勿直接在用戶端程式碼中使用實際的 API 金鑰。
  • 伺服器端:使用 Secrets Management 功能,在伺服器端執行階段安全地處理機密金鑰。

在 Google AI Studio 以外的平台部署

  • 您可以將應用程式部署至 Cloud Run,取得公開網址,但這樣一來,所有使用者呼叫 Gemini API 時,都會使用您的 API 金鑰。
    • JavaScript 應用程式是在用戶端執行,因此請確保 API 金鑰只有最低存取權,避免資料外洩或遭到濫用。舉例來說,使用者可透過這項機制存取同一專案中的其他檔案搜尋商店。
  • 安全地部署至外部:如要在 AI Studio 以外安全地執行應用程式 (例如下載 zip 檔案後),您必須將使用 API 金鑰的邏輯移至伺服器端元件,避免金鑰暴露給使用者。如果您使用 Cloud Run 部署,則不需要執行這項操作。
  • 金鑰曝光警告:強烈建議不要在用戶端環境中,直接將預留位置替換為實際 API 金鑰,因為這樣一來,所有使用者都能看到金鑰。

分享應用程式時發生錯誤

如果您分享應用程式,而使用者透過共用網址存取時遇到 403 存取受限錯誤,可能是因為下列其中一個原因:

  • 瀏覽器擴充功能:隱私權擴充功能 (例如 Privacy Badger) 可能會封鎖應用程式。請停用擴充功能,避免發生錯誤。
  • 建構問題:目前的程式碼可能存在問題。提示代理程式「修正目前程式碼的所有建構問題」,然後重新分享網址。

常見問題

什麼是「在 AI Studio 中建構」?

AI Studio Build 平台可協助您使用 Gemini,將簡單的提示詞轉化為可供正式發布的 AI 輔助應用程式。只要使用提示描述想建構的內容,Gemini 就會為您生成應用程式。您也可以瀏覽我們的資源庫,瞭解 Gemini API 的功能,並重新混音應用程式,打造專屬版本。

為什麼 Build 會從用戶端程式碼呼叫 Gemini API?

一般來說,最佳做法是從伺服器端呼叫 Gemini API,以免公開 API 金鑰。不過,AI Studio 具有 Gemini API Proxy,可供用戶端呼叫,並附加 API 金鑰,不會在程式碼中公開金鑰。目前我們會在用戶端產生呼叫,以使用這個 Proxy,因為這樣可簡化程式碼,並讓您與他人共用應用程式,不必提供 API 金鑰。

分享應用程式時,我的 API 金鑰是否會公開?

請勿在應用程式中使用實際的 API 金鑰,請改用預留位置值。process.env.GEMINI_API_KEY 會設為可使用的預留位置值。其他使用者使用您的應用程式時,AI Studio 會將呼叫作業 Proxy 至 Gemini API,並將預留位置值替換為使用者的 (而非您的) API 金鑰。請勿在應用程式中使用實際的 API 金鑰,因為任何能查看您應用程式的人都能看到程式碼。

哪些人可以看到我的應用程式?

根據預設,應用程式會設為私人。您可以與其他使用者共用應用程式,讓他們使用。與您共用應用程式的使用者可以查看程式碼,並視需要複製程式碼。如果您共用應用程式時授予編輯權限,其他使用者就能編輯應用程式的程式碼。

我可以在 AI Studio 以外執行應用程式嗎?

您可以從 AI Studio 將應用程式部署至 Cloud Run,這樣應用程式就會有公開網址。這個應用程式會與代理伺服器一併部署,以確保 API 金鑰的隱私權,但部署的應用程式會將您的 API 金鑰用於所有使用者的 Gemini API 呼叫。您也可以將應用程式下載為 ZIP 檔案。如果您將預留位置值替換成實際的 API 金鑰,應該還是可以正常運作。但您不應以這種方式部署應用程式,因為任何使用者都能看到 API 金鑰。如要讓應用程式在 AI Studio 以外安全執行,需要將部分邏輯移至伺服器端,這樣 API 金鑰就不會再公開。

我可以使用自己的工具在本機開發應用程式,然後在這裡分享嗎?

目前尚未提供這項功能。我們很期待日後能支援更多應用程式的用途。如有任何具體想法,歡迎提供意見回饋。

如何搭配應用程式使用資料庫或其他儲存空間?

AI Studio 應用程式是在 Cloud Run 容器中執行的標準應用程式。只要沒有防火牆禁止從動態 IP 範圍存取,您可以使用任何可透過網路連線的儲存空間解決方案。

我們正努力在日後新增儲存空間的直接支援,屆時您將可直接在 AI Studio 中設定。

為確保觀眾瞭解應用程式使用網路攝影機或其他裝置的情況,應用程式必須先取得額外確認,才能存取這些 Navigator API。應用程式建立者可以在應用程式的 metadata.json 檔案中新增這些權限要求。例如:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

requestFramePermissions 支援的值是標準政策控管功能的子集。

如何搭配應用程式使用 GitHub?

透過 AI Studio 的 GitHub 整合功能,您可以為工作建立存放區,並提交最新變更。我們目前不支援提取遠端變更。

我可以將應用程式的編輯權授予其他使用者嗎?

目前尚未支援,但很快就會推出。

為什麼我的應用程式因違反政策而遭到標記?

我們有自動審查應用程式的系統,確保應用程式符合政策規定。如果我們發現應用程式違反政策,就會從 AI Studio 移除。違反政策的行為包括但不限於:

  • 含有惡意軟體、網路釣魚或冒用他人身分內容的應用程式
  • 應用程式顯示或散布違反兒少性虐待圖像政策的內容
  • 顯示或散布違反騷擾政策內容的應用程式
  • 顯示或散布違反仇恨言論政策內容的應用程式
  • 應用程式顯示或散布違反人口販運政策的內容
  • 顯示或散布違反情色露骨內容政策的內容
  • 應用程式顯示或散布違反暴力血腥內容政策的內容
  • 應用程式顯示或散布違反有害或危險內容政策的內容

如果應用程式遭檢舉違反政策,但您認為這是誤判,可以提出申訴。如果屢次違反政策,我們可能會終止你對 AI Studio 的存取權。

身為應用程式開發人員,我有哪些責任?

提醒您,身為應用程式擁有者,您有責任確保應用程式的行為和處理的所有資料符合規定。包括:

  • 遵守法律和第三方權利:確保應用程式遵守所有適用法律和法規,且未侵犯他人權利,包括智慧財產權和隱私權。
  • 內容監控:應用程式使用的其他服務可能適用附加條款。舉例來說,適用於 Firestore 的《Google Cloud 服務條款》規定,代管第三方內容的客戶必須發布政策,定義禁止的內容 (例如非法內容),並監控是否有這類非法內容。
  • 安全實作:實作必要的防護措施和審核工具,防止應用程式遭到濫用。

請注意《服務條款》中的使用限制

除非另有說明,否則使用 AI Studio 應用程式庫中的應用程式時,必須遵守《Gemini API 附加服務條款》。

後續步驟