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 FarcasterPayment Frames
: Request and handle cryptocurrency paymentsReceipt Frames
: Display transaction confirmationsConversation Frames
: Manage DMs and group messagesCustom 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...
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 amounttoken
: 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 framebuttons
: Array of interactive buttons (max 2)image
: URL of the image to displayaction
: 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
- OnchainKit Quickstart: Onchain Kit quickstart that integrates XMTP.
- Frog Quickstart: Frog XMTP quickstart
- Frames.js Quickstart: Frames.js quickstart that integrates XMTP.