Custom Transport & RAG

Dynamic request bodies, manual Chat setup, and enriching messages for retrieval apps.

Dynamic body with useAiChat

Pass body, headers, or credentials to useAiChat. Values are forwarded to AI SDK DefaultChatTransport and merged into every chat request. Use a function when fields must stay reactive:

const conversationId = ref('abc')
const model = ref('gpt-4o')
const searchMode = ref(true)

const { aiMessages, input, handleSubmit, isStreaming } = useAiChat({
  api: '/api/chat',
  body: () => ({
    conversationId: conversationId.value,
    model: model.value,
    searchMode: searchMode.value,
  }),
})

Manual Chat + DefaultChatTransport

For full control (custom transport class, prepareSendMessagesRequest, or sharing one Chat instance), instantiate the SDK directly and map messages with toAiMessageProps:

import { Chat } from '@ai-sdk/vue'
import { DefaultChatTransport } from 'ai'

const chat = new Chat({
  transport: new DefaultChatTransport({
    api: '/api/chat',
    prepareSendMessagesRequest: ({ messages, body }) => ({
      body: {
        ...body,
        messages,
        ragProfile: 'default',
      },
    }),
  }),
})

const aiMessages = computed(() =>
  chat.messages.map((msg, i) => {
    const isLast = i === chat.messages.length - 1
    const status = isLast && chat.status === 'streaming' ? 'streaming' : 'complete'
    return toAiMessageProps(msg, status)
  }),
)

RAG metadata on AiMessage

toAiMessageProps maps AI SDK UIMessage parts to AiMessageProps (content, reasoning, sources, toolCalls). For app-specific display fields, spread metadata or map domain sources into AiSource[]:

import type { AiMessageProps, AiSource } from 'ai-elements-nuxt/types'

function toDisplayMessage(msg: UIMessage, status: AiMessageProps['status']): AiMessageProps {
  const base = toAiMessageProps(msg, status)
  const ragSources = (msg.metadata?.sources ?? []) as Array<{ id: string; title: string }>

  return {
    ...base,
    sources: ragSources.map((s): AiSource => ({
      id: s.id,
      title: s.title,
      url: `/documents/${s.id}`,
    })),
    metadata: {
      ...base.metadata,
      searched: msg.metadata?.searched,
      latencyMs: msg.metadata?.latencyMs,
    },
  }
}

Import types from ai-elements-nuxt/types in consumer apps (no Nuxt shim required).