Frog

Import

import { Frog } from 'frog'

Usage

import { Frog } from 'frog'
 
const app = new Frog()

Constructor Parameters

basePath

• Type: string

The base path for the server instance.

For instance, if you are deploying your server to Vercel Serverless, you probably want to specify /api.

import { Frog } from 'frog'
 
const app = new Frog({
  basePath: '/api'
})

browserLocation

• Type: string

Location (URL or path relative to basePath) to redirect to when the user is coming to the page via a browser.

For instance, a user may reach the frame page in their browser by clicking on the link beneath the frame on Warpcast. We may want to redirect them to a different page (ie. a mint page, etc) when they arrive via their browser.

Read more.

import { Frog } from 'frog'
 
const app = new Frog({
  basePath: '/api',
  browserLocation: '/:path'
})

devtools

• Type: { enabled?: boolean; appFid?: string; appMnemonic?: string; }
• Default: { enabled: true }

Options for built-in devtools.

import { Frog } from 'frog'
 
const app = new Frog({
  devtools: {
    appId: 'abc123',
    appMnemonic: 'apples bananas carrots ...'
  }
})

headers

• Type: Record<string, string>

Default HTTP response headers to set for frames.

import { Frog } from 'frog'
 
const app = new Frog({
  headers: {
    'Cache-Control': 'max-age=0',
  }
})

honoOptions

• Type: HonoOptions

Options to forward to the Hono instance.

import { Frog } from 'frog'
 
const app = new Frog({
  honoOptions: {
    getPath: (req) => '/' + req.headers.get('host') + req.url.replace(/^https?:\/\/[^/]+(\/[^?]*)/, '$1'),
  }
})

hubApiUrl

• Type: string

Farcaster Hub API URL.

import { Frog } from 'frog'
 
const app = new Frog({
  hubApiUrl: 'https://api.hub.wevm.dev'
})

initialState

Initial state for the frames.

import { Frog } from 'frog'
 
type State = {
  index: number
  todos: string[]
}
 
const app = new Frog<State>({
  initialState: {
    index: 0,
    todos: []
  }
})

secret

• Type: string

Key used to sign secret data.

It is used for:

• Signing frame state, and
• Signing auth session cookies in the devtools.

import { Frog } from 'frog'
 
const app = new Frog({
  secret: process.env.FROG_SECRET
})

verify

• Type: boolean | "silent" | undefined
• Default: true

Whether or not to verify frame data via the Farcaster Hub's validateMessage API.

• When true, the frame will go through verification and throw an error if it fails.
• When "silent", the frame will go through verification, but not throw an error if it fails. Instead, the frame will receive verified: false in its context.
• When false, the frame will not go through verification.

import { Frog } from 'frog'
 
const app = new Frog({
  verify: 'silent'
})

Return Type

A Frog instance containing:

basePath

• Type: string

The base path for the server instance.

browserLocation

• Type: string

URL to redirect to when the user is coming to the page via a browser.

devtools

• Type: { appFid?: string; appMnemonic?: string; secret?: string; }

Options for built-in devtools.

frame

• Type: Frog['frame']

The .frame method.

hono

• Type: Hono

The Hono instance.

hubApiUrl

• Type: string

Farcaster Hub API URL.

fetch

• Type: Hono['fetch']

Hono's fetch method.

get

• Type: Hono['get']

Hono's get method.

post

• Type: Hono['post']

Hono's post method.

use

• Type: Hono['use']

Hono's use method.

verify

• Type: boolean

Whether or not frames should be verified.