Welcome to this tutorial on building a react chat app using the MinChat Chat SDK! In this article, we will be creating a fully functional react chat application, entirely on the front-end, using React.js. You won't need any server-side code – we will let the MinChat SDK handle all of the back-end work for us. By the end of this tutorial, you will have a fully functioning react chat application that you can customize and use however you like. Let's get started!' You can find the source code for this tutorial on . Github The lead image of this article was generated via model using the prompt 'chatbot app'. HackerNoon's AI Stable Diffusion Step 1: Breaking the react chat UI into components This tutorial uses the . MinChat react chat sdk To begin building a react chat app, it is important to understand that React is centered around the concept of components. The first step in creating a react chat app is to break down the chat UI into individual react chat components. One key component to start with is the root component, which serves as the common ancestor for all other components in the app. This root component will be the "App" component. function App() {
  return (
    <div style={{ position: "relative", height: "500px" }}>
      {/* ui components */}
    </div>
  );
} We are going to use a UI Kit called for the chat UI. go ahead and run the following command in the terminal Chat UI Kit React npm install @chatscope/chat-ui-kit-react @chatscope/chat-ui-kit-styles Now lets add the react chat ui components to our file App.js import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

function App() {
  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            <Message
              model={{
                message: "Hello World",
                sender: "Joe",
              }}
            />
          </MessageList>
          <MessageInput placeholder="Type message here" />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App; Your chat UI looks like this: Step 2: Configuring MinChat We are going to signup for an account on and get an API Key. MinChat Install the MinChat React chat sdk: npm install @minchat/react Lets create our two users who will be sending messages between each other: const firstUser = {
  id: "micheal",
  name: "Micheal Saunders",
};

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
}; Lets wrap the root with the MinChat Provider passing our API key and the current user that is chatting: index.js import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import { MinChatProvider } from "@minchat/react";

const root = ReactDOM.createRoot(document.getElementById("root"));

const firstUser = {
  id: "micheal",
  name: "Micheal Saunders",
};

root.render(
  <React.StrictMode>
    <MinChatProvider apiKey={906373408} user={firstUser}>
      <App />
    </MinChatProvider>
  </React.StrictMode>
);

reportWebVitals(); In Our file we import the hook to access the minchat object and start a new conversation with the second user using the hook. App.js useMinChat() useMessages(...) Our App.js file now looks like this: import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList,Message,MessageInput} from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from "@minchat/react";

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
};

function App() {
  const minchat = useMinChat();

  const chat = minchat.chat(secondUser);

  const { messages, sendMessage } = useMessages(chat);

  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            <Message
              model={{
                message: "Hello World",
                sender: "Joe",
              }}
            />
          </MessageList>
          <MessageInput placeholder="Type message here" />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App; Step 3: Connecting everything together We now want to be able to send messages and receive them as well as view messages that are sent and received in our react chat app, We are going to update the react chat component to be able to send the messages when submitted: MessageInput <MessageInput
  onSend={(_, textContent) => sendMessage({ text: textContent })}
  placeholder="Type message here"
/> We then want the messages to appear in the message list in real time making sure to
differentiate messages that are sent by the first user (who is our current user) and the second user: <MessageList>
  {messages &&
    messages.map((message) => {
      return message.user.id === "mercy" ? (
        <Message
          model={{
            message: message.text,
            sender: message.user.name,
          }}
        />
      ) : (
        <div style={{ justifyContent: "flex-end", display: "flex" }}>
          <Message
            model={{
              message: message.text,
              sender: message.user.name,
            }}
          />
        </div>
      );
    })}
</MessageList> The file should now look like this: App.js import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList,Message,MessageInput} from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from "@minchat/react";

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
};

function App() {
  const minchat = useMinChat();

  const chat = minchat.chat(secondUser);

  const { messages, sendMessage } = useMessages(chat);
  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            {messages &&
              messages.map((message) => {
                return message.user.id === "mercy" ? (
                  <Message
                    model={{
                      message: message.text,
                      sender: message.user.name,
                    }}
                  />
                ) : (
                  <div style={{ justifyContent: "flex-end", display: "flex" }}>
                    <Message
                      model={{
                        message: message.text,
                        sender: message.user.name,
                      }}
                    />
                  </div>
                );
              })}
          </MessageList>
          <MessageInput
            onSend={(_, textContent) => sendMessage({ text: textContent })}
            placeholder="Type message here"
          />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App; Your react chat app is now complete with in app chat functionality. You can take this a step further by creating a second react chat component which swaps the first user and second user and then have real-time communication and responses between the two. View the docs and be able to create loading states,error states, view online, typing indicator, etc. MinChat Conclusion In conclusion, this tutorial walks through the process of building a react chat application using the MinChat Chat SDK. The tutorial begins by explaining the concept of react chat components and how to break down the chat UI into individual react chat components. The tutorial then shows how to install and use the Chat UI Kit React library to create the chat UI, and provides code examples for each step along the way. By following the steps in this tutorial, you will be able to create a fully functional react chat application that you can customize and use as you like. is a great Chat API service that enables you to build in app chat functionality without worrying about building a backend or all the complexities involved in building real-time communication features. MinChat Tutorial is an extract from this . article

Save months of development time building chat functionality

Read My Stories

Too Long; Didn't Read

Questions about cloud security? Get answers here.

How to Build a React Chat App

Too Long; Didn't Read

Mundia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Build a React Chat App

Too Long; Didn't Read

Mundia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES