Quickstart

Check out the replit live code example:

• Replit Live Example

Get started

npm install @xmtp/xmtp-js ethers@5.7.0

Import libraries

To start with XMTP, install the XMTP client SDK:

const { Wallet } = require("ethers");
const { Client } = require("@xmtp/xmtp-js");

Initialize the wallet

You'll want to replace this with a wallet from your application

// You'll want to replace this with a wallet from your application
const wallet = Wallet.createRandom();
console.log("Wallet address: " + wallet.address);
//eg. Wallet address 0xd8dA6BF26964aF9D7eEd9e03E53415D37

Create a client

A client is created that requires passing in a connected wallet that implements the Signer interface. Use client configuration options to change parameters of a client's network connection.

const xmtp = await Client.create(wallet, { env: "dev" });
console.log("Client created", xmtp.address);
//eg. Client created 0xd8dA6BF26964aF9D7eEd9e03E53415D37

Check if an address is on the network

First you need to check if the address you want to message is on the XMTP network. You can do this by calling client.canMessage with the address you want to message.

//Message this XMTP message bot to get an immediate automated reply:
//gm.xmtp.eth (0x937C0d4a6294cdfa575de17382c7076b579DC176) env:production
const WALLET_TO = "0x20B572bE48527a770479744AeC6fE5644F97678B";
const isOnProdNetwork = await xmtp.canMessage(WALLET_TO);
console.log("Can message: " + isOnProdNetwork);
//eg. Can message: true

Start a new conversation

You can create a new conversation with any EVM address activated on the XMTP network. For now we are only compatible with EVM wallets

const conversation = await xmtp.conversations.newConversation(WALLET_TO);
console.log("Conversation created", conversation);
//eg. Conversation created: {Object}

Send a message

To send a message, the recipient must have already started their client at least once and consequently advertised their key bundle on the network.

const message = await conversation.send("gm");
console.log("Message sent", message);
//eg. Message sent: {Object}

Stream messages

You can receive the complete message history in all conversations.

for await (const message of await xmtp.conversations.streamAllMessages()) {
  console.log(`New message from ${message.senderAddress}: ${message.content}`);
}
//eg. New message from 0xd8dA6BF26964aF9D7eEd9e03E53415D37: gm

Quickstarts 🏁

• ReactJS / NextJS / React Hooks
• VueJS / NuxtJS
• Dart
• Kotlin
• Swift
• React Native
• Firebase Functions / NodeJS
• Nodebook / Replit

Example apps 📲

• React Native app

• New React Playground 🔥

  • Local DB
  • Message reactions
  • Message replies
  • Read receipts
  • Attachments

Need to send a test message?

Message this XMTP message bot to get an immediate automated reply:

• gm.xmtp.eth (0x937C0d4a6294cdfa575de17382c7076b579DC176)

🤖 Powered by Chainjet

Troubleshooting

If you get into issues with Buffer and polyfills check out our fix below:

1. Install buffer dependency

npm i buffer

2. Create a new file polyfills.js in the root of your project

import { Buffer } from "buffer";

window.Buffer = window.Buffer ?? Buffer;

3. Import it into your main file on the first line

• ReacJS: index.js or index.tsx
• VueJS: main.js
• NuxtJS: app.vue

//has to be on the first line of the file for it to work
import "./polyfills";

4. Update config files

• Webpack: vue.config.js or webpack.config.js:

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
      }),
    ],
  },
  transpileDependencies: true,
};

• Vite: vite.config.js:

import { defineConfig } from "vite";
import { Buffer } from "buffer";

export default defineConfig({
  /**/
  define: {
    global: {
      Buffer: Buffer,
    },
  },
  /**/
});

• NuxtJS: nuxt.config.js:

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.node = {
          Buffer: true,
        };
      }
    },
  },
};