Skip to content

Open Frames: make frames that work everywhere

Open Frames is a standard for Frames that work in multiple ecosystems, including Farcaster, XMTP and others.

You can define your frame as supporting multiple Open Frames compatible protocols by using the openframes middleware.

// ...
import { openframes } from "frames.js/middleware";
 
const frames = createFrames({
  // ...
  middleware: [
    openframes({
      clientProtocol: {
        id: "my-protocol",
        version: "1.0.0",
      },
      handler: {
        isValidPayload: (body: JSON) => {
          // Check if the request body is a valid Open Frames action
          // ...
          return isValid; // true or false
        },
        getFrameMessage: async (body: JSON) => {
          // Parse the data in the request body and return a Frame message
          // ...
          return frameMessage; // { username: "alice" }
        },
      },
    }),
  ],
});

and access the protocol used to sign the Frame Message via the clientProtocol property of the context.

// ...
const handleRequest = frames(async (ctx) => {
  if (ctx.clientProtocol === "my-protocol") {
    // ctx.username is available here
  }
  // ...
});

Use the Multi Protocol starter as a template to build your Open Frames frames.