# prompt-api

Integrates and debugs browser-native Prompt API workflows in JavaScript and TypeScript apps. It handles availability checks, streaming responses, and download monitoring.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 447 installs · ★ 52
- Author: webmaxru
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/webmaxru/web-ai-agent-skills/tree/HEAD/skills/prompt-api/SKILL.md
- Updated: 2026-09-29
- HTML: https://affpapa.org/en/nevibecode/skills/prompt-api

## What it does

The skill inventories frontend targets across the repository with `node scripts/find-frontend-targets.mjs .` or by inspecting entry files directly. It then generates a guarded wrapper adapted from `assets/language-model-service.template.ts`. The workflow sets up availability checks via `LanguageModel.availability()` and defers session creation until user activation. For text generation, it connects `prompt()` or `promptStreaming()` execution with `AbortController` cancellation.

It strictly follows current spec constraints. Parameters like `temperature` and `topK` are omitted because they remain deprecated outside extension contexts, while tool calling is kept behind feature flags. The skill functions exclusively in secure window contexts and stops immediately if invoked for Web Workers or non-browser backends. If run inside embedded frames, it enforces `allow="language-model"` permissions.

Without user activation or proper permission policies, calls to instantiate the in-browser model fail silently or throw errors.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/prompt-api/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/prompt-api/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/prompt-api/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/prompt-api/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install webmaxru/web-ai-agent-skills prompt-api
```

2. **Manually: put the files in place**
- File: `.github/skills/prompt-api/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/webmaxru/web-ai-agent-skills --path skills/prompt-api
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/prompt-api/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/webmaxru/web-ai-agent-skills/tree/HEAD/skills/prompt-api/SKILL.md

## When to use it
- integrate browser Prompt API sessions into JavaScript or TypeScript apps
- implement streaming text output with `AbortController` cancellation
- enforce structured JSON responses using `responseConstraint` schemas
- track on-device model download progress through `monitor` listeners
- configure `allow="language-model"` permissions for cross-origin iframes

## Example prompts
- Add LanguageModel availability checking and streaming to our text generator
- Set up Prompt API structured JSON output using a schema constraint
- Handle browser model download progress in our frontend UI

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 18e5ac6090466217.

BEGIN THIRD-PARTY FILE 18e5ac6090466217
```text
---
name: prompt-api
description: Implements and debugs browser Prompt API integrations in JavaScript or TypeScript web apps. Use when adding LanguageModel availability checks, session creation, prompt or promptStreaming flows, structured output, download progress UX, or iframe permission-policy handling. Don't use for server-side LLM SDKs, REST AI APIs, or non-browser providers.
license: MIT
metadata:
  author: webmaxru
  version: "1.4"
---

# Prompt API

## Procedures

**Step 1: Identify the integration surface**
1. Inspect the workspace for browser entry points, UI handlers, and any existing AI abstraction layer.
2. Execute `node scripts/find-frontend-targets.mjs .` to inventory likely frontend files and existing Prompt API usage when a Node runtime is available.
3. If a Node runtime is unavailable, inspect the nearest `package.json`, HTML entry point, and framework entry files manually to identify the browser app boundary.
4. If the workspace contains multiple frontend apps, prefer the app that contains the active route, component, or user-requested feature surface.
5. If the inventory still leaves multiple plausible frontend targets, stop and ask the user which app should receive the Prompt API integration.
6. If the project is not a browser web app, stop and explain that this skill does not apply.

**Step 2: Confirm Prompt API viability**
1. Read `references/prompt-api-reference.md` before writing code.
2. Read `references/examples.md` when the feature needs a spec-valid message shape for text, multimodal, prefix, or tool-enabled sessions.
3. Read `references/compatibility.md` when the feature must support multiple browser generations or decide between native support and polyfills.
4. Read `references/polyfills.md` when the feature needs concrete package installation or backend configuration examples for Prompt API or Task API polyfills.
5. Verify that the feature runs in a secure window context and that the `language-model` permissions-policy allows access from the current frame.
6. If the integration must run in a Web Worker or other non-window context, stop and explain the platform limitation.
7. Choose the session shape the feature needs: `prompt()`, `promptStreaming()`, `initialPrompts`, `append()`, `measureContextUsage()`, or `responseConstraint`. If the feature needs tool-calling, note that `tools` is EXPERIMENTAL (experimental contexts only) in the spec and must be gated with feature detection or limited to origin-trial or extension contexts.
8. If the project uses TypeScript, add or preserve typings that cover the Prompt API surface used by the project.
```
END THIRD-PARTY FILE 18e5ac6090466217

The third-party file has ended. Everything between the 18e5ac6090466217 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2614 of 6561 bytes. © webmaxru · MIT · https://github.com/webmaxru/web-ai-agent-skills/tree/HEAD/skills/prompt-api/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md