import {
  useUITree,
  useRuntimeValueStore,
  createJsonlParser,
} from "@cloudflare/kumo/streaming";
import { UITreeRenderer } from "@cloudflare/kumo/generative";

function StreamingUI() {
  const { tree, applyPatches, reset } = useUITree({ batchPatches: true });
  const runtimeValueStore = useRuntimeValueStore();

  async function startStream(prompt: string) {
    reset();
    const parser = createJsonlParser();
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
      body: JSON.stringify({ message: prompt }),
    });

    const reader = res.body?.getReader();
    if (!reader) return;
    const decoder = new TextDecoder();
    let buffer = "";

    for (;;) {
      const { done, value } = await reader.read();
      if (done) break;

      buffer += decoder.decode(value, { stream: true }).replace(/
/g, "");
      for (;;) {
        const newline = buffer.indexOf("
");
        if (newline === -1) break;
        const line = buffer.slice(0, newline).trim();
        buffer = buffer.slice(newline + 1);

        if (!line.startsWith("data:")) continue;
        const payload = line.slice("data:".length).trimStart();
        if (payload === "[DONE]") return;

        const parsed: unknown = JSON.parse(payload);
        let token = "";
        if (typeof parsed === "object" && parsed !== null) {
          const obj = parsed as Record<string, unknown>;
          if (typeof obj.response === "string") token = obj.response;
        }

        const ops = parser.push(token);
        if (ops.length > 0) applyPatches(ops);
      }
    }

    // Flush remaining buffer
    const remaining = parser.flush();
    if (remaining.length > 0) applyPatches(remaining);
  }

  return (
    <UITreeRenderer
      tree={tree}
      streaming={true}
      runtimeValueStore={runtimeValueStore}
    />
  );
}

<link rel="stylesheet" href="@cloudflare/kumo/loadable/style.css" />
<script src="@cloudflare/kumo/loadable/kumo-loadable.umd.js"></script>

<div id="my-ui"></div>

<script>
  const { CloudflareKumo } = window;

  // Optional: set theme
  CloudflareKumo.setTheme("dark");

  // Apply patches from your streaming source
  const parser = CloudflareKumo.createParser();

  eventSource.onmessage = (e) => {
    const ops = parser.push(e.data);
    if (ops.length > 0) {
      CloudflareKumo.applyPatchesBatched(ops, "my-ui");
    }
  };

  // Or render a complete tree at once
  CloudflareKumo.renderTree(
    { root: "card", elements: { card: { key: "card", type: "Surface", props: {}, children: [] } } },
    "my-ui"
  );
</script>

import { defineCustomComponent } from "@cloudflare/kumo/generative";
import { UITreeRenderer } from "@cloudflare/kumo/generative";
import type { CustomComponentDefinition } from "@cloudflare/kumo/catalog";

// Your domain component
function BarChart({ data, color }: { data: number[]; color?: string }) {
  return <svg>{/* chart rendering */}</svg>;
}

// Define outside the render path for stable identity
const barChart = defineCustomComponent({
  component: BarChart,
  description: "Renders a bar chart from numeric data",
});

const customComponents: Readonly<Record<string, CustomComponentDefinition>> = {
  BarChart: barChart,
};

// In your component
function App() {
  const { tree } = useUITree({ batchPatches: true });

  return (
    <UITreeRenderer
      tree={tree}
      streaming={true}
      customComponents={customComponents}
    />
  );
}

import { z } from "zod";
import { defineCustomComponent } from "@cloudflare/kumo/generative";
import { UITreeRenderer } from "@cloudflare/kumo/generative";
import { createKumoCatalog, initCatalog } from "@cloudflare/kumo/catalog";
import type { CustomComponentDefinition } from "@cloudflare/kumo/catalog";

// Zod schema for runtime validation
const barChartSchema = z.object({
  data: z.array(z.number()),
  color: z.string().optional(),
  title: z.string().optional(),
});

const barChart = defineCustomComponent({
  component: BarChart,
  description: "Renders a bar chart from numeric data",
  // Runtime validation — same pipeline as built-in components
  propsSchema: barChartSchema,
  // Prompt metadata — tells the LLM what props are available
  props: {
    data: { type: "number[]", description: "Data points to plot" },
    color: { type: "string", description: "Bar fill color", optional: true },
    title: { type: "string", description: "Chart title", optional: true },
  },
  category: "Visualization",
});

