发布时间：2025 年 4 月 28 日
AI 的快速发展为 Web 应用开辟了新的前沿，尤其是随着设备端功能的出现。了解日本领先的互联网公司 CyberAgent 如何使用 Chrome 的内置 AI 和 Prompt API 改善其平台 Ameba 博客上的博客体验。
我们会分享他们的目标、使用内置 AI 的好处、他们面临的挑战，以及为其他使用内置 AI 的开发者提供的宝贵数据洞见。
什么是 Prompt API？
| 解说 | Web | 扩展程序 | Chrome 状态 | 意向 |
|---|---|---|---|---|
| GitHub |  ，采用 EPP |
 Origin 试用 |
不适用 | 不适用 |
Prompt API 可帮助开发者使用大语言模型将 AI 功能直接添加到应用中。通过定义自定义提示，应用可以执行数据提取、内容生成和个性化响应等任务。在 Chrome 中，Prompt API 使用 Gemini Nano 执行客户端推理。无论使用哪种模型，这种本地处理都可以增强数据隐私性和响应速度。无论使用哪种模型，客户端的响应速度都会有所不同。
面向 Ameba 博客作者的 AI 协助
CyberAgent 认识到作者有一个共同的痛点：制作引人入胜的内容（尤其是标题）通常非常耗时。他们假设，在博客创建界面中集成 AI 赋能的功能可以显著提高内容创作的质量和效率。他们的目标是为博主提供实用的工具，帮助他们创作出引人入胜的内容。
CyberAgent 使用 Prompt API 开发了 Chrome 扩展程序。此扩展程序提供了一套 AI 赋能的功能，旨在帮助 Ameba 博客作者生成标题、后续段落和常规文案改进。
CyberAgent 希望功能具有灵活性，而这直接催生了 Prompt API。凭借一个 API 的无限可能，CyberAgent 能够准确确定哪些对 Ameba 作者来说最有效且最有用。
CyberAgent 通过选定的一些博主测试了此扩展程序，从而为所提供功能的实用性提供了宝贵的数据洞见。这些反馈有助于 CyberAgent 找出更好的 AI 辅助应用并优化扩展程序的设计。根据积极的成果和反馈，CyberAgent 计划在未来发布此功能，将客户端 AI 的强大功能直接引入其博客社区。
我们来详细了解一下这些功能。
撰写更好的标题和标题
该扩展程序会根据完整的博客内容生成多个标题建议。博客作者可以使用“重新生成”“更礼貌”“更休闲”或“生成类似标题”等选项进一步优化这些建议。
CyberAgent 专门设计了界面，让用户不必编写任何提示。因此，任何不熟悉提示工程的用户也可以受益于 AI 的强大功能。
此扩展程序还可以为博客的各个部分生成引人注目的标头，作者可以通过选择标题的相关文本来请求获取。
使用 Prompt API 生成标题的代码包括系统提示和用户提示。系统提示会提供上下文和说明，以帮助您获取特定类型的输出，而用户提示则要求模型与用户输入的内容进行互动。如需详细了解其代码，请参阅部署 AI 协助。
生成后续段落
此扩展程序可根据所选文本生成后续段落，帮助博主克服困难。AI 会根据上一段落的上下文，起草段落的延续，以便作者保持创作过程。
改进和修改文本
Gemini Nano 会分析所选文本并提出改进建议。用户可以重新生成改进，添加有关语气和语言选择的额外备注，使文案“更可爱”或“更简单”。
部署 AI 助理
CyberAgent 将其扩展程序代码拆分为三个步骤：会话创建、触发器和模型提示。
首先，他们会通过浏览器确认内置 AI 可用且受支持。 如果是，它们会使用默认参数创建会话。
// Confirm with the Prompt API documentation, as this name will change
// when the API is stable.
if (!chrome.aiOriginTrial || !chrome.aiOriginTrial.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({ systemPrompt, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await chrome.aiOriginTrial.languageModel.capabilities();
// "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.`);
});
},
systemPrompt: systemPrompt || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await chrome.aiOriginTrial.languageModel.create(params);
return session;
}
}
每项功能都有一个由用户触发的辅助函数。触发后，当用户点击相关按钮时，他们会相应地更新会话。
async function updateSession({ systemPrompt, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
systemPrompt,
topK,
temperature,
});
}
会话更新后，他们会根据函数提示模型。 例如，以下代码可用于生成标题以及以更正式的语气重新生成标题。
async function generateTitle() {
// Initialize the model session
await updateSession({
systemPrompt: `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 选择将内置 AI API 与 Gemini Nano 搭配使用，因为它对于应用开发者和用户而言具有极大的优势。
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 使用
inputUsage、inputQuota和measureInputUsage()等属性和方法来管理会话、维护上下文并减少令牌消耗。这在优化标题时尤为重要。 - 模型大小限制：由于模型是下载的并存放在用户的设备上，因此要比基于服务器的模型要小得多。这意味着，在提示中提供足够的上下文，以获得令人满意的结果，尤其是在总结时，这一点至关重要。不妨详细了解了解 LLM 规模。
CyberAgent 强调，虽然客户端模型尚未在所有浏览器和设备之间普及，且较小的模型存在局限性，但它仍然可以为特定任务提供出色的性能。该工具具有快速迭代和实验的特点，不会产生服务器端费用，因此是一款颇具价值的工具。
他们建议找到一个平衡点，认识到任何 AI 都很难实现完美的响应，无论是服务器端还是客户端。最后，他们还展望了未来，结合服务器端和客户端 AI 的优势的混合方法将释放更大的潜力。
展望未来
CyberAgent 对内置 AI 的探索展示了无缝 AI 集成在增强用户体验方面的令人兴奋的可能性。他们的扩展程序是为了与 Ameba Blog 配合使用而构建的，演示了如何将这些技术实际应用于解决实际问题，为更广泛的 Web 开发社区提供了宝贵的经验。
随着技术日趋成熟以及对浏览器和设备的支持不断扩展，我们预计内置 AI 和其他形式的客户端 AI 应用会更加有创新性。
资源
- 详细了解 Prompt API for Chrome 扩展程序
- 开始在 Chrome 上使用内置 API
- CyberAgent 关于 Web AI 的案例研究，其中涵盖了相同的主题。
- 观看 AI 的未来就在眼前，CyberAgent 关于客户端 AI 的案例研究
致谢
感谢 Ameba 的博主 ao、Nodoka、Erin、Chiaki 和 socchi，他们提供了反馈并帮助改进了此扩展程序。感谢 Thomas Steiner、Alexandra Klepper 和 Sebastian Benz 撰写和审核本博文。