官方套件 · 即時功能元件

給 AI 助手用、可轉接真人的聊天介面

開源的客服聊天介面：AI 助手先回答，需要時再由真人接手。回覆時會顯示助手正在做什麼，安全地渲染 Markdown，提供後續問題，並標示已轉給你的團隊。

@hibira-io/chat-uinpm ↗GitHub ↗

最快的方式：裝好 Hibira 外掛，貼上一段提示詞

在你的 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 插入；連結和圖片只來自你允許的來源。
最多三個後續問題建議、轉接標記、複製按鈕和打字效果，支援七種語言。
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 讀取；頻道只傳提示，漏掉一個事件只會多一次輪詢，不會少一則訊息。
私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。免費建立帳號 →