Pick a name and start chatting. Join public channels, start 1:1 and group chats, and reply in threads, with reactions, mentions, and read receipts. Open source, built with Next.js and the PubNub Chat SDK.
The Chat demo is an open-source Next.js app built with the PubNub Chat SDK. Enter any name to log in. The app creates your user and puts you in two public channels, General Chat and Work Chat. From there you can start 1:1 chats and private groups with other people using the demo.
Users, channels, and memberships are saved with App Context, so your chats are still there when you log in again. Each channel loads its recent messages from Message Persistence. On the hosted demo, messages are kept for one day. Each user gets an Access Manager token before connecting. The demo is open to everyone, so don't post anything private. To see both sides of a chat, open it in two browser windows with different names. The source code is on GitHub.
Talk in the two public channels, or search for a user and start a direct chat. Pick two or more people to create a private group. New chats show up for the other members right away.
Hover over a message to react with an emoji, quote it in your reply, or pin it to the top of the channel. Everyone in the channel sees the change live.
Open a thread on any message and keep the side conversation out of the main channel. The parent message gets a Replies link.
Type @ and the first letters of a name to mention someone, or # to link a channel. Mentioned users see a pop-up with the message.
See when someone is typing in a 1:1 or group chat and when your message has been read. Channels you are not looking at show an unread count, and you can mark them all as read.
A green dot shows who was active in the last few minutes. Change your display name or a group’s name, and other users see the update without a reload.
Clone the app, add your own keys, and run it locally. The README explains each Chat SDK feature the demo uses.
GitHub
The complete source. Enable App Context and Message Persistence on your keyset, add your keys to .env, then run yarn install and yarn dev in chat-sdk-demo-web.
git clone https://github.com/PubNubDevelopers/Chat-SDK-Demo-Web.gitLog in as a support agent or as a customer and see how support chat, bot-to-agent handoff, and case management work in real time. Built with React and the PubNub Chat SDK.
Moderate a chat app from one dashboard. Filter text and images before they are published, review messages, and flag or ban users. Open source, built with React and the PubNub JavaScript SDK.
Create a stream as the host, open the viewer link, and chat with your audience next to the video. Viewers can report messages and users to the host. Built with Next.js and the PubNub Chat SDK.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
