WorkflowChatTransport

A ChatTransport implementation for useChat that enables automatic stream reconnection for workflow-based chat apps. It posts messages to a chat endpoint, extracts the x-workflow-run-id response header, and reconnects to a /{runId}/stream endpoint on interruption (network failures, page refreshes, function timeouts).

Unlike DefaultChatTransport which assumes the full response arrives in a single HTTP request, WorkflowChatTransport is designed for the Workflow SDK where the initial response stream may be interrupted by function timeouts. The transport automatically detects missing finish events and reconnects to resume from where the stream left off.

1
'use client';
2

3
import { useChat } from '@ai-sdk/react';
4
import { WorkflowChatTransport } from '@ai-sdk/workflow';
5

6
export default function Chat() {
7
  const { messages, sendMessage } = useChat({
8
    transport: new WorkflowChatTransport({
9
      api: '/api/chat',
10
      maxConsecutiveErrors: 5,
11
      initialStartIndex: -50,
12
    }),
13
  });
14

15
  // ... render chat UI
16
}

Import

import { WorkflowChatTransport } from "@ai-sdk/workflow"

Constructor

Parameters

Methods

sendMessages()

Sends messages to the chat endpoint via POST and returns a streaming response. If the stream is interrupted (no finish event received), the transport automatically reconnects via GET to {api}/{runId}/stream?startIndex={chunkIndex} to resume from where it left off.

The POST request includes the messages as JSON and expects the response to include an x-workflow-run-id header identifying the workflow run.

1
const stream = await transport.sendMessages({
2
  chatId: 'chat-123',
3
  trigger: 'submit-message',
4
  messages: [...],
5
  abortSignal: controller.signal,
6
});

Returns

Returns a Promise<ReadableStream<UIMessageChunk>> that includes chunks from both the initial POST response and any automatic reconnection.

reconnectToStream()

Reconnects to an existing chat stream that was previously interrupted. Useful for resuming after a page refresh or when the client needs to re-establish a connection.

1
const stream = await transport.reconnectToStream({
2
  chatId: 'chat-123',
3
  startIndex: -50, // Optional: fetch last 50 chunks
4
});

Returns

Returns a Promise<ReadableStream<UIMessageChunk> | null>.

How Reconnection Works

The transport follows this flow:

1. POST to {api} with messages. The response must include an x-workflow-run-id header.
2. Stream the SSE response, counting chunks as they arrive.
3. Detect interruption: If the stream closes without a finish event (e.g., function timeout, network error), the transport knows the response is incomplete.
4. Reconnect via GET to {api}/{runId}/stream?startIndex={chunkIndex} to resume from the last received chunk.
5. Retry: If the reconnection stream also interrupts, retry up to maxConsecutiveErrors times.
6. Complete: Once a finish event is received, call onChatEnd and close the stream.

Negative Start Index

When initialStartIndex is negative (e.g., -50), the transport sends it as-is in the first reconnection request. The server should resolve this to an absolute position and return the x-workflow-stream-tail-index response header so the transport can compute the correct position for subsequent retries.

If the header is missing or invalid, the transport falls back to replaying from the beginning (startIndex=0).

Server Requirements

For WorkflowChatTransport to work, your server must provide two endpoints:

POST {api} (e.g., /api/chat)

• Accept messages as JSON body
• Return an SSE stream of UIMessageChunk events
• Include an x-workflow-run-id response header

GET {api}/{runId}/stream (e.g., /api/chat/{runId}/stream)

• Accept a startIndex query parameter
• Return the SSE stream starting from the given chunk index
• For negative startIndex, resolve to the tail and include x-workflow-stream-tail-index response header

See the WorkflowAgent guide for complete endpoint examples.

Examples

Basic Usage with useChat

1
'use client';
2

3
import { useChat } from '@ai-sdk/react';
4
import { WorkflowChatTransport } from '@ai-sdk/workflow';
5
import { useMemo } from 'react';
6

7
export default function Chat() {
8
  const transport = useMemo(
9
    () => new WorkflowChatTransport({ api: '/api/chat' }),
10
    [],
11
  );
12

13
  const { messages, sendMessage, status } = useChat({ transport });
14

15
  return (
16
    <div>
17
      {messages.map(message => (
18
        <div key={message.id}>
19
          {message.role === 'user' ? 'User: ' : 'AI: '}
20
          {message.parts.map((part, index) =>
21
            part.type === 'text' ? <span key={index}>{part.text}</span> : null,
22
          )}
23
        </div>
24
      ))}
25
      <button onClick={() => sendMessage({ text: 'Hello!' })}>Send</button>
26
    </div>
27
  );
28
}

With Callbacks and Page Refresh Recovery

1
'use client';
2

3
import { useChat } from '@ai-sdk/react';
4
import { WorkflowChatTransport } from '@ai-sdk/workflow';
5
import { useMemo } from 'react';
6

7
export default function Chat() {
8
  const transport = useMemo(
9
    () =>
10
      new WorkflowChatTransport({
11
        api: '/api/chat',
12
        maxConsecutiveErrors: 5,
13
        initialStartIndex: -50, // Resume from last 50 chunks on page refresh
14
        onChatSendMessage: response => {
15
          const runId = response.headers.get('x-workflow-run-id');
16
          console.log('Workflow run started:', runId);
17
        },
18
        onChatEnd: ({ chatId, chunkIndex }) => {
19
          console.log(`Chat ${chatId} complete, ${chunkIndex} chunks`);
20
        },
21
      }),
22
    [],
23
  );
24

25
  const { messages, sendMessage } = useChat({ transport });
26

27
  // ... render chat UI
28
}

Server-Side Endpoints (Next.js)

1
import { createModelCallToUIChunkTransform } from '@ai-sdk/workflow';
2
import { createUIMessageStreamResponse, type UIMessage } from 'ai';
3
import { start } from 'workflow/api';
4
import { chat } from '@/workflow/agent-chat';
5

6
export async function POST(request: Request) {
7
  const { messages }: { messages: UIMessage[] } = await request.json();
8
  const run = await start(chat, [messages]);
9

10
  return createUIMessageStreamResponse({
11
    stream: run.readable.pipeThrough(createModelCallToUIChunkTransform()),
12
    headers: {
13
      'x-workflow-run-id': run.runId,
14
    },
15
  });
16
}

1
import { createModelCallToUIChunkTransform } from '@ai-sdk/workflow';
2
import type { NextRequest } from 'next/server';
3
import { getRun } from 'workflow/api';
4

5
export async function GET(
6
  request: NextRequest,
7
  { params }: { params: Promise<{ runId: string }> },
8
) {
9
  const { runId } = await params;
10
  const startIndex = Number(
11
    new URL(request.url).searchParams.get('startIndex') ?? '0',
12
  );
13

14
  const run = await getRun(runId);
15
  const readable = run
16
    .getReadable({ startIndex })
17
    .pipeThrough(createModelCallToUIChunkTransform());
18

19
  return new Response(readable, {
20
    headers: {
21
      'Content-Type': 'text/event-stream',
22
      'Cache-Control': 'no-cache',
23
      Connection: 'keep-alive',
24
      'x-workflow-run-id': runId,
25
    },
26
  });
27
}