📄 ai-sdk/docs/ai-sdk-ui/transport

The useChat transport system provides fine-grained control over how messages are sent to your API endpoints and how responses are processed. This is particularly useful for alternative communication protocols like WebSockets, custom authentication patterns, or specialized backend integrations.

Default Transport

By default, useChat uses HTTP POST requests to send messages to /api/chat:

import { useChat } from '@ai-sdk/react';
// Uses default HTTP transportconst { messages, sendMessage } = useChat();

This is equivalent to:

import { useChat } from '@ai-sdk/react';import { DefaultChatTransport } from 'ai';
const { messages, sendMessage } = useChat({  transport: new DefaultChatTransport({    api: '/api/chat',  }),});

Custom Transport Configuration

Configure the default transport with custom options:

import { useChat } from '@ai-sdk/react';import { DefaultChatTransport } from 'ai';
const { messages, sendMessage } = useChat({  transport: new DefaultChatTransport({    api: '/api/custom-chat',    headers: {      Authorization: 'Bearer your-token',      'X-API-Version': '2024-01',    },    credentials: 'include',  }),});

Dynamic Configuration

You can also provide functions that return configuration values. This is useful for authentication tokens that need to be refreshed, or for configuration that depends on runtime conditions:

const { messages, sendMessage } = useChat({  transport: new DefaultChatTransport({    api: '/api/chat',    headers: () => ({      Authorization: `Bearer ${getAuthToken()}`,      'X-User-ID': getCurrentUserId(),    }),    body: () => ({      sessionId: getCurrentSessionId(),      preferences: getUserPreferences(),    }),    credentials: () => 'include',  }),});

Request Transformation

Transform requests before sending to your API:

const { messages, sendMessage } = useChat({  transport: new DefaultChatTransport({    api: '/api/chat',    prepareSendMessagesRequest: ({ id, messages, trigger, messageId }) => {      return {        headers: {          'X-Session-ID': id,        },        body: {          messages: messages.slice(-10), // Only send last 10 messages          trigger,          messageId,        },      };    },  }),});

Building Custom Transports

To understand how to build your own transport, refer to the source code of the default implementation:

**DefaultChatTransport ** - The complete default HTTP transport implementation
**HttpChatTransport ** - Base HTTP transport with request handling
**ChatTransport Interface ** - The transport interface you need to implement

These implementations show you exactly how to:

Handle the sendMessages method
Process UI message streams
Transform requests and responses
Handle errors and connection management

The transport system gives you complete control over how your chat application communicates, enabling integration with any backend protocol or service.

On this page

Transport

Default Transport

Custom Transport Configuration

Dynamic Configuration

Request Transformation

Building Custom Transports

Deploy and Scale AI Apps with Vercel.

Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.

Trusted by industry leaders:

OpenAI
Photoroom

Talk to an expert