公式パッケージ · リアルタイムの部品

Vercel AI SDK 向けの再開できる AI チャットストリーム

useChat() 用のトランスポート：回答をチャンネルでストリーミングするので、接続が切れても失われず、再読み込み後に再開でき、すべてのタブと端末に届きます。AI SDK 5、6、7 に対応。

@hibira-io/ai-sdknpm ↗GitHub ↗

  • React、Vue、Svelte、Angular のどの useChat でも使えます。
  • API ルートはすぐに応答し、回答はバックグラウンドで最後まで書かれます。Redis やストリームストアを用意する必要はありません。
  • テキストの差分を 3,500 バイト未満のイベントにまとめ、resume: true でチャンネル履歴から追いつきます（Hobby 以上のプラン）。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

  1. インストール

    npm install @hibira-io/ai-sdk pusher-js pusher

  2. 設定する

    'use client';
import { useChat } from '@ai-sdk/react';
import Pusher from 'pusher-js';
import { HibiraChatTransport } from '@hibira-io/ai-sdk';

const pusher = new Pusher(process.env.NEXT_PUBLIC_HIBIRA_KEY!, {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
});
const transport = new HibiraChatTransport({ pusher, api: '/api/chat' });

export function Chat({ id, initialMessages }) {
  const { messages, sendMessage } = useChat({ id, messages: initialMessages, transport, resume: true });
  // render messages as usual
}

  3. 使う

    // app/api/chat/route.ts
import { after } from 'next/server';
import { streamText, convertToModelMessages } from 'ai';
import Pusher from 'pusher';
import { publishUIMessageStream } from '@hibira-io/ai-sdk/server';

const pusher = new Pusher({
  appId: process.env.HIBIRA_APP_ID!,
  key: process.env.NEXT_PUBLIC_HIBIRA_KEY!,
  secret: process.env.HIBIRA_SECRET!,
  host: 'ws.hibira.io',
  useTLS: true,
});

export async function POST(req: Request) {
  const { id, messages, runId } = await req.json();
  const result = streamText({ model, messages: await convertToModelMessages(messages) });
  after(() =>
    publishUIMessageStream(pusher, {
      chatId: id,
      runId,
      stream: result.toUIMessageStream({ originalMessages: messages, onFinish: ({ messages }) => saveChat(id, messages) }),
    }),
  );
  return Response.json({ runId }, { status: 202 });
}

始める前に

  • アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
  • トランスポートは private-ai-chat-{chatId} を購読します。認可エンドポイントでは、このチャンネルをチャットの所有者だけに許可してください。
  • アプリの設定でチャンネル履歴を有効にしてください（Hobby 以上のプラン）。再読み込みしたページが書きかけの回答を再開できます。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →