Widget → Proxy integration

The Klunq Widget is framework-agnostic. If your page can render HTML, it can use the proxy — just add a <script> tag and point it at your proxy deployment.

Setup

Add the widget script once and set two attributes:

<script src="https://cdn.jsdelivr.net/npm/@klunqlabs/klunq-widget@latest/dist/klunq-widget.js"
  data-model="gemma4"
  data-api-key="sk-vkey-…"
  data-base-url="https://proxy.klunqlabs.com/v1"
  data-scope="broad"
></script>

• data-base-url → your proxy’s OpenAI-compatible base. For the hosted proxy use https://proxy.klunqlabs.com/v1. If you self-host, use your own proxy URL (e.g. https://proxy.yourdomain.com/v1).
• data-api-key → a v-key (sk-…) you created with your management key. See Quickstart and Managing keys.
• data-model → one of the curated models (gemma4 today). See Models.

The widget then handles the page-locked prompt and page tools (read, click, fill, navigate). No backend code or build step is required to render the tag.

Static or dynamic — your choice

The <script> tag is plain HTML, so it works in any framework — Next.js, Nuxt, SvelteKit, Rails, WordPress, or static HTML. You can embed the key statically or inject it dynamically; both are valid.

Static (simplest): hard-code a low-budget v-key directly in HTML. Good for public demos or the anonymous default pot (e.g. 1 $/day).

<script data-api-key="sk-vkey-static-…" data-base-url="https://proxy.klunqlabs.com/v1" ...></script>

Dynamic (per-user): fetch a user-specific v-key from your backend after sign-in and set the attribute with JavaScript. Any framework that can manipulate the DOM can do this:

// fetch a v-key minted on your server with the management key
const { key } = await fetch('/api/mint-vkey', { headers: { Authorization: `Bearer ${userJwt}` } }).then(r => r.json())

// any tag will do — update the attribute live
document.querySelector('script[data-api-key]')?.setAttribute('data-api-key', key)
// or create the script tag dynamically if you prefer

Both approaches are framework-agnostic: if you can add a tag to the rendered page and change an attribute, you can integrate.

Verify the proxy

curl https://proxy.klunqlabs.com/health/readiness # → {"status":"healthy","db":"connected"}

Next: Managing keys · Quickstart