> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatropic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Add Chatropic chat to your React Native app

This guide takes you from an empty screen to a working chat launcher in your app. You will deploy the **Mobile app** profile, install the SDK, and render the launcher.

## Prerequisites

* `react >= 18` and `react-native >= 0.73`
* A teammate (or you) has configured an agent in the dashboard
* The **Mobile app** deploy profile is set up, as described in the [React Native deploy guide](/user-guides/deploy/react-native)

<Steps>
  <Step title="Deploy the Mobile app profile">
    In the dashboard, open **Deploy > Mobile app**, configure the **Content**, **Style**, and **AI** tabs, then click **Deploy** and confirm the profile shows **Live**. The SDK loads all branding and copy from this profile at startup.
  </Step>

  <Step title="Copy your publishable key">
    On **Deploy > Mobile app**, open the **Embed** tab and copy the **publishable key** (prefix `cpk_live_`). This key is scoped to widget runtime calls and is safe to ship in app code.
  </Step>

  <Step title="Install the SDK">
    ```bash theme={null}
    npm install @chatropic/react-native
    ```

    For local chat history, also install the optional storage package:

    ```bash theme={null}
    npm install @react-native-async-storage/async-storage
    ```
  </Step>

  <Step title="Render the launcher">
    ```tsx theme={null}
    import { ChatWidgetLauncher } from "@chatropic/react-native";

    export function App() {
      return (
        <>
          {/* Your app UI */}
          <ChatWidgetLauncher
            publishableKey="cpk_live_..."
            onNavigate={(path) => {
              // Wire agent deeplinks to your navigation stack.
            }}
          />
        </>
      );
    }
    ```
  </Step>

  <Step title="Send a test message">
    Run your app, tap the launcher, and ask a question your agent's knowledge can answer. The reply should be grounded in the documents your team uploaded.
  </Step>
</Steps>

## What success looks like

* The launcher opens with your configured welcome message, colors, and suggested prompts
* A knowledge question returns a grounded answer
* The conversation appears in the dashboard under **Chat logs**

<Warning>
  The SDK connects to the Chatropic production host automatically. You do not configure an API host, and you should never embed workspace API keys or other server credentials in app code. The publishable key is the only credential the app needs.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="React Native SDK guide" icon="mobile-screen" href="/developer-guides/integration/react-native-sdk">
    Full-screen chat, signed-in users, and every prop.
  </Card>

  <Card title="Authentication & identity" icon="key" href="/developer-guides/quick-start/authentication">
    Connect conversations to signed-in users.
  </Card>

  <Card title="Messages & sessions" icon="comments" href="/developer-guides/integration/messages-and-sessions">
    How conversations persist across turns.
  </Card>

  <Card title="SDK reference" icon="book" href="/developer-guides/reference/sdk-reference">
    Components, props, and callbacks.
  </Card>
</CardGroup>