Examples

Welcome to the XMTP examples page. Here, you'll find a variety of code examples, projects, and apps to help you get started with building your own applications using XMTP.

Quickstarts

A quickstart is a brief guide or repo aimed at helping XMTP developers to understand core build primitives from the network.

JavaScript

• Floating Inbox
  Floating inbox quickstart app in JS. Use it to help you build your own app with XMTP.
• Progressive web app
  Quickstart app for building a PWA, which is a way to provide an app without requiring separate bundling or distribution
• JavaScript live example
  A Repl of a full flow for sending and streaming messages in JavaScript
• Node.js Notebooks
  Interactive Node.js notebooks (similar to Jupyter) for learning about and experimenting with XMTP
• Portable consent request inbox
  How to build consent, like Allowed/Requested tabs and Accept/Block buttons
• Portable consent subscribe
  How to build a Subscribe button to record broadcast message user consent
• Portable consent broadcast
  How to build broadcast messaging that checks for user consent

React

• React hooks
  Floating inbox quickstart app built using React. Use it to help you build your own app with XMTP

React Native

• React Native
  Quickstart React Native app. Use it to help you build your own app with XMTP.
• Portable consent request inbox
  How to build consent, like Allowed/Requested tabs and Accept/Block buttons

Example apps

Example apps are more comprehensive than quickstarts. They are fully functional applications built with XMTP that showcase a broader range of features and use-cases.

React

• React Playground app
  A tool to help you build your own app with XMTP, including reactions, replies, read receipts, and attachments
• Inbox Web
  XMTP official client, aiming to showcase effective and innovative ways of building with XMTP.

Kotlin

• Android
  Quickstart Android app in Kotlin

Swift

• iOS
  Quickstart iOS app in Swift

Dart

• Flutter
  Quickstart Flutter app in Dart

React Native

• React Native
  Quickstart Example SDK app

Wallet connectors

Wallet connectors are essential components in decentralized applications (dApps). They allow users to connect their cryptocurrency wallets to the dApp, enabling them to sign transactions and interact with the blockchain. Different wallet connectors support different wallets and XMTP works out of the box with most of them.

Wallet connectors

• 0xPass
  Quickstart app for building a progressive web app (PWA) with a 0xPass wallet connector
• Dynamic
  Quickstart app for building a PWA with a Dynamic wallet connector
• MetaMask
  Quickstart app for building a PWA with a MetaMask wallet connector
• Privy
  Quickstart app for building a PWA with a Privy wallet connector
• ThirdWeb
  Quickstart app for building a PWA with a Thirdweb wallet connector
• WalletConnect
  Quickstart app for building a PWA with a WalletConnect wallet connector

Other integrations

These projects provide a robust foundation for building your own applications using XMTP. They are designed to demonstrate XMTP compatibility and include pre-configured setups for ease of use.

JavaScript

• Next.js
  Floating inbox quickstart app in Next.js. Use it to help you build your own app with XMTP.
• Vue.js
  A tutorial and quickstart app for building a chatbot in VueJS. Use them to help you build your own app with XMTP.
• Node.js
  Quickstart code for creating a new XMTP client, initiating a conversation, and sending a message in Node.js
• Firebase Functions
  Quickstart code for integrating an XMTP app with Firebase functions

React

• Next.js hooks
  Floating inbox quickstart app built using Next.js hooks. Use it to help you build your own app with XMTP.