Shadcn AI SDK

createChat writes a conversation in code and streams it through the real useChat lifecycle. No model, no route, no API key. Use it to build bubbles and tool cards, to ship a preview that never drifts, and to assert a stream in CI.

Usage

import { useChat } from "@ai-sdk/react"
import { createChat } from "@shadcn/helpers/ai-sdk"

const chat = createChat()
  .user("What changed in this release?")
  .assistant("Keyboard shortcuts and faster search.")

const { messages, sendMessage, status } = useChat({
  messages: chat.get(0),
  transport: chat.transport(),
})

const next = chat.next(messages)
void sendMessage(next)

get(0) starts empty. next(messages) is the next scripted user turn. transport() is what useChat streams against.

Composition

Install @shadcn/helpers. Import from @shadcn/helpers/ai-sdk. Keep ai and @ai-sdk/react as you already have them.

User Messages

user() adds a user turn. Pass id or metadata as the second argument. Start from an existing transcript with createChat({ messages }).

chat.user("What changed in this release?", {
  id: "user-release-question",
  metadata: { source: "docs" },
})

Assistant Messages

A string is one text part. Pass an array of AI SDK parts, or a writer when the turn has reasoning or tools.

chat.assistant(({ writer }) => {
  writer.reasoning("They want the short version.")
  writer.text("Keyboard shortcuts and faster search.")
})

API

Chat

useChat is still @ai-sdk/react. This helper only supplies the messages and the transport.

Notes

Need TanStack's useChat instead? See TanStack AI.

With other components

Questions

Related