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.