# UI Kit quickstart (/en/realtime-media/im/get-started-uikit/react-native)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Instant messaging connects people wherever they are and allows them to communicate with others in real time. Agora offers an open-source Chat UI Kit project on GitHub. With built-in user interfaces for key Chat features, the Agora Chat UI Kit enables you to quickly embed real-time messaging into your app without requiring extra effort on the UI.

    <CalloutContainer type="info">
      <CalloutDescription>
        For the latest Agora Chat UIKit documentation, refer to the [UIKit 2.x Documentation](https://github.com/AgoraLab/agora-chat-uikit) GitHub repository.
      </CalloutDescription>
    </CalloutContainer>

    Legacy UIkit 1.x documentation

    This page shows sample code to add peer-to-peer messaging into your app by using the Agora Chat UI Kit.

    ## Understand the tech [#understand-the-tech-4]

    The following figure shows the workflow of how clients send and receive peer-to-peer messages:

    Chat UI kit workflow

    ![Chat UI Kit peer-to-peer messaging workflow](https://assets-docs.agora.io/images/im/ui-kit-quickstart.png)

    1. Clients retrieve a token from your app server.
    2. Client A and Client B log in to Agora Chat.
    3. Client A sends a message to Client B. The message is sent to the Agora Chat server, and the server delivers the message to Client B. When Client B receives the message, the SDK triggers an event. Client B listens for the event and gets the message.

    ## Prerequisites [#prerequisites-4]

    For more information, see [Setting up the environment](https://reactnative.dev/docs/environment-setup).

    ## Project setup [#project-setup-4]

    ## Implementation [#implementation-5]

    ## Implement peer-to-peer messaging [#implement-peer-to-peer-messaging-4]

    ## Test your app [#test-your-app-4]

    ## Next steps [#next-steps-4]

    ## Reference [#reference-4]