Cloudflare-hostable static demo

WebAgent widget config assistant

Tune the widget, preview it live, and copy a production-ready embed snippet. The page loads the local widget bundle during development, then automatically falls back to a CDN bundle when you host it on Cloudflare Pages or Workers assets.

Plain HTML/CSS/JS Local dist in dev Versioned CDN in production Live re-init preview

Ready Snippet updates live as you type.

Runtime status

Bundle source selection, WebMCP support, and persistence details update automatically.

Bundle mode Detecting…

Bundle source Loading…

WebMCP Checking browser support…

Persistence Preparing preview details…

1. Configure the widget

Start with sensible defaults, then shape the configuration for your product.

API base Your deployed backend worker URL. API key / managed session key Accepts managed wa_... keys or BYOK values such as sk-....

Theme Position

Model Provider selection is typically inferred by your backend or key strategy. Persistence

Session TTL (days) Expired sessions are cleaned up automatically on load. Support email Used if you enable escalation flows.

Welcome message Knowledge base URL System prompt (optional)

Any change updates the snippet immediately and re-renders the widget preview after a short debounce.

2. Copy your embed snippet

Paste this into another product when you are ready. It always uses the production CDN bundle.

CDN target:

3. Preview the live widget

The widget renders on this page using the selected config. If you change API settings, the current singleton instance is destroyed before re-init.

Preview instructions

Look for the WebAgent launcher in the lower corner of this page. The preview uses the same WebAgent.init(...) flow as your production embed.

Configure the values you want to test. Use real backend URLs if you want the preview conversation to work end-to-end.
Open the launcher bubble. The widget is mounted as a fixed overlay, so it behaves like it would on a customer site.
Copy the generated snippet. It is ready for Cloudflare-hosted static sites and other products that can load a script tag.

Preview status

Loading widget bundle…

4. WebMCP & session behavior

Helpful operational notes for product teams evaluating the widget.

WebMCP detection

The widget checks typeof navigator !== 'undefined' && 'modelContext' in navigator.
If available, WebAgent can consume tools exposed by the page or browser and can register its own API skills as WebMCP tools.
If unavailable, the widget still works normally without browser-level tool integration.

Session persistence

The active session id lives in sessionStorage under webagent_current_session.
Chat history is persisted with IndexedDB, localStorage, or a no-op adapter depending on the selected mode.
Expired sessions are removed using the configured TTL during store cleanup.