@antdigital/agentui-react-native

React Native UI for agent chat, aligned with @ant-design/agentic-ui where it matters: Markdown (unified → HAST → React Native) and a minimal message list (simplified BubbleList).

Features

| Module | Description | |--------|-------------| | MarkdownRenderer | GFM markdown, block-level streaming (sealed/tail), optional character throttle | | MessageList | FlatList chat UI: user right / assistant left, each body uses MarkdownRenderer |

Not included (see agentic-ui on web): avatars, like/dislike/copy, thought chain, Mermaid, math, Slate editor, plugin code routers.

Requirements

• React >= 18
• React Native >= 0.73

Install

npm install @antdigital/agentui-react-native

Peer dependencies: react, react-native.

Markdown pipeline packages (unified, remark-*, hast-util-to-jsx-runtime, …) are bundled into lib/ at publish time so Metro does not need package.exports or extra resolver config. Host apps only install this package plus react / react-native.

Quick start

Wrap your tree in MarkdownThemeProvider once (required for markdown colors/typography).

import {
  MarkdownThemeProvider,
  MessageList,
  type ChatMessage,
} from '@antdigital/agentui-react-native';

const messages: ChatMessage[] = [
  { id: '1', role: 'user', content: 'Hello' },
  {
    id: '2',
    role: 'assistant',
    content: '## Hi\n\nMarkdown **works**.',
    isFinished: true,
  },
];

export function ChatScreen() {
  return (
    <MarkdownThemeProvider>
      <MessageList messages={messages} autoScrollToBottom />
    </MarkdownThemeProvider>
  );
}

MarkdownRenderer

Renders a markdown string as native View / Text (and related primitives).

import { MarkdownRenderer, MarkdownThemeProvider } from '@antdigital/agentui-react-native';

<MarkdownThemeProvider>
  <MarkdownRenderer content="# Title\n\nParagraph with **bold**." />
</MarkdownThemeProvider>

Supported (GFM subset): headings, paragraphs, bold/italic/strike, links, lists, task lists, blockquote, inline/fenced code, tables, horizontal rule, images (URL).

Agent cards: fenced block with language agent-card and a JSON body — rendered as a structured card (or override via components.agentCard):

```agent-card
{"title":"BTC-PERP","highlight":"72,732.45 · -2.63%","fields":[{"label":"24h","value":"+3.2%"}]}
```

Streaming (SSE / token stream)

<MarkdownRenderer
  content={partialMarkdown}
  streaming
  isFinished={streamDone}
  throttleOptions={{ enabled: true, charsPerFrame: 3 }}
/>

• Character throttle — shows text gradually as content grows.
• Block split — finished blocks stay cached (sealed); only the last block re-parses often (tail).
• throttleOptions.fade — accepted for API parity with web; no visual effect on React Native.

Use on the last assistant message in a list via ChatMessage.streaming / isFinished (see below).

MessageList

Minimal chat list: no toolbar actions, no avatars.

ChatMessage

| Field | Type | Notes | |-------|------|--------| | id | string | Stable key for FlatList (host assigns; do not change while streaming) | | role | 'user' \| 'assistant' | Layout: user right, assistant left | | content | string | Markdown source | | streaming? | boolean | Usually last assistant message only | | isFinished? | boolean | When true, throttle flushes remaining text |

MessageList props

| Prop | Default | Description | |------|---------|-------------| | messages | — | Array of ChatMessage | | autoScrollToBottom | true | Scroll when length or last content changes | | throttleOptions | — | Passed to each bubble’s MarkdownRenderer | | chatTheme | defaultChatTheme | Bubble colors, padding, gap (mergeChatTheme) | | style / contentContainerStyle | — | FlatList styles |

<MessageList
  messages={messages}
  autoScrollToBottom
  throttleOptions={{ enabled: true }}
  chatTheme={{ userBubbleBackground: '#e6f4ff' }}
/>

Single-message layout: use MessageBubble + MarkdownRenderer directly (both exported).

API exports

| Export | Description | |--------|-------------| | MarkdownRenderer | Markdown → RN tree | | MessageList / MessageBubble | Chat list / single row | | useMarkdownToReact | Hook (block streaming pipeline) | | markdownToReactSync | Sync parse (tests) | | useContentThrottle | Character throttle only | | MarkdownThemeProvider / defaultTheme | Markdown typography & colors | | defaultChatTheme / mergeChatTheme | Bubble chrome | | createHastProcessor, splitMarkdownBlocks, shouldReparseLastBlock | Advanced / streaming internals |

Types: ChatMessage, MessageListProps, MarkdownRendererProps, ContentThrottleOptions, ChatTheme, MarkdownTheme, …

Example app (Expo)

From repo root:

npm install
cd example && npm install
npm run example

Or: npm run example from root.

The example includes:

• MessageList — static thread + “Stream reply” (assistant streaming in the list)
• Streaming only — single MarkdownRenderer demo

Details: example/README.md.

Debug: breakpoints in example/*.tsx or src/**; Metro resolves the library via react-native → src/index.ts.

Develop

npm install
npm run typecheck
npm test
npm run build

Output: lib/ (published main / types). Local Expo example uses src/ via Metro watchFolders.

Relation to agentic-ui

| Web (agentic-ui) | This package | |--------------------|--------------| | MarkdownRenderer + remark/rehype plugins | Slim processor (GFM only) | | BubbleList / PureBubbleList | MessageList | | Ant Design, CSS fade tokens | RN View/Text, no fade |

License

MIT