# Overview
URL: /docs/api-reference/overview

API reference for primitives, runtime hooks, and context providers.

import { Component, ContextLevel, RuntimeHooks } from "./context";

export const contextColors = {
  "Assistant Context": "#4a86e8",
  "Thread Context": "#45a049",
  "Composer Context": "#ff9933",
  "Message Context": "#bb2244",
  "MessagePart Context": "#268bd2",
  "Attachment Context": "#FFB6C1",
  "ThreadListItem Context": "#c678dd",
};

<Callout title="Work in progress" type="warn">
  This page is under construction. Most links will not work yet.
</Callout>

Cloud \[#cloud]

* [`AssistantCloud`](#assistant-cloud)

Runtime API \[#runtime-api]

AI SDK \[#ai-sdk]

* [`useChatRuntime`](#use-chat-runtime)
* [`useAISDKRuntime`](#use-aisdk-runtime)

Data Stream \[#data-stream]

* [`useDataStreamRuntime`](#use-data-stream-runtime)
* [`useCloudRuntime`](#use-cloud-runtime)
* [`toLanguageModelMessages`](#to-language-model-messages) (AI SDK specific)

assistant-stream (Framework-Agnostic) \[#assistant-stream-framework-agnostic]

* [`toGenericMessages`](#to-generic-messages)
* [`toToolsJSONSchema`](#to-tools-json-schema)
* [`GenericMessage`](#generic-message)

LangGraph \[#langgraph]

* [`useLangGraphRuntime`](#use-lang-graph-runtime)

Local Runtime \[#local-runtime]

* [`useLocalRuntime`](#use-local-runtime)

External Store Runtime \[#external-store-runtime]

* [`useExternalStoreRuntime`](#use-external-store-runtime)
* [`createMessageConverter`](#create-message-converter)

Thread List Runtime \[#thread-list-runtime]

* [`useRemoteThreadListRuntime`](#use-remote-thread-list-runtime)
* [`useCloudThreadListRuntime`](#use-cloud-thread-list-runtime)

Runtime Adapters \[#runtime-adapters]

Attachment \[#attachment]

* [`AttachmentAdapter`](#attachment-adapter)
* [`SimpleImageAttachmentAdapter`](#simple-image-attachment-adapter)
* [`SimpleTextAttachmentAdapter`](#simple-text-attachment-adapter)
* [`CompositeAttachmentAdapter`](#composite-attachment-adapter)

Feedback \[#feedback]

* [`FeedbackAdapter`](#feedback-adapter)

Speech \[#speech]

* [`SpeechSynthesisAdapter`](#speech-synthesis-adapter)
* [`WebSpeechSynthesisAdapter`](#web-speech-synthesis-adapter)

Highest Level Context Providers \[#highest-level-context-providers]

<Component
  name="AssistantRuntimeProvider"
  isContextProvider={true}
  providedContexts={[
{ name: "Assistant Context", color: contextColors["Assistant Context"] },
{ name: "Thread Context", color: contextColors["Thread Context"] },
{
  name: "Thread Composer Context",
  color: contextColors["Composer Context"],
  link: "#composer-context",
},
]}
  docsLink="./context-providers/AssistantRuntimeProvider"
  tooltip="Provides the highest level context for the assistant-ui"
  props="runtime={runtime}"
>
  <Component name="Thread" isLink={true} />

  <Component name="ThreadList" isLink={true} />
</Component>

<Component
  name="TextMessagePartProvider"
  isContextProvider={true}
  providedContexts={[
{
  name: "Text MessagePart Context",
  color: contextColors["MessagePart Context"],
  link: "#MessagePart-context",
},
]}
  docsLink="./context-providers/TextMessagePartProvider"
  tooltip="Provides context for text message parts"
  props="text={text}"
>
  <Component name="MessagePart" isLink={true} />
</Component>

<ContextLevel color={contextColors["Assistant Context"]}>
  Assistant Context \[#assistant-context]

  The context available to components inside `<AssistantRuntimeProvider />`. You usually wrap your entire application in this context.

  AssistantRuntime \[#assistantruntime]

  Programmatically access the assistant's state and actions.

  * [`useAssistantRuntime`](#use-assistant-runtime)

  Instructions \[#instructions]

  Add system prompt instructions

  * [`useAssistantInstructions`](#use-assistant-instructions)

  Tool UI \[#tool-ui]

  Register tool UIs

  * [`makeAssistantTool`](#make-assistant-tool)
  * [`makeAssistantToolUI`](#make-assistant-tool-ui)
  * [`useAssistantTool`](#use-assistant-tool)
  * [`useAssistantToolUI`](#use-assistant-tool-ui)

  Programmatically access the list of registered tool UIs (Experimental)

  * [`useToolUIs`](#use-tool-uis)
  * [`useToolUIsStore`](#use-tool-uis-store)

  ThreadListPrimitive \[#threadlistprimitive]

  Shows a list of threads and allows the user to switch between them.

  <Component name="ThreadListPrimitive.Root" docsLink="#thread-list-primitive-root" tooltip="Root component for the thread list">
    <Component name="ThreadListPrimitive.New" docsLink="#thread-list-primitive-new" tooltip="Component for creating a new thread" />

    <Component
      name="ThreadListPrimitive.Items"
      isContextProvider={true}
      providedContexts={[
  {
    name: "ThreadListItem Context",
    color: contextColors["ThreadListItem Context"],
  },
]}
      docsLink="#thread-list-primitive-items"
      tooltip="Container for thread list items, provides context for individual items"
      props="components={...}"
    />
  </Component>
</ContextLevel>

<ContextLevel color={contextColors["Thread Context"]}>
  Thread Context \[#thread-context]

  The context for a single thread. Currently always corresponds to the runtime's main thread.

  ThreadRuntime \[#threadruntime]

  Programmatically access the thread's state and actions.

  * [`useThread`](#use-thread)
  * [`useThreadComposer`](#use-thread-composer)
  * [`useThreadRuntime`](#use-thread-runtime)

  ModelContext \[#modelcontext]

  * [`useThreadModelContext`](#use-thread-model-context)

  ThreadViewportStore \[#threadviewportstore]

  * [`useThreadViewport`](#use-thread-viewport)
  * [`useThreadViewportStore`](#use-thread-viewport-store)

  ThreadPrimitive \[#threadprimitive]

  A conversation thread.

  <Component name="ThreadPrimitive.Root" docsLink="#thread-primitive-root" tooltip="Root component for a thread">
    <Component name="ThreadPrimitive.Viewport" docsLink="#thread-primitive-viewport" tooltip="Viewport for the thread content">
      <Component
        name="ThreadPrimitive.Messages"
        isContextProvider={true}
        providedContexts={[
    { name: "Message Context", color: contextColors["Message Context"] },
    {
      name: "Edit Composer Context",
      color: contextColors["Composer Context"],
      link: "#composer-context",
    },
  ]}
        docsLink="#thread-primitive-messages"
        tooltip="Container for thread messages, provides context for messages and edit composer"
      >
        <Component name="Message" isLink={true} />
      </Component>

      <Component name="ThreadPrimitive.ScrollToBottom" docsLink="#thread-primitive-scroll-to-bottom" tooltip="Scrolls to the bottom of the thread" />

      <Component name="ThreadPrimitive.Empty" docsLink="#thread-primitive-empty" tooltip="Displayed when the thread is empty" />

      <Component name="AuiIf" docsLink="#assistant-if" tooltip="Conditional rendering based on assistant state" />

      <Component name="ThreadPrimitive.Suggestion" docsLink="#thread-primitive-suggestion" tooltip="Displays suggestions in the thread" />

      <Component name="Composer" isLink={true} />
    </Component>
  </Component>

  AssistantModalPrimitive \[#assistantmodalprimitive]

  A floating modal that usually appears in the lower right corner of the screen. Common for support use cases.

  <Component name="AssistantModalPrimitive.Root" docsLink="#assistant-modal-primitive-root" tooltip="Root component for the assistant modal">
    <Component name="AssistantModalPrimitive.Trigger" docsLink="#assistant-modal-primitive-trigger" tooltip="Trigger to open the assistant modal" />

    <Component name="AssistantModalPrimitive.Anchor" docsLink="#assistant-modal-primitive-anchor" tooltip="Anchor point for the assistant modal" />

    <Component name="AssistantModalPrimitive.Content" docsLink="#assistant-modal-primitive-content" tooltip="Content of the assistant modal" />
  </Component>
</ContextLevel>

<ContextLevel color={contextColors["Composer Context"]}>
  Composer Context \[#composer-context]

  Manages the state and actions for the message composer

  ComposerRuntime \[#composerruntime]

  * [`useComposer`](#use-composer)
  * [`useComposerRuntime`](#use-composer-runtime)

  ComposerPrimitive \[#composerprimitive]

  <Component name="ComposerPrimitive.Root" docsLink="#composer-primitive-root" tooltip="Root component for the composer">
    <Component name="ComposerPrimitive.Input" docsLink="#composer-primitive-input" tooltip="Input field for composing messages" />

    <Component name="ComposerPrimitive.Send" docsLink="#composer-primitive-send" tooltip="Button to send the composed message" />

    <Component name="ComposerPrimitive.Cancel" docsLink="#composer-primitive-cancel" tooltip="Button to cancel composing" />

    <Component
      name="ComposerPrimitive.Attachments"
      isContextProvider={true}
      providedContexts={[
  {
    name: "Attachment Context",
    color: contextColors["Attachment Context"],
  },
]}
      docsLink="#composer-primitive-attachments"
      tooltip="Manages attachments in the composer"
    />

    <Component name="ComposerPrimitive.AddAttachment" docsLink="#composer-primitive-add-attachment" tooltip="Button to add an attachment" />
  </Component>
</ContextLevel>

<ContextLevel color={contextColors["Message Context"]}>
  Message Context \[#message-context]

  Manages the state and actions for individual messages

  MessageRuntime \[#messageruntime]

  * [`useMessage`](#use-message)
  * [`useEditComposer`](#use-edit-composer)
  * [`useMessageRuntime`](#use-message-runtime)

  MessageUtilsStore \[#messageutilsstore]

  * [`useMessageUtils`](#use-message-utils)
  * [`useMessageUtilsStore`](#use-message-utils-store)

  MessagePrimitive \[#messageprimitive]

  <Component name="MessagePrimitive.Root" docsLink="#message-primitive-root" tooltip="Root component for a message">
    <Component
      name="MessagePrimitive.Parts"
      isContextProvider={true}
      providedContexts={[
  {
    name: "MessagePart Context",
    color: contextColors["MessagePart Context"],
  },
]}
      docsLink="#message-primitive-parts"
      tooltip="Displays the parts of the message"
    />

    <Component
      name="MessagePrimitive.Attachments"
      isContextProvider={true}
      providedContexts={[
  {
    name: "Attachment Context",
    color: contextColors["Attachment Context"],
  },
]}
      docsLink="#message-primitive-attachments"
      tooltip="Displays attachments in the message"
    />

    <Component name="AuiIf" docsLink="#assistant-if" tooltip="Conditional rendering based on assistant state" />
  </Component>

  ActionBarPrimitive \[#actionbarprimitive]

  <Component name="ActionBarPrimitive.Root" docsLink="#action-bar-primitive-root" tooltip="Root component for the action bar">
    <Component name="ActionBarPrimitive.Copy" docsLink="#action-bar-primitive-copy" tooltip="Copies the message content" />

    <Component name="ActionBarPrimitive.Edit" docsLink="#action-bar-primitive-edit" tooltip="Edits the message" />

    <Component name="ActionBarPrimitive.Reload" docsLink="#action-bar-primitive-reload" tooltip="Reloads the message" />

    <Component name="ActionBarPrimitive.Speak" docsLink="#action-bar-primitive-speak" tooltip="Speaks the message content" />

    <Component name="ActionBarPrimitive.StopSpeaking" docsLink="#action-bar-primitive-stop-speaking" tooltip="Stops speaking the message" />

    <Component name="ActionBarPrimitive.FeedbackPositive" docsLink="#action-bar-primitive-feedback-positive" tooltip="Provides positive feedback" />

    <Component name="ActionBarPrimitive.FeedbackNegative" docsLink="#action-bar-primitive-feedback-negative" tooltip="Provides negative feedback" />
  </Component>

  BranchPickerPrimitive \[#branchpickerprimitive]

  <Component name="BranchPickerPrimitive.Root" docsLink="#branch-picker-primitive-root" tooltip="Root component for the branch picker">
    <Component name="BranchPickerPrimitive.Previous" docsLink="#branch-picker-primitive-previous" tooltip="Navigates to the previous branch" />

    <Component name="BranchPickerPrimitive.Number" docsLink="#branch-picker-primitive-number" tooltip="Displays the current branch number" />

    <Component name="BranchPickerPrimitive.Next" docsLink="#branch-picker-primitive-next" tooltip="Navigates to the next branch" />
  </Component>
</ContextLevel>

<ContextLevel color={contextColors["MessagePart Context"]}>
  MessagePart Context \[#messagepart-context]

  Manages the state and actions for message parts within messages

  MessagePartRuntime \[#messagepartruntime]

  * [`useMessagePart`](#use-content-part)
  * [`useMessagePartText`](#use-content-part-text)
  * [`useMessagePartReasoning`](#use-content-part-reasoning)
  * [`useMessagePartRuntime`](#use-content-part-runtime)

  MessagePartPrimitive \[#messagepartprimitive]

  <Component name="MessagePartPrimitive.Text" docsLink="#content-part-text" tooltip="Represents a text part of the message content" />

  MarkdownText \[#markdowntext]

  <Component name="MarkdownText" docsLink="#markdown-text" tooltip="Renders markdown text in the message" />
</ContextLevel>

<ContextLevel color={contextColors["Attachment Context"]}>
  Attachment Context \[#attachment-context]

  Manages the state and actions for attachments in messages and composer

  AttachmentRuntime \[#attachmentruntime]

  * [`useAttachment`](#use-attachment)
  * [`useAttachmentRuntime`](#use-attachment-runtime)

  AttachmentPrimitive \[#attachmentprimitive]

  <Component name="AttachmentPrimitive.Root" docsLink="#attachment-primitive-root" tooltip="Root component for an attachment">
    <Component name="AttachmentPrimitive.Name" docsLink="#attachment-primitive-name" tooltip="Displays the name of the attachment" />

    <Component name="AttachmentPrimitive.Delete" docsLink="#attachment-primitive-delete" tooltip="Deletes the attachment" />

    <Component name="AttachmentPrimitive.Thumb" docsLink="#attachment-primitive-thumb" tooltip="Displays a thumbnail of the attachment" />
  </Component>
</ContextLevel>

<ContextLevel color={contextColors["ThreadListItem Context"]}>
  ThreadListItem Context \[#threadlistitem-context]

  Manages the state and actions for individual thread list items

  ThreadListItemRuntime \[#threadlistitemruntime]

  * [`useThreadListItem`](#use-thread-list-item)
  * [`useThreadListItemRuntime`](#use-thread-list-item-runtime)

  ThreadListItem \[#threadlistitem]

  <Component name="ThreadListItemPrimitive.Root" docsLink="#thread-list-item-primitive-root" tooltip="Root component for a thread list item">
    <Component name="ThreadListItemPrimitive.Trigger" docsLink="#thread-list-item-primitive-trigger" tooltip="Trigger for thread list item actions">
      <Component name="ThreadListItemPrimitive.Name" docsLink="#thread-list-item-primitive-name" tooltip="Displays the name of the thread" />
    </Component>

    <Component name="ThreadListItemPrimitive.Archive" docsLink="#thread-list-item-primitive-archive" tooltip="Archives the thread" />

    <Component name="ThreadListItemPrimitive.Unarchive" docsLink="#thread-list-item-primitive-unarchive" tooltip="Unarchives the thread" />

    <Component name="ThreadListItemPrimitive.Delete" docsLink="#thread-list-item-primitive-delete" tooltip="Deletes the thread" />

    <Component name="ThreadListItemPrimitive.Rename" docsLink="#thread-list-item-primitive-rename" tooltip="Renames the thread" />
  </Component>
</ContextLevel>

Utilities \[#utilities]

* [`useThreadViewportAutoscroll`](#use-thread-viewport-autoscroll)
* [`useInlineRender`](#use-inline-render)