Skip to content

Build a quickstart chat app

Follow this tutorial to build a quickstart chat app with XMTP.

When you build your quickstart app, you will use a key pair to create an identity and register it with XMTP. This gives you an inbox ID, which is a stable identifier that serves as the destination for your messages.

Separately, the XMTP Live Inbox in the sidebar also has a key pair that we already used to create an XMTP inbox ID you can send messages to.

By the end of this tutorial, you'll be able to use the quickstart chat app and XMTP Live Inbox to message each other.

1. Set up your project

Create a Vite project with the vanilla template.

npm create vite@latest my-xmtp-app -- --template vanilla

Then move into the project and install the XMTP SDK and key generation libraries:

cd my-xmtp-app
npm install @xmtp/browser-sdk @noble/curves @noble/hashes

The XMTP SDK uses WASM, which requires a Vite config change. Add vite.config.js to your project root:

2. Add the starter code

In your project, replace src/main.js with the code below. yourAddress and yourPrivateKey are the key pair for the identity you'll register with XMTP to get an inbox ID. You can compare the yourAddress to an email address and the yourPrivateKey to an email password. theirAddress is the address of the identity used by the XMTP Live Inbox. These are the two sides of the conversation.

Then replace the contents of <div id="app"> in your index.html with:

Run npm run dev to start your app. You should see the UI with a text input and Send button.

3. Connect to XMTP

In src/main.js, replace // Step 3 goes here in main() with the code below. Your quickstart app should display its own Inbox ID. For example: Connected! Your inbox ID: 89cd9d2dbb077080842102655f7ab3bced74e837769a239c6ec888708cb93b26

4. Send a message

Replace // Step 4 goes here in main() with the code below.

Then type a message in your quickstart app and Send. The message appears in the XMTP Live Inbox on this page but not in your quickstart app.

With XMTP, sending a message delivers it to the network, but doesn't automatically update the local UI (unless you use optimistic sending). The XMTP Live Inbox displays the message because it already has a stream listening for new messages. You'll add streaming to your quickstart app in the next step.

5. Stream messages

Replace // Step 5 goes here in main() with the code below. Now messages you send from the quickstart app display there. Additionally, messages you send from the XMTP Live Inbox appear in the quickstart app.

Next steps

  • Try the xmtp.chat web app for more development and debugging tools.

  • Ready to build a full-fledged chat app with XMTP? See Get started.