Skip to content
Github

Quickstart Guide: Create your first Frame

This guide shows you how to add frames rendering to your next.js + tailwind app using frames.js.

Steps

Create a new repo

Create a new Next.js app

npx create-next-app@latest my-project --ts --eslint --tailwind --app
cd my-project

Add frames.js to your project

yarn add frames.js

Create your Frames app

Create a frames directory in your Next.js app and add the following files:

./app/frames/frames.ts
import { createFrames } from "frames.js/next";
 
export const frames = createFrames({
  basePath: "/frames",
});

Create a route

./app/frames/route.tsx
/* eslint-disable react/jsx-key */
import { Button } from "frames.js/next";
import { frames } from "./frames";
 
const handleRequest = frames(async (ctx) => {
  return {
    image: (
      <span>
        {ctx.pressedButton
          ? `I clicked ${ctx.searchParams.value}`
          : `Click some button`}
      </span>
    ),
    buttons: [
      <Button action="post" target={{ query: { value: "Yes" } }}>
        Say Yes
      </Button>,
      <Button action="post" target={{ query: { value: "No" } }}>
        Say No
      </Button>,
    ],
  };
});
 
export const GET = handleRequest;
export const POST = handleRequest;

If you have an existing page, render Frames in your metadata

./app/page.tsx
import { fetchMetadata } from "frames.js/next";
 
export async function generateMetadata() {
  return {
    title: "My Page",
    // provide a full URL to your /frames endpoint
    other: await fetchMetadata(
      new URL(
        "/frames",
        process.env.VERCEL_URL
          ? `https://${process.env.VERCEL_URL}`
          : "http://localhost:3000"
      )
    ),
  };
}
 
export default function Page() {
  return <span>My existing page</span>;
}

Run yarn run dev

Done! 🎉

Next Steps