Skip to main content
Pre-built React components for building assistant interfaces. Use them as-is or as reference for custom implementations.

​
Component Categories

Conversation

Chat message container and display

Prompt Input

User input form and textarea

Dynamic UI

Persistent action buttons

Confirmation

Action approval dialogs

​
Import

All components export from the main assistant entry point: 
import {
    // Conversation
    Conversation,
    ConversationContent,
    ConversationEmptyState,
    ConversationScrollButton,

    // Messages
    Message,
    MessageContent,
    MessageResponse,

    // Input
    PromptInput,
    PromptInputTextarea,
    PromptInputFooter,
    PromptInputSubmit,
    PromptInputButton,

    // Dynamic UI
    DynamicUI,

    // Confirmation
    Confirmation,
    ConfirmationTitle,
    ConfirmationRequest,
    ConfirmationActions,
    ConfirmationAction,
    ConfirmationAccepted,
    ConfirmationRejected,

    // Primitives
    Drawer,
    DrawerContent,
    DrawerHeader,
    DrawerTitle,
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
} from "modifywithai"

​
Styling

Components use CSS classes that you can style with your own CSS or Tailwind. The AssistantRoot component provides Shadow DOM isolation if needed.

​
Composition Pattern

Components follow a composition pattern. Build your UI by combining smaller pieces: 
<Conversation>
    <ConversationContent>
        {messages.map(msg => (
            <Message key={msg.id} message={msg}>
                <MessageContent />
            </Message>
        ))}
    </ConversationContent>
</Conversation>

<PromptInput onSubmit={handleSubmit}>
    <PromptInputTextarea placeholder="Type a message..." />
    <PromptInputFooter>
        <PromptInputSubmit>Send</PromptInputSubmit>
    </PromptInputFooter>
</PromptInput>

​
Building Custom UIs

You don’t have to use these components. The useAssistant hook gives you everything needed to build your own: 
const assistant = useAssistant({...})

// Build your own UI with:
// - assistant.messages
// - assistant.input / assistant.setInput
// - assistant.handleSubmit
// - assistant.status
// - assistant.isReady