Skip to main content
Users can ask “add a button for X” and the agent creates a persistent shortcut button they can click anytime.

​
How It Works

1

User requests a shortcut

“Add a quick button to create a new project”
2

Assistant creates the button

Uses the manageDynamicUI tool to add it
3

Button persists

Saved to localStorage for the user
4

One-click access

User clicks the button anytime to execute the action

​
Setup

Add the DynamicUI component inside your AssistantProvider: 
"use client"

import { AssistantProvider, DynamicUI } from "modifywithai"

export function Assistant() {
    return (
        <AssistantProvider
            availableActions={[/* your actions */]}
            getContext={() => ({
                currentPage: window.location.pathname,
            })}
            onAction={handleAction}
        >
            {/* Render dynamic buttons */}
            <DynamicUI className="my-buttons" />

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

​
Placement

Place the DynamicUI component where users will see it immediately.

Header/Navbar

Always visible at the top

Floating Corner

Accessible without scrolling

Above Content

First thing users see

Sidebar

If your app has one

​
Button Properties

Buttons can have:
PropertyTypeDescription
idstringUnique identifier
labelstringDisplay text
iconstringLucide icon name (e.g., “plus”, “trash”)
variantstring"default", "destructive", "outline", "secondary", "ghost"
actionsToolAction[]Actions to execute when clicked

​
Example Buttons

One click to add a new item with default values
Batch action to archive all done items
Setting shortcut for theme preference
Navigation shortcut to settings page

​
User Interactions

Users manage their buttons through natural language:
RequestResult
”Add a button to create a new project”Creates a new shortcut button
”Remove the delete button”Removes the specified button
”Change the Quick Add button to say New Item”Updates the button label
”Clear all my shortcut buttons”Removes all buttons

​
Next Steps

Approval Workflow

Require confirmation for sensitive actions