# Robin with React

### Add Messaging to Your React App

Add chat functionality to your React app — whether you are building for mobile-first or desktop users, customize Robin UI to match your app’s theme. Take advantage of the Robin API and deploy messaging solutions in very little time.

{% hint style="info" %}
Do you build frontend apps with Vue? Check out [Robin with Vue](https://docs.robinapp.co/messaging-with-robin/sdks-for-ui-kit/robin-with-vue) instead.
{% endhint %}

### Prerequisites

The following are required to get your chat app up and running:

1. API Key - Learn about how to get your API Keys in [Setting up your Robin account](https://docs.robinapp.co/guides/setting-up-your-robin-account#api-keys)
2. Current user’s [RUT](https://docs.robinapp.co/messaging-with-robin/guides/what-is-the-robin-user-token-rut) and Name - Robin User Token is a Unique Identifier of every user in your Robin App.
3. All users to be included in your chat app.

### Install the React SDK

{% tabs %}
{% tab title="NPM" %}

```bash
npm install robin-react --save
```

{% endtab %}

{% tab title="Yarn" %}

```bash
yarn add robin-react
```

{% endtab %}
{% endtabs %}

### Mount Robin and Start Messaging

You can set up Robin quickly by importing the `RobinChat` component in your Javascript entry file and mounting it with its required props.

```jsx
// App.js 

import { RobinChat } from 'robin-react'

export default function App() {
  return (
    <RobinChat 
      apiKey="YOUR_API_KEY"
      users="YOUR_LIST_OF_USERS"
      userToken="YOUR_ROBIN_USER_TOKEN"
			userName="YOUR_USERNANE" />
  );
}
```

{% hint style="info" %}
Want to customize Robin to match your app’s theme? Check out [Customizing Robin for your Brand](https://docs.robinapp.co/messaging-with-robin/guides/customizing-robin-for-your-brand)
{% endhint %}