Add quickstart chat app interactive tutorial - send and receive message in less than 5 mins#685
Add quickstart chat app interactive tutorial - send and receive message in less than 5 mins#685
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
Add quickstart tutorial to send and receive XMTP messages in 5 minutes
Changes since #685 opened
Macroscope summarized 916eb01. |
jhaaaa
changed the title
docs/pages/chat-apps/quickstart.mdx
Outdated
| Then replace the contents of `<body>` in your `index.html` with: | ||
|
|
||
| ```html | ||
| <input id="message" type="text" placeholder="Type a message..." /> |
There was a problem hiding this comment.
Since vite includes a default style.css in their demo, maybe there's a way to class up the demo and hijack their existing theming.
docs/components/QuickstartSteps.tsx
Outdated
| import { keccak_256 } from "@noble/hashes/sha3.js"; | ||
|
|
||
| // Private key and address from the docs page widget (ephemeral — dev only) | ||
| const privateKey = new Uint8Array([${bytes}]); |
There was a problem hiding this comment.
It might be too early for this but we could use Uint8Array.fromHex(${hextString}) for the private key instead to make this look a little less overwhelming. It's a new method (Sept 2025) but it's well adopted
docs/components/QuickstartSteps.tsx
Outdated
|
|
||
| // Private key and address from the docs page widget (ephemeral — dev only) | ||
| const privateKey = new Uint8Array([${bytes}]); | ||
| const address = "${identity.address}"; |
There was a problem hiding this comment.
I think we need address and otherAddress here. I'm address on my quickstarted copy of the code and I'm chatting with otherAddress on the quickstart guide page, in the sidebar.
There was a problem hiding this comment.
Ah, @mproberts - I thought we wanted this to be a self-DM setup? =) The address and inbox ID are the same for the quickstart app and the live inbox in the docs. Am I understanding your feedback correctly? TY!
There was a problem hiding this comment.
Yup, I think this is where we got wires crossed. When I said "self" I meant you are in control of both but it's two separate intances so we're not reusing keys, we're chatting between two "inboxes" you just are controlling both. ie. you have inbox A = docs message box, inbox B = your new app/web/android/ios, inbox A messages inbox B so there's a Me and a You in the chat.
docs/components/QuickstartInbox.tsx
Outdated
| )} | ||
| <div style={{ marginTop: '0.375rem' }}> | ||
| <button className="qi-copy-btn" onClick={handleCopyKey}> | ||
| {copiedKey ? 'Copied!' : 'Copy private key'} |
There was a problem hiding this comment.
Likewise, this should be "Copy InboxID" as this is the inbox ID of the other participant. If this changes, ie. a page refresh, we'd copy paste over the otherInboxId hex string in our local version of the code
3 participants
Preview: https://docs-xmtp-org-git-int-quickstart-xmtplabs.vercel.app/chat-apps/intro/quickstart