Get started with the XMTP Browser SDK

// 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(["allowed"]);
try {
  for await (const message of stream) {
    console.log("New message:", message);
  }
} catch (error) {
  console.error(error);
}
// Sync all new welcomes, preference updates, conversations,
// and messages from allowed conversations 
await client.conversations.syncAll(["allowed"]);