Shadcn TanStack AI

createChat writes a conversation in code and replays it through TanStack AI's useChat as AG-UI events. No model, no route, no API key. Text and reasoning stream word by word. Tool calls move from input to result.

Usage

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

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

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

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

get(0) starts empty. append(next) adds the next scripted user turn. transport() is a local connection, not a server.

Composition

Install @shadcn/helpers. Import from @shadcn/helpers/tanstack-ai. Keep @tanstack/ai-react as you already have it.

User Messages

user() adds a user turn. Pass id, or createdAt on metadata, as the second argument.

chat.user("What changed in this release?", {
  id: "user-release-question",
  metadata: { createdAt: "2026-01-01T10:00:00.000Z" },
})

Assistant Messages

A string is one text part. An array can mix thinking and text. Use a writer when the turn should stream in steps.

chat.assistant(({ writer }) => {
  writer.reasoning("I should summarize the release.")
  writer.text("Keyboard shortcuts and faster search.")
})

API

Chat

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

Notes

Need the AI SDK hook instead? See AI SDK.

With other components

Questions

Related