發布日期：2025 年 4 月 28 日，上次更新日期：2025 年 5 月 21 日
AI 技術快速發展，為網頁應用程式開創了新領域，尤其是裝置端功能問世後，瞭解日本頂尖網際網路公司 CyberAgent 如何運用 Chrome 的內建 AI 和 Prompt API，提升自家平台 Ameba Blog 的網誌體驗。
我們將分享他們的目標、使用內建 AI 的優點、面臨的挑戰，以及為其他使用內建 AI 的開發人員提供的實用洞察資訊。
什麼是 Prompt API？
| 說明 | 網頁 | 擴充功能 | Chrome 狀態 | 意圖 |
|---|---|---|---|---|
| GitHub |  來源試用 |
 Chrome 138 |
查看 | 實驗意圖 |
| GitHub | 取樣參數的來源試用 |
Chrome 148 |
查看 | 實驗意圖 |
開發人員可透過 Prompt API 使用大型語言模型，直接在應用程式中加入 AI 功能。定義自訂提示後，應用程式就能執行資料擷取、內容生成和個人化回覆等工作。在 Chrome 中，Prompt API 會使用 Gemini Nano 執行用戶端推論。無論使用哪種模型，這項本機處理功能都能提升資料隱私權和回覆速度。無論使用哪種模型，用戶端的回應速度。
Ameba Blog 作者的 AI 輔助功能
CyberAgent 發現作者普遍面臨一個痛點：製作引人入勝的內容 (尤其是標題) 往往非常耗時。他們假設在部落格建立介面中整合 AI 輔助功能，可大幅提升內容建立的品質和效率。他們的目標是提供靈感工具，協助部落客製作引人入勝的內容。
CyberAgent 使用 Prompt API 開發了 Chrome 擴充功能，這項擴充功能提供一系列 AI 輔助功能，協助 Ameba 部落格作者生成標題和內文、後續段落，以及一般文案改善項目。
CyberAgent 需要彈性功能，因此直接採用 Prompt API。CyberAgent 透過單一 API 實現無限可能，準確判斷最適合 Ameba 作者的內容，並提供實用功能。
CyberAgent 邀請特定數量的部落客測試擴充功能，藉此取得實用洞察資料，瞭解擴充功能提供的功能是否實用。CyberAgent 根據意見回饋，找出更適合 AI 輔助的應用程式，並改良擴充功能的設計。根據正向結果和意見回饋，CyberAgent 預計在未來發布這項功能，直接為部落格社群提供用戶端 AI 的強大功能。
讓我們進一步瞭解這些功能。
撰寫更優質的標題
擴充功能會根據完整網誌內容，生成多個標題建議。部落格撰寫者可以進一步調整這些建議，選項包括「重新產生」、「更禮貌」、「更隨性」或「產生類似標題」等。
CyberAgent 專門設計了 UI，讓使用者不必撰寫任何提示。即使是不熟悉提示工程的使用者，也能善用 AI 的強大功能。
這項擴充功能也能為網誌的各個部分生成引人入勝的標題，網誌作者只要選取標題的相關文字即可要求生成。
使用 Prompt API 生成標題的程式碼包含初始提示和使用者提示。初始提示會提供背景資訊和指令，以取得特定類型的輸出內容，而使用者提示則會要求模型與使用者撰寫的內容互動。如要進一步瞭解他們的程式碼，請參閱「部署 AI 輔助功能」。
生成後續段落
這項擴充功能會根據所選文字生成後續段落，協助網誌作者克服寫作障礙。AI 會根據前一段的內容草擬後續段落，讓作者維持創作流程。
改善及編輯文字
Gemini Nano 會分析所選文字，並提供改善建議。使用者可根據語氣和語言選擇的額外附註，重新生成改良內容，讓文案「更可愛」或「更簡單」。
部署 AI 輔助功能
CyberAgent 將擴充功能程式碼分成三個步驟：建立工作階段、觸發及模型提示。
首先，瀏覽器會檢查內建 AI 是否可用及支援。 如果是，他們會使用預設參數建立工作階段。
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
每項功能都有使用者觸發的輔助函式。觸發後，使用者點選相關按鈕時，系統會相應更新工作階段。
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
工作階段更新後，他們會根據函式提示模型。舉例來說，以下程式碼可產生標題，並以更正式的語氣重新產生標題。
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
內建 AI 的優點
內建 AI 屬於用戶端 AI，也就是說，推論是在使用者裝置上進行。CyberAgent 選擇使用 Gemini Nano 內建的 AI API，是因為這項技術為應用程式開發人員和使用者帶來許多優勢。
CyberAgent 著重的優點包括：
- 安全性和隱私權
- 費用
- 回應速度和穩定性
- 開發難易度
安全性和隱私權
直接在使用者裝置上執行 AI 模型，而不將資料傳輸至外部伺服器，這點至關重要。網誌草稿不應公開，因此 CyberAgent 不會將這些草稿傳送至第三方伺服器。
內建 AI 會將 Gemini Nano 下載到使用者裝置，因此不需要從伺服器傳送及接收資料。撰寫郵件時，這項功能特別實用，因為草稿可能包含機密資訊或不當內容。內建 AI 會將原始內容和生成內容保留在本機，不會傳送至伺服器，因此可提升安全性並保護內容隱私權。
節省成本
使用內建 AI 的主要優點之一，在於瀏覽器內含 Gemini Nano，且 API 可免費使用。無須支付額外或隱藏費用。
內建 AI 可大幅降低伺服器成本，並完全免除 AI 推論相關費用。這項解決方案可快速擴展至大量使用者，且使用者可連續提交提示來修正輸出內容，不必支付額外費用。
回應速度和穩定性
內建 AI 可確保回應速度一致且快速，不受網路狀況影響。使用者可以反覆生成內容，輕鬆嘗試新點子，並快速獲得滿意的最終結果。
開發難易度
Chrome 內建的 AI 提供現成可用的 API，可簡化開發程序。開發人員可輕鬆為應用程式建立 AI 技術輔助功能。
Gemini Nano 和內建的 AI API 會安裝在 Chrome 中，因此不需要額外設定或管理模型。這些 API 與其他瀏覽器 API 一樣使用 JavaScript，不需要具備機器學習專業知識。
克服挑戰，提升成效
CyberAgent 在使用 Prompt API 的過程中，學到許多與用戶端 LLM 合作的細微差異，
- 回覆不一致：與其他 LLM 相同，Gemini Nano 無法保證相同提示詞會產生相同輸出內容。CyberAgent 遇到格式非預期的回覆 (例如 Markdown 和無效的 JSON)。即使有指示，結果也可能大不相同。實作任何內建 AI 的應用程式或 Chrome 擴充功能時，建議加入因應措施，確保輸出內容一律採用正確格式。
- 權杖限制：管理權杖用量至關重要。CyberAgent 使用
contextUsage、contextWindow和measureContextUsage()等屬性和方法管理工作階段、維持脈絡，並減少權杖消耗量。這在調整標題時尤其重要。 - 模型大小限制：由於模型會下載到使用者的裝置上，因此比伺服器型模型小得多。也就是說，您必須在提示中提供充足的背景資訊，才能獲得令人滿意的結果，特別是摘要。進一步瞭解如何瞭解 LLM 大小。
CyberAgent 強調，雖然用戶端模型尚未在所有瀏覽器和裝置上普遍適用，且較小的模型有其限制，但仍可針對特定工作提供令人驚豔的效能。這項工具可快速反覆運算及實驗，且不會產生伺服器端費用，因此非常實用。
他們建議取得平衡，並瞭解無論是伺服器端或用戶端，任何 AI 都難以提供完美的回覆。最後，他們認為混合式方法 (結合伺服器端和用戶端 AI 的優勢) 將能發揮更大的潛力。
展望未來
CyberAgent 探索內建 AI 的過程，展現了無縫整合 AI 的令人振奮可能性，可望提升使用者體驗。他們建構的擴充功能可與 Ameba Blog 搭配使用，展現如何實際應用這些技術解決現實世界的問題，為更廣泛的網頁開發社群提供寶貴的經驗。
隨著技術日趨成熟，以及瀏覽器和裝置支援範圍擴大，我們預期內建 AI 和其他形式的用戶端 AI 將有更多創新應用。
資源
- 進一步瞭解 Prompt API
- 開始使用 Chrome 的內建 API
- CyberAgent 的 Web AI 個案研究，內容涵蓋相同主題。
- 觀看「The future of AI is now」，瞭解 CyberAgent 的用戶端 AI 個案研究
特別銘謝
感謝 Ameba 的部落客 ao、Nodoka、Erin、Chiaki 和 socchi 提供意見回饋，協助我們改善擴充功能。感謝 Thomas Steiner、Alexandra Klepper 和 Sebastian Benz 協助撰寫及審查這篇網誌文章。