Skip to content
v1.2.29

FrameKit

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.

  • 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

Request payment

You can request payments using the payment frame:

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

Wallet details

You can send agent wallet info using the sendWallet method:

// Send agent wallet info
await framekit.sendWallet("0x93E2fc3e99dFb1238eB9e0eF2580EFC5809C7204");

Properties:

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

Transfer receipt

You can request receipts using the receipt frame:

// Request a receipt
await framekit.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 framekit.sendConverseDmFrame("userAddress", "Hello, how are you?");
 
// Send a message to a group with an optional pretext
await framekit.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 framekit.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