Gói chính thức · Thành phần thời gian thực

Giao diện chat cho AI agent, chuyển sang người khi cần

Khung chat hỗ trợ mã nguồn mở: AI agent trả lời trước, người thật vào khi cần. Hiển thị agent đang làm gì khi viết, hiển thị Markdown an toàn, gợi ý câu hỏi tiếp theo và đánh dấu khi đã chuyển cho đội của bạn.

@hibira-io/chat-uinpm ↗GitHub ↗

Cách nhanh nhất: plugin Hibira và một prompt

Cài plugin vào agent lập trình AI của bạn rồi dán prompt. Agent sẽ đăng nhập, tạo ứng dụng miễn phí nếu cần, viết mã và gửi một sự kiện thử. GitHub ↗

Cài plugin

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

Dán prompt này

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.

Muốn tự làm? Các bước bên dưới:

Cài đặt
Hiển thị khung chat
Trả lời từ máy chủ

Công cụ AI khác và nội dung plugin →

Các bước của agent như Đang đọc câu hỏi, Đang xem tài khoản, hiển thị trực tiếp từ gợi ý backend gửi.
Markdown an toàn, không bao giờ chèn dưới dạng HTML; liên kết và ảnh chỉ từ nguồn bạn cho phép.
Tối đa ba gợi ý câu hỏi tiếp, nhãn chuyển người, nút sao chép và hiệu ứng gõ chữ, bằng bảy ngôn ngữ.
Khoảng 9 KB JavaScript sau gzip, không phụ thuộc lúc chạy; React là tùy chọn.

Một cuộc trò chuyện hỗ trợ trong chat-ui: trả lời tự động có khối mã, nút sao chép và câu hỏi gợi ý tiếp theo.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

Cài đặt

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

Hiển thị khung chat

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} />;
}

Trả lời từ máy chủ

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' });

Trước khi bắt đầu

Tin nhắn nằm trong cơ sở dữ liệu của bạn và được đọc qua HTTPS; kênh chỉ mang gợi ý, nên lỡ một sự kiện chỉ tốn một lần polling, không mất tin nhắn.
Kênh private và presence cần một auth endpoint trên backend ký các lượt đăng ký bằng secret của ứng dụng, giống như với pusher-js.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →