useDynamicUI

import { useDynamicUI } from "modifywithai"

const dynamicUI = useDynamicUI({
    storageKey: "my-app-buttons-user-123",
})

interface DynamicButton {
    id: string
    label: string
    icon?: string           // Lucide icon name
    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost"
    actions: ToolAction[]   // Actions to execute on click
}

interface DynamicButtonGroup {
    id: string
    label?: string
    direction?: "horizontal" | "vertical"
}

interface DynamicUITree {
    root: string                              // Root element key
    elements: Record<string, DynamicUIElement>
}

interface DynamicUIElement {
    key: string
    type: "DynamicButton" | "DynamicButtonGroup"
    props: Record<string, unknown>
    children?: string[]
    parentKey?: string
}

function ButtonManager() {
    const dynamicUI = useDynamicUI({
        storageKey: "my-app-buttons",
    })

    const addQuickCreate = () => {
        dynamicUI.addButton({
            id: "quick-create",
            label: "Quick Create",
            icon: "plus",
            variant: "default",
            actions: [{ name: "createItem", options: {} }],
        })
    }

    if (dynamicUI.isLoading) return null

    return (
        <div>
            <button onClick={addQuickCreate}>Add Button</button>
            <button onClick={() => dynamicUI.removeButton("quick-create")}>
                Remove
            </button>
            <button onClick={dynamicUI.clearAll}>Clear All</button>
        </div>
    )
}

import { AssistantProvider, DynamicUI } from "modifywithai"

function App() {
    return (
        <AssistantProvider
            availableActions={availableActions}
            onAction={handleAction}
            getContext={() => ({ currentPage: "home" })}
        >
            <DynamicUI className="my-buttons" />
            <ChatInterface />
        </AssistantProvider>
    )
}

const dynamicUI = useDynamicUI({
    storageKey: `app-buttons-${user.id}`,
})