공식 패키지 · 실시간 구성 요소

사람에게 넘길 수 있는 AI 에이전트용 채팅 UI

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 도구와 플러그인 구성 →

"질문을 읽는 중", "계정을 확인하는 중" 같은 에이전트 단계를 백엔드가 보내는 힌트로 실시간 표시합니다.
HTML로 삽입하지 않는 안전한 Markdown, 링크와 이미지는 허용한 출처에서만.
최대 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로 읽습니다. 채널은 힌트만 전달하므로 이벤트를 놓쳐도 폴링이 한 번 늘 뿐 메시지는 사라지지 않습니다.
프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →