Skip to content
Converse app

Group chat

This is a reference app that will allow you to understand the potential and all of its features. Through many handlers, you will be able to understand different use cases:

  • AI: Reply with GPT when called by /agent.
  • Tipping: Tip when a user reacts with the 🎩 emoji, replies 10 $degen and /tip.
  • Games: Handle frame games like /game slot, /game wordle
  • Transactions: Handle commands like /send, /swap, /show.
  • Loyalty: Handle loyalty commands like /points, /leaderboard.

Structure

Check out the repository for the full code.

group/
├── src/
│   ├── index.ts              # Index file of the app. // [!code hl] // [!code focus]
│   ├── command.ts            # For handling commands. // [!code hl] // [!code focus]
│   └── handler/
│         └── agent.ts          # Handles gpt agent. // [!code hl] // [!code focus]
│         └── tipping.ts        # Handles tipping. // [!code hl] // [!code focus]
│         └── game.ts           # Handles game frames. // [!code hl] // [!code focus]
│         └── loyalty.ts        # Handles loyalty. // [!code hl] // [!code focus]
│         └── splitpayments.ts   # Handles split payments. // [!code hl] // [!code focus]
│         └── transactions.ts   # Handles the transaction frame. // [!code hl] // [!code focus]
│   └── lib/
│         └── openai.ts          # Handles the openai logic. // [!code hl] // [!code focus]
├── package.json
├── tsconfig.json
└── .env

Main code

src/index.ts
import { run, HandlerContext } from "@xmtp/message-kit";
import { handler as tipping } from "./handler/tipping.js";
import { handler as agent } from "./handler/agent.js";
import { handler as splitpayment } from "./handler/splitpayment.js";
 
// Main function to run the app
run(async (context: HandlerContext) => {
  const {
    message: { typeId },
  } = context;
 
  switch (typeId) {
    case "reply":
      handleReply(context);
      break;
    case "remoteStaticAttachment":
      handleAttachment(context);
      break;
    case "text":
      handleTextMessage(context);
      break;
  }
});
 
// Handle reply messages
async function handleReply(context: HandlerContext) {
  const {
    content: { content: reply },
  } = context.message;
  if (reply.includes("degen")) {
    await tipping(context);
  }
}
 
// Handle attachment messages
async function handleAttachment(context: HandlerContext) {
  await splitpayment(context);
}
 
// Handle text messages
async function handleTextMessage(context: HandlerContext) {
  const {
    content: { content: text },
  } = context.message;
  if (text.includes("/help")) {
    await helpHandler(context);
  } else if (text.startsWith("@agent")) {
    await agent(context);
  } else await context.intent(text);
}
async function helpHandler(context: HandlerContext) {
  const { commands = [] } = context;
  const intro =
    "Available experiences:\n" +
    commands
      .flatMap((app) => app.commands)
      .map((command) => `${command.command} - ${command.description}`)
      .join("\n") +
    "\nUse these commands to interact with specific apps.";
  context.send(intro);
}

Run the app

Follow the steps below to run the app

Setup

cmd
# Clone the repo
git clone https://github.com/ephemeraHQ/message-kit
# Go to the examples/group folder
cd examples/group
# Install the dependencies
yarn install
# Run the app
yarn dev

Variables

Set up these variables in your app

cmd
KEY= # 0x... the private key of the bot wallet (with the 0x prefix)
OPEN_AI_API_KEY= # your openai api key
STACK_API_KEY= # stack api key