Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
ai-summary
Summarise wrapped content via Chrome's Summarizer API, with provider-neutral inline endpoint and external deep-link fallbacks.
Overview
Wrap a block of content (typically an <article>) and ai-summary prepends a Summarize trigger that produces a streamed summary inline. The component is light DOM and progressively enhances — the wrapped article reads normally without JavaScript.
Provider resolution order on every click: local Chrome Summarizer API → inline endpoint → external deep-link → unavailable. See AI page-tools v1 for the full contract.
Local Chrome Summarizer
In Chrome 138+ on a supported desktop, the component summarises on-device using Summarizer.summarizeStreaming(). The pass-through attributes type, length, and format map 1:1 to Summarizer.create() options.
Local-only
<ai-summary type="key-points" length="medium" format="markdown"> <article> <h2>Headline</h2> <p>Body content…</p> </article></ai-summary>Inline endpoint fallback
Configure endpoint="…" to POST to a server you control when on-device AI isn't available. The component sends { prompt, content, mode: "summarize" } as JSON; the server streams back text/plain chunks (or returns one-shot application/json). Stream output appears inline in the same UI.
With inline endpoint
<ai-summary endpoint="/api/ai/summarize"> <article> <h2>Headline</h2> <p>Body content…</p> </article></ai-summary>The wire format is documented in AI page-tools v1, §C. Implementations on the server side are unconstrained — wrap any AI provider that can produce text from a prompt.
External deep-link fallback
Configure fallback-url="…" with a URL template to send users to an external tool when neither on-device AI nor an inline endpoint is configured. Provider-neutral by design.
Claude
<ai-summary fallback-url="https://claude.ai/new?q={prompt}" fallback-label="Read with Claude"> <article>…</article></ai-summary>ChatGPT
<ai-summary fallback-url="https://chatgpt.com/?q={prompt}" fallback-label="Read with ChatGPT"> <article>…</article></ai-summary>mailto: share
<ai-summary fallback-url="mailto:?subject={title}&body={prompt}" fallback-label="Email this"> <article>…</article></ai-summary>Template tokens (URL-encoded on substitution): {prompt}, {url}, {title}, {content}. Override the default prompt with fallback-prompt="…":
Custom prompt
<ai-summary fallback-url="https://claude.ai/new?q={prompt}" fallback-prompt="Give me a one-paragraph summary of {url}" fallback-label="Read with Claude"> <article>…</article></ai-summary>State and events
The host element reflects lifecycle on data-state: checking → ready → streaming → complete, plus downloading, error, unavailable, and deep-link. Theme via CSS attribute selectors.
Listen for events
<script type="module">const summary = document.querySelector('ai-summary');summary.addEventListener('ai-summary:state', e => console.log(e.detail.state, e.detail.provider));summary.addEventListener('ai-summary:result', e => console.log(e.detail.text.length, 'chars'));summary.addEventListener('ai-summary:error', e => console.error(e.detail.error));</script>Composing with other VB components
ai-summary drops into <page-tools> as just another child — the toolbar's responsive collapse and FAB-into-popover behaviour come for free. Streamed output renders through <markdown-viewer> on completion so VB themes and code highlighting apply automatically.