Make Agent Fast documentation

SvelteKit

Load and clean up the hosted agent in the browser lifecycle of a SvelteKit layout.

At a glance

Load and clean up the hosted agent in the browser lifecycle of a SvelteKit layout.

Embed install pathLoader on your site talks to the hosted agent runtime

Prepare the origin#

Publish the site, enable embedding, and allowlist each exact SvelteKit development, preview, and production origin. Use a root layout for a site-wide launcher or a nested layout/page component for selected routes.

Create the component#

onMount runs only in the browser. Return a cleanup function when the owning layout/component can unmount.

<script lang="ts">
  import { onMount } from "svelte";

  const slug = "YOUR_SITE_SLUG";

  onMount(() => {
    if (document.getElementById(`maf-embed-root-${slug}`)) return;

    const script = document.createElement("script");
    script.id = "maf-agent";
    script.src = "https://makeagent.fast/embed.js";
    script.dataset.agent = slug;
    script.dataset.position = "right";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.remove();
      document.getElementById(`maf-embed-root-${slug}`)?.remove();
    };
  });
</script>

Mount the component once from src/routes/+layout.svelte for the entire application. For a route group, place it in that group's +layout.svelte; cleanup removes the launcher when the visitor leaves the group.

Use configuration safely#

The public site slug can be a SvelteKit public environment value because it is not a credential. Do not use $env/static/public or browser code for MAF API keys, AI-provider keys, or connector secrets. Keep those in server-only modules/routes.

Preserve or reset conversation state#

Keeping the component in the root layout preserves the same iframe across client navigation. Route-scoped cleanup deliberately discards that iframe and its current in-page state. Choose one behavior rather than remounting on every page.

Verify the production build#

Run the SvelteKit production adapter/build.
Direct-load the public route and confirm one launcher/root.
Navigate into and out of the owning layout.
Inspect Network/CSP and the exact parent origin.
Test a real message, narrow viewport, and microphone when enabled.

Troubleshooting#

Symptom	Fix
`document` error during SSR	Keep all loader code inside `onMount`
Launcher persists after layout exit	Return cleanup and remove the generated root
Conversation resets on every page	Mount in a persistent parent `+layout.svelte`
Duplicate launcher guard prevents new mount	Ensure prior cleanup removed the old root before adding a new script
Production only fails	Allowlist the final HTTPS origin and inspect adapter CSP headers

No npm SvelteKit adapter is currently published; the hosted script is the supported integration surface.