Skip to content
vpatch

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
const url = await FrameKit.requestPayment(recipientAddress, 1, "USDC");
 
// Send the url to the user
await context.send(url);

Wallet details

You can send agent wallet info using the sendWallet method:

// Send agent wallet info
const url = await FrameKit.sendWallet(
  "0x93E2fc3e99dFb1238eB9e0eF2580EFC5809C7204",
);
 
// Send the url to the user
await context.send(url);

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
const url = await FrameKit.sendReceipt(urlOfTransaction);
 
// Send the url to the user
await context.send(url);

Properties:

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

Converse

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

// Send a message to a user
const url = await FrameKit.converseLink(userAddress);
 
// Send the url to the user
await context.send(url);
 
// Send a message to a user with an optional pretext
const url = await FrameKit.converseLink(userAddress, "Hello, how are you?");
 
// Send the url to the user
await context.send(url);
 
// Send a message to a group
const url = await FrameKit.converseGroup(groupId);
 
// Send a message to a group with an optional pretext
const url = await FrameKit.converseGroup(groupId, "gm all!");
 
// Send the url to the user
await context.send(url);

Coinbase

// Send a message to a user with an optional pretext
await context.coinbaseLink(userAddress);

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",
};
 
const url = await FrameKit.sendCustomFrame(frame);
 
// Send the url to the user
await context.send(url);

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