Skip to page content
Docs
Make Agent Fast documentation

Astro

Add the hosted agent to a shared Astro layout or selected static and island pages.

At a glance

Add the hosted agent to a shared Astro layout or selected static and island pages.

Embed install pathLoader on your site talks to the hosted agent runtime
Your websiteHTML / appLoader scriptembed.jsWidget UIChat / voiceAgent

Prepare the deployment origin#

Publish the Make Agent Fast site, enable embedding, and allowlist the exact Astro development, preview, and production origins. The final scheme/hostname/port in the browser matters, not the build host or repository URL.

Add to a shared layout#

Place the standard external loader immediately before </body> in the Astro layout that should own the launcher.

---
// src/layouts/BaseLayout.astro
---

<html lang="en">
  <body>
    <slot />

    <script
      is:inline
      src="https://makeagent.fast/embed.js"
      data-agent="YOUR_SITE_SLUG"
      data-position="right"
      data-label="Ask us"
      async
    ></script>
  </body>
</html>

is:inline tells Astro to preserve the external script tag and its data-* attributes instead of bundling/transforming it. The loader remains public and framework-independent; do not import it into a server module.

Limit to selected pages#

Use a nested layout or include the tag only on selected .astro pages. Avoid placing the same tag in both a base layout and page. The loader ignores a duplicate same-slug root, but the duplicate HTML makes navigation and teardown difficult to reason about.

If Astro client-side view transitions are enabled, test direct page loads plus in-app navigation. A persistent shared layout is preferred for a site-wide agent. For route-specific behavior, remove both the script and maf-embed-root-YOUR_SITE_SLUG when the route is left before inserting a fresh script later.

Static hosting headers still control the browser. Allow https://makeagent.fast in script-src, frame-src, and the relevant connection policy. If a consent manager blocks the script, load the tag only after required consent rather than weakening CSP or bypassing consent.

Verify the built output#

  1. Run the Astro production build and inspect the emitted HTML for the preserved data-agent tag.
  2. Open the deployed page in a private window.
  3. Confirm one embed root and successful loader/iframe requests.
  4. Navigate across Astro routes and confirm the intended persistence.
  5. Send a real message and test mobile/microphone behavior.

Troubleshooting#

SymptomFix
Built HTML omits/changes attributesAdd is:inline to the external script
Two script tags are emittedKeep installation in one owning layout/page
Client navigation differs from direct loadTest view transitions and choose a persistent shared layout
Works in dev but not static hostAdd the exact production origin and hosting CSP headers
Voice failsConfigure HTTPS, browser permission, and Permissions Policy

No npm Astro adapter is currently published; use the hosted loader shown here.