AI
Building AI chat interfaces in React Native with PanelUI.
Beta. These pages describe patterns rather than a stable API surface, and they move with the AI SDK.
Five of the patterns that were once only described here now ship as components:
Reasoning, Sources,
Task, CodeBlock and
Plan. None of them depends on the AI SDK — their props
are plain, and shaped to line up with what message.parts hands you, which is
what the pages below show.
Most AI chat guides are written for the web, where a div re-rendering sixty
times a second is free, EventSource exists, and the keyboard is not a thing.
None of that holds on a phone. This section covers what is actually different.
What is different on native
| The web assumption | What holds on native |
|---|---|
fetch streams response bodies | React Native's fetch buffers the whole response. You need expo/fetch. |
TextDecoderStream exists | It does not. Neither does structuredClone. Both need polyfilling. |
| A re-render per token is cheap | It is not. A long transcript re-rendering per token drops frames. |
| The page just scrolls | The keyboard covers the composer, and the transcript has to stay pinned. |
| Any relative URL reaches your API | '/api/chat' means nothing in a native bundle — there is no origin. |
Each of those has a page here.
The pages
Setup
Dependencies, polyfills, expo/fetch, and getting the API URL right in
development and production.
API route
The +api.ts handler that streams from the model.
Chat UI
A full transcript and composer built from PanelUI components.
Streaming performance
Why token-by-token rendering drops frames, and what to do about it.
Tools
Rendering tool calls as part of the conversation.
Which components you will use
Nothing here is AI-specific — these are the same components documented everywhere else, in the arrangement a chat screen wants.
| Component | Role |
|---|---|
Message | Each turn: bubble, avatar, header, footer |
Message.Group | Consecutive turns from one sender |
Shimmer | The thinking state before the first token |
Item | Tool calls and sources inside a turn |
Input with avoidKeyboard | The composer |
ScrollFade | Softening the transcript edges |