React Chat App With Custom Commands and Webhooks

This full-stack tutorial shows you how to create a chat app using Stream's React Chat SDK and incorporating Stream Webhooks to enable custom /slash commands.

To show you how to create custom commands, you'll integrate Google Sign-In and retrieve events from a Google calendar with the command /gcal.

Getting Started

If you want to follow along, you'll need:

• A free Google Cloud Platform account and Stream account.
• A free Stream account
• A free ngrok account

Quickstart

To run this project locally:

• Clone this repo:

git clone https://github.com/ZPain8464/google-int-react.git

• Install dependencies:

npm i

• In your .env file, add your Stream API Key and Google Client ID

• Run npm start

• Create your webhook URL:

1. Go to your Stream dashboard
2. Select your app
3. Select Chat > Overview in your nav menu
4. Under Realtime in the Webhook URL field, enter your ngrok URL with /auth/handlewebhook (e.g. https://XXX.ngrok.io/auth/handlewebhook)
5. Click Save

• See the backend repo to wire up with your endpoints.