Custom Adapters
Build a custom adapter to connect the chat UI to any backend.
ChatAdapter Interface
typescript
interface ChatAdapter {
// Required
startExecution(input: StartExecutionInput): Promise<ExecutionResult>;
sendMessage(input: SendMessageInput): Promise<ExecutionResult>;
cancelExecution(uuid: string): Promise<void>;
getExecution(uuid: string): Promise<Execution>;
getUploadUrl(input: UploadUrlInput): Promise<UploadUrlResult>;
confirmUpload(uuid: string): Promise<void>;
getDownloadUrl(uuid: string): Promise<string>;
// Optional
getSessionHistory?(sessionId: string): Promise<SessionHistory>;
getSessionArtifacts?(sessionId: string): Promise<Artifact[]>;
createStream?(executionId: string, sessionId?: string): ExecutionStreamController;
}Example: REST API Adapter
typescript
function createRESTAdapter(baseUrl: string, token: string): ChatAdapter {
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
};
return {
async startExecution(input) {
const res = await fetch(`${baseUrl}/executions`, {
method: 'POST', headers,
body: JSON.stringify({ agent_id: input.agentId, task: input.content }),
});
return res.json();
},
async sendMessage(input) {
const res = await fetch(`${baseUrl}/sessions/${input.sessionId}/messages`, {
method: 'POST', headers,
body: JSON.stringify({ content: input.content }),
});
return res.json();
},
async getExecution(uuid) {
const res = await fetch(`${baseUrl}/executions/${uuid}`, { headers });
return res.json();
},
async cancelExecution(uuid) {
await fetch(`${baseUrl}/executions/${uuid}/cancel`, { method: 'POST', headers });
},
// ... other required methods
};
}Using a Custom Adapter
tsx
const adapter = createRESTAdapter('https://api.example.com', token);
<AgentChat adapter={adapter} agentId="agent-uuid" />Streaming Priority
createStream()— Preferred. Auto-reconnection, deduplication.subscribeToStream()— Fallback. Uses fetch-event-source.- HTTP polling — Final fallback. Polls every 2 seconds.