Farcaster Frames 2026: How to Build Interactive Mini Apps on Warpcast

What frames are in 2026

Farcaster frames are interactive mini apps that run directly inside the Warpcast feed. They replace static image cards with full-screen applications that respond to user input, turning social posts into functional tools.

The 2026 standard, known as Frames v2, rebrands these components as "Mini Apps." This update moves beyond simple button clicks to support complex, stateful interactions and on-chain transactions. Developers can now build experiences that feel like native mobile applications.

This evolution allows creators to build sophisticated tools, turning social interactions into productive experiences within the Farcaster ecosystem.

Compare frame frameworks and tools

Choosing the right framework depends on your team’s skills and the complexity of the interaction. Frog, Next.js, and raw HTML each offer different tradeoffs.

Frog is designed specifically for Farcaster Frames. It simplifies the process by providing built-in hooks for frame interactions, making it the fastest path to an interactive mini app.

Next.js offers maximum flexibility and a mature ecosystem. It is ideal if you need complex backend logic, database integrations, or want to share code with other web applications. However, it requires more setup and a deeper understanding of server-side rendering.

Raw HTML frames are static and limited to displaying information without user interaction. Choose this only if your frame needs to be a simple, lightweight display.

For most developers starting with Farcaster Frames, Frog provides the best balance of ease of use and interactivity.

Set up your development environment

To build a Farcaster Frame, you need a local environment that can serve static assets or dynamic endpoints. Frames are essentially web apps embedded inside the Warpcast client.

Build your first interactive frame

Farcaster frames are no longer static images. They are interactive mini-apps that run inside the Warpcast feed. You can now build forms, polls, and live data dashboards that users interact with directly in their timeline.

To start, we will use Frog, a React framework built specifically for this purpose. It handles the heavy lifting of rendering the frame UI and managing state transitions.

Set up the project

Start by initializing a new Frog application. This creates the necessary configuration files and directory structure. You will define your frame’s initial state, which determines what the user sees when they first open it.

npm create frog@latest my-frame

This command sets up a basic React structure. Your index.tsx file will serve as the entry point. Here, you define the frame’s metadata, such as its title and image thumbnail.

Render the initial UI

The first view is critical. It needs to clearly communicate what the user can do. Use Frog’s <Frame> component to wrap your content. Inside, you can use standard React components like buttons and text.

import { Frame, Button } from 'frog';

export const frame = new Frame({
  title: 'My First Frame',
  image: 'https://example.com/thumb.png',
});

frame.action('/', async (c) => {
  return c.res({
    accept: true,
    image: <div>Click the button below</div>,
    buttons: [
      <Button action="/next">Next Step</Button>,
    ],
  });
});

This code creates a simple screen with a single button. When clicked, it triggers an action that moves the user to the next state. The accept: true flag tells Warpcast that this frame expects user interaction.

Handle user interactions

Interactivity comes from defining actions for each button. Each action receives the current context, including the user’s input. You can use this to update the UI or fetch new data.

frame.action('/next', async (c) => {
  return c.res({
    image: <div>You clicked next!</div>,
    buttons: [
      <Button action="/reset">Reset</Button>,
    ],
  });
});

In this example, clicking "Next" shows a new message. The "Reset" button brings the user back to the start. This state management is what makes frames feel like real apps rather than static posts.

Add form inputs

Beyond buttons, frames support text inputs and selects. This allows for more complex interactions, like collecting user preferences or submitting data.

frame.action('/input', async (c) => {
  const value = c.input.text;
  return c.res({
    image: <div>You typed: {value}</div>,
    buttons: [
      <Button action="/">Back</Button>,
    ],
  });
});

The c.input.text property captures what the user typed. You can then display this value in the next frame view. This enables dynamic, personalized experiences without leaving the feed.

Preview and publish

Before publishing, test your frame locally. Frog provides a development server that mimics the Warpcast environment. This helps you catch errors early.

Once satisfied, deploy your frame to a public URL. Update your frame’s metadata to point to this URL. Warpcast will then fetch and render your frame for all users.

Add on-chain transactions and actions

Frames v2 upgrades Farcaster mini apps from static cards into interactive tools that can execute smart contracts directly within the client. This means a user can mint an NFT or swap tokens without ever leaving Warpcast, reducing friction and keeping engagement inside the feed.

1. Define the on-chain action in the frame schema

Your frame metadata must declare the onChainAction object to signal that the frame supports blockchain interactions. This object specifies the target contract address, the function selector, and the input parameters. The client uses this data to construct the transaction payload before the user even sees the confirmation screen.

2. Handle the transaction state in your server

When a user clicks a button that triggers an on-chain action, your server receives a post_url request. Instead of returning a new frame image, you return a post_url that points to a backend endpoint responsible for broadcasting the signed transaction. This endpoint should monitor the blockchain for confirmation and update the frame state accordingly.

3. Display the result in the next frame

Once the transaction is confirmed, your server should respond with a new frame image that reflects the outcome. Display a success message, the transaction hash, or the newly minted asset. If the transaction fails, show an error state with a retry button. This visual feedback loop is critical for user trust, as on-chain operations are irreversible.

4. Secure your backend endpoints

Since your server acts as the bridge between the user and the blockchain, security is paramount. Never expose private keys in your frontend code. Use a secure wallet service or a dedicated signing server to handle transaction signatures. Validate all input parameters to prevent users from sending malformed data to your smart contracts.

5. Test on a testnet first

Before deploying to mainnet, test your on-chain actions on a testnet like Sepolia. This allows you to verify that your frame schema, server logic, and smart contract interactions work correctly without risking real funds. Check the transaction hash on a block explorer to ensure the data is being recorded as expected.

Deploy and test your frame

Before your interactive mini app goes live, you need to ensure it renders correctly and responds to user interactions as intended. This final phase involves hosting your frame’s HTML and verifying its behavior within the Warpcast client.

Common questions about Farcaster frames