Example Chat App using the JS SDK for Stream Chat
Quick Links
- Follow along in this complementary Guide
- Register to get an API key for Stream Chat
- JS Chat API docs
- Knowledge Base Articles
Use
This is a simple example chat app and guide to using
stream-chat- the JS SDK for Stream Chat.
The purpose of this repo is to showcase Stream Chat basic concepts, use, and best practices.
To try out this example chat app, follow these steps:
- Clone repo and install dependencies - Run:
git clone https://github.com/zacheryconverse/basic-chat.git
npm install
- Create a .env file at root level and another in the server folder
- Create an account on Stream. Get Started for Free with an Unlimited 30-Day Chat Messaging Trial
- Go to your Stream Dashboard to find your app key and secret
- Add your app key to the root .env file you created:
REACT_APP_KEY=your_app_key- Add your app key and secret to the .env file you created in the server folder:
REACT_APP_KEY=your_app_key
REACT_APP_SECRET=your_app_secret- Add mock users (optional) - Run:
npm run upsertUsers
- Start client and server - Run:
npm run dev
- Navigate to http://localhost:3000/
Review our JS Chat API docs.
Review our Knowledge Base Articles. Especially this Success Checklist
Note: The stream-chat-js library allows for fully typed responses using generics.
If you would like to try pre-styled and fully featured React UI Components instead of this low-level JS Library, use our Official React SDK for Stream Chat
After deciding to try out Stream, it can be a little daunting with the number of ways to use the product. One of the earliest and most critical decisions is whether to use a component library, a low-level library, or even the Rest API.
With Stream chat components, you can support any chat use case:
- Livestreams like Twitch or Youtube
- In-Game chat like Overwatch or Fortnite
- Team style chat like Slack
- Messaging style chat like Whatsapp or Facebook's messenger
- Commerce chat like Drift or Intercom
The best place to start using the UI Components is the React Chat SDK Tutorial. It teaches you how to use the React Chat SDK and also shows how to make frequently required changes.
Stream is free for most side and hobby projects. To qualify your project/company needs to have < 5 team members and < $10k in monthly revenue. For complete pricing details visit our Chat Pricing Page
We've recently closed a $38 million Series B funding round and we keep actively growing. Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world.
Check out our current openings and apply via our job board.