---
source_url: https://www.pubnub.com/docs/chat/chat-sdk
title: PubNub JavaScript Chat API & SDK Docs 1.0.1
updated_at: 2026-06-04T11:09:09.355Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# PubNub JavaScript Chat API & SDK Docs 1.0.1

The JavaScript Chat SDK helps you build feature-rich chat apps or add chat to existing applications. Written in TypeScript, the SDK builds on the [JavaScript SDK](https://www.pubnub.com/docs/sdks/javascript) and PubNub APIs to provide a streamlined developer experience.

## Why use the Chat SDK?

The Chat SDK simplifies chat development with these benefits:

* **Chat-focused methods** - Call intuitive methods like [startTyping()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/typing-indicator#start-typing) and [join()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/join) instead of working with low-level APIs.
* **Built-in features** - Use ready-made features like [quotes](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes), [mentions](https://www.pubnub.com/docs/chat/chat-sdk/build/features/users/mentions), [channel references](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/references), [threads](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads), [rate limiting](https://www.pubnub.com/docs/chat/chat-sdk/build/configuration#initialize-pubnub), and [read receipts](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/read-receipts).
* **Framework flexibility** - Build web, mobile, or desktop apps with React, React Native, Vue.js, Angular, Electron, Svelte, Nest, Express, or any JavaScript-based framework.
* **UI freedom** - Design your own interface or use open-source UI libraries like [Chat UI Kit](https://github.com/chatscope/chat-ui-kit-react) (React) or [Gifted Chat](https://github.com/FaridSafi/react-native-gifted-chat) (React Native).

## Learn more

Explore the **Learn** section for deeper understanding:

* [Chat SDK architecture](https://www.pubnub.com/docs/chat/chat-sdk/learn/why-chat-sdk) - Design principles and structure
* [Access control](https://www.pubnub.com/docs/chat/chat-sdk/learn/access-control) - Authentication and authorization
* [Chat SDK entities](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/chat) - Core objects, properties, and methods
* [Glossary](https://www.pubnub.com/docs/chat/chat-sdk/learn/glossary) - Key terms and concepts

## Installation

The JavaScript Chat SDK is available as the `@pubnub/chat` package. You can install it using a package manager or load it directly from the PubNub CDN.

:::tip Environment setup
For detailed guidance on Node.js versions, TypeScript configuration, and modern build tools, refer to the [JavaScript Environment Setup](https://www.pubnub.com/docs/sdks/javascript/environment-setup) guide.
:::

### Package manager

Install the `@pubnub/chat` package using npm, yarn, pnpm, or bun:

```bash
npm install @pubnub/chat
```

```bash
yarn add @pubnub/chat
```

```bash
pnpm add @pubnub/chat
```

```bash
bun add @pubnub/chat
```

### CDN

Alternatively, include the SDK directly in your HTML by referencing the PubNub CDN:

```html
<script src="https://cdn.pubnub.com/sdk/js-chat/pubnub-chat.1.0.1.js"></script>
```

Once installed, [initialize the Chat SDK](https://www.pubnub.com/docs/chat/chat-sdk/build/configuration) to configure it for the features you want to implement.

The JavaScript Chat SDK is also available on [GitHub](https://github.com/pubnub/kmp-chat/tree/master/js-chat).

## Get started

Follow these steps to build your first chat app:

1. Create a PubNub account - Sign up at the Admin Portal and create an app. You need the publish and subscribe keys from your keyset. Sign upDon't feel like leaving this page to sign up? Required keyset configurationTo use the [getChannels()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/list), [getChannelSuggestions()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/references), [getUsers()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/users/list), and [getUserSuggestions()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/users/mentions) methods in the Chat SDKs with Access Manager, you must uncheck the **Disallow Get All Channel Metadata** and **Disallow Get All User Metadata** checkboxes in the App Context section of your keyset configuration in the [Admin Portal](https://admin.pubnub.com).
2. Run the sample app - Follow the Sample chat guide to see a working example.
3. Build your app: Initialize the Chat SDK with your keys and settings., Add channels, users, messages, and other features.

## Sample apps

Explore working examples:

| App | Description |
| --- | --- |
| [Interactive chat demo](https://www.pubnub.com/demos/chat/) | Full-featured TypeScript demo ([mobile version](https://www.pubnub.com/demos/chat-sdk-mobile/)) |
| [Direct chat (React)](https://www.pubnub.com/docs/chat/chat-sdk/build/sample-chat) | 1:1 chat app with Getting Started guide |
| [Group chat (React Native)](https://github.com/pubnub/js-chat/tree/master/samples/react-native-group-chat) | Multi-user chat sample |