Render LLM-generated UI in any framework.

Drop-in CDN install

One script tag and one custom element — that’s the whole integration.

<script type="module" src="https://asfand-dev.github.io/aktion/dist/aktion.js"></script>
<aktion-app theme="light"></aktion-app>
<script>
  const el = document.querySelector("aktion-app");
  el.setResponse(`
      _app_ = Stack([greeting])
      greeting = Card([CardHeader("Hello", subtitle: "Generative UI in plain HTML")])
  `);
</script>

Why Aktion?

Live demo

The component below was rendered from a few lines of Aktion. Use the theme picker to swap palettes — the preview updates instantly.

_app_ = Stack([welcome, kpis, chart])
welcome = Card([
  CardHeader("Hello there", subtitle: "Generative UI rendered from Aktion"),
  Markdown("This card was streamed in **plain text** and rendered as a real UI.")
])
kpis = Stats([
  StatCard("Active users", value: "12,540", trend: "up", delta: "+18% vs last week"),
  StatCard("Revenue", value: "$48.2k", trend: "flat", delta: "0% vs last week"),
  StatCard("Errors", value: "12", trend: "down", delta: "-32% vs last week")
], layout: "grid")
chart = Card([
  CardHeader("Daily traffic"),
  LineChart(labels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], series: [
    Series("Visits", values: [120,180,160,210,250,200,230]),
    Series("Signups", values: [12,18,15,22,28,21,24])
  ])
])

How it works

Aktion is line-oriented and error-tolerant. Each statement commits to the DOM as soon as it streams in. Three layers cooperate:

Where to next?