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.

`useComposerRuntime`

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

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

const composerRuntime = useComposerRuntime();

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

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

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

ComposerRuntime

pathrequired: ComposerRuntimePath

typerequired: "thread" | "edit"

getStaterequired: () => ComposerState

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

addAttachmentrequired: (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.

setTextrequired: (text: string) => void

Set the text of the composer.

setRolerequired: (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.

setRunConfigrequired: (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" } }); ```

resetrequired: () => Promise<void>

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

clearAttachmentsrequired: () => Promise<void>

Clear all attachments from the composer.

sendrequired: () => void

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

cancelrequired: () => void

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

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

Listens for changes to the composer state.

getAttachmentByIndexrequired: (idx: number) => AttachmentRuntime

Get an attachment by index.

startDictationrequired: () => void

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

stopDictationrequired: () => void

Stop the current dictation session.

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

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

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

`useThreadComposer`

Access the thread’s new message composer state:

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

const threadComposerRuntime = useThreadComposer();

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

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

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

ThreadComposerRuntime

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

typerequired: "thread"

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

setTextrequired: (text: string) => void

Set the text of the composer.

setRolerequired: (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.

setRunConfigrequired: (runConfig: RunConfig) => void

resetrequired: () => Promise<void>

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

clearAttachmentsrequired: () => Promise<void>

Clear all attachments from the composer.

sendrequired: () => void

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

cancelrequired: () => void

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

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

Listens for changes to the composer state.

startDictationrequired: () => void

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

stopDictationrequired: () => void

Stop the current dictation session.

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

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

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

getStaterequired: () => ThreadComposerState

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

`ThreadComposerState`

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

ThreadComposerState

canCancelrequired: boolean

isEditingrequired: boolean

isEmptyrequired: boolean

textrequired: string

rolerequired: "system" | "user" | "assistant"

attachmentsrequired: readonly Attachment[]

runConfigrequired: RunConfig

attachmentAcceptrequired: string

dictationrequired: DictationState | undefined

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

quoterequired: QuoteInfo | undefined

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