Chat Frames with XMTP

The XMTP community has been actively discussing and implementing ways to enhance user experience by supporting frames within XMTP applications. An effort in this direction is detailed in a community post Supporting Frames in XMTP.

Libraries

These are the foundational tools that allow developers to create, sign, and manage Frames created by Open Frames & XMTP

• @xmtp/frames-validator: A set of tools for validating POST payloads from XMTP Frames
• @xmtp/frames-client: Library used by messaging apps to render xmtp frames.

Frameworks

Popular frameworks have already integrated Open Frames into their stack:

OnChainKit

Discover how OnchainKit seamlessly incorporates XMTP payloads

Metadata:

const frameMetadata = getFrameMetadata({
  /**
   * Frame metadata like Image, Buttons, Input, etc.
   */
  isOpenFrame: true,
  accepts: { xmtp: "vNext" },
});

export const metadata: Metadata = {
  /**
   * ...other metadata
   */
  other: {
    ...frameMetadata,
  },
};

Validate incoming messages

import {
  isXmtpFrameRequest,
  getXmtpFrameMessage,
} from "@coinbase/onchainkit/xmtp";
/* ... */
async function getResponse(req: any): Promise<NextResponse> {
  const body: FrameRequest = await req.json();
  if (isXmtpFrameRequest(body)) {
    const { isValid, message } = await getXmtpFrameMessage(body);
    // ... do something with the message if isValid is true
    if (isValid) {
      const { verifiedWalletAddress } = message;
      // ... do something with the verifiedWalletAddress
    }
  } else {
    // ...
  }
}

• OnChainKit: Official OnchainKit documentation.
• Quickstart: Onchainkit quickstart that integrates XMTP.

Frames.js

Learn more about the integration of XMTP payloads within FrameJS

Metadata

const acceptedProtocols: ClientProtocolId[] = [
  {
    id: "xmtp",
    version: "vNext",
  },
  {
    id: "farcaster",
    version: "vNext",
  },
];

Validate incoming messages:

let fid: number | undefined;
let walletAddress: string | undefined;

import {
  isXmtpFrameRequest,
  getXmtpFrameMessage,
} from "@coinbase/onchainkit/xmtp";
import { NextResponse } from "next/server";
import type { FrameRequest } from "@coinbase/onchainkit";

async function getResponse(req: any): Promise<NextResponse> {
  const body: FrameRequest = await req.json();
  if (isXmtpFrameRequest(body)) {
    const { isValid, message } = await getXmtpFrameMessage(body);
    walletAddress = frameMessage?.verifiedWalletAddress;
  } else {
    // ...
  }
}

• Frames.js: Official Framesjs Documentation.
• Quickstart: Onchainkit quickstart that integrates XMTP.

Frog

• Frog: There is an active discussion to integrate Open Frames.

Tutorials

• Transaction Frames: Create transactional frames compatible with messaging apps

Clients

Some clients are fully XMTP compatible and can render Frames signing XMTP payloads:

• Converse: Converse is Frame compatible. Send your Frames through Converse.
• Dev Inbox: Engage with Frames firsthand by trying them on web.

info

Open Frames

XMTP contributes to the Open Frames standard, fostering interoperability and open standards.

• Open Frames Spec: Make Farcaster Frames interoperable.
• Awesome Open Frames: Curated list of Open Frames compatible Frames.