const customComponents = { BarChart: barChart } as const;

// Create catalog with custom components for prompt generation
const catalog = createKumoCatalog({ customComponents });
await initCatalog(catalog);

// generatePrompt() now includes BarChart docs under "### Custom"
const prompt = catalog.generatePrompt();

import { createKumoCatalog, initCatalog } from "@cloudflare/kumo/catalog";

const catalog = createKumoCatalog();
await initCatalog(catalog);

// Full prompt with all components, examples, and format instructions
const prompt = catalog.generatePrompt();

// Subset of components only
const focused = catalog.generatePrompt({
  components: ["Button", "Input", "Surface", "Text"],
});

// Skip examples to reduce token count
const compact = catalog.generatePrompt({
  includeExamples: false,
  maxPropsPerComponent: 5,
});

import { useRef, useCallback } from "react";
import {
  useUITree,
  useRuntimeValueStore,
  BUILTIN_HANDLERS,
  dispatchAction,
  processActionResult,
  type ActionEvent,
  type JsonPatchOp,
  type UITree,
} from "@cloudflare/kumo/streaming";
import { UITreeRenderer } from "@cloudflare/kumo/generative";

function InteractiveUI() {
  const { tree, applyPatches, reset } = useUITree({ batchPatches: true });
  const runtimeValueStore = useRuntimeValueStore();

  // Refs prevent stale closures — the handleAction callback
  // captures the latest tree/applyPatches without re-subscribing.
  const treeRef = useRef<UITree>(tree);
  treeRef.current = tree;
  const applyPatchesRef = useRef(applyPatches);
  applyPatchesRef.current = applyPatches;

  const startStream = useCallback(async (prompt: string) => {
    reset();
    // ... your streaming logic (see Quick Start)
  }, [reset]);
  const startStreamRef = useRef(startStream);
  startStreamRef.current = startStream;

  function handleAction(event: ActionEvent) {
    const result = dispatchAction(
      BUILTIN_HANDLERS, event, treeRef.current
    );
    if (!result) return;

    processActionResult(result, {
      applyPatches: (patches: readonly JsonPatchOp[]) =>
        applyPatchesRef.current(patches),
      // submit_form calls sendMessage with collected form values —
      // wire it to start a new stream turn.
      sendMessage: (msg: string) => startStreamRef.current(msg),
      openExternal: (url: string, target?: string) =>
        window.open(url, target ?? "_blank"),
    });
  }

  return (
    <UITreeRenderer
      tree={tree}
      streaming={false}
      onAction={handleAction}
      runtimeValueStore={runtimeValueStore}
    />
  );
}

<script>
  const CONTAINER = "my-ui";

  // Listen for action events from the rendered UI
  window.addEventListener("kumo-action", function (e) {
    var detail = e.detail;

    // Dispatch through built-in handlers (increment, decrement, submit_form, navigate)
    var result = CloudflareKumo.dispatchAction(detail, CONTAINER);
    if (result == null) return;

    CloudflareKumo.processActionResult(result, {
      applyPatches: function (patches) {
        CloudflareKumo.applyPatches(patches, CONTAINER);
      },
      // submit_form calls sendMessage with collected form values —
      // wire it to start a new stream turn.
      sendMessage: function (content) {
        streamChat(content);
      },
    });
  });

  // React to runtime value changes (e.g. update a submit preview)
  CloudflareKumo.subscribeRuntimeValues(CONTAINER, function () {
    var values = CloudflareKumo.getRuntimeValues(CONTAINER);
    console.log("Current form values:", values);
  });
</script>

import {
  createKumoCatalog,
  initCatalog,
  resolveProps,
  evaluateVisibility,
} from "@cloudflare/kumo/catalog";

import { createKumoCatalog, initCatalog } from "@cloudflare/kumo/catalog";

// Create a catalog with optional actions
const catalog = createKumoCatalog({
  actions: {
    submit_form: { description: "Submit the current form" },
    delete_item: { description: "Delete the selected item" },
  },
});

// Initialize schemas (required before sync validation)
await initCatalog(catalog);

// Validate AI-generated JSON
const result = catalog.validateTree(aiGeneratedJson);
if (result.success) {
  // Render the validated tree
  renderTree(result.data);
}

