Skip to content
v1.2.19

Introduction to frames

MessageKit enables developers to create interactive elements (frames) inside messaging applications. These frames can be used for various purposes such as handling payments, displaying transaction receipts, managing conversations, and creating custom interactive interfaces.

Frame Types

frames supports several types of frames:

  • Framesv2: Interact with agents via frames in Farcaster
  • Payment Frames: Request and handle cryptocurrency payments
  • Receipt Frames: Display transaction confirmations
  • Conversation Frames: Manage DMs and group messages
  • Custom Frames: Create custom interactive UI elements

Below are practical examples of implementing each frame type.

Framesv2

Framesv2 is a new way to interact with agents via frames. It allows you to have your own landing page for your agent and interact with it via frames in Farcaster.

Share in Farcaster (Framev2):
 
🔗 https://frames.message-kit.org/dm/0x...
Properties:
  • address: The address of the agent. Could be converse profile name , ens name or address

Payment

You can request payments using the payment frame:

// Request 1 USDC payment to a specific address
await context.requestPayment(1, "USDC", recipientAddress);

Properties:

  • amount: Number representing the payment amount
  • token: Supported tokens include "eth", "dai", "usdc", "degen"
  • address: Recipient's wallet address or ENS name

Transaction Receipts

You can request receipts using the receipt frame:

// Request a receipt
await context.sendReceipt(urlOfTransaction);
// ie https://sepolia.basescan.org/tx/0x1234567890abcdef

Properties:

  • url: URL of the transaction receipt scanner like basescan, etherscan, etc.

Dm and Groups on Converse

You can send messages to a user or group on Converse using the sendConverseDmFrame and sendConverseGroupFrame methods.

// Send a message to a user with an optional pretext
await context.sendConverseDmFrame("userAddress", "Hello, how are you?");
 
// Send a message to a group with an optional pretext
await context.sendConverseGroupFrame("groupId", "gm all!");

Custom

Custom frames allow you to create interactive UI elements. Here's how to create a token price frame:

const frame = {
  title: "Weather Update",
  buttons: [
    {
      content: "View Forecast",
      action: "link",
      target: "https://example.com/forecast",
    },
    {
      content: "Current Temperature (75°F)",
      action: "link",
      target: "https://example.com/current-temperature",
    },
  ],
  image: "https://example.com/weather.png",
};
 
await context.sendCustomFrame(frame);

Properties:

  • title: The header text of your frame
  • buttons: Array of interactive buttons (max 2)
  • image: URL of the image to display
  • action: Type of button action ("link" or "post")
  • target: Destination URL for button clicks

Open Frames

In compliance with Open Frames, use a meta tag in your frame's HTML to declare the client protocols your frame supports.

<meta property="of:accepts:xmtp" content="vNext" />

These are quickstarts for different Frameworks that support Open Frames