はじめに（この記事で扱うこと）

最近のAIチャットサービスではSmooth Text Streamingが導入されており、ユーザーはストレスなく自然に会話を読み進められる体験が提供されています。

一方、この仕組みがないと、テキストが細切れに表示されてカクカクした印象になってしまい、一見些細な違いに見えても、特に文章が長くなると目線が追いにくくなり、気づかないうちにユーザーのストレスにつながっていきます。

Smooth Text Streaming 未導入の場合
テキストが小刻みに表示され、ややカクついた印象を受ける

Smooth Text Streaming 導入時
文字が滑らかに流れ、自然で読みやすい表示になる

このようにAIとの対話体験では、返ってくる内容そのものだけでなく、「どう表示されるか」といった部分もUXを左右する要素になります。

本記事では、Vercel AI SDK v5を通じたSmooth Text Streamingを、最小限のコードでチャットUIに実装する方法を記載します。

Smooth Text Streamingとは

Smooth Text Streamingとは、モデルから届いたテキストをそのまま即時に描画するのではなく、テキストを適切な粒度に分割（chunking）し、一定のテンポで整流（smoothing）して表示するという仕組みです。Vercel AI SDKではstreamText()のexperimental_transformに、smoothStream()を差し込む形で導入でき、テキストが自然なまとまりで滑らかで読みやすいリズムで表示されるようになります。

AI SDK（v5）を使った実装

ざっくり、このような形です。

サーバ側ではstreamText()を呼び出し、テキストに加えてツール実行イベントやstep情報などを含むストリームを得ます（単なるtextStreamと異なり、非テキストのイベントも含むのがポイント）。
このストリームをtoUIMessageStreamResponse()で返すと、フロント側にはUI Message Stream（SSE）として届き、クライアントのuseChatがそれを解釈します（終端には[DONE]マーカー）。
さらに、途中でexperimental_transformを挟んでsmoothStream()を指定すると、テキスト部分のみを自然なまとまりに整形できます。一方で、ツール入出力やメタ情報などの非テキストイベントは整形の対象外となり、遅延をかけずにそのまま送出されます。

以下からは、上記の内容を実際のコード（最小構成）で記載します。

サーバ側

サーバー側では、クライアントからのメッセージを受け取り、AIモデルに渡してストリーミングレスポンスを生成します。

// app/api/chat/route.ts
import { NextRequest } from "next/server";
import {
  streamText,
  smoothStream,
  UIMessage,
  convertToModelMessages,
} from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: NextRequest) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"), // あるいは model: "openai/gpt-4o"（グローバルプロバイダ）
    messages: convertToModelMessages(messages),
    experimental_transform: smoothStream({
      delayInMs: 30, // 既定値は 10ms
      // 日本語は正規表現による区切りが推奨
      chunking: /[\u3040-\u309F\u30A0-\u30FF]|\S+\s+/,
    }),
  });

  // UI Message Stream(SSE)で返す
  return result.toUIMessageStreamResponse();
}

フロント側

// app/chat/Chat.tsx
"use client";

import { useChat } from "@ai-sdk/react";
import { useState, useCallback } from "react";
import { DefaultChatTransport } from "ai";

