Composer Actions

Composer Actions let developers integrate into the cast creation interface, allowing users to modify their casts through various actions like creating polls, inserting GIFs, or checking grammar.

When a Composer Action is triggered, it opens a Composer Form, a customizable web form that collects user input and sends modification instructions back to Warpcast. These actions enhance user interaction by simplifying the addition of complex elements to their casts.

See the spec.

Overview

At a glance:

User selects a Composer Action in the App client's cast creation UI.
When the user presses the Composer Action button in the App, the App will make a POST request to the .composerAction route.
Server performs any action and returns a response to the App which is shown as a form.

Example

Here is a trivial example of how to expose an action with a frame. We will break it down below.

src/index.tsx

import { Frog, TextInput } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.composerAction(
  '/',
  (c) => {
    return c.res({
      title: 'My Composer Action',
      url: 'https://example.com' 
    })
  },
  {
    /* Name of the action – 14 characters max. */
    name: 'Some Composer Action',
    /* Description of the action – 20 characters max. */
    description: 'Cool Composer Action',
    icon: 'image',
    imageUrl: 'https://frog.fm/logo-light.svg',
  }
)

Client-Side Helpers

Frog exports postComposerCreateCastActionMessage helper to post the message to the window.parent.

src/index.tsx

import { postComposerCreateCastActionMessage } from 'frog/next'
 
function App() {
  return (
    <button onClick={() => postComposerCreateCastActionMessage({/**/})}>
      Button
    </button>
  )
}

Bonus: Learn the API

You can learn more about the transaction APIs here: