关于 prompt-api
prompt-api 是面向浏览器 Web 应用开发的技能,指导将 Prompt API 集成到前端。它涵盖能力检查、会话封装、兼容性回退与行为验证。
主要功能
- 01识别浏览器应用集成入口
- 02检查 Prompt API 可用性与兼容性
- 03实现受保护的会话封装
- 04配置界面状态与非 AI 回退
- 05验证提示与会话行为
适用场景
- 01为 Web 应用添加 Prompt API 功能
- 02检查跨浏览器支持与回退方案
- 03处理会话取消和资源清理
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ webmaxru/ web-ai-agent-skills --skill prompt-api安装后在 Claude Code 中输入/prompt-api确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
assets/language-model-service.template.tsreferences/compatibility.mdexamples.mdpolyfills.mdprompt-api-reference.mdtroubleshooting.mdscripts/find-frontend-targets.mjs详细介绍
Prompt API
流程
第 1 步:确定集成入口
- 检查工作区中的浏览器入口、UI 处理程序,以及任何现有的 AI 抽象层。
- 如果有可用的 Node 运行时,请执行
node scripts/find-frontend-targets.mjs .,盘点可能的前端文件和现有的 Prompt API 用法。 - 如果没有可用的 Node 运行时,请手动检查最近的
package.json、HTML 入口点和框架入口文件,以确定浏览器应用的边界。 - 如果工作区包含多个前端应用,优先选择包含当前路由、组件或用户请求的功能入口的应用。
- 如果盘点后仍有多个可能的前端目标,请暂停并询问用户应在哪个应用中集成 Prompt API。
- 如果项目不是浏览器 Web 应用,请暂停并说明此技能不适用。
第 2 步:确认 Prompt API 的可行性
- 编写代码前,先阅读
references/prompt-api-reference.md。 - 如果该功能需要符合规范的文本、多模态、前缀或启用工具的会话消息结构,请阅读
references/examples.md。 - 如果该功能必须支持多个浏览器代际,或需要在原生支持与 polyfill 之间做出选择,请阅读
references/compatibility.md。 - 如果该功能需要 Prompt API 或 Task API polyfill 的具体软件包安装或后端配置示例,请阅读
references/polyfills.md。 - 确认该功能运行在安全的窗口上下文中,并且
language-model权限策略允许从当前框架访问。 - 如果集成必须在 Web Worker 或其他非窗口上下文中运行,请暂停并说明平台限制。
- 选择该功能所需的会话形式:
prompt()、promptStreaming()、initialPrompts、append()、measureContextUsage()或responseConstraint。如果该功能需要调用工具,请注意,规范将tools标记为 EXPERIMENTAL(仅限实验性上下文),必须通过功能检测进行限制,或仅用于源试用或扩展上下文。 - 如果项目使用 TypeScript,请添加或保留涵盖项目所用 Prompt API 接口的类型定义。
第 3 步:实现带防护的会话封装
- 阅读
assets/language-model-service.template.ts,并根据工作区的框架、状态模型和文件布局进行调整。 - 使用与功能运行时相同的创建选项(包括预期模态),通过
LanguageModel.availability()限制会话创建。便携式页面代码不得将tools传递给availability(),因为tools属于 EXPERIMENTAL。 - 仅在用户激活后创建会话,因为此时可能会开始模型下载或实例化。
- 对可取消的提示词使用
AbortController,并在不再需要会话时调用destroy()。 - 如果该功能运行在跨源 iframe 中,嵌入用的 iframe 必须设置
allow="language-model"。 - 不要依赖
params()、topK或temperature;规范现将topK和temperature标记为 DEPRECATED(仅限扩展上下文),因此便携式网页集成不得依赖这些参数。 - 将
availability()视为被动的能力检查:如果它在用户激活前报告downloading,不要据此断定当前页面启动了下载,也不要将 UI 锁定在应用已启动的忙碌状态。 步骤 4:接入 UX 和回退行为 - 展示设备不可用、模型下载中、会话就绪和提示词处理中等不同状态。
- 如果下载进度对该功能很重要,请在
LanguageModel.create()期间附加monitor监听器,并在 UI 中显示进度。 - 对于不受支持的浏览器、不受支持的设备或被阻止的 iframe 上下文,请保留非 AI 回退方案。
- 如果该功能需要结构化输出,请通过
responseConstraint传入 JSON Schema;仅当提示词已包含所需的格式说明时才使用omitResponseConstraintInput,并在使用返回的字符串前对其进行解析。 - 遵循提示词形态验证规则:
system消息应放在initialPrompts中,prefix: true仅适用于最后一条assistant消息,且assistant消息内容必须始终为纯文本。 - 如果应用调用
create()之前availability()报告downloading,应将其呈现为浏览器的信息状态,而非由页面发起的活动下载;除非应用自身正忙,否则应保持控件可用。
步骤 5:验证行为
- 在适用时,使用
prompt()测试短响应,并使用promptStreaming()测试长响应。 - 验证重复提示词是否按预期复用上下文、已销毁的会话是否不会被复用,以及应用是否使用兼容性检查来处理不同浏览器版本中的上下文测量和溢出。
- 如果集成抛出
NotSupportedError,或在不同 frame 或执行上下文中的行为有所不同,请阅读references/troubleshooting.md。 - 编辑后运行工作区构建、类型检查或测试。
错误处理
- 如果缺少
LanguageModel,优先采用渐进式增强,使用有维护的 Prompt API polyfill 或非 AI 回退方案,而不是自行设计兼容层。 - 如果应用调用
create()之前availability()返回downloading,请将其视为被动的浏览器状态。只有当应用自身已启动LanguageModel.create()时,才显示实时进度并阻止提示词提交。 - 如果
availability()或prompt()抛出NotSupportedError,请根据该功能实际使用的模态、语言和消息角色调整创建选项和提示词选项。如果向availability()或create()传入了tools,请注意tools处于实验阶段,当前浏览器上下文可能不支持。 - 如果该功能必须在 Web Workers 中运行,请将集成改为在 window 上下文中运行,因为 workers 不支持 Prompt API。
- 如果该功能位于跨源 iframe 中,请先要求嵌入页面提供
allow="language-model",再继续。 - 如果无法运行
node scripts/find-frontend-targets.mjs .,请手动确定浏览器应用边界,并仅在明确只有一个目标应用后继续。
评论
支持 Markdown