Skip to main content

ChatUIProvider

Enhance State Management: Boost Your Component's Functionality by Wrapping it with ChatUIProvider.

You can seamlessly integrate your main root file with the ChatUIProvider, allowing you to effortlessly incorporate any component throughout your entire application. This simplifies the process of using components independently across the app, eliminating the need to manage common inputs such as account information and PGP private keys, among others.

Usage

import { ChatUIProvider } from "@pushprotocol/uiweb";
import { darkChatTheme } from "@pushprotocol/uiweb";

export function App({ Component }) {
return (
<ChatUIProvider theme={darkChatTheme}>
<Component />
</ChatUIProvider>
);
}

Customization parameters

Customize the parameters as per your need and the chat component being used.

ParamTypeDefaultRemarks
accountstring-Supports wallet address or chain agnostic wallet address format
pgpPrivatekeystring-Decrypted pgp private key of the user
themeIChatTheme-Theme object, it can be custom theme object, lightChatTheme darkChatTheme
childrenReact.ReactNode-
envEnv-API env - 'prod' or 'staging'
signerSignerType-Ethers or Viem Signer

Note: Parameters in this style are mandatory.