Skip to content

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({ title: 'Frog Frame' })
 
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:

Deploy 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'
import { devtools } from 'frog/dev'
import { serveStatic } from 'frog/serve-static'
 
export const app = new Frog({ title: 'Frog Frame' })
 
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>
    ]
  })
})
 
devtools(app, { serveStatic })

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.