assistant-ui Runtime

常に assistant-ui.com/llms.txt で最新の API を確認してください。

リファレンス

• ./references/local-runtime.md -- useLocalRuntime 詳解
• ./references/external-store.md -- useExternalStoreRuntime 詳解
• ./references/thread-list.md -- スレッドリスト管理
• ./references/state-hooks.md -- 状態アクセスフック
• ./references/types.md -- 型定義

ランタイム階層

AssistantRuntime
├── ThreadListRuntime (スレッド管理)
│   ├── ThreadListItemRuntime (スレッドごとのアイテム)
│   └── ...
└── ThreadRuntime (現在のスレッド)
    ├── ComposerRuntime (入力状態)
    └── MessageRuntime[] (メッセージごと)
        └── MessagePartRuntime[] (コンテンツ部分ごと)

状態アクセス (最新 API)

import { useAui, useAuiState, useAuiEvent } from "@assistant-ui/react";

function ChatControls() {
  const api = useAui();
  const messages = useAuiState(s => s.thread.messages);
  const isRunning = useAuiState(s => s.thread.isRunning);

  useAuiEvent("composer.send", (e) => {
    console.log("Sent in thread:", e.threadId);
  });

  return (
    <div>
      <button onClick={() => api.thread().append({
        role: "user",
        content: [{ type: "text", text: "Hello!" }],
      })}>
        Send
      </button>
      {isRunning && (
        <button onClick={() => api.thread().cancelRun()}>Cancel</button>
      )}
    </div>
  );
}

スレッド操作

const api = useAui();
const thread = api.thread();

// メッセージを追加
thread.append({ role: "user", content: [{ type: "text", text: "Hello" }] });

// 生成をキャンセル
thread.cancelRun();

// 現在の状態を取得
const state = thread.getState();  // { messages, isRunning, ... }

メッセージ操作

const message = api.thread().message(0);  // インデックスで指定

message.edit({ role: "user", content: [{ type: "text", text: "Updated" }] });
message.reload();

イベント

useAuiEvent("thread.runStart", () => {});
useAuiEvent("thread.runEnd", () => {});
useAuiEvent("composer.send", ({ threadId }) => {
  console.log("Sent in thread:", threadId);
});
useAuiEvent("thread.modelContextUpdate", () => {});

機能

const caps = useAuiState(s => s.thread.capabilities);
// { cancel, edit, reload, copy, speak, attachments }

クイックリファレンス

// メッセージを取得
const messages = useAuiState(s => s.thread.messages);

// 実行中の状態を確認
const isRunning = useAuiState(s => s.thread.isRunning);

// メッセージを追加
api.thread().append({ role: "user", content: [{ type: "text", text: "Hi" }] });

// 生成をキャンセル
api.thread().cancelRun();

// メッセージを編集
api.thread().message(index).edit({ ... });

// メッセージを再読み込み
api.thread().message(index).reload();

よくある落とし穴

「Cannot read property of undefined」

• フックが AssistantRuntimeProvider の内側で呼び出されていることを確認してください

状態が更新されない

• useAuiState でセレクタを使用して、不要な再レンダリングを防いでください

メッセージ配列が空

• ランタイムが設定されていることを確認してください
• API レスポンスの形式を確認してください