/xmtp-chat-app-nextjs

Real-time encrypted chat, built with XMTP and Next.js

Primary LanguageTypeScript

XMTP Next.js basic example

This is an example of how you might implement encrypted real-time messaging into a web application using XMTP, React, and Next.js

This example shows how to implement messages specific to Lens apps, but the codebase can be made agnostic to any underlying protocol or app by modifying this code in create.tsx to use any prefix you'd like (or none at all):

const PREFIX = 'lens.dev/dm'
const buildConversationId = (profileIdA: string, profileIdB: string) => {
  const profileIdAParsed = parseInt(profileIdA, 16)
  const profileIdBParsed = parseInt(profileIdB, 16)
  return profileIdAParsed < profileIdBParsed
    ? `${PREFIX}/${profileIdA}-${profileIdB}`
    : `${PREFIX}/${profileIdB}-${profileIdA}`
}

XMTP

XMTP Docs

To build this app

  1. Clone the repo
git clone git@github.com:dabit3/xmtp-chat-app-nextjs.git
  1. Change into the directory and install the dependencies:
cd xmtp-chat-app-nextjs

npm install # or yarn, pnpm, etc..
  1. Run the app
npm run dev