# AI SDK

Create AI SDK 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 the AI SDK's `useChat`, with no model, API route or API key.
* Build demos, tests and stories of chat interfaces.

## How it works

`createChat` from `@shadcn/helpers/ai-sdk` builds the conversation with `.user()` and `.assistant()`. `chat.get(0)` gives the starting messages, `chat.transport()` gives a local transport for `useChat`, and `chat.next(messages)` returns the next user message to send. It supports every AI SDK part type, such as reasoning, tools and sources. The AI Elements demos on this site use it.

## Example

```tsx
'use client'

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

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 transport = chat.transport()

export default function Chat() {
  const { messages, sendMessage, status } = useChat({
    messages: initialMessages,
    transport,
  })
  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 sendMessage(nextMessage)
          }
        }}
      >
        Send
      </button>
    </div>
  )
}
```

## Installation

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

## Reference

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