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 can send messages to 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. The code includes a private key for your quickstart app and 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.

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 yet 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

Ready to build a full-fledged chat app with XMTP?

Get started