farcasterHubContext.mdx

Farcaster Hub Context

Fetches additional context about the message from a Farcaster hub.

Setup

Add the farcasterHubContext middleware to your createFrames call:

// ...
import { farcasterHubContext } from "frames.js/middleware";

const frames = createFrames({
  // ...
  middleware: [
    farcasterHubContext({
      hubHttpUrl: "https://nemes.farcaster.xyz:2281",
    }),
  ],
});

Usage

Use the added context in your message handler:

import { frames } from "./frames";

export const POST = frames(async (ctx) => {
  if (!ctx.message?.isValid) {
    throw new Error("Invalid message");
  }

  return {
    image: <div tw="flex">Message from {ctx.message?.requesterFid}</div>,
  };
});

For all the added context see the getFrameMessage function reference.

Options

hubHttpUrl

The URL of the Farcaster hub to fetch additional context from.

hubRequestOptions

Additional options to pass to the fetch request to the hub. This can be used to set API keys or other headers.

Frames.js Debugger

When using the Frames.js debugger, you can set the hubHttpUrl parameter to be the URL of the debugger hub (default: http://localhost:3010/hub) to support creating valid messages locally without a real farcaster signer. In production this should always be a real hub - if unspecified it will automatically fall back to a real hub.