首页逛逛项目
..

assistnt-ui

2025.03.2812views

base

The AssistantRuntimeProvider provides data and APIs used by assistant-ui components.

Almost all components in assistant-ui require an AssistantRuntimeProvider around them to function properly.

You must either wrap your app in an AssistantRuntimeProvider or pass a runtime to the <Thread /> component instead.

using

import { AssistantRuntimeProvider } from "@assistant-ui/react";
 
const MyApp = () => {
  const runtime = useChatRuntime({ api: "/api/chat" });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your app */}
    </AssistantRuntimeProvider>
  );
};

runtime

assistant-ui offers a variety of runtimes for different use cases.

The following runtimes are recommended for new apps:

  • AI SDK
  • LangGraph Cloud LangGraph

目前我们采用了 Vercel AI SDK。

using

"use client";
 
import { useChat } from "ai/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
export function MyRuntimeProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });
 
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

into runtime code base

查看packages/react-ai-sdk/src/useChatRuntime.ts：

export const useChatRuntime = (options: UseChatRuntimeOptions) => {
  return useEdgeRuntime({
    ...options,
    unstable_AISDKInterop: "v2",
  });
};

进入useEdgeRuntime：

// packages/react/src/runtimes/edge/useEdgeRuntimes
export const useEdgeRuntime = (options: EdgeRuntimeOptions) => {
  const { localRuntimeOptions, otherOptions } =
    splitLocalRuntimeOptions(options);
  // 将options分类，  cloud,initialMessages,maxSteps, adapters,
  // unstable_humanToolNames 分到localRuntimeOptions, 其余在otherOptions中


  return useLocalRuntime(
    new EdgeChatAdapter(otherOptions),
    // EdgeChatAdapter类 实现于 ChatModelAdapter，在其 *run 方法中:
    // const result = await fetch(this.options.api, {...})
    localRuntimeOptions,
  );
};

进入useLocalRuntime：

export const useLocalRuntime = (
  adapter: ChatModelAdapter,
  { cloud, ...options }: LocalRuntimeOptions = {},
) => {
  const cloudAdapter = useCloudThreadListAdapter({ cloud });
  // useCloudThreadListAdapter 主要返回了一些方法：{list,initialize,rename,archive,unarchive,delete,generateTitle}等。
  return useRemoteThreadListRuntime({
    runtimeHook: function RuntimeHook() {
      return useLocalThreadRuntime(adapter, options);
    },
    adapter: cloudAdapter,
  });
};


// ....进入useRemoteThreadListRuntime：
export const useRemoteThreadListRuntime = (
  options: RemoteThreadListOptions,
) => {
  const [runtime] = useState(() => new RemoteThreadListRuntimeCore(options));
  useEffect(() => {
    runtime.threads.__internal_setOptions(options);
    runtime.threads.__internal_load();
    // __internal_load 依次调用:
    // => getLoadThreadsPromise
    // => optimisticUpdate({
    //  execute: () => this._options.adapter.list(),
    //  ...others
    // })
    
    // 这里adapter.list 调用：
    // this.cloud.makeRequest("/threads", { query })
    // makeRequest中调用：
    //  const url = new URL(`${this._baseUrl}/v1${endpoint}`);
    //  const response = await fetch(url, {...})
  }, [runtime, options]);
  return useMemo(() => new AssistantRuntimeImpl(runtime), [runtime]);
};

让我们截图来看看：

image.png
接下来在useEdgeRuntime中：

image.png
再接下来，在useLocalRuntime中：

image.png
然后：

image.png
然后：

image.png

然后：

image.png

然后：

image.png

然后：

image.png

在控制台也能看到如下的调用顺序：

image.png