官方包 · 实时功能组件

给 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 完全相同。免费创建账号 →