Quickstart

To get started with Open Frames, follow the instructions below.

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
  }
}