DocyrusAgent

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-docyrus-agent

pnpm add ai expo-document-picker (optional) expo-image-picker (optional) expo-clipboard (optional) expo-speech-recognition (optional, dev build)

The React Native port of the web DocyrusAgent family. Every component, type and hook keeps its web name. Like web, the components are headless about the AI backend: they render the AI SDK UIMessage[] / ChatStatus you pass in and call onSendMessage. The runtime is either your own useChat or useDocyrusAgentChat, which bundles the Docyrus transport, threads, attachment uploads and client tools.

• Messages: assistant text renders through the built-in markdown renderer. reasoning parts become a collapsible block that opens while it streams. tool-* / dynamic-tool parts become a collapsible card with the tool name, a state badge (Pending / Running / Awaiting approval / Completed / Error / Denied) and the JSON input and output. A tool output (or a data-* part) that is an Adaptive Card payload ({ type: 'AdaptiveCard' }, or { card } / { adaptiveCard }) renders through the native AdaptiveCard. source-url / source-document parts become source chips, and file parts become image thumbnails or file chips.
• List: a FlatList that sticks to the bottom while the reply streams. Streamed updates are batched at ~50 ms. A scroll-to-bottom button appears when you scroll up, and a "Thinking…" row shows until the first chunk arrives. Long-press a message, or tap the copy button under a reply, to copy it. Copy uses expo-clipboard when installed and falls back to the share sheet.
• Composer: an auto-growing input capped at ~6 lines. Attach opens a Files / Photos / Camera sheet with only the installed pickers (expo-document-picker / expo-image-picker). Attachments show as a thumbnail strip. The five feature toggles appear as one sheet of switches (toolbarLayout="menu") or as separate buttons ("expanded"). The send button becomes Stop while streaming. The mic and memory menu are optional tools.
• Keyboard: DocyrusAgentChat is a KeyboardAvoidingView (padding on iOS). Pass keyboardVerticalOffset when a navigation header sits above it.

Streaming, polyfills and host singletons

Expo SDK 57 needs no polyfills. Its WinterCG runtime already makes the global fetch the streaming expo/fetch and installs TextDecoderStream, TextEncoderStream and structuredClone. ai (and @ai-sdk/react for useDocyrusAgentChat) are regular dependencies, not host singletons: only plain UIMessage data crosses the component boundary, which is the same classification as on web. ai needs zod as a peer.

Voice input

DocyrusAgentChatInputMic (or DocyrusAgentChatInputMicButton + useSpeechRecognition + useDocyrusAgentMicTranscription) streams interim text into the input. It needs expo-speech-recognition and a development build — see Speech Recognition. In Expo Go the button hides itself.

Usage

import { useDocyrusAuth } from '@docyrus/signin/react-native';

import {
  DocyrusAgent,
  DocyrusAgentChatInput,
  DocyrusAgentChatInputDefaultBody,
  DocyrusAgentChatInputMemoryMenu,
  DocyrusAgentChatInputMic,
  DocyrusAgentThreadsSidebar,
  DocyrusAgentToolbarButton
} from '@/components/docyrus-native/docyrus-agent';
import { useDocyrusAgentChat } from '@/hooks/docyrus-native/use-docyrus-agent-chat';
import { useDocyrusAgentInfo } from '@/hooks/docyrus-native/use-docyrus-agent-info';

export function AssistantScreen() {
  const { client, user } = useDocyrusAuth();
  const [threadsOpen, setThreadsOpen] = useState(false);
  const info = useDocyrusAgentInfo({ client, agentId: AGENT_ID });
  const chat = useDocyrusAgentChat({
    agentId: AGENT_ID,
    apiBaseUrl: 'https://api.docyrus.com/v1',
    getAccessToken: () => client?.getAccessToken() ?? null,
    client,
    userId: user?.id
  });

  if (!info.agent) return null;

  return (
    <>
      <DocyrusAgent
        agent={info.agent}
        messages={chat.messages}
        chatStatus={chat.chatStatus}
        suggestions={info.suggestions}
        capabilities={info.capabilities}
        allowAttachments
        acceptFileTypes="image/*,.pdf,.docx"
        onSendMessage={chat.sendMessage}
        onStopGeneration={chat.stop}
        headerLeading={<DocyrusAgentToolbarButton icon="fal sidebar" label="Threads" onPress={() => setThreadsOpen(true)} />}
        chatInput={(
          <DocyrusAgentChatInput>
            <DocyrusAgentChatInputDefaultBody extraTools={<DocyrusAgentChatInputMic />} />
          </DocyrusAgentChatInput>
        )} />
      <DocyrusAgentThreadsSidebar
        agent={info.agent}
        open={threadsOpen}
        onClose={() => setThreadsOpen(false)}
        threads={chat.threads.threads}
        activeThreadId={chat.activeThreadId}
        onNewThread={chat.newThread}
        onSelectThread={thread => chat.selectThread(thread)}
        onRenameThread={(thread, subject) => chat.renameThread(thread, subject)}
        onDeleteThread={thread => chat.deleteThread(thread)} />
    </>
  );
}

