Skip to main content
Render and manage AI-created action buttons.

​
DynamicUI

Context-aware component that reads from AssistantProvider: 
import { AssistantProvider, DynamicUI } from "modifywithai"

<AssistantProvider {...config}>
    <DynamicUI className="my-quick-actions" />
</AssistantProvider>

​
Props

PropTypeDescription
classNamestringAdditional CSS class names

​
DynamicButtonRenderer

Custom renderer for individual buttons: 
import { DynamicButtonRenderer } from "modifywithai"

<DynamicButtonRenderer
    button={buttonElement}
    onClick={handleClick}
/>

​
DynamicButtonGroupRenderer

Custom renderer for button groups: 
import { DynamicButtonGroupRenderer } from "modifywithai"

<DynamicButtonGroupRenderer
    group={groupElement}
    children={renderedButtons}
/>

​
Button Properties

Buttons created by the AI have these properties: 
interface DynamicButton {
    id: string              // Unique identifier
    label: string           // Display text
    icon?: string           // Lucide icon name
    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost"
    actions: ToolAction[]   // Actions to execute on click
}

​
Button Groups

Buttons can be organized in groups: 
interface DynamicButtonGroup {
    id: string
    label?: string
    direction?: "horizontal" | "vertical"
}

​
Complete Example

import { AssistantProvider, DynamicUI, useAssistant } from "modifywithai"

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

            {/* Chat interface */}
            <ChatInterface />
        </AssistantProvider>
    )
}

​
Styling

Buttons use standard variants you can style:
  • default — Primary action
  • destructive — Dangerous action (red)
  • outline — Bordered, transparent background
  • secondary — Muted appearance
  • ghost — Minimal, text only