aidimension UI AI

# aidimension UI — AI components

The `src/components/ai/` directory contains 14 components built
specifically for AI products. They pair naturally with the Vercel AI
SDK, OpenAI Chat Completions, or any streaming LLM API.

## The 14 components

| Component | What |
|---|---|
| `Message` | Chat bubble with role, avatar, content, actions |
| `Conversation` | Scrollable message list with auto-scroll |
| `PromptInput` | Multi-line textarea + submit + tool buttons |
| `Reasoning` | Collapsible chain-of-thought panel |
| `Tool` | Tool-call card with state icon, name, output |
| `Sources` | Citation list (use with `Citation` for inline markers) |
| `AgentCard` | Agent profile with status, role, capabilities |
| `CodeBlock` | Syntax-highlighted code with copy button |
| `Artifact` | File/asset preview card |
| `Loader` | Three variants: dots, spinner, bars |
| `StreamingText` | Char-by-char render with blinking cursor |
| `TokenCounter` | Live token meter with progress bar |
| `ModelSelector` | Grid of selectable model cards |
| `Citation` | Inline marker that expands to source on hover |

## Wiring with the Vercel AI SDK

```tsx
"use client";
import { useChat } from "ai/react";
import { Message, MessageContent, MessageAvatar } from "@/components/ai/message";
import { PromptInput, PromptInputTextarea, PromptInputSubmit } from "@/components/ai/prompt-input";
import { Conversation, ConversationContent } from "@/components/ai/conversation";

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <>
      <Conversation>
        <ConversationContent>
          {messages.map((m) => (
            <Message key={m.id} role={m.role}>
              <MessageAvatar role={m.role} />
              <MessageContent>{m.content}</MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>
      <form onSubmit={handleSubmit}>
        <PromptInput>
          <PromptInputTextarea
            value={input}
            onChange={handleInputChange}
          />
          <PromptInputSubmit />
        </PromptInput>
      </form>
    </>
  );
}
```

## Streaming pattern

For other LLM providers, use the `StreamingText` component:

```tsx
<StreamingText
  text={token}            // the text-so-far
  speed={50}              // characters per second
  cursor="▍"              // or null to hide
  keepCursor={false}      // keep cursor after done
/>
```

## Token display

```tsx
<TokenCounter value={inputTokens} max={contextWindow} />
```

## Common patterns

- Show a `Loader` while the first token is arriving
- Use `Reasoning` for chain-of-thought content separately
- Use `Sources` at the bottom of an answer for citations
- Use `Tool` to show agent tool calls as they happen
- Use `ModelSelector` in the header so users can switch models

## Don't

- Don't render `Markdown` strings directly — use `CodeBlock` for code
- Don't add a stop button in the same place as the send button
- Don't show raw JSON of tool outputs (use the `ToolOutput` formatter)