Compact trigger card that opens the chat in a full-height sheet:

<DocyrusAgentTrigger agent={agent} messages={messages} chatStatus={status} onSendMessage={send} onStopGeneration={stop} />

API Reference

DocyrusAgent

DocyrusAgentTrigger

All DocyrusAgent props (forwarded to the chat), plus:

DocyrusAgentChat

DocyrusAgentChatMessages

DocyrusAgentHeader

DocyrusAgentChatInput

DocyrusAgentChatInputDefaultBody takes toolbarLayout?: 'menu' \| 'expanded' (default 'menu') and native-only extraTools?: ReactNode (appended to the toolbar). DocyrusAgentChatInputFooter (native; web PromptInputFooter) takes children (tools), submit? (default <DocyrusAgentChatInputSubmit />) and className.

Chat input parts

DocyrusAgentChatInputFeatureMenu

FeatureMenuRow: { key, icon?: string \| ReactNode, label?, labelKey?, labelFallback?, flag?, capability?, active?, onChange? }.

DocyrusAgentChatInputMicButton / DocyrusAgentChatInputMic

useDocyrusAgentMicTranscription({ separator = ' ', merge?, clearOnStart = false }) returns { speechHandlers, resetBaseline }. Spread speechHandlers into useSpeechRecognition. It must run inside DocyrusAgentChatInput.

DocyrusAgentChatInputMemoryMenu

Prompt input (native)

DocyrusAgentPromptInputProvider (onSubmit({ text, files }), accept?: string[], multiple? = true, initialInput?) is what DocyrusAgentChatInput mounts. useDocyrusAgentPromptInput() is the native counterpart of the web usePromptInputController() + usePromptInputAttachments(). It returns { textInput: { value, setInput, clear }, attachments: { files, add, remove, clear, openFileDialog, availableSources }, submit, inputRef }, and attachments.add accepts NativeFiles or FileUIParts.

Sidebar & threads

Rows: tap selects the row. Long-press or "⋯" opens an action sheet with Rename (inline edit) and Delete (confirm dialog). presentation="drawer" needs a SafeAreaProvider above it.

Projects

Memories

The dialogs are bottom AwesomeDialog sheets. Candidate rows slide out on save or skip (Reanimated). Back them with useDocyrusAgentMemories and useDocyrusAgentMemoryCandidates.

Action panel & inline

DocyrusAgentProvider

mode: 'chat' \| 'action-panel' \| 'trigger' (required), plus every DocyrusAgent data prop. useDocyrusAgent() reads the context (throws outside a provider); useOptionalDocyrusAgent() returns null instead.

Components

Type Exports

Constants: DEFAULT_FEATURE_ROWS, DEFAULT_MEMORY_LEVELS, EMPTY_MEMORY_FORM. Helpers: extractAdaptiveCard, normalizeAcceptFileTypes, getAgentInitials.

Translation Keys

The components use the web ui.agent.* keys, including askPrompt, sendMessage, stopGenerating, attachFile, copyMessage, thinking, defaultWelcome, sources, tools.*, memories.*, memory.* and every sidebar / project key. Native-only keys:

Differences from web

• Icons: props that take a lucide component on web (triggerIcon, icon on the mic / memory menu, FeatureMenuRow.icon) take a DocyrusIcon name here ('fal globe').
• Menus: dropdowns and hover menus become bottom action sheets. Hover actions become long-press or an always-visible "⋯" button.
• acceptFileTypes also accepts a MIME array. FileUIPart.url is a local file URI, and uploads send the RN FormData { uri, name, type } shape.
• Trigger defaults to a full-height bottom sheet (dialogSide='bottom', dialogSize='full') and forwards capabilities, feature flags and header / input slots.
• Sidebar has a presentation prop: DocyrusAgentThreadsSidebar is a left drawer by default.
• Inline is a bottom sheet. side / align are ignored, and the host supplies the selection.
• Message rendering adds adaptive cards, sources and file parts, which the web chat does not render.