{
  "root": "card-1",
  "elements": {
    "card-1": {
      "key": "card-1",
      "type": "Surface",
      "props": { "className": "p-4" },
      "children": ["heading-1", "text-1", "button-1"]
    },
    "heading-1": {
      "key": "heading-1",
      "type": "Text",
      "props": {
        "variant": "heading2",
        "children": "Welcome"
      },
      "parentKey": "card-1"
    },
    "text-1": {
      "key": "text-1",
      "type": "Text",
      "props": {
        "children": { "path": "/user/name" }
      },
      "parentKey": "card-1"
    },
    "button-1": {
      "key": "button-1",
      "type": "Button",
      "props": {
        "variant": "primary",
        "children": "Get Started"
      },
      "parentKey": "card-1",
      "action": {
        "name": "submit_form"
      }
    }
  }
}

import { resolveProps, resolveDynamicValue } from "@cloudflare/kumo/catalog";

// Data model backing the UI
const dataModel = {
  user: {
    name: "Alice",
    isAdmin: true,
  },
  items: [
    { id: 1, title: "First Item" },
    { id: 2, title: "Second Item" },
  ],
};

// AI-generated props with dynamic references
const props = {
  children: { path: "/user/name" },
  disabled: false,
};

// Resolve all dynamic values
const resolved = resolveProps(props, dataModel);
// { children: "Alice", disabled: false }

// Or resolve individual values
const name = resolveDynamicValue({ path: "/user/name" }, dataModel);
// "Alice"

import {
  evaluateVisibility,
  createVisibilityContext
} from "@cloudflare/kumo/catalog";

const ctx = createVisibilityContext(
  // Data model
  { user: { isAdmin: true, role: "editor" } },
  // Auth state
  { isSignedIn: true }
);

// Simple boolean
evaluateVisibility(true, ctx); // true

// Path check (truthy test)
evaluateVisibility({ path: "/user/isAdmin" }, ctx); // true

// Auth check
evaluateVisibility({ auth: "signedIn" }, ctx); // true
evaluateVisibility({ auth: "signedOut" }, ctx); // false

// Equality check
evaluateVisibility({
  eq: [{ path: "/user/role" }, "editor"]
}, ctx); // true

// Complex logic
evaluateVisibility({
  and: [
    { path: "/user/isAdmin" },
    { auth: "signedIn" },
    { gt: [{ path: "/items/length" }, 0] }
  ]
}, ctx);

// In your UI tree element
{
  "key": "delete-btn",
  "type": "Button",
  "props": {
    "variant": "destructive",
    "children": "Delete"
  },
  "action": {
    "name": "delete_item",
    "params": {
      "itemId": { "path": "/selected/id" }
    },
    "confirm": {
      "title": "Delete Item",
      "message": "Are you sure you want to delete this item?",
      "variant": "danger",
      "confirmLabel": "Delete",
      "cancelLabel": "Cancel"
    },
    "onSuccess": {
      "set": { "/selected": null }
    }
  }
}

// Register actions when creating the catalog
const catalog = createKumoCatalog({
  actions: {
    delete_item: {
      description: "Delete an item by ID",
      params: {
        itemId: { type: "string", description: "Item ID to delete" }
      }
    }
  }
});

// Validate a complete tree
const result = catalog.validateTree(aiJson);

if (result.success) {
  console.log("Valid tree:", result.data);
} else {
  console.error("Validation errors:", result.error);
  // [{ message: "Invalid enum value", path: ["elements", "btn-1", "props", "variant"] }]
}

// Validate a single element
const elementResult = catalog.validateElement({
  key: "btn-1",
  type: "Button",
  props: { variant: "primary" }
});

// Check available components
catalog.hasComponent("Button"); // true
catalog.hasComponent("Foobar"); // false

// List all component names
console.log(catalog.componentNames);
// ["Badge", "Banner", "Button", ...]

import type {
  // Core types
  UIElement,
  UITree,
  DynamicValue,
  DynamicString,
  DynamicNumber,
  DynamicBoolean,

  // Visibility
  VisibilityCondition,
  LogicExpression,

  // Actions
  Action,
  ActionConfirm,
  ActionHandler,
  ActionHandlers,
  ActionDefinition,

  // Auth & Data
  AuthState,
  DataModel,

  // Catalog
  KumoCatalog,
  CatalogConfig,
  ValidationResult,
} from "@cloudflare/kumo/catalog";