Remote

kai-remote

Brings a provider’s own card into the page while routing its events back to your app.

Shadow DOM
Cross-origin iframe
Auto-sizes from card height
Theme + locale push
Origin-validated mount

When to use

For a card whose code you cannot bundle into the host app, because another team ships it on its own cycle. For a card you bundle yourself, use Cards.

Usage

Point the element at your provider and hand it the envelope:

<kai-remote
  provider-origin="https://cards.provider.example"
  src="https://cards.provider.example/card"
></kai-remote>

<script type="module">
  import '@kitn.ai/ui/web-components';

  await customElements.whenDefined('kai-remote');

  const el = document.querySelector('kai-remote');

  el.envelope = {
    type: 'form',
    id: 'remote-form-1',
    title: 'Quick question',
    data: { /* … your card data … */ },
  };

  el.addEventListener('kai-card', (e) => {
    if (e.detail.kind === 'submit') console.log('submitted', e.detail.data);
    if (e.detail.kind === 'action') console.log('action', e.detail.action);
  });
</script>

src — URL of the card page inside the provider. Plain HTML attribute.
provider-origin: exact HTTPS origin of the provider (e.g. https://cards.provider.example); http://localhost:PORT and http://127.0.0.1:PORT are accepted for local dev. Wildcards and comma-lists are rejected immediately with an inline error.
envelope: the CardEnvelope object, assigned as a property (el.envelope = { type, id, data, … }), never an HTML attribute.
policy: an optional CardPolicy for programmatic event routing (same shape <kai-cards> uses), also a property. Omit it and events still surface as bubbling kai-card CustomEvents.

Props

Property	Type	Default	Notes
theme	"light" \| "dark" \| "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
src	string	—	The remote card URL. Attribute: `src`.
providerOrigin	string	—	Exact provider origin (https: or http://localhost for dev). Attribute: `provider-origin`.
envelope	Record<string, unknown>	—	The card envelope to render. JS property only.
policy	Record<string, unknown>	—	Optional routing policy. JS property only.

Need a hand? Report a bug Ask for help