Skip to content

Build a quickstart chat app

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

Your quickstart app and the XMTP Live Inbox in the sidebar are two separate XMTP inboxes. By the end of this tutorial, they'll be able 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. privateKey and address are for your quickstart app. otherAddress is the address of 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! 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 sent from your quickstart app display there. Additionally, messages sent from the XMTP Live Inbox appear in your 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.