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

Vercel AI SDK용 이어 받을 수 있는 AI 채팅 스트림

useChat()용 트랜스포트: 답변이 채널로 스트리밍되므로 연결이 끊겨도 사라지지 않고, 새로고침 후 이어지며, 모든 탭과 기기에 전달됩니다. AI SDK 5, 6, 7 지원.

@hibira-io/ai-sdknpm ↗GitHub ↗

  • React, Vue, Svelte, Angular의 어떤 useChat에서도 동작합니다.
  • API 라우트는 바로 응답하고 답변은 백그라운드에서 끝까지 작성됩니다. Redis나 스트림 저장소를 따로 운영할 필요가 없습니다.
  • 텍스트 조각을 3,500바이트 미만의 이벤트로 합치고, resume: true로 채널 기록에서 따라잡습니다(Hobby 이상 요금제).

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

  1. 설치

    npm install @hibira-io/ai-sdk pusher-js pusher

  2. 설정하기

    'use client';
import { useChat } from '@ai-sdk/react';
import Pusher from 'pusher-js';
import { HibiraChatTransport } from '@hibira-io/ai-sdk';

const pusher = new Pusher(process.env.NEXT_PUBLIC_HIBIRA_KEY!, {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
});
const transport = new HibiraChatTransport({ pusher, api: '/api/chat' });

export function Chat({ id, initialMessages }) {
  const { messages, sendMessage } = useChat({ id, messages: initialMessages, transport, resume: true });
  // render messages as usual
}

  3. 사용하기

    // app/api/chat/route.ts
import { after } from 'next/server';
import { streamText, convertToModelMessages } from 'ai';
import Pusher from 'pusher';
import { publishUIMessageStream } from '@hibira-io/ai-sdk/server';

const pusher = new Pusher({
  appId: process.env.HIBIRA_APP_ID!,
  key: process.env.NEXT_PUBLIC_HIBIRA_KEY!,
  secret: process.env.HIBIRA_SECRET!,
  host: 'ws.hibira.io',
  useTLS: true,
});

export async function POST(req: Request) {
  const { id, messages, runId } = await req.json();
  const result = streamText({ model, messages: await convertToModelMessages(messages) });
  after(() =>
    publishUIMessageStream(pusher, {
      chatId: id,
      runId,
      stream: result.toUIMessageStream({ originalMessages: messages, onFinish: ({ messages }) => saveChat(id, messages) }),
    }),
  );
  return Response.json({ runId }, { status: 202 });
}

시작하기 전에

  • 앱 시크릿은 앱을 만들거나 시크릿을 교체할 때 한 번만 표시됩니다. 서버에만 두고, 브라우저나 게임 빌드에는 절대 넣지 마세요.
  • 트랜스포트는 private-ai-chat-{chatId}를 구독합니다. 인증 엔드포인트에서 이 채널을 채팅 소유자에게만 허용하세요.
  • 앱 설정에서 채널 기록을 켜세요(Hobby 이상 요금제). 그래야 새로고침한 페이지가 작성 중인 답변을 이어받을 수 있습니다.

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