XMTP 🛠️ How to build web3 native messaging apps with XMTP

foreign [Music] you all I'm fabri from xmdp and this is Nick and we are going to introduce you to the secure messaging Network for web free so you might have seen in the news that xmdp launched with coinbase wallet last week if you haven't tried it yet the only way to get access to the feature is by scanning one of these QR codes here but it's pretty cool you get wall-to-wall messaging inside coinbase wallet there's no signatures there's no web 3 you know UI really looks like a messaging app and so if you scan this QR code right now uh we can show you what it looks like on the other end so this is xmdp.chat another app on the xmdp network if you scan that QR code in the last slide you can send us message and say hi and uh it'll show up right here any takers sure they feel that again yeah oh look at this so all works in real time um and this is interoperable across all 350 apps in the xmtp network um you could also do it from Converse which is a great mobile app built here in Paris um you know we just focus on building an interoperable messaging standard none of these apps are ours other than this one you're looking at right now which is a reference implementation yeah so let's start with a problem right so we can think of Communications today has been broken this is how web2 Works independent platforms that don't communicate with each other they start the information we are not the owners of the information so we think this should be better there is also the thing that in each of these centralized servers you don't own your your identity right they own your identity we only rent it so web free is converging into this unique identity which is called the wallet and what the what it means is that we own our assets and we also own our Communications and that's on the side of web 2 and Communications but we can also think about more practical challenges that today exist in web free that is that we cannot message there is no open Channel between one or two other Communications so if you're a developer and you're busy end up or a protocol you cannot communicate with your users if you are a Creator you cannot communicate with your audiences who purchase nfts um and again there is no way for users to make communicate with each other so for this xndp has proposed a solution that Nick is going to introduce you to you now sure so xmdp is an open protocol for web 3 messaging we already have 350 apps built on top of this protocol we have sdks for every popular language if you want to build an app this weekend we have the tooling to support you it is gasless uh very fast to set up totally free to use and so when anyone Builds an app on the xmdp network you can immediately reach any of the wallets that are already on the network which we have about a million wallets today let's look at some of the examples this is converse which is uh iMessage xmtp it's really fast really clean and gets push notifications right to your phone uh just a great simple messaging and phase this is orb which is the biggest mobile app for the lens ecosystem lens is partnered with xmtp if you've used lens you probably have an xmtp identity you might not even know you're using our protocol but we power the DMS all across the lens ecosystem and another 300 plus apps let's see if this video plays um across all different categories we have web3 gaming we have um you know nfts messaging their holders uh yeah decentralized marketplaces really a broad range of applications all running on one protocol all able to talk to each other so why don't we dig in and look at some of the code and see what it's like to build an app on xmtb we have a replit here so anyone with their laptop you can follow this short link and follow along just in the replet you make changes on your own or you can scan that QR code and that will also send you to the replit give you guys another second uh to take down the link before I hop over all right so this repl single file really small app just to test the basic functionality of xmtp for the purposes of this demo we are not going to deal with wallet connections uh we're just going to spin up a random wallet so in your app you'd have to use something like wallet connect to get access to a wallet but here we are just going to use the very helpful create random create a random wallet when this app starts up now if you want to create an xmtb client you import the library client create passing a wallet this would be any either signer or something compatible with that and an environment we're going to use the dev environment since this is a demo and um you know we don't want to send messages that people are going to see in their actual apps and first thing we can do is just check and see if a mess or if a user is on the network so to message someone on xmtp they have to have used some xmdp app at least once we have a handy function client can message that will tell you yes or no is this wallet address on the network so why don't we try running this perfect and hit run and it'll build this app and do the can message check oh maybe it's doing a few more things too let's see can message true so we're just looking at fibery's wallet which thankfully he is also using the network and working here maybe we could do a few more things here and send fabri a message so we're going to uncomment this function and this function and we're going to comment this one out so in xmtp everything runs over conversations which is an abstraction we use to make it easy to manage your chats to start a new conversation with the wallet address this is all the code you need new conversation wallet two which is fabri's address so we can create that conversation and then down here we just use this conversation and we send a GM let's see if this all runs too thank you all right message sent sent to GM that is really all it takes if you wanted to get fancier we do support custom content types and so you can add codecs to your xmtp SDK for things like images or videos or file attachments we have uh some new content types like reactions and replies that you can play with um but the basics of xmtp are just text messages and that's the one thing that's Universal across all the apps in our ecosystem now let's see if we can do this in real time I'm going to switch the environment to production so that people can actually send us a message and we are going to listen for messages on the network this is obviously useful when you're building a client-side app where you need to see things coming in in real time and so we have this very helpful stream all messages function and all it does is calls xmtp conversations stream all messages this is going to get the full list of conversations that this brand new wallet has and it's going to get all the messages coming in in real time for each of those conversations and so it's just going to print them to the console here I'm also taking the time to answer your DMs so all right I'm gonna run this and it's gonna print out a QR code for this random wallet let's see if this is actually legible all right let's see if you scan this you should be able to send a message that'll actually get printed out in the terminal here in real time I'm going to try it myself maybe the QR code's a little mangled because of it of the display setup let's try this one more time with it actually yeah I think let's try and print it again with oh I'm sorry you're gonna have to get a new QR code here oh hey all right we got our first GM so that's all it takes to have a real-time listener for xmtv messages uh set up the terminal this is you know maybe 50 lines of code and a lot of that's pretty lightweight awesome well someone's using this for some free advertising space I I appreciate the hustle I respect that oh did someone try and send send us money that second last one I think that's a payment oh that money's gone this isn't it this is a federal law that that just went basically to the burn address I appreciate it all right but actually stopped by what uh the Wi-Fi in here is pretty poor takes some time yeah there's also one other function here if you just want to stream messages from one conversation that's equally easy this just spits out async iterators you can just do uh await conversations stream messages and uh that'll give you just the messages for a single conversation which can be helpful if you're building a chat app so before we move on any questions about this code anything that seems a little too mysterious happy to field those in real time all right here he's three more messages exactly including newly created conversations so there's kind of two streaming functions in XMP to stream the conversations we'll just let you know hey someone started a new conversation but not give you the messages and stream messages from the conversation and that API just ties the two of them together to make it really simple to build an app that has um you know all the messages from all the conversations in one yeah so um this is the basic concepts around xmtp so it's basically creating conversation and sending messages and we are now working on group chats read receipts reactions to messages there is also a way to send media attachments like image and video so that's on the SDK level and on the protocol level Nick you want to tell yeah so xmdp has a roadmap that we've shared publicly in our GitHub discussions around decentralization uh you know there's a bunch of milestones we have to hit to get this point where anyone can run their own nodes and then anyone can get paid to run their own nodes right now xmdp is operating the nodes in the xmtp network we'd really like to get out of that business um and so we are working hard on decentralizing our Network as so that we can be a small minority of all the node operators we're also working on the next version of the xmdp encryption protocol uh that's something that a lot of developers have been asking for better ways of revoking keys of having device specific identities so that uh if an app gets compromised if there's a bad actor on the xmtp network that maybe is phishing people that we could really limit the damage from that um and you know that's going to be rolling out in the next few months which should come in the form of Disappearing messages yeah as far as our developer tools we have an SDK for basically every language not only on web but on mobile this was a demo of the JavaScript SDK but we also have for example react native we have sweep and Android so check out our Docs you will find more information about the whole experience of sending your first message and you will find a lot of tutorials we are trying to push into multiple use cases for example you see coinbase using a finance use case about sending money through messaging we also we think that there is room for a lot more so I invite you to check out the docs and see how it's used in marketing how is using Commerce the centralized social as we see with lens Automation and support like creating chatbots and if you are going to build on a hackadon I recommend you to check out our playground where is the beta beta versions of group chat replace reactions and read receipts and there is also the way to do broadcasting so if you want to send like a message one to many there is a way to do that so that was our our talk I'm fabri I'm Nick thank you yeah happy to answer any questions you guys have thank you um could you uh describe like the uh the overall architecture of xmtp should let that slide in for me for me it was yeah for the introduction it could be really good to have it yeah absolutely so the xmtp nodes are built on top of waku which means they use lib P2P under the hood to create this mesh you connect to one node through our API and publish it and then it will get gossip to all the other nodes in the network which is how our subscriptions can work in real time even if two users are talking to different nodes we have a pretty big storage layer underneath it so we can store messages on the xmdp network forever um I think that's something in future versions we might not need but today a message can just get persisted onto our Network in perpetuity uh which makes it really easy to sign in across different applications okay and another question um would would that scale like like uh telegram or what what's happened what way are we still using telegram for example and what would be the the next application you see that could replace this kind of a pre uh messaging applications yeah why are we still using telegram at least the people in this room uh you know when there's good web3 native Alternatives I I don't know I've basically stopped using Telegram and just got people to message me on xfdp and it works great and it you know we're not some shady company flying around the world in between Russia and Dubai uh we're right here and are pretty transparent about how we handle end-end encryption uh which is more than I could say about telegram um yeah I think building uh identity layer where people are really thinking about themselves through their web 3 identities first that's gonna be the blocker a telegram is great because it uses the phone number as an identity layer um and phone number is something that people widely understand and getting you know my mom to use her ens as her primary identity I think that's going to be uh uphill battle that we as an industry have to solve to make this easy cheap and just painless experience and then once that happens XMP is ready to take on the messaging traffic uh yeah we're pretty comfortable with our ability to scale to deal with large volumes of messages awesome which is the name of the app in the App Store uh so there's a few that are in the App Store if you're into the lens Community you can use orb Converse is the iMessage of xmtp and uh coinbase wallet if you've scanned one of those QR codes on the screen you have access to this new feature of wall to wall messaging inside coinbase wall directly sure how does the encryption and decryption work for word charts you like I'm guessing one one conversation like getting free to get private key and they treat you a better receiver so sorry the other way around um but we group chats can I like to to be like talking to you know so the light only you old but it can be pretty disturbs or something like that yeah so in the first version of group chat that we just released this Alpha for the way that all permissions in the group chat work is someone in the group has a key that is secret for the group and they can share it to anyone that they would like and they send an announcement that says hey I shared this with Bob I said share this with Joe and you just passed that key around and so it'll be up to the application layer to add additional checks on top of do you have the key and so you know if you have an app that is only for holders of some particular nft you would addition to checking can they send a message on xmtp you'd also check do they hold this nft and if not you make their messages disappear um at the application layer exactly yeah we've had a number of people do this with one-to-one chat uh but because group chat's so new if you were working on a project like that I think you'd be the first any other questions oh sure xmdb has never censored mentioned a message on the network part of our privacy goals are that we should not have enough information to be able to censor a message uh every version of the SDK removes more and more metadata to make it harder and harder for us to sensor a message so why why would we censor something when we don't even know who it's from who it's to what it's about uh it would just be very difficult for us to censor even if we were compelled by law right now blocking is done at the application layer it's something we're thinking a lot about and uh you know there's some public discussions around consent on the network and how we might do that at a protocol level way but today applications have blocking built in and unfortunately that doesn't sync between different apps on the network but if you use coinbase wallet for example they have a nice block feature you block someone and it won't show up at least inside coinbase wallet for you for uh for adding the image attachments what's the way to do that is there a plug-in or is it copy pasting the code from XMP chat or what's the best way to do like the image attachments that is in there yeah so image attachments the images are stored off Network we have um I think now a guide is that right around images yeah is so you you can copy paste if you like but we have also this public content types repo so you can just import the content type and that'll give you the boilerplate code for rendering these images or at least uh downloading them and then uh images can be stored wherever you like and so we include encryption key and a hash of the image in the xmdp message that means you could store it in ipfs which you know we recommend but if you want to store it on your own servers or on S3 that would also be uh totally fine because the images are encrypted and there is a hash so if you know someone monkeyed with the image after it was initially sent and replaced it with something else it would fail to decrypt and so it gives you a lot of flexibility to do images however ever you like for your application we have we can't show the playground we have five more minutes yes no okay yeah no worries thank you okay thank you everyone foreign