Astro

MLForm needs browser APIs, so mount it from a client script.

<div id="prediction-form"></div>

<script>
  import { mountForm } from "mlform/kit";
  import { predictionTransport } from "./prediction-transport";

  const host = document.querySelector("#prediction-form");

  if (host instanceof HTMLElement) {
    mountForm(host, {
      transport: predictionTransport,
      schema: {
        fields: [{ id: "prompt", kind: "text", label: "Prompt", required: true }],
        reports: [{ id: "prediction", kind: "classifier", label: "Prediction" }],
      },
    });
  }
</script>

If you wrap MLForm in a framework island, follow that framework’s cleanup lifecycle.