# Getting Started
URL: /docs/react-native

Build AI chat interfaces for iOS and Android with @assistant-ui/react-native.

Quick Start \[#quick-start]

The fastest way to get started with assistant-ui for React Native.

<Steps>
  <Step>
    Create a new project \[#create-a-new-project]

    ```sh
    npx assistant-ui@latest create --example with-expo my-chat-app
    cd my-chat-app
    ```
  </Step>

  <Step>
    Configure API endpoint \[#configure-api-endpoint]

    Create a `.env` file pointing to your chat API:

    ```
    EXPO_PUBLIC_CHAT_ENDPOINT_URL="http://localhost:3000/api/chat"
    ```
  </Step>

  <Step>
    Start the app \[#start-the-app]

    ```sh
    npx expo start
    ```
  </Step>
</Steps>

Manual Setup \[#manual-setup]

If you prefer to add assistant-ui to an existing Expo project, follow these steps.

<Steps>
  <Step>
    Install dependencies \[#install-dependencies]

    ```sh
    npx expo install @assistant-ui/react-native @assistant-ui/react-ai-sdk
    ```
  </Step>

  <Step>
    Setup Backend Endpoint \[#setup-backend-endpoint]

    Create a backend API route using the Vercel AI SDK. This is the same endpoint you'd use with `@assistant-ui/react` on the web:

    <Tabs groupId="provider" items="[&#x22;OpenAI&#x22;, &#x22;Anthropic&#x22;, &#x22;Google&#x22;]">
      <>
        <Tab value="OpenAI">
          ```ts title="app/api/chat/route.ts" 
          import { openai } from "@ai-sdk/openai";
          import { convertToModelMessages, streamText } from "ai";

          export const maxDuration = 30;

          export async function POST(req: Request) {
            const { messages } = await req.json();
            const result = streamText({
              model: openai("gpt-4o-mini"),
              messages: await convertToModelMessages(messages),
            });
            return result.toUIMessageStreamResponse();
          }
          ```
        </Tab>

        <Tab value="Anthropic">
          ```ts title="app/api/chat/route.ts" 
          import { anthropic } from "@ai-sdk/anthropic";
          import { convertToModelMessages, streamText } from "ai";

          export const maxDuration = 30;

          export async function POST(req: Request) {
            const { messages } = await req.json();
            const result = streamText({
              model: anthropic("claude-sonnet-4-20250514"),
              messages: await convertToModelMessages(messages),
            });
            return result.toUIMessageStreamResponse();
          }
          ```
        </Tab>

        <Tab value="Google">
          ```ts title="app/api/chat/route.ts" 
          import { google } from "@ai-sdk/google";
          import { convertToModelMessages, streamText } from "ai";

          export const maxDuration = 30;

          export async function POST(req: Request) {
            const { messages } = await req.json();
            const result = streamText({
              model: google("gemini-2.0-flash"),
              messages: await convertToModelMessages(messages),
            });
            return result.toUIMessageStreamResponse();
          }
          ```
        </Tab>
      </>
    </Tabs>

    <Callout type="info">
      This is the same backend you'd use with `@assistant-ui/react` on the web. If you already have an API route, you can reuse it as-is.
    </Callout>
  </Step>

  <Step>
    Set up the runtime \[#set-up-the-runtime]

    ```tsx title="hooks/use-app-runtime.ts"
    import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";

    const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";

    export function useAppRuntime() {
      return useChatRuntime({
        transport: new AssistantChatTransport({
          api: `${API_URL}/api/chat`,
        }),
      });
    }
    ```
  </Step>

  <Step>
    Use it in your app \[#use-it-in-your-app]

    Wrap your app with `AssistantRuntimeProvider` and build your chat UI:

    ```tsx title="app/index.tsx"
    import {
      AssistantRuntimeProvider,
      useAuiState,
      useAui,
    } from "@assistant-ui/react-native";
    import type { ThreadMessage } from "@assistant-ui/react-native";
    import {
      View,
      Text,
      TextInput,
      FlatList,
      Pressable,
      KeyboardAvoidingView,
      Platform,
    } from "react-native";
    import { useAppRuntime } from "@/hooks/use-app-runtime";

    function MessageBubble({ message }: { message: ThreadMessage }) {
      const isUser = message.role === "user";
      const text = message.content
        .filter((p) => p.type === "text")
        .map((p) => ("text" in p ? p.text : ""))
        .join("\n");

      return (
        <View
          style={{
            alignSelf: isUser ? "flex-end" : "flex-start",
            backgroundColor: isUser ? "#007aff" : "#f0f0f0",
            borderRadius: 16,
            padding: 12,
            marginVertical: 4,
            marginHorizontal: 16,
            maxWidth: "80%",
          }}
        >
          <Text style={{ color: isUser ? "#fff" : "#000" }}>{text}</Text>
        </View>
      );
    }

    function Composer() {
      const aui = useAui();
      const text = useAuiState((s) => s.composer.text);
      const isEmpty = useAuiState((s) => s.composer.isEmpty);

      return (
        <View
          style={{
            flexDirection: "row",
            padding: 12,
            alignItems: "flex-end",
          }}
        >
          <TextInput
            value={text}
            onChangeText={(t) => aui.composer().setText(t)}
            placeholder="Message..."
            multiline
            style={{
              flex: 1,
              borderWidth: 1,
              borderColor: "#ddd",
              borderRadius: 20,
              paddingHorizontal: 16,
              paddingVertical: 10,
              maxHeight: 120,
            }}
          />
          <Pressable
            onPress={() => aui.composer().send()}
            disabled={isEmpty}
            style={{
              marginLeft: 8,
              backgroundColor: !isEmpty ? "#007aff" : "#ccc",
              borderRadius: 20,
              width: 36,
              height: 36,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text style={{ color: "#fff", fontWeight: "bold" }}>↑</Text>
          </Pressable>
        </View>
      );
    }

    function ChatScreen() {
      const messages = useAuiState(
        (s) => s.thread.messages,
      ) as ThreadMessage[];

      return (
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === "ios" ? "padding" : "height"}
        >
          <FlatList
            data={messages}
            keyExtractor={(m) => m.id}
            renderItem={({ item }) => <MessageBubble message={item} />}
          />
          <Composer />
        </KeyboardAvoidingView>
      );
    }

    export default function App() {
      const runtime = useAppRuntime();

      return (
        <AssistantRuntimeProvider runtime={runtime}>
          <ChatScreen />
        </AssistantRuntimeProvider>
      );
    }
    ```
  </Step>
</Steps>

What's Next? \[#whats-next]

<Cards>
  <Card title="Migration from Web" description="Already using assistant-ui? Migrate your web app to React Native." href="/docs/react-native/migration" />

  <Card title="Custom Backend" description="Connect to your own backend API or manage threads server-side." href="/docs/react-native/custom-backend" />

  <Card title="Primitives" description="Composable native UI components for building chat interfaces." href="/docs/react-native/primitives" />

  <Card title="Example App" description="Full Expo example with drawer navigation, thread list, and styled UI." href="https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-expo" />
</Cards>