Getting Started

Installing

Install reachat in your project by following the steps below.

1. Install the package

npm i reachat --save

2. Install Reablocks and Tailwind

Open your terminal, navigate to your project's root directory, and use the reablocks-cli to initialize reablocks in your project:

npx reablocks-cli@latest init

If you don't already have Tailwind installed in your project, include it:

npm install -D tailwindcss
npx tailwindcss init

Then add the following Tailwind directives to your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, wrap your application with the ThemeProvider component from reablocks.

import { ThemeProvider, theme } from 'reablocks';
 
export const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
);

3. Include Chat components in your project

import {
  Chat,
  ChatInput,
  Conversation,
  NewSessionButton,
  Session,
  SessionGroups,
  SessionListItem,
  SessionMessage,
  SessionMessages,
  SessionMessagePanel,
  SessionMessagesHeader,
  SessionsGroup,
  SessionsList,
} from "reachat";
 
export default function App() {
  return (
    <Chat sessions={[]}>
      <SessionsList>
        <NewSessionButton />
        <SessionGroups>
          {(groups) =>
            groups.map(({ heading, sessions }) => (
              <SessionsGroup heading={heading} key={heading}>
                {sessions.map((s) => (
                  <SessionListItem key={s.id} session={s} />
                ))}
              </SessionsGroup>
            ))
          }
        </SessionGroups>
      </SessionsList>
      <SessionMessagePanel>
        <SessionMessagesHeader />
        <SessionMessages>
          {(conversations) =>
            conversations.map((conversation) => (
              <SessionMessage
                key={conversation.id}
                conversation={conversation}
              />
            ))
          }
        </SessionMessages>
        <ChatInput />
      </SessionMessagePanel>
    </Chat>
  );
}

3. Connect your provider

See Demos/Open AI for an example of how to connect your provider.

Developing

You can also develop Reachat locally by cloning the repository and running the development server.

1. Clone the repository

git clone https://github.com/your-repo/reachat.git
cd reachat

2. Install dependencies

npm install

3. Start the development server

npm run start

4. Open your browser

Navigate to http://localhost:3000 to see Reachat in action.

Example Repo

To see a complete example of how to use Reachat, check out the example repo (opens in a new tab).

👋 ⏐ Introduction Getting Started