Axiom Lattice 反应 SDK
与 Axiom Lattice 代理服务器 API 交互反应钩.
概览
这个软件包提供了将Axiom Lattice客户端SDK包裹起来的回放钩子,使得将代理能力融入到您的回放应用程序中变得容易. 它包括用于管理线程,发送和接收消息的钩子,监测代理状态等.
建筑
flowchart TD
subgraph "Client SDK"
ClientSDK["@axiom-lattice/client-sdk"]
Client["Client Class"]
ClientTypes["Types"]
ClientSDK --> Client
ClientSDK --> ClientTypes
end
subgraph "React SDK"
ReactSDK["@axiom-lattice/react-sdk"]
subgraph "Context"
Provider["AxiomLatticeProvider"]
useAxiomLattice["useAxiomLattice()"]
end
subgraph "Hooks"
useThread["useThread()"]
useChat["useChat()"]
useAgentState["useAgentState()"]
useAgentGraph["useAgentGraph()"]
end
ReactTypes["Types"]
Examples["Example Components"]
ReactSDK --> Provider
ReactSDK --> useAxiomLattice
ReactSDK --> useThread
ReactSDK --> useChat
ReactSDK --> useAgentState
ReactSDK --> useAgentGraph
ReactSDK --> ReactTypes
ReactSDK --> Examples
end
Client --> useAxiomLattice
useAxiomLattice --> useThread
useAxiomLattice --> useChat
useAxiomLattice --> useAgentState
useAxiomLattice --> useAgentGraph
subgraph "React Application"
AppComponent["App Component"]
ChatComponent["Chat Component"]
ThreadList["Thread List"]
StateMonitor["State Monitor"]
end
Provider --> AppComponent
useThread --> ThreadList
useChat --> ChatComponent
useAgentState --> StateMonitor
安装
npm install @axiom-lattice/react-sdk
# or
yarn add @axiom-lattice/react-sdk
# or
pnpm add @axiom-lattice/react-sdk
特征
- 所有客户端 SDK 功能的反应钩
- 配置的反应上下文提供者
- 类型脚本支持
- 简化线索和信件的状态管理
- 用 React 状态更新来流化支持
- 专用外部代理 Web App 服务商、可复合部件组件和钩子
代理网络应用程序
从单独的入口导入外部出版集成, 并包含其样式表 :
import { AgentWebAppProvider, WidgetComposer, WidgetMessageList } from "@axiom-lattice/react-sdk/web-app";
import "@axiom-lattice/react-sdk/web-app/styles.css";
interface PublishedAgentProps { currentUser: { id: string; name?: string } }
export function PublishedAgent({ currentUser }: PublishedAgentProps) {
return (
<AgentWebAppProvider
gatewayUrl="http://localhost:4001"
webAppId="support-web-app"
identity={{ mode: "unverified", userId: currentUser.id, displayName: currentUser.name }}
>
<main>
<WidgetMessageList />
<WidgetComposer />
</main>
</AgentWebAppProvider>
);
}
React and React DOM 18+是同级依赖关系. 编组部件使用捆绑的基于 Ant 设计的 UI 依赖性; 对于完整的 Console 聊天体验使用 AgentChatApp 从根入. Web App的代理,项目/模型允许列表,功能,外观都是被管理的服务器侧;浏览器道具无法扩展.
警卫: 当前 userId 以未经验证的浏览器头发送,并且可以冒充。 它只提供逻辑线程分组,而不是认证或安全隔离. 不要公开揭露敏感历史或特权代理人。 使用 供应商整合移交 跨小组交付和完成 代理网络应用程序文档 供参考.
使用量
提供者设置
首先,用 AxiomLatticeProvider 以提供客户端配置:
import { AxiomLatticeProvider } from "@axiom-lattice/react-sdk";
function App() {
return (
<AxiomLatticeProvider
config={{
baseURL: "https://api.example.com",
apiKey: "your-api-key",
assistantId: "your-assistant-id",
transport: "sse",
}}
>
<YourApp />
</AxiomLatticeProvider>
);
}
线索管理
使用 useThread 管理线程的钩线 :
import { useThread } from "@axiom-lattice/react-sdk";
function ThreadManager() {
const {
threads,
currentThread,
isLoading,
error,
createThread,
getThread,
listThreads,
deleteThread,
selectThread,
} = useThread();
useEffect(() => {
// Load all threads on component mount
listThreads();
}, [listThreads]);
const handleCreateThread = async () => {
try {
const threadId = await createThread();
console.log(`Created thread: ${threadId}`);
} catch (error) {
console.error("Failed to create thread:", error);
}
};
return (
<div>
<h2>Threads</h2>
<button onClick={handleCreateThread} disabled={isLoading}>
Create New Thread
</button>
{error && <div className="error">{error.message}</div>}
<ul>
{threads.map((thread) => (
<li key={thread.id}>
Thread #{thread.id.substring(0, 8)}
<button onClick={() => selectThread(thread.id)}>Select</button>
<button onClick={() => deleteThread(thread.id)}>Delete</button>
</li>
))}
</ul>
{currentThread && (
<div>
<h3>Current Thread: {currentThread.id.substring(0, 8)}</h3>
</div>
)}
</div>
);
}
聊天功能
使用 useChat 发送和接收消息的钩钩 :
import { useChat } from "@axiom-lattice/react-sdk";
function ChatInterface({ threadId }) {
const {
messages,
streamingMessage,
isLoading,
error,
sendMessage,
stopStreaming,
loadMessages,
} = useChat(threadId, { streaming: true });
const [inputValue, setInputValue] = useState("");
const handleSend = async () => {
if (!inputValue.trim()) return;
try {
await sendMessage(inputValue);
setInputValue("");
} catch (error) {
console.error("Failed to send message:", error);
}
};
return (
<div>
<div className="messages">
{messages.map((message) => (
<div key={message.id} className={`message ${message.role}`}>
<div className="role">{message.role}</div>
<div className="content">{message.content}</div>
</div>
))}
{streamingMessage && (
<div className="message assistant streaming">
<div className="role">assistant</div>
<div className="content">{streamingMessage.content}</div>
</div>
)}
</div>
{error && <div className="error">{error.message}</div>}
<div className="input-area">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
disabled={isLoading}
placeholder="Type your message..."
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSend();
}
}}
/>
<button onClick={handleSend} disabled={isLoading}>
Send
</button>
{isLoading && <button onClick={stopStreaming}>Stop</button>}
</div>
</div>
);
}
国家监测
使用 useAgentState 监视代理状态的钩子 :
import { useAgentState } from "@axiom-lattice/react-sdk";
function AgentStateMonitor({ threadId }) {
const { agentState, isLoading, error, startPolling, stopPolling, refresh } =
useAgentState(threadId, {
pollingInterval: 3000,
autoStart: true,
});
if (isLoading && !agentState) {
return <div>Loading agent state...</div>;
}
if (error) {
return <div className="error">Error: {error.message}</div>;
}
if (!agentState) {
return <div>No agent state available</div>;
}
return (
<div>
<h3>Agent State</h3>
<button onClick={refresh}>Refresh</button>
<button onClick={startPolling}>Start Polling</button>
<button onClick={stopPolling}>Stop Polling</button>
<div>
<h4>Messages</h4>
<pre>{JSON.stringify(agentState.values.messages, null, 2)}</pre>
</div>
<div>
<h4>Tasks</h4>
<pre>{JSON.stringify(agentState.tasks, null, 2)}</pre>
</div>
</div>
);
}
代理图形可视化
使用 useAgentGraph 抓取和显示代理图的钩子 :
import { useAgentGraph } from "@axiom-lattice/react-sdk";
function AgentGraph() {
const { graphImage, isLoading, error, fetchGraph } = useAgentGraph();
useEffect(() => {
fetchGraph();
}, [fetchGraph]);
if (isLoading && !graphImage) {
return <div>Loading graph...</div>;
}
if (error) {
return <div className="error">Error: {error.message}</div>;
}
return (
<div>
<h3>Agent Graph</h3>
<button onClick={fetchGraph}>Refresh Graph</button>
{graphImage && (
<div className="graph-container">
<img
src={`data:image/svg+xml;base64,${graphImage}`}
alt="Agent Graph"
/>
</div>
)}
</div>
);
}
文件浏览器组件
使用 FileExplorer 从代理状态显示和探索文件的组件 :
import { FileExplorer, useChat } from "@axiom-lattice/react-sdk";
function AgentFiles({ threadId }) {
// Ensure enableReturnStateWhenStreamCompleted is true to get the agent state
const { agentState } = useChat(threadId, {
streaming: true,
enableReturnStateWhenStreamCompleted: true,
});
// Extract files from agent state values
// Assuming agent returns files in agentState.values.files
const files = agentState?.values?.files || [];
return (
<div style={{ height: "500px" }}>
<h3>Agent Files</h3>
<FileExplorer files={files} />
</div>
);
}
完整示例
见 examples 一个使用 React SDK 的聊天应用程序的完整示例的目录 .
API 参考
钩子
useThread: 线索管理useChat: 聊天功能useAgentState: 代理状态监测useAgentGraph: 代理图形可视化
A. 背景情况
AxiomLatticeProvider: 客户端的提供者组件useAxiomLattice: Hook 访问客户实例
捐款
欢迎捐款! 请随意提交拉力请求.