ComposerRuntime

Runtime for programmatically controlling the message composer.

The composer runtime allows you to view or edit anything related to how new information is added and sent. For instance you can use the composer runtime to read the state, add attachments, update text, send a message, etc.

`useAui` (Composer Actions)

Grabs the nearest composer (whether it’s the edit composer or the thread’s composer) via useAui:

// Example
import { useAui } from "@assistant-ui/react";

const aui = useAui();

// set the text
aui.composer().setText("Hello from the composer");

// send whatever is in the composer
aui.composer().send();

// get the current text in the composer state
const composerState = aui.composer().getState();
const currentText = composerState.text;

ComposerRuntime

path: ComposerRuntimePath

type: "thread" | "edit"

getState: () => ComposerState

Get the current state of the composer. Includes any data that has been added to the composer.

addAttachment: (fileOrAttachment: File | CreateAttachment) => Promise<void>

Add an attachment to the composer. Accepts either a standard File object (processed through the AttachmentAdapter) or a CreateAttachment descriptor for external-source attachments (URLs, API data, CMS references) that bypasses the adapter entirely.

setText: (text: string) => void

Set the text of the composer.

setRole: (role: "system" | "user" | "assistant") => void

Set the role of the composer. For instance, if you'd like a specific message to have the 'assistant' role, you can do so here.

setRunConfig: (runConfig: RunConfig) => void

Set the run config of the composer. This is used to send custom configuration data to the model. Within your backend, you can use the `runConfig` object. Example: ```ts composerRuntime.setRunConfig({ custom: { customField: "customValue" } }); ```

reset: () => Promise<void>

Reset the composer. This will clear the entire state of the composer, including all text and attachments.

clearAttachments: () => Promise<void>

Clear all attachments from the composer.

send: (options?: SendOptions | undefined) => void

Send a message. This will send whatever text or attachments are in the composer.

cancel: () => void

Cancel the current run. In edit mode, this will exit edit mode.

subscribe: (callback: () => void) => Unsubscribe

Listens for changes to the composer state.

getAttachmentByIndex: (idx: number) => AttachmentRuntime

Get an attachment by index.

startDictation: () => void

Start dictation to convert voice to text input. Requires a DictationAdapter to be configured.

stopDictation: () => void

Stop the current dictation session.

setQuote: (quote: QuoteInfo | undefined) => void

Set a quote for the next message. Pass undefined to clear.

unstable_onunstable: (event: ComposerRuntimeEventType, callback: () => void) => Unsubscribe

`useAuiState` (Thread Composer State)

Access the thread’s new message composer state:

import { useAuiState, useAui } from "@assistant-ui/react";

const text = useAuiState((s) => s.composer.text);
const isEmpty = useAuiState((s) => s.composer.isEmpty);

// For actions, use useAui
const aui = useAui();

// set the text
aui.composer().setText("Hello from the thread composer");

// send whatever is in the thread composer
aui.composer().send();

ThreadComposerRuntime

path: ThreadRuntimePath & { readonly composerSource: "thread"; } & { composerSource: "thread"; }

type: "thread"

addAttachment: (fileOrAttachment: File | CreateAttachment) => Promise<void>

setText: (text: string) => void

Set the text of the composer.

setRole: (role: "system" | "user" | "assistant") => void

Set the role of the composer. For instance, if you'd like a specific message to have the 'assistant' role, you can do so here.

setRunConfig: (runConfig: RunConfig) => void

reset: () => Promise<void>

Reset the composer. This will clear the entire state of the composer, including all text and attachments.

clearAttachments: () => Promise<void>

Clear all attachments from the composer.

send: (options?: SendOptions | undefined) => void

Send a message. This will send whatever text or attachments are in the composer.

cancel: () => void

Cancel the current run. In edit mode, this will exit edit mode.

subscribe: (callback: () => void) => Unsubscribe

Listens for changes to the composer state.

startDictation: () => void

Start dictation to convert voice to text input. Requires a DictationAdapter to be configured.

stopDictation: () => void

Stop the current dictation session.

setQuote: (quote: QuoteInfo | undefined) => void

Set a quote for the next message. Pass undefined to clear.

unstable_onunstable: (event: ComposerRuntimeEventType, callback: () => void) => Unsubscribe

getState: () => ThreadComposerState

getAttachmentByIndex: (idx: number) => AttachmentRuntime & { source: "thread-composer"; }

`useAui` (Edit Composer Actions)

Access edit composer actions via useAui from within a message component:

import { useAui } from "@assistant-ui/react";

const aui = useAui();

// Begin editing the current message (populates the composer with its content)
aui.message().composer().beginEdit();

// Update the text and send the edit
aui.message().composer().setText("Updated message text");
aui.message().composer().send();

// Cancel editing without saving
aui.message().composer().cancel();

EditComposerRuntime

path

: ThreadRuntimePath & { readonly messageSelector: { readonly type: "messageId"; readonly messageId: string; } | { readonly type: "index"; readonly index: number; }; } & { readonly composerSource: "edit"; } & { composerSource: "edit"; }

type: "edit"

addAttachment: (fileOrAttachment: File | CreateAttachment) => Promise<void>

setText: (text: string) => void

Set the text of the composer.

setRole: (role: "system" | "user" | "assistant") => void

Set the role of the composer. For instance, if you'd like a specific message to have the 'assistant' role, you can do so here.

setRunConfig: (runConfig: RunConfig) => void

reset: () => Promise<void>

Reset the composer. This will clear the entire state of the composer, including all text and attachments.

clearAttachments: () => Promise<void>

Clear all attachments from the composer.

send: (options?: SendOptions | undefined) => void

Send a message. This will send whatever text or attachments are in the composer.

cancel: () => void

Cancel the current run. In edit mode, this will exit edit mode.

subscribe: (callback: () => void) => Unsubscribe

Listens for changes to the composer state.

startDictation: () => void

Start dictation to convert voice to text input. Requires a DictationAdapter to be configured.

stopDictation: () => void

Stop the current dictation session.

setQuote: (quote: QuoteInfo | undefined) => void

Set a quote for the next message. Pass undefined to clear.

unstable_onunstable: (event: ComposerRuntimeEventType, callback: () => void) => Unsubscribe

getState: () => EditComposerState

beginEdit: () => void

getAttachmentByIndex: (idx: number) => AttachmentRuntime & { source: "edit-composer"; }

`ThreadComposerState`

The state of the thread composer which is the composer the user can interact with at the bottom.

ThreadComposerState

canCancel: boolean

isEditing: boolean

isEmpty: boolean

text: string

role: "system" | "user" | "assistant"

attachments: readonly Attachment[]

runConfig: RunConfig

attachmentAccept: string

dictation: DictationState | undefined

The current state of dictation. Undefined when dictation is not active.

quote: QuoteInfo | undefined

The currently quoted text, if any. Undefined when no quote is set.

type: "thread"

useAui (Composer Actions)

useAuiState (Thread Composer State)

useAui (Edit Composer Actions)

ThreadComposerState

`useAui` (Composer Actions)

`useAuiState` (Thread Composer State)

`useAui` (Edit Composer Actions)

`ThreadComposerState`