Client SDK for interacting with IXO Oracles, designed for React applications
npm install @ixo/oracles-client-sdk> Production-ready React SDK for building AI-powered applications with IXO Oracles
- Real-time Streaming - AI responses with optimized streaming
- Chat Management - Complete session and message management
- Custom UI Components - Extensible component system for rich interactions
- Voice & Video Calls - Encrypted live agent calls
- Memory Engine - Optional persistent context across sessions
- Payment Integration - Built-in oracle payment handling
- Type Safe - Full TypeScript support with comprehensive types
``bash`
npm install @ixo/oracles-client-sdkor
pnpm add @ixo/oracles-client-sdkor
yarn add @ixo/oracles-client-sdk
`tsx
import {
OraclesProvider,
useChat,
useOracleSessions,
renderMessageContent,
} from '@ixo/oracles-client-sdk';
function App() {
return (
address: 'ixo1...',
did: 'did:ixo:entity:...',
matrix: { accessToken: 'syt_...' },
}}
transactSignX={async (messages, memo) => {
// Handle blockchain transactions
return undefined;
}}
>
);
}
function ChatInterface() {
const oracleDid = 'did:ixo:entity:oracle-id';
// Create or get session
const { createSession, sessions } = useOracleSessions(oracleDid);
const sessionId = sessions?.[0]?.sessionId;
// Chat functionality
const { messages, sendMessage, isSending } = useChat({
oracleDid,
sessionId: sessionId || '',
onPaymentRequiredError: (claimIds) => {
console.log('Payment required:', claimIds);
},
});
return (
{/ Messages /}
{/ Input /}
e.preventDefault();
const input = e.currentTarget.message;
sendMessage(input.value);
input.value = '';
}}
>
📚 Documentation
- Usage Guide - Complete walkthrough with examples
- API Reference - Full API documentation
- Tool Calls & Browser Tools - Tool calls and browser-side tools
- Examples - Practical code examples
- Live Agent - Voice & video calls guide
Key Concepts
$3
The SDK stores messages as plain data (not React elements) for optimal performance. Use
to transform messages into UI:`tsx
import { renderMessageContent } from '@ixo/oracles-client-sdk';// Handles strings, custom components, and mixed content
{
messages.map((msg) => (
{renderMessageContent(msg.content, uiComponents)}
));
}
`$3
Register custom components for rich interactions:
tsx
const uiComponents = {
WeatherWidget: (props) => (
Weather in {props.city}
{props.temperature}°C
),
PriceChart: (props) =>
};const { messages } = useChat({
oracleDid,
sessionId,
uiComponents, // Pass to useChat
onPaymentRequiredError: () => {},
});
`$3
Messages stream in real-time with optimized performance:
- RAF Batching: Uses
to batch multiple rapid updates into single render cycles, preventing UI stuttering during high-frequency streaming
- Efficient State Updates: Shallow copies only (no expensive deep cloning)
- Smooth Performance: Maintains 60fps streaming even at 100+ chunks/sec
- Memory Optimized: Metadata-based component storage reduces memory footprint$3
Live agent calls are lazy loaded to keep your bundle small:
`tsx
// Import separately to avoid loading ~500KB unless needed
import { useLiveAgent } from '@ixo/oracles-client-sdk/live-agent';
`🛠️ Core APIs
$3
-
- Real-time chat with streaming
- useOracleSessions - Session management
- useContractOracle - Payment and authorization
- useMemoryEngine - Matrix room management and memory engine setup
- useLiveAgent - Voice/video calls (separate bundle)$3
-
OraclesProvider - Required context provider
- renderMessageContent - Message renderer utility$3
-
IMessage - Message structure
- MessageContent - Content types (string | metadata | array)
- IComponentMetadata - Custom component metadata
- IChatSession - Session infoTypeScript Support
Fully typed with comprehensive interfaces:
`typescript
import type {
IMessage,
MessageContent,
IChatSession,
UIComponentProps,
} from '@ixo/oracles-client-sdk';
``Licensed under the terms specified in License.txt
- IXO Website
- Documentation
- Examples
- GitHub Repository
---
Built with ❤️ by the IXO team