Skip to content

Frames

Applications like Converse implement the Open Frames standard.

Cli

This tool simplifies the creation and configuration of open frames.

bun
bun create open-frames

Metadata

In compliance with Open Frames, use a meta tag in your frame's HTML to declare the client protocols your frame supports.

<meta property="of:accepts:xmtp" content="vNext" />

Validate incoming messages

Implement message validation using @xmtp/frames-validator to ensure the authenticity of incoming POST requests.

import { validateFramesPost } from "@xmtp/frames-validator";
 
export async function handler(requestBody: any) {
  if (requestBody.clientProtocol.startsWith("xmtp")) {
    const { verifiedWalletAddress } = await validateFramesPost(requestBody);
    // Handle verified XMTP payload
  } else {
    // Handle Farcaster or other protocol payloads
  }
}

Running in localhost

For making frames work in localhost, while you develop, you can use the following command:

npm install -g localtunnel
lt --port 3000

This will generate a public URL that you can use to test your frames.