Skip to content
Gruntend v0.5.0 beta

Framework adapters

Each adapter is a thin wrapper around the renderer selected by the host application. Generated plans never contain framework syntax.

Create the controller and renderer once from a successful UI plan result:

import { createDomPurifyGeneratedUiRenderer } from "gruntend-sdk/renderer/dom-purify";
import { createGeneratedUi } from "gruntend-sdk/ui";

if (result.status !== "done") throw new Error(result.error);
const ui = createGeneratedUi(result.result).unwrap();
const renderer = createDomPurifyGeneratedUiRenderer();
<script lang="ts">
  import GeneratedUi from "gruntend-sdk/ui/svelte";

  let { ui } = $props();
</script>

<GeneratedUi {ui} {renderer} onError={console.error} />
import GeneratedUi from "gruntend-sdk/ui/react";

export function TaskSurface({ ui }) {
  return <GeneratedUi ui={ui} renderer={renderer} onError={console.error} />;
}
<script setup>
import GeneratedUi from "gruntend-sdk/ui/vue";

function onError(error) {
  console.error(error);
}
</script>

<template>
  <GeneratedUi :ui="ui" :renderer="renderer" @error="onError" />
</template>
import GeneratedUi from "gruntend-sdk/ui/solid";

export function TaskSurface(props) {
  return (
    <GeneratedUi ui={props.ui} renderer={renderer} onError={console.error} />
  );
}

Svelte, React, and Solid accept:

onError · onRender · onActionStart · onActionEnd

Vue emits the matching events:

error · render · action-start · action-end

Changing ui updates the existing session. Treat renderer as immutable for the mounted component lifetime. Unmounting the component removes delegated listeners. All adapters expose generated-ui-shell, generated-ui, generated-ui-status, and generated-ui-error classes for host styling.

The framework adapter exports are source-backed through explicit types and import export conditions for now, so each host app can compile its own framework format. The core runtime exports (gruntend-sdk/client, gruntend-sdk/code-plan, gruntend-sdk/tool, and gruntend-sdk/ui) are published from dist.