LLM は推論ステップとツール呼び出しを連続的に生成する場合がよくあります。思考の連鎖 (Chain of Thought) は、推論とツール呼び出しを折りたたみ式のアコーディオン UI にまとめます。

assistant-ui 入門 – ガイド : 思考の連鎖

作成 : Masashi Okumura (@classcat.com)
作成日時 : 03/24/2026
バージョン : assistant-ui@0.0.84

* 本記事は assistant-ui.com/docs の以下のページを参考にしています :

• Guides : Chain of Thought

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

 

assistant-ui 入門 – ガイド : 思考の連鎖

推論とツール呼び出しを折りたたみ式のアコーディオン UI にまとめます。

LLM は推論ステップとツール呼び出しを連続的に生成する場合がよくあります。思考の連鎖 (Chain of Thought) は、これらの連続的なパーツを視覚的にグループ分けして、単一の折りたたみ式アコーディオン UI にまとめることができて、ユーザにわかりやすい「思考 (thinking)」UI を提供します。

 

概要

OpenAI の o4-mini のようなモデルが応答する際、最終的なテキスト回答を生成する前に、推論トークンとツール呼び出しのシークエンスを出力する場合があります。デフォルトでは、これらのパーツは個別にレンダリングされます。ChainOfThoughtPrimitive は連続的な推論 + ツール呼び出しのパーツをまとめて、単一のコンポーネントを通してレンダリングします。

主なメリット :

• スッキリした (Cleaner) UI – 中間ステップを「考え中 (Thinking)」トグルの裏側に折り畳みます

• より良いコンテキスト – ユーザは推論とツール呼び出しが関連していることを確認できます

• 組み込みアコーディオン – ワンクリックで展開/折りたたみ可能; デフォルトで折りたたまれます

 

クイックスタート

1. ChainOfThought コンポーネントを MessagePrimitive.Parts に渡す
   MessagePrimitive.Parts は ChainOfThought コンポーネントを受け取ります。提供された場合、連続的な推論とツール呼び出しパートは自動的にグループ化されてレンダリングされます。

   import {
     AuiIf,
     ChainOfThoughtPrimitive,
     MessagePrimitive,
   } from "@assistant-ui/react";
   import type { FC } from "react";
   
   const Reasoning: FC<{ text: string }> = ({ text }) => {
     return (
       <p className="whitespace-pre-wrap px-4 py-2 text-muted-foreground text-sm italic">
         {text}
       </p>
     );
   };
   
   const ChainOfThought: FC = () => {
     return (
       <ChainOfThoughtPrimitive.Root className="my-2 rounded-lg border">
         <ChainOfThoughtPrimitive.AccordionTrigger className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 font-medium text-sm hover:bg-muted/50">
           Thinking
         </ChainOfThoughtPrimitive.AccordionTrigger>
         <AuiIf condition={(s) => !s.chainOfThought.collapsed}>
           <ChainOfThoughtPrimitive.Parts>
             {({ part }) => {
               if (part.type === "reasoning") return ;
               if (part.type === "tool-call") return ;
               return null;
             }}
           </ChainOfThoughtPrimitive.Parts>
         </AuiIf>
       </ChainOfThoughtPrimitive.Root>
     );
   };
   
   const AssistantMessage: FC = () => {
     return (
       <MessagePrimitive.Root>
         <MessagePrimitive.Parts>
           {({ part }) => {
             if (part.type === "text") return <MarkdownText />;
             return null;
           }}
         </MessagePrimitive.Parts>
       </MessagePrimitive.Root>
     );
   };
   

2. 推論モデルの使用
   思考の連鎖は、推論トークンを生成するモデル (e.g. OpenAI o4-mini) で最も役立ちます。以下は、Vercel AI SDK を使用したバックエンド・ルートの例です :

   app/api/chat/route.ts

   import { openai } from "@ai-sdk/openai";
   import { streamText, convertToModelMessages } from "ai";
   
   export async function POST(req: Request) {
     const { messages } = await req.json();
   
     const result = streamText({
       model: openai("o4-mini"),
       messages: await convertToModelMessages(messages),
     });
   
     return result.toUIMessageStreamResponse();
   }
   

 

API リファレンス

ChainOfThoughtPrimitive.Root – 思考の連鎖のグループのためのコンテナ要素。<div> をレンダリングします。

ChainOfThoughtPrimitive.AccordionTrigger – 折りたたみ/展開状態を切り替えるボタン。デフォルトは折りたたみ。

ChainOfThoughtPrimitive.Parts – 展開されたときグループ化されたパーツがレンダリングされます (折りたたまれた状態では何も表示されません)。

以上