assistant-ui ストリーミング

最新 API については常に assistant-ui.com/llms.txt を参照してください。

assistant-stream パッケージは AI バックエンドからのストリーミングを処理します。

リファレンス

• ./references/data-stream.md -- AI SDK データストリーム形式
• ./references/assistant-transport.md -- ネイティブ assistant-ui 形式
• ./references/encoders.md -- エンコーダーとデコーダー

使用時期

Vercel AI SDK を使用していますか？
├─ はい → toUIMessageStreamResponse() (assistant-stream は不要)
└─ いいえ → カスタムバックエンドの場合は assistant-stream

インストール

npm install assistant-stream

カスタムストリーミングレスポンス

import { createAssistantStreamResponse } from "assistant-stream";

export async function POST(req: Request) {
  return createAssistantStreamResponse(async (stream) => {
    stream.appendText("Hello ");
    stream.appendText("world!");

    // ツール呼び出しの例
    const tool = stream.addToolCallPart({ toolCallId: "1", toolName: "get_weather" });
    tool.argsText.append('{"city":"NYC"}');
    tool.argsText.close();
    tool.setResponse({ result: { temperature: 22 } });

    stream.close();
  });
}

useLocalRuntime と一緒に使用

useLocalRuntime は ChatModelRunResult チャンクを期待します。ストリーミング用にコンテンツパーツを生成します：

import { useLocalRuntime } from "@assistant-ui/react";

const runtime = useLocalRuntime({
  model: {
    async *run({ messages, abortSignal }) {
      const response = await fetch("/api/chat", {
        method: "POST",
        body: JSON.stringify({ messages }),
        signal: abortSignal,
      });

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let buffer = "";

      while (reader) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const parts = buffer.split("\n");
        buffer = parts.pop() ?? "";

        for (const chunk of parts.filter(Boolean)) {
          yield { content: [{ type: "text", text: chunk }] };
        }
      }
    },
  },
});

ストリームのデバッグ

import { AssistantStream, DataStreamDecoder } from "assistant-stream";

const stream = AssistantStream.fromResponse(response, new DataStreamDecoder());
for await (const event of stream) {
  console.log("Event:", JSON.stringify(event, null, 2));
}

ストリームイベント型

• part-start (part.type = "text" | "reasoning" | "tool-call" | "source" | "file")
• text-delta ストリームされたテキスト付き
• result ツール結果付き
• step-start, step-finish, message-finish
• error 文字列

よくある落とし穴

ストリームが UI を更新しない

• Content-Type が text/event-stream であることを確認してください
• CORS エラーを確認してください

ツール呼び出しがレンダリングされない

• addToolCallPart は toolCallId と toolName の両方が必要です
• makeAssistantToolUI でツール UI を登録してください

部分的なテキストが表示されない

• ストリーミングには text-delta イベントを使用してください