Skip to content
FrogUI

Frog.frame Response

The response returned from the .frame handler.

import { Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    // ...
  })
})

action

  • Type: string

Path of the next frame to perform a POST request.

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

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 { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/frame/foo', (c) => {
  const { buttonIndex } = c
  return c.res({
    browserLocation: '/foo',
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a frog
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>, 
      <Button value="mango">Mango</Button> 
    ]
  })
})

headers

  • Type: Record<string, string>

HTTP response headers to set for the frame.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/frame/foo', (c) => {
  const { buttonIndex } = c
  return c.res({
    headers: {
      'cache-control': 'max-age=0',
    },
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a frog
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>, 
      <Button value="mango">Mango</Button> 
    ]
  })
})

image

  • Type: string

The Image to render for the frame. Can either be a JSX element, or URL.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  const { buttonIndex } = c
  return c.res({
    action: '/submit',
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a frog
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>, 
      <Button value="mango">Mango</Button> 
    ]
  })
})
import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  const { buttonIndex } = c
  return c.res({
    action: '/submit',
    image: 'https://i.ytimg.com/vi/R3UACX5eULI/maxresdefault.jpg',
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>, 
      <Button value="mango">Mango</Button> 
    ]
  })
})

imageAspectRatio

  • Type: "1.91:1" | "1:1"

The aspect ratio of the image to render for the frame.

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

imageOptions

  • Type: ImageResponseOptions

Options for the image to render for the frame.

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

intents

A set of intents (ie. buttons, text inputs, etc) to render for the frame (beneath the image).

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

ogImage

  • Type: string
  • Default: The image property.

Path or URI of the OG image.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  const { buttonIndex } = c
  return c.res({
    action: '/submit',
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>, 
      <Button value="mango">Mango</Button> 
    ],
    ogImage: 'https://i.ytimg.com/vi/R3UACX5eULI/maxresdefault.jpg',
  })
})

title

  • Type: string

Title of the frame (added as og:title).

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