Hacking on Farcaster Frames

A little micro app right in your feed - hacking with ATX DAO!

Feb 01, 2024

Getting started with your first Frame? Here’s all the info you need to get rolling.

I’ll be building a Frame to airdrop tokens, but for now lets get started with the basics. The code is all posted here on GitHub if you want to follow along.

Farcaster frames were released just last week in Farcaster’s Feature Friday. A bunch have been built already, check out the list below the see some examples. Here’s a Nouns frame where you can see the current Noun up for auction and bid.

So what is a Farcaster Frame? It’s a little app in your feed. They’re very simple at this point, an image with a few buttons. Click a button and get a callback to update the image. But the best part? The simplicity of building one!

Frame dev

Frames are based on the OpenGraph standard, the thing that enables link previews in social feeds. So we’re really just working with a fancy link preview! Genius idea by the Farcaster team.

But instead of only the image, description, and title, we bring in a few extra tags. Let’s see the core basics of a Frame in a NextJS app. Throw this into your page.tsx and deploy it to Vercel.

import { Metadata } from "next";

const frameMetadata = {
  "fc:frame": "vNext",
  "fc:frame:image": "https://blocklive.io/util/logo.png",
  "fc:frame:button:1": "$ETH",
  "fc:frame:button:2": "$BTC",
};

export const metadata: Metadata = {
  title: "Frame Airdrop",
  description: "Generated by create next app",
  other: {
    ...frameMetadata,
  },
};

export default function Home() {
  return (
    <>
      <main>Frame Airdrop!</main>
    </>
  );
}

Head over to the Frame Validator with your Vercel link and run it!

We have a frame!

Now the buttons don’t do anything. Let’s hook them up. This will be as easy as creating an API route in our NextJS and and returning a new HTML response on button click. Add a route at app/api/frame called route.ts

import { NextRequest, NextResponse } from "next/server";

const POST_URL = "https://frame-airdrop.vercel.app/api/frame";

export async function POST(req: NextRequest, res: NextResponse) {

  const NEW_IMAGE_URLimage =
    "https://assets.blocklive.io/events/2bfb5de2-cd38-49d5-bb3b-1834dfc66380/58662d9d-303b-4c72-b3cd-92207ca8b91b_dall_e_2024_01_28_23_08_18___design_a_banner_image__size_936px_x_468px__that_looks_like_an_entrance_ticket_to_an_event_for_the__frames__feature_on_a_social_media_platform_resembli.png";

  let html =
    `<!DOCTYPE html><html><head>` +
    `<meta property="fc:frame" content="vNext" />` +
    `<meta property="fc:frame:image" content="${NEW_IMAGE_URLimage}" />` +
    `<meta property="fc:frame:button:1" content="$DOGE" />` +
    `<meta property="fc:frame:button:2" content="$SOL" />` +
    `<meta property="fc:frame:post_url" content="${POST_URL}" />` +
    `</head></html>`;

  return new Response(html, { headers: { "Content-Type": "text/html" } });
}

export const dynamic = "force-dynamic";

Checkout the repo where we do some fancy validation to ensure the button click comes from our Frame and take action based on which button is clicked. This just returns a new image and button set to get you across the line.