\n\n> The official React components for OneChat, a service for\n> building chat applications.\n\n**Quick Links**\n\n- [Register](https://openbot.chat/chat/trial/) to get an API key for OneChat\n- [React Chat Tutorial](https://openbot.chat/chat/react-chat/tutorial/)\n- [Demo Apps](https://openbot.chat/chat/demos/)\n- [Component Docs](https://openbot.chat/chat/docs/sdk/react/)\n- [Chat UI Kit](https://openbot.chat/chat/ui-kit/)\n- [Internationalization](#internationalization)\n\nWith our component library, you can build a variety of chat use cases, including:\n\n- Livestream like Twitch or YouTube\n- In-game chat like Overwatch or Fortnite\n- Team-style chat like Slack\n- Messaging-style chat like WhatsApp or Facebook's Messenger\n- Customer support chat like Drift or Intercom\n\n## React Chat Tutorial\n\nThe best way to get started is to follow the [React Chat Tutorial](https://openbot.chat/chat/react-chat/tutorial/). It shows you how to use this SDK to build a fully functional chat application and includes common customizations.\n\n## Free for Makers\n\nOneChat is free for most side and hobby projects. To qualify, your project/company must have no more than 5 team members and earn less than $10k in monthly revenue.\nFor complete pricing and details visit our [Chat Pricing Page](https://openbot.chat/chat/pricing/).\n\n## Installation\n\n### Install with NPM\n\n`npm install react react-dom @openbot/aibot-uikit`\n\n### Install with Yarn\n\n`yarn add react react-dom @openbot/aibot-uikit`\n\n### Install via CDN\n\n```\n\n\n\n```\n\n## Example Apps\n\nWe have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://openbot.chat/chat/demos/) on our website.\n\n## Docs\n\nWe use a doc generator to build our [component documentation](https://openbot.chat/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.\n\n## TypeScript Support\n\nPlease read the [TypeScript guide](https://github.com/botaas/aibot-uikit/wiki/Typescript-support) for details and implementation assistance.\n\n## Component Reusability\n\nFor components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `MessageTeam`, without affecting any logic in the app.\n\n```jsx\n\n \n \n \n \n \n \n\n```\n\n### Customizing Styles\n\nThe preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any OneChat styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:\n\n```js\nimport '@stream-io/stream-chat-css/dist/css/index.css';\nimport './App.css';\n```\n\n## Internationalization\n\nOur library supports auto-translation for various user languages. Please read our internationalization [documentation](https://openbot.chat/chat/docs/sdk/react/customization/translations/) for further details and setup guidance.\n\n## Contributing\n\nWe welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.\n\n## We are hiring!\nOur APIs are used by more than a billion end-users, and by working at OpenBot, you have the chance to make a huge impact on a team of very strong engineers.\n\nCheck out our current openings and apply via [OpenBot's website](https://openbot.chat/team/#jobs).\n","readmeFilename":"README.md"}
![\"react](\"https://i.imgur.com/SRkDlFX.png\")
\n