Skip to main content
Form components for typing and sending messages.

​
PromptInput

Form wrapper that handles submission: 
import { PromptInput, PromptInputTextarea, PromptInputSubmit } from "modifywithai"

<PromptInput onSubmit={({ text }) => sendMessage(text)}>
    <PromptInputTextarea placeholder="Type a message..." />
    <PromptInputSubmit>Send</PromptInputSubmit>
</PromptInput>

​
Props

PropTypeDescription
onSubmit({ text: string }, e: FormEvent) => voidCalled on form submission
childrenReactNodeForm contents

​
PromptInputTextarea

Auto-resizing textarea with keyboard handling:
  • Enter submits the form
  • Shift+Enter adds a new line
  • Handles IME composition (for non-Latin input)
<PromptInputTextarea
    placeholder="Ask the assistant..."
    name="message"
/>

​
Props

PropTypeDescription
placeholderstringPlaceholder text
namestringForm field name (default: “message”)
disabledbooleanDisable input

​
PromptInputFooter

Container for footer elements like buttons: 
<PromptInputFooter>
    <PromptInputButton onClick={attachFile}>
        Attach
    </PromptInputButton>
    <PromptInputSubmit>Send</PromptInputSubmit>
</PromptInputFooter>

​
PromptInputSubmit

Submit button with loading state awareness: 
<PromptInputSubmit disabled={status === "streaming"}>
    Send
</PromptInputSubmit>

​
PromptInputButton

Generic action button for the input area: 
<PromptInputButton onClick={handleClick}>
    Action
</PromptInputButton>

​
Complete Example

import {
    PromptInput,
    PromptInputTextarea,
    PromptInputFooter,
    PromptInputSubmit,
} from "modifywithai"

function ChatInput({ assistant }) {
    return (
        <PromptInput onSubmit={assistant.handleSubmit}>
            <PromptInputTextarea
                value={assistant.input}
                onChange={(e) => assistant.setInput(e.target.value)}
                placeholder="Ask the assistant..."
            />
            <PromptInputFooter>
                <PromptInputSubmit
                    disabled={assistant.status === "streaming"}
                >
                    {assistant.status === "streaming" ? "..." : "Send"}
                </PromptInputSubmit>
            </PromptInputFooter>
        </PromptInput>
    )
}

​
With useAssistant

The hook provides everything you need: 
const assistant = useAssistant({...})

<form onSubmit={assistant.handleSubmit}>
    <input
        value={assistant.input}
        onChange={(e) => assistant.setInput(e.target.value)}
    />
    <button type="submit" disabled={assistant.status === "streaming"}>
        Send
    </button>
</form>