Vercel AI SDK integration

Slipstream ships a runtime-independent adapter: give it the chat state your AI SDK (or any chat library) already produces, get back exactly the props Conversation wants. Your route handlers stay untouched — the adapter only reads state on the client.

The adapter imports no SDK code — it consumes a structural shape ({ id, role, content, toolInvocations }, status strings, error). Anything producing that shape works: AI SDK useChat, useCompletion, LangGraph adapters, or your own store.

1. Install

bash

pnpm add @slipstream-ui/core @slipstream-ui/ai ai

2. Bridge the chat state

Two hooks do the whole mapping: useSlipstreamMessages converts the message list (including tool invocations → ToolCall data in metadata), and useSlipstreamStream turns status/error into isLoading, streamingMessageId, and per-message retryable errors.

tsx

'use client';

import { useChat } from '@ai-sdk/react';
import { Conversation, MessageActions, ToolCall } from '@slipstream-ui/ai';
import {
  useSlipstreamMessages,
  useSlipstreamStream,
} from '@slipstream-ui/ai';

export function AiSdkChat() {
  const { messages, status, error, reload, sendMessage } = useChat({ api: '/api/chat' });

  const { messages: slipstreamMessages } = useSlipstreamMessages({ messages });
  const stream = useSlipstreamStream({ status, error, onRetry: reload, messages });

  return (
    <Conversation
      messages={slipstreamMessages}
      {...stream}
      renderContent={(content, message) => (
        <>
          {/* Tool invocations ride along in message metadata */}
          {message.metadata?.toolCalls?.map((call) => (
            <ToolCall key={call.id} toolCall={call} />
          ))}
          {content}
        </>
      )}
    />
  );
}

3. What the hooks return

Hook	Returns
useSlipstreamMessages	`messages` — Slipstream Message[] with tool calls under `metadata.toolCalls`
useSlipstreamStream	`isLoading` (submitted/streaming), `streamingMessageId` (last assistant message while streaming), `messageErrors` + `onRetryMessage` (status === 'error')

4. Tool invocations become ToolCalls

tsx

// AI SDK invocation state -> Slipstream ToolCall status
'state: call'    -> status: 'pending'
'state: result'  -> status: 'completed' (+ result)
'state: error'   -> status: 'failed'    (+ error message)

// Pure functions if you want manual control:
import { toSlipstreamMessage, toSlipstreamToolCalls } from '@slipstream-ui/ai';

Streaming fundamentals

What the adapter abstracts — raw transports.

State & threads

Where conversation state should live.

Was this page helpful?