Launch Explorer API Studio API Status

⛓ī¸Farcaster Data

Learn how to use the Onchain Data Middleware to inject the Farcaster data of the user interacting with your Frames.js Frames.

The Farcaster Data Frames.js middleware enables you to easily enrich your Frames.js Frames with the interactor's onchain data with just a few lines of code. Some data that you can inject into your Frames.js Frames are:

  • Farcaster followers/followings

  • Farcaster channels participated in

  • Farcaster casts

Get Started

First, install the Airstack Frames SDK:

npm install @airstack/frames

Get User's Farcaster Profile Details

You can use the farcasterDataFramesjsMiddleware to fetch Farcaster profile details by adding USER_DETAILS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  farcasterDataFramesjsMiddleware as farcasterData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the Farcaster profile details data from `ctx.userDetails`
    console.log(ctx.userDetails);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Farcaster Data Middleware
      farcasterData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `USER_DETAILS` to the `features` array
        features: [Features.USER_DETAILS],
      }),
    ],
  }
);

Get User's Farcaster Followers

You can use the farcasterDataFramesjsMiddleware to fetch all user's Farcaster followers by adding FARCASTER_FOLLOWERS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  farcasterDataFramesjsMiddleware as farcasterData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster followers
    // from `ctx.farcasterFollowers`
    console.log(ctx.farcasterFollowers);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Farcaster Data Middleware
      farcasterData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_FOLLOWERS` to the `features` array
        features: [Features.FARCASTER_FOLLOWERS],
      }),
    ],
  }
);

Get User's Farcaster Followings

You can use the farcasterDataFramesjsMiddleware to fetch all user's Farcaster followings by adding FARCASTER_FOLLOWINGS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  farcasterDataFramesjsMiddleware as farcasterData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster Followings from `ctx.farcasterFollowings`
    console.log(ctx.farcasterFollowings);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Farcaster Data Middleware
      farcasterData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_FOLLOWINGS` to the `features` array
        features: [Features.FARCASTER_FOLLOWINGS],
      }),
    ],
  }
);

Get Farcaster Channels Participated By User

You can use the farcasterDataFramesjsMiddleware to fetch all the Farcaster channels the user participated in by adding FARCASTER_CHANNELS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  farcasterDataFramesjsMiddleware as farcasterData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's participated channels
    // from `ctx.farcasterChannels`
    console.log(ctx.farcasterChannels);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Farcaster Data Middleware
      farcasterData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_CHANNELS` to the `features` array
        features: [Features.FARCASTER_CHANNELS],
      }),
    ],
  }
);

Get Farcaster User's Cast

You can use the farcasterDataFramesjsMiddleware to fetch all the Farcaster casts casted by a user by adding FARCASTER_CASTS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  farcasterDataFramesjsMiddleware as farcasterData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster casts from `ctx.farcasterCasts`
    console.log(ctx.farcasterCasts);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Farcaster Data Middleware
      farcasterData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_CHANNELS` to the `features` array
        features: [Features.FARCASTER_CASTS],
      }),
    ],
  }
);

Developer Support

If you have any questions or need help regarding building Farcaster Frames with Airstack Frames.js Middleware, please join our Airstack's Telegram group.

More Resources

PreviousAirstack Frames.js MiddlewareNextAllow List

Last updated

Change request #946: