ストリーミングチャットのために Vercel AI SDK v6 を assistant-ui に統合します。
@assistant-ui/react-ai-sdk の useChatRuntime フックを使用して Vercel AI SDK v6 と統合します。

assistant-ui 入門 : ランタイム – AI SDK v6

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

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

• Runtimes – AI SDK v6

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

 

 

assistant-ui 入門 : ランタイム – AI SDK v6

ストリーミングチャットのために Vercel AI SDK v6 を assistant-ui に統合します。
@assistant-ui/react-ai-sdk の useChatRuntime フックを使用して Vercel AI SDK v6 と統合します。

 

Getting Started

1. Next.js プロジェクトを作成します。

   npx create-next-app@latest my-app
   cd my-app
   

2. 依存関係をインストールします。

   # npm
   npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai@^6 @ai-sdk/react@^3 @ai-sdk/openai zod
   
   # pnpm
   pnpm add @assistant-ui/react @assistant-ui/react-ai-sdk ai@^6 @ai-sdk/react@^3 @ai-sdk/openai zod
   

3. /api/chat 下にバックエンド・ルートを設定する

   @/app/api/chat/route.ts

   import { openai } from "@ai-sdk/openai";
   import {
     streamText,
     convertToModelMessages,
     tool,
     zodSchema,
   } from "ai";
   import type { UIMessage } from "ai";
   import { z } from "zod";
   
   export const maxDuration = 30;
   
   export async function POST(req: Request) {
     const { messages }: { messages: UIMessage[] } = await req.json();
   
     const result = streamText({
       model: openai("gpt-4o"),
       messages: await convertToModelMessages(messages), // Note: async in v6
       tools: {
         get_current_weather: tool({
           description: "Get the current weather",
           inputSchema: zodSchema(
             z.object({
               city: z.string(),
             }),
           ),
           execute: async ({ city }) => {
             return `The weather in ${city} is sunny`;
           },
         }),
       },
     });
   
     return result.toUIMessageStreamResponse();
   }
   

4. フロントエンドのセットアップ

   @/app/page.tsx

   "use client";
   
   import { Thread } from "@/components/assistant-ui/thread";
   import { AssistantRuntimeProvider } from "@assistant-ui/react";
   import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
   
   export default function Home() {
     const runtime = useChatRuntime();
   
     return (
       <AssistantRuntimeProvider runtime={runtime}>
         <div className="h-full">
           <Thread />
         </div>
       </AssistantRuntimeProvider>
     );
   }
   

以上