assistnt-ui
8views
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.
import { AssistantRuntimeProvider } from "@assistant-ui/react";
const MyApp = () => {
const runtime = useChatRuntime({ api: "/api/chat" });
return (
<AssistantRuntimeProvider runtime={runtime}>
{/* your app */}
</AssistantRuntimeProvider>
);
};
assistant-ui offers a variety of runtimes for different use cases.
The following runtimes are recommended for new apps:
目前我们采用了 Vercel AI SDK。
"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>
);
}
查看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]);
};
让我们截图来看看:
接下来在useEdgeRuntime
中:
再接下来,在useLocalRuntime
中:
然后:
然后:
然后:
然后:
然后:
在控制台也能看到如下的调用顺序: