Get started

Push Chat enables web3 native messaging between wallets, groups, NFTs or even conditional (gated) groups. To do so, you will be using Push SDK API that will abstract away the complexity of authentication, encryption, signing, sending and receiving of messages.

Speed run

The following speed run is designed to give you a quick overview of usage and demonstrates how Push Chat can be integrated successfully in minimal lines of code.

js

// Import Push SDK & Ethers
import { PushAPI, CONSTANTS } from "@pushprotocol/restapi";
import { ethers } from "ethers";

// Creating a random signer from a wallet, ideally this is the wallet you will connect
const signer = ethers.Wallet.createRandom();

// Initialize wallet user
// 'CONSTANTS.ENV.PROD' -> mainnet apps | 'CONSTANTS.ENV.STAGING' -> testnet apps
const userAlice = await PushAPI.initialize(signer, {
  env: CONSTANTS.ENV.STAGING,
});

// This will be the wallet address of the recipient
const bobWalletAddress = "0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666";

// Send a message to Bob
const aliceMessagesBob = await userAlice.chat.send(bobWalletAddress, {
  content: "Gm gm! It's a me... Mario",
});

// Initialize Stream
const stream = await userAlice.initStream([CONSTANTS.STREAM.CHAT]);

// Configure stream listen events and what to do
stream.on(CONSTANTS.STREAM.CHAT, (message) => {
  console.log(message);
});

// Connect Stream
stream.connect();

Installation

js

// Install Libraries
npm install @pushprotocol/restapi@latest @pushprotocol/socket@latest ethers@^5.7

Quickstart from SDK repos

Workshop Video

Testing

Sending message

Head to our app and talk to PushAI which stands for Prioritize Using Silly Humor And Irony. It's addictive and you have been warned! Alternatively, msg 0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666 or pushai.eth from any frontend or backend that supports Push Chat!

Push SDK playground and full API coverage

Full API coverage with sample runable code can be found in the examples below:

• Push SDK Playground to checkout abstracted API calls in action. Follow Push SDK playground tutorial for step by step guide.
• React Components Example to checkout frontend components of Push Chat for easy integration in any React app. Follow Push SDK React playground for step by step guide.
• Push SDK React Playground is also hosted live at https://react-playground.push.org/

Push Chat live playground

// DO NOT FORGET TO IMPORT LIBRARIES// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, ChatView } from @pushprotocol/uiweb;
function App(props) {
  return (
    <>
      <h2>
        Live chat with pushai.eth, connect your wallet and chat to get sassy
        response from PushAI.eth
      </h2>
      <div style={{ height: "75vh", margin: "20px auto" }}>
        <ChatUIProvider>
          <ChatView
            chatId="0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666"
            limit={10}
            isConnected={true}
            onVerificationFail={() => setShowFaucet(true)}
            verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
          />
        </ChatUIProvider>
      </div>
    </>
  );
}

LIVE PREVIEW