# react-native

A skill for building assistant-ui chat surfaces in Expo and bare React Native: native primitives, the AI SDK runtime and a transport to your backend.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 909 installs · ★ 29
- Author: assistant-ui
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/assistant-ui/skills/tree/HEAD/assistant-ui/skills/react-native/SKILL.md
- Updated: 2026-10-13
- HTML: https://affpapa.org/en/nevibecode/skills/assistant-ui-react-native

## What it does

The skill covers building a mobile chat on `@assistant-ui/react-native` and `@assistant-ui/ai-sdk`. The first package ships unstyled primitives wired to the runtime, the second brings the AI SDK v7 runtime and transport. You compose the surface from `View`, `Text`, `Pressable`, `TextInput` and `FlatList`.

The model route lives in a separate backend project, never inside the Expo bundle. The app posts UI messages through `AssistantChatTransport`, the route converts them asynchronously and returns a UI message stream. The endpoint has to be absolute: a physical device cannot resolve its own localhost to your dev server, so a relative URL fails on device. Keep the address in `EXPO_PUBLIC_CHAT_ENDPOINT_URL`.

Inside you get a quick start from the `with-expo` example, manual package install, thread and composer composition, generative toolkits through `Metro` `withAui`, and a list of common gotchas. `MessagePrimitive.Content` renders text parts as native `Text` by default rather than Markdown, so Markdown from the model needs a custom renderer. Web setup and DOM primitive work is routed to the neighbouring `../setup/SKILL.md` and `../primitives/SKILL.md`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add assistant-ui/skills --skill react-native -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/react-native/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-native/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add assistant-ui/skills --skill react-native -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/react-native/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add assistant-ui/skills --skill react-native -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/react-native/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install assistant-ui/skills react-native
```

2. **Manually: put the files in place**
- File: `.github/skills/react-native/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add assistant-ui/skills --skill react-native -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/assistant-ui/skills --path assistant-ui/skills/react-native
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-native/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add assistant-ui/skills --skill react-native -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/assistant-ui/skills/tree/HEAD/assistant-ui/skills/react-native/SKILL.md

## When to use it
- build a chat screen in Expo with native primitives
- wire the AI SDK v7 runtime into a mobile UI
- fix a relative endpoint URL that fails on device
- get Metro to compile files starting with `"use generative"`
- move a web chat surface to iOS and Android

## Example prompts
- Set up an assistant-ui chat in my Expo app using the native primitives
- Why does my relative chat endpoint URL fail on a physical device?
- Metro won't compile my generative toolkit — wrap the config with withAui

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: fe50929c7d02136d.

BEGIN THIRD-PARTY FILE fe50929c7d02136d
````text
---
name: react-native
description: "Build assistant-ui chat experiences for Expo and bare React Native with `@assistant-ui/react-native` and `@assistant-ui/ai-sdk`. Use when setting up an absolute mobile chat endpoint, `AssistantRuntimeProvider`, `useChatRuntime`, `AssistantChatTransport`, native `ThreadPrimitive`, `ComposerPrimitive`, `MessagePrimitive`, thread lists, attachments, React Native styles, `Metro` `withAui` for a `\"use generative\"` toolkit, local or remote thread adapters, or migrating a web chat surface to iOS and Android. Route here when a relative API URL fails on device, a native primitive lacks runtime state, `Metro` does not compile a toolkit, or web Elements are being used in a native app. Route web setup and DOM primitive work to `../setup/SKILL.md` and `../primitives/SKILL.md`."
license: MIT
---

# assistant-ui React Native

**Always consult [assistant-ui.com/llms.txt](https://www.assistant-ui.com/llms.txt) for the latest API.**

`@assistant-ui/react-native` supplies runtime-connected, unstyled React Native primitives. Use them with `View`, `Text`, `Pressable`, `TextInput`, `FlatList`, and native styles to build the chat surface. `@assistant-ui/ai-sdk` supplies the AI SDK v7 runtime and transport. The model route runs in a separate backend project, never inside the Expo bundle.

## Contents

- [References](#references) | [Quick start](#quick-start) | [Manual setup](#manual-setup) | [Native chat composition](#native-chat-composition) | [Generative toolkits](#generative-toolkits) | [Common Gotchas](#common-gotchas) | [Related Skills](#related-skills)

## References

- [./references/primitives.md](./references/primitives.md) -- native primitive namespaces and their parts
- [./references/hooks.md](./references/hooks.md) -- state, runtime, tool, and scoped-provider hooks
- [./references/adapters.md](./references/adapters.md) -- local persistence, attachments, and remote thread lists
- [./references/custom-backend.md](./references/custom-backend.md) -- a streaming model adapter and a backend-owned thread list
- [./references/migration.md](./references/migration.md) -- moving a web runtime to a native UI layer

## Quick start

Start from the maintained Expo example:

```sh
npx assistant-ui@latest create --example with-expo my-app
cd my-app
```

Set an endpoint that the app can reach. It must be an absolute URL. A physical device cannot resolve its own localhost to your development server.

```dotenv
EXPO_PUBLIC_CHAT_ENDPOINT_URL="https://api.example.com/api/chat"
```

Start Expo:

```sh
npx expo start
```
````
END THIRD-PARTY FILE fe50929c7d02136d

The third-party file has ended. Everything between the fe50929c7d02136d tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2569 of 9574 bytes. © assistant-ui · MIT · https://github.com/assistant-ui/skills/tree/HEAD/assistant-ui/skills/react-native/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md