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. Nothing here ships as a component yet — if a pattern below earns its keep, it graduates into the library.
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 |