# TanStack AI

Create TanStack AI messages and stream predefined conversations through useChat without a model, API route, network request, or API key.

## When to use

* Write an AI conversation in code and stream it through TanStack AI's `useChat`, with no model or API key.
* Build demos, tests and stories of chat interfaces with TanStack AI.

## How it works

`createChat` from `@shadcn/helpers/tanstack-ai` builds the conversation and creates native TanStack `UIMessage[]` values. Each assistant response replays through a local connection adapter as real AG-UI events.

## Example

```tsx
'use client'

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

const chat = createChat()
  .user("What changed in this release?")
  .assistant("The release adds keyboard shortcuts and faster search.")
  .user("Can you show me the shortcuts?")
  .assistant("Press ⌘K to search and ⌘Enter to submit.")

const initialMessages = chat.get(0)
const connection = chat.transport()

export default function Chat() {
  const { messages, append, status } = useChat({
    initialMessages,
    connection,
  })
  const nextMessage = chat.next(messages)
  const isBusy = status === "submitted" || status === "streaming"

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>{/* Render the message */}</div>
      ))}
      <button
        disabled={!nextMessage || isBusy}
        onClick={() => {
          if (nextMessage && !isBusy) {
            void append(nextMessage)
          }
        }}
      >
        Send
      </button>
    </div>
  )
}
```

## Installation

```bash
npm install @shadcn/helpers
```

## Reference

Official page: https://ui.shadcn.com/docs/helpers/tanstack-ai