assistant-ui 入門 : バックエンド統合 – ランタイムの選択

Posted on by Masashi Okumura

使用しているバックエンドにどのランタイムが最適でしょうか？一般的なセットアップのための意思決定ガイドです。
assistant-ui の実装には、適切なランタイムの選択は重要です。このガイドは特定のニーズに基づいて選択肢を検討するのに役立ちます。

assistant-ui 入門 : バックエンド統合 – ランタイムの選択

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

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

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

 

 

assistant-ui 入門 : バックエンド統合 – ランタイムの選択

使用しているバックエンドにどのランタイムが最適でしょうか？一般的なセットアップのための意思決定ガイドです。
assistant-ui の実装には、適切なランタイムの選択は重要です。このガイドは特定のニーズに基づいて選択肢を検討するのに役立ちます。

 

迅速な決定木

 

コアランタイム

これらは assistant-ui を駆動する基礎的なランタイムです :

  • LocalRuntime – assistant-ui は状態を内部的に管理します。任意のバックエンドに対応する単純なアダプタパターンです。

  • ExternalStoreRuntime – 状態を制御します。Redux, Zustand, 既存の状態管理に最適です。

 

事前構築済みの統合

人気のフレームワーク向けに、コアランタイム上に構築された、簡単に使える統合機能を提供しています :

  • Vercel AI SDK – useChat と useAssistant フック用 – すべての主要なプロバイダーとのストリーミング

  • データ・ストリーム・プロトコル – データストリームプロトコル標準を使用したカスタムバックエンド向け

  • LangGraph – LangChain のグラフ・フレームワークによる複雑なエージェントワークフロー向け

  • LangServe – LangServe を使用して配備された LangChain アプリケーション向け

  • Mastra – Mastra エコシステムによるワークフロー・オーケストレーション向け

 

ランタイム・アーキテクチャの理解

事前構築済み統合の仕組み

事前構築済み統合（AI SDK、LangGraph 等）は、分離したランタイムタイプではありません。コアランタイム上に構築された便利なラッパーです :

  • AI SDK 統合 → ストリーミングアダプターを使用して LocalRuntime 上に構築

  • LangGraph ランタイム → グラフ実行アダプターを使用して LocalRuntime 上に構築

  • LangServe ランタイム → LangServe クライアントアダプターを使用して LocalRuntime 上に構築

  • Mastra ランタイム → ワークフローアダプターを使用して LocalRuntime 上に構築

つまり、LocalRuntime のすべてのメリット（自動状態管理、組み込み機能）を、特定のフレームワーク向けの設定なしで利用できます。

 

事前構築済み vs コアランタイムの使い分け

◇ 次のような場合には事前構築済み統合を使用します :

  • 既にそのフレームワークを使用している場合

  • できる限り迅速なセットアップを望む場合

  • 統合がニーズを満たしている場合

 
◇ 次のような場合にはコアランタイムを使用します :

  • カスタムバックエンドがある場合

  • 統合では公開されていない機能を必要とする場合

  • 実装への完全な制御を望む場合

ℹ️ Pre-built integrations can always be replaced with a custom LocalRuntime or ExternalStoreRuntime implementation if you need more control later.

 

一般的な実装パターン

Vercel AI SDK with ストリーミング

import { useChatRuntime } from "@assistant-ui/react-ai-sdk";

export function MyAssistant() {
  const runtime = useChatRuntime();

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

 
カスタムバックエンド with LocalRuntime

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

const runtime = useLocalRuntime({
  async run({ messages, abortSignal }) {
    const response = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages }),
      signal: abortSignal,
    });
    return response.json();
  },
});

 
Redux 統合 with ExternalStoreRuntim

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

const messages = useSelector(selectMessages);
const dispatch = useDispatch();

const runtime = useExternalStoreRuntime({
  messages,
  onNew: async (message) => {
    dispatch(addUserMessage(message));
    const response = await api.chat(message);
    dispatch(addAssistantMessage(response));
  },
  setMessages: (messages) => dispatch(setMessages(messages)),
  onEdit: async (message) => dispatch(editMessage(message)),
  onReload: async (parentId) => dispatch(reloadMessage(parentId)),
});

 

例

実装例を探求しましょう :

 

以上