แพ็กเกจอย่างเป็นทางการ · ชิ้นส่วนเรียลไทม์

หน้าแชตสำหรับเอเจนต์ 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 ลิงก์และรูปมาจากต้นทางที่คุณอนุญาตเท่านั้น
คำถามต่อสูงสุดสามข้อ ป้ายส่งต่อ ปุ่มคัดลอก และเอฟเฟกต์พิมพ์ทีละตัว รองรับเจ็ดภาษา
JavaScript ราว 9 KB หลัง gzip ไม่มี dependency ตอนรัน ใช้ 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 แชนเนลส่งแค่สัญญาณ ถ้าพลาดอีเวนต์ก็แค่โพลเพิ่มหนึ่งครั้ง ไม่มีข้อความหาย
แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →