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

人への引き継ぎができる AI エージェント用チャット UI

AI エージェントが先に答え、必要なときは人が引き継ぐオープンソースのサポートチャット。返信中のエージェントの作業を表示し、Markdown を安全に表示し、次の質問を提案し、チームへの引き継ぎを示します。

@hibira-io/chat-uinpm ↗GitHub ↗

最速の方法：Hibira プラグインとプロンプト 1 つ

AI コーディングエージェントにプラグインを入れて、プロンプトを貼り付けるだけ。エージェントがサインインし、必要なら無料アプリを作成し、コードを書いてテストイベントを送ります。 GitHub ↗

プラグインをインストール

claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

このプロンプトを貼り付け

Add Hibira Chat UI (@hibira-io/chat-ui) to this project.
Follow https://hibira.io/guides/chat-ui, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

自分で設定したい場合 以下の手順です：

インストール
チャットを表示
サーバーから返信

他の AI ツールとプラグインの中身 →

「質問を読んでいます」「アカウントを確認しています」などのステップを、バックエンドが送るヒントからリアルタイムに表示。
Markdown は HTML として挿入せず安全に表示。リンクと画像は許可したオリジンのみ。
最大 3 つの次の質問、引き継ぎバッジ、コピーボタン、タイプライター表示。7 言語対応。
gzip 後で約 9 KB の JavaScript、実行時の依存なし。React は任意。

chat-ui のサポート会話：コードブロック付きの自動返信、コピーボタン、次の質問の提案。

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

インストール

npm install @hibira-io/chat-ui pusher-js

チャットを表示

import { useEffect } from 'react';
import Pusher from 'pusher-js';
import { Chat, createConversation } from '@hibira-io/chat-ui/react';
import '@hibira-io/chat-ui/styles.css';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/pusher/auth', transport: 'ajax' },
});

const conversation = createConversation({
  pusher,
  channel: `private-conversation-${conversationId}`,
  load: (after, signal) => fetch(`/api/conversations/${conversationId}/messages?after=${after}`, { signal }).then((r) => r.json()),
  send: (text) =>
    fetch(`/api/conversations/${conversationId}/messages`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text }),
    }).then((r) => r.json()),
});

export function SupportChat() {
  useEffect(() => conversation.start(), []);
  return <Chat conversation={conversation} />;
}

サーバーから返信

import Pusher from 'pusher';
import { createChatServer, agentMetadata } from '@hibira-io/chat-ui/server';

const pusher = new Pusher({ appId: process.env.HIBIRA_APP_ID, key: process.env.HIBIRA_KEY, secret: process.env.HIBIRA_SECRET, host: 'api.hibira.io', useTLS: true });
const chat = createChatServer({ pusher });

const typing = chat.agentTyping(channel); // "Reading your question"
typing.step('writing');
const answer = await yourAgent(question);
const msg = await db.saveMessage({
  sender: 'agent',
  text: answer.text,
  metadata: agentMetadata({ handoff: answer.handoff, suggestions: answer.suggestions }),
});
typing.stop();
await chat.message(channel, { seq: msg.seq, from: 'agent' });

始める前に

メッセージは自分のデータベースに保存し HTTPS で読み込みます。チャネルはヒントだけを運ぶので、イベントを逃してもポーリングが 1 回増えるだけで、メッセージは失われません。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

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