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 of this page will share an inbox ID. This means you can use your quickstart app to send messages to the XMTP Live Inbox and vice versa.

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:

import { defineConfig } from "vite";
 
export default defineConfig({
  optimizeDeps: {
    exclude: ["@xmtp/browser-sdk", "@xmtp/wasm-bindings"],
  },
});

2. Add the starter code

In your project, replace src/main.js with the code below. The code includes the private key from the XMTP Live Inbox widget. This means your quickstart app and XMTP Live Inbox share the same XMTP inbox ID. By the end of this tutorial, when you send a message from your quickstart app, it will display in the XMTP Live Inbox, and vice versa.

Then replace the contents of <body> in your index.html with:

<input id="message" type="text" placeholder="Type a message..." />
<button id="send">Send</button>
<div id="messages"></div>
<script type="module" src="/src/main.js"></script>

3. Connect to XMTP

In src/main.js, replace // Step 3 goes here in main() with the code below. Then run npm run dev. Your quickstart app should display: Connected! Inbox ID: <Inbox ID matching the one in the XMTP Live Inbox>

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