export default function Chat() {
  const [input, setInput] = useState("");
  
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/chat",
    }),
  });
  
  const isLoading = status === "submitted" || status === "streaming";

  const getTextFromParts = useCallback((parts: Array<{ type: string; text?: string }>) =>
    parts
      .filter((p) => p.type === "text" && typeof p.text === "string")
      .map((p) => p.text as string)
      .join(""), []);

  return (
    <div className="mx-auto max-w-2xl space-y-5">
      {/* ヘッダー */}
      <header className="sticky top-0 z-10 bg-gradient-to-r from-slate-50/80 to-white/80 backdrop-blur border-b border-slate-200 dark:from-slate-900/60 dark:to-slate-900/60 dark:border-slate-800">
        <div className="mx-auto max-w-2xl px-4 py-3 flex items-center justify-between">
          <h1 className="text-base font-semibold tracking-tight">
            <span className="inline-block rounded bg-slate-900 text-white px-2 py-0.5 text-[11px] mr-2">
              Demo
            </span>
            AI SDK Chat
          </h1>
        </div>
      </header>

      {/* アウトプット */}
      <section className="px-4">
        <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 shadow-sm">
          <div className="px-4 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
            <div className="flex items-center gap-2 text-xs text-slate-500">
              <span
                className={`inline-block size-2 rounded-full ${
                  isLoading ? "bg-emerald-500 animate-pulse" : "bg-slate-300"
                }`}
              />
              {isLoading ? "生成中…" : "待機中"}
            </div>
          </div>
          {/* メッセージリスト */}
          <div
            className="px-5 py-4 max-h-[60vh] overflow-y-auto space-y-4"
            aria-live="polite"
          >
            {messages.length === 0 ? (
              <div className="text-center text-slate-400 text-sm py-6">
                ここに出力が表示されます
              </div>
            ) : (
              messages.map((m, idx) => {
                const isUser = m.role === "user";
                const content = getTextFromParts(
                  m.parts as Array<{ type: string; text?: string }>
                );
                
                return (
                  <div key={idx} className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
                    <div className={`flex items-start gap-3 ${isUser ? "flex-row-reverse" : ""} max-w-[85%]`}>
                      <div
                        className={`shrink-0 size-8 rounded-full flex items-center justify-center text-xs font-semibold ${
                          isUser
                            ? "bg-slate-300 text-slate-700"
                            : "bg-slate-900 text-white"
                        }`}
                        aria-hidden
                      >
                        {isUser ? "You" : "AI"}
                      </div>
                      <div
                        className={`${
                          isUser
                            ? "bg-slate-900 text-white"
                            : "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100"
                        } rounded-2xl px-4 py-2.5 shadow-sm whitespace-pre-wrap leading-7 text-[15px]`}
                      >
                        {content}
                      </div>
                    </div>
                  </div>
                );
              })
            )}
          </div>
        </div>
      </section>

      {/* フォーム */}
      <section className="px-4">
        <form onSubmit={(e) => {
          e.preventDefault();
          const value = input.trim();
          if (!value || isLoading) return;
          sendMessage({ text: value });
          setInput("");
        }} className="flex gap-2">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="flex-1 rounded-xl border border-slate-300 bg-white/60 px-4 py-2.5 shadow-sm outline-none placeholder:text-slate-400 focus:ring-2 focus:ring-slate-300 dark:bg-slate-900/40 dark:border-slate-700"
            placeholder="なんでも質問してみてください…"
            aria-label="Message"
            disabled={status !== "ready"}
          />
          <button
            type="submit"
            disabled={status !== "ready"}
            className="rounded-xl bg-slate-900 text-white px-5 py-2.5 text-sm font-medium shadow-sm transition disabled:opacity-50 hover:bg-slate-800"
          >
            {isLoading ? "Sending…" : "Send"}
          </button>
        </form>
      </section>
    </div>
  );
}

smoothStream()のポイント

delayInMs：既定10ms。20–30msとかで試すと、滑らかな流れになる印象。
chunking：既定は 'word'。日本語は空白で単語が切れないため、デモコード記載のように正規表現での分割が推奨。
非テキストイベントは即時通過：smoothStream()はテキスト以外の部品は遅延させずに送出される。

補足：プロトコルの選び分け（UI Message Stream/Text Stream）

UI Message Stream：テキスト以外にもToolの入出力やステップなどをすべて同じSSEストリームに乗せて配信できる方式。実装には toUIMessageStreamResponse()を用い、ストリームの終端は[DONE]で通知されます。複数の情報をまとめて扱えるため、ツール連携やイベント処理が必要な複合的なUIに適しています。
Text Stream：テキストのみを流す軽量なプロトコルです。利用する際は toTextStreamResponse()とTextStreamChatTransportを組み合わせて実装します。テキスト以外の情報は不要で、単純に文章を表示できれば十分というシンプルなUIに向いています。

おわりに

最近ではAI関連のサービスに触れる機会が格段に増え、「AIを交えたUX設計」が求められる場面も確実に増えてきている中で、今回のAIチャットに関しても、個人的にも一見すると些細な違いに思える部分ですが、単にモデルの返答をそのまま表示するのではなく、“どう表示するか”を調整するだけで体験の印象は大きく変わるのだと実感しました。そう考えると、このような一見小さな工夫も、これからのAI体験を左右する大切なポイントになっていくのかなと思いました。

参考

AI SDK — smoothStream()：https://ai-sdk.dev/docs/reference/ai-sdk-core/smooth-stream
AI SDK — streamText()：https://ai-sdk.dev/docs/reference/ai-sdk-core/stream-text
AI SDK — Stream Protocols ：https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol

Discussion