Get started with the XMTP Browser SDK

Use the XMTP Browser SDK to build web-based apps, tools, and experiences with secure, private, and decentralized messaging.

The guide provides some quickstart code, as well as a map to building a secure messaging app with XMTP, including support for:

End-to-end encrypted direct message and group chat conversations
Rich content types (attachments, reactions, replies, and more)
Spam-free inboxes using user consent preferences

Quickstart

Browser

// 1. Create an EOA or SCW signer.
// Details depend on your app's wallet implementation.
import type { Signer, Identifier } from "@xmtp/browser-sdk";
 
const signer: Signer = {
  type: "EOA",
  getIdentifier: () => ({
    identifier: "0x...", // Ethereum address as the identifier
    identifierKind: "Ethereum"
  }),
  signMessage: async (message: string): Uint8Array => {
    // typically, signing methods return a hex string
    // this string must be converted to bytes and returned in this function
  }
};
 
// 2. Create the XMTP client
import { Client } from "@xmtp/browser-sdk";
const client = await Client.create(signer, {
  // Note: dbEncryptionKey is not used for encryption in browser environments
});
 
// 3. Start conversations
const group = await client.conversations.newGroup(
  [bo.inboxId, caro.inboxId],
  createGroupOptions /* optional */
);
 
// 4. Send messages
await group.send("Hello everyone");
 
// 5. List, stream, and sync
// List existing conversations
const allConversations = await client.conversations.list({ consentStates: [ConsentState.Allowed] });
const allGroups = await client.conversations.listGroups({ consentStates: [ConsentState.Allowed] });
const allDms = await client.conversations.listDms({ consentStates: [ConsentState.Allowed] });
// Stream new messages
const stream = await client.conversations.streamAllMessages({
  consentStates: [ConsentState.Allowed],
  onValue: (message) => {
    console.log("New message:", message);
  },
  onError: (error) => {
    console.error(error);
  }
});
 
// Or use for-await loop
for await (const message of stream) {
  console.log("New message:", message);
}
// Sync all new welcomes, preference updates, conversations,
// and messages from allowed conversations 
await client.conversations.syncAll(["allowed"]);