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

    1. createStream() — Preferred. Auto-reconnection, deduplication.
    2. subscribeToStream() — Fallback. Uses fetch-event-source.
    3. HTTP polling — Final fallback. Polls every 2 seconds.