Replies: 1 comment
-
useXAgent和useXChat是应用层功能hook,XStream和XRequest是更底层的工具,useXAgent默认使用XRequest发起OpenAI标准请求,XRequest使用XStream转换流数据,通常在应用开发中使用useXAgent和useXChat即可处理ai交互,当需要自定义请求和流数据转换逻辑时使用XStream和XRequest为useXAgent实现自定义请求。 这里有更详细的解答,或者通过AI工具进行交互式问答(antx-vue deepwiki 或 antx-deepwiki): 介绍
四者的关系和作用架构层级关系flowchart TD
subgraph "应用层"
useXChat["useXChat<br/>对话状态管理"]
useXAgent["useXAgent<br/>模型代理"]
end
subgraph "工具层"
XRequest["XRequest<br/>API 客户端"]
XStream["XStream<br/>流处理器"]
end
useXChat --> useXAgent
useXAgent --> XRequest
XRequest --> XStream
各组件的具体作用useXAgent - 模型调度 Hook
useXChat - 对话数据管理 Hook
XRequest - API 客户端工具
XStream - 流处理工具
协作关系在实际运行中, for await (const chunk of XStream({
readableStream: response.body!,
transformStream,
})) {
chunks.push(chunk);
callbacks?.onUpdate?.(chunk);
} 而 new XAgent<Message>({
request:
request! ||
XRequest({
baseURL: restConfig.baseURL!,
model: restConfig.model,
dangerouslyApiKey: restConfig.dangerouslyApiKey,
}).create,
...restConfig,
}) 最佳实践1. 完整的对话应用架构推荐使用 const [agent] = useXAgent({
request: async (info, callbacks) => {
// 自定义请求逻辑
},
});
const { onRequest, messages } = useXChat({ agent });
return (
<div>
<Bubble.List items={items} />
<Sender onSubmit={onRequest} />
</div>
); 2. 模型服务集成对于标准的 OpenAI 兼容服务,使用预设配置 : const [agent] = useXAgent({
baseURL: 'https://api.example.com/v1',
model: 'gpt-4',
dangerouslyApiKey: 'your-api-key',
}); 对于自定义服务,使用自定义请求函数 。 3. 直接使用底层工具当需要更细粒度的控制时,可以直接使用
4. 动态配置管理支持运行时动态更新配置 ,适用于需要切换模型或服务端点的场景。 Notes这四个工具形成了分层的架构: |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
看起来XStream 、XRequest都是处理后端接口的
那useXAgent到底干什么用的,我看useXAgent也重复了XRequest的功能。
因为本项目文档都是偏向使用h()函数的写法,感觉像react的写法。而不是vue常见的template写法。所以看不太懂
有没有厉害大佬给我解解惑呀,
拜谢
Beta Was this translation helpful? Give feedback.
All reactions