# Add a chat to the React 18, TypeScript, Vite project as complete UI component

**URL:** <https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472>\
**Category:** Web\
**Created:** [September 30, 2024, 12:18pm UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472 "2024-09-30T12:18:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bohdan](https://avatars.discourse-cdn.com/v4/letter/b/bbce88/32.png) [@Bohdan](https://forum.social.plus/u/Bohdan)\
**Post date:** [September 30, 2024, 12:18pm UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/1 "2024-09-30T12:18:55Z")

</div>

Hi, I would like to create a full-featured chat component with logic with AmityUiKitChat, is it possible to add there or as a wrapper for user login, registration and logout, fully manage users in the central chat (status, add, remove from channels users) and what is the best way to start?

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [September 30, 2024, 2:28pm UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/2 "2024-09-30T14:28:54Z")

</div>

Hello, for web chat, we recommend implementing your own UI and using our SDK, which provides most of the features you’ll need for your project.

The available functions that can address your requirements are:

- Chat SDK docs: [https://docs.amity.co/amity-sdk/chat](https://docs.amity.co/amity-sdk/chat)
- Registration, login, logout: [https://docs.amity.co/getting-started/installation-and-authentication](https://docs.amity.co/getting-started/installation-and-authentication)
- User status: [https://docs.amity.co/amity-sdk/core-concepts/presence-state](https://docs.amity.co/amity-sdk/core-concepts/presence-state)
- Add and remove: [https://docs.amity.co/amity-sdk/chat/channels/join-leave-channel](https://docs.amity.co/amity-sdk/chat/channels/join-leave-channel)

---

<div class="post-metadata">

**Author:** ![Bohdan](https://avatars.discourse-cdn.com/v4/letter/b/bbce88/32.png) [@Bohdan](https://forum.social.plus/u/Bohdan)\
**Post date:** [October 2, 2024, 5:35am UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/3 "2024-10-02T05:35:55Z")

</div>

Can I implement my logic using this component of yours?

 ![Знімок екрана 2024-10-02 о 08.35.46](https://europe1.discourse-cdn.com/flex013/uploads/amity/original/1X/daaf95a44e6b74a7f30c3c8b66668645083d2441.png)

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [October 2, 2024, 6:41am UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/4 "2024-10-02T06:41:22Z")

</div>

Hello @Bohdan, yes, in case you want to implement the UIKit.

---

<div class="post-metadata">

**Author:** ![Bohdan](https://avatars.discourse-cdn.com/v4/letter/b/bbce88/32.png) [@Bohdan](https://forum.social.plus/u/Bohdan)\
**Post date:** [October 2, 2024, 7:20am UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/5 "2024-10-02T07:20:08Z")

</div>

For my project, I must use the UI kit, due to I need the complete UI interface and make this as soon as possible. According to documentation, I implement the AmityUiKitChat.

 ![Знімок екрана 2024-10-02 о 10.18.42](https://europe1.discourse-cdn.com/flex013/uploads/amity/original/1X/0dd43b86323139dd7cf5ac93b7f9a35856dd9b16.png)

Can I сontrol user login, registration and logout, fully manage users in the central chat (status, add, remove from channels users)? Since you don’t have this information and I don’t know how to manage the existing chat interface?

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [October 2, 2024, 9:56am UTC](https://forum.social.plus/t/add-a-chat-to-the-react-18-typescript-vite-project-as-complete-ui-component/1472/6 "2024-10-02T09:56:11Z")

</div>

Hello @Bohdan , Unfortunately, our web chat UI Kit doesn’t have the components that you need. As recommended in the above comment, you will need to implement your own UI and use our SDK.
