Skip to content

Quickstart Guide: Create your first Frame

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


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:

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

Create a route

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

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

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(
          ? `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