プラットフォームごとの Chat ボットの実装を抽象化する Chat SDK

npm init hono@latest chat-bot-example

npm install chat @chat-adapter/slack  @chat-adapter/state-memory

display_information:
  name: My Bot
  description: A bot built with Chat SDK
features:
  bot_user:
    display_name: My Bot
    always_online: true
oauth_config:
  scopes:
    bot:
      - app_mentions:read
      - channels:history
      - channels:read
      - chat:write
      - groups:history
      - groups:read
      - im:history
      - im:read
      - mpim:history
      - mpim:read
      - reactions:read
      - reactions:write
      - users:read
settings:
  event_subscriptions:
    request_url: https://your-domain.com/api/webhooks/slack
    bot_events:
      - app_mention
      - message.channels
      - message.groups
      - message.im
      - message.mpim
  interactivity:
    is_enabled: true
    request_url: https://your-domain.com/api/webhooks/slack
  org_deploy_enabled: false
  socket_mode_enabled: false
  token_rotation_enabled: false

SLACK_BOT_TOKEN=xoxb-your-bot-token
SLACK_SIGNING_SECRET=your-signing-secret

import { Chat } from "chat";
import { createSlackAdapter } from "@chat-adapter/slack";
import { createMemoryState } from "@chat-adapter/state-memory";
export const bot = new Chat({
  userName: "mybot",
  adapters: {
    // 環境変数 SLACK_BOT_TOKEN と SLACK_SIGNING_SECRET を自動で読み込む
    slack: createSlackAdapter(),
  },
  state: createMemoryState(),
});
 
// メンションに反応する
bot.onNewMention(async (thread) => {
  await thread.subscribe();
  await thread.post("Hello! I am a bot.");
});
 
// 購読したスレッドに新しいメッセージが投稿されたときに反応する
bot.onSubscribedMessage(async (thread, message) => {
  await thread.post(`You said: ${message.text}`);
});

import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { bot } from "./bot.js";
 
const app = new Hono();
 
// bot が対応しているプラットフォームを型として定義
type Platform = keyof typeof bot.webhooks;
 
app.post("/api/webhooks/:platform", async (c) => {
  // パスパラメータからプラットフォームを取得
  const platform = c.req.param("platform");
  // プラットフォームごとのハンドラを取得
  const handler = bot.webhooks[platform as Platform];
  if (!handler) {
    return c.text("Unsupported platform", 400);
  }
  // ハンドラにリクエストを渡して処理してもらう
  return handler(c.req.raw);
});
 
serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running on http://localhost:${info.port}`);
  },
);

npm run dev

ngrok http 3000

mv src/bot.ts src/bot.tsx

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "chat"
  }
}

import { Chat, Card, CardText, Button, Actions, Select, SelectOption, Divider } from "chat";
 
// 省略...
bot.onNewMention(async (thread) => {
  await thread.subscribe();
  await thread.post(
    <Card title="Welcome to my bot!">
      {/* CardText はマークダウンをサポート */}
      <CardText>
        Hello! I am a **bot**. I can respond to your _messages_ and button
        clicks.
      </CardText>
      <Divider />
      <Actions>
        <Button id="primary" style="primary">
          Click me
        </Button>
        <Select
          id="select-fruit"
          label="Your favorite fruit"
          onChange={async (value) =>
            await thread.post(`You selected: ${value}`)
          }
        >
          <SelectOption label="🍎" value="apple" />
          <SelectOption label="🍌" value="banana" />
          <SelectOption label="🍊" value="orange" />
        </Select>
      </Actions>
    </Card>,
  );
});
 
// 対応する id のアクションが実行されたときに反応する
bot.onAction("primary", async (event) => {
  await event.thread.post("You clicked the button!");
});
 
bot.onAction("select-fruit", async (event) => {
  await event.thread.post(`You selected: ${event.value}`);
});

export const bot = new Chat({
  streamingUpdateIntervalMs: 500, // ストリーミングの更新間隔を指定（ミリ秒）
});

npm install ai @ai-sdk/anthropic

ANTHROPIC_API_KEY=your-anthropic-api-key

import { anthropic } from '@ai-sdk/anthropic';
 
// メンションに反応する
bot.onNewMention(async (thread, message) => {
  const result = streamText({
    model: anthropic("claude-haiku-4-5"),
    prompt: message.text,
  });
  await thread.post(result.textStream);
});

bot.onSubscribedMessage(async (thread) => {
  const fetchResult = await thread.adapter.fetchMessages(thread.id, {
    limit: 20,
  });
  const history = fetchResult.messages
    .filter((msg) => msg.text.trim())
    .map((msg) => ({
      role: msg.author.isMe ? ("assistant" as const) : ("user" as const),
      content: msg.text,
    }));
  const result = streamText({
    model: anthropic("claude-haiku-4-5"),
    prompt: [...history],
  });
  await thread.post(result.textStream);
});