Getting started

Get up and running in under a minute

Frog is a framework built on top of Hono for building Farcaster Frames. Frog enables you to build frames with JSX, integrated onto any platform (Next.js, Vercel, Cloudflare, etc).

import { Button, Frog } from 'frog'
 
export const app = new Frog()
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select your fruit!
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})

Quick Start

Bootstrap via CLI

Scaffold a new project with the command line:

npm

npm init frog

Bootstrap via Vercel

Scaffold a new project and deploy it instantly with Vercel:

Manual Installation

You can install Frog in an existing project, or start from scratch, by installing Frog as a dependency.

Install

First, we will install frog as a dependency in our project along with its hono peer dependency.

npm

npm i frog hono

Hono is a small, simple, and ultrafast web framework for the Edges.
TypeScript is optional, but highly recommended.

Build your First Frame

src/index.tsx

import { Button, Frog } from 'frog'
 
export const app = new Frog({
  // Supply a Hub API URL to enable frame verification.
  // hubApiUrl: 'https://api.hub.wevm.dev',
})
 
app.frame('/', (c) => {
  const { buttonValue, status } = c
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        {status === 'initial' ? (
          'Select your fruit!'
        ) : (
          `Selected: ${buttonValue}`
        )}
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})

Add Scripts to `package.json`

After that, let's add a script to our package.json to serve our frame.

package.json

{
  "name": "example",
  "version": "0.0.0",
  "scripts": { 
    "dev": "frog dev",
  },
  "dependencies": {
    "frog": "latest",
    "hono": "latest"
  },
  "devDependencies": {
    "typescript": "latest"
  }
}

Run

Next, run the development server:

Terminal

npm run dev

Then open up your browser to http://localhost:5173/dev, and you can see your first frame!

Next steps

Now that you have your first frame up and running, you can check out Frog's Concepts to learn more about how to build, structure, and deploy your frames.