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

สตรีมแชต AI ที่ต่อได้สำหรับ Vercel AI SDK

transport สำหรับ useChat(): คำตอบสตรีมผ่านแชนเนล จึงไม่หายเมื่อหลุดการเชื่อมต่อ ต่อได้หลังรีโหลด และไปถึงทุกแท็บและอุปกรณ์ รองรับ AI SDK 5, 6 และ 7

@hibira-io/ai-sdknpm ↗GitHub ↗

• ใช้ได้กับ useChat ทุกแบบ: React, Vue, Svelte และ Angular
• API route ตอบกลับทันที และคำตอบเขียนจนจบในเบื้องหลัง โดยไม่ต้องดูแล 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 });
   }

ก่อนเริ่ม

• ซีเคร็ตของแอปจะแสดงเพียงครั้งเดียว ตอนสร้างแอปหรือตอนหมุนเวียนซีเคร็ต เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ห้ามใส่ในเบราว์เซอร์หรือไฟล์บิลด์ของเกม
• transport สมัครรับ private-ai-chat-{chatId} endpoint ยืนยันสิทธิ์ของคุณควรอนุญาตแชนเนลนี้เฉพาะเจ้าของแชต
• เปิดประวัติของแชนเนลในการตั้งค่าของแอป (แพ็กเกจ Hobby ขึ้นไป) เพื่อให้หน้าที่รีโหลดต่อคำตอบที่ยังเขียนอยู่ได้

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