# Chat input
URL: /docs/components/chat-input

Chat input with mentions and streaming status.



<ComponentPreview name="chat-input" />

## Installation [#installation]

```bash
npx shadcn@latest add @simple-ai/chat-input
```

This is the prompt in the [complete chat page](/blocks). [Add the example with shadcn](/docs/installation) when you want the full thread.

## Usage [#usage]

```tsx
import {
  ChatInput,
  ChatInputEditor,
  ChatInputMentionButton,
  ChatInputSubmitButton,
} from "@/components/ui/chat-input"
import { InputGroupAddon } from "@/components/ui/input-group"

export function Prompt() {
  return (
    <ChatInput
      mentions={{
        member: { trigger: "@", items: [{ id: "1", name: "Alice" }] },
      }}
      onSubmit={(parsed, { clear }) => {
        console.log(parsed.text, parsed.member)
        clear()
      }}
      status="ready"
    >
      <ChatInputEditor placeholder="Type a message..." />
      <InputGroupAddon align="block-end">
        <ChatInputMentionButton />
        <div className="ml-auto">
          <ChatInputSubmitButton />
        </div>
      </InputGroupAddon>
    </ChatInput>
  )
}
```

Press Enter to submit, Shift+Enter for a new line. `parsed.text` is the plain string; mention buckets (`parsed.member`, …) are typed from the `mentions` map. Pass `status` from the AI SDK (`ready` / `submitted` / `streaming` / `error`) so the send button becomes stop/spinner. Submit already blurs the editor so the mobile keyboard closes. Call `clear()` after send; do not call `focus()` or the keyboard opens again.


# Components
URL: /docs/components

Pieces used by the examples. Add them with the shadcn CLI.



<ComponentsList />


# Tool
URL: /docs/components/tool

Quiet collapsible tool call with input and output.



<ComponentPreview name="tool" />

## Installation [#installation]

```bash
npx shadcn@latest add @simple-ai/tool
```

The CLI also installs shadcn `collapsible`, plus `ai`.

## Usage [#usage]

```tsx
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ui/tool"

export function ToolCall({ part }: { part: { toolName: string; state: "output-available"; input: unknown; output: unknown; errorText?: string } }) {
  return (
    <Tool>
      <ToolHeader
        input={part.input}
        state={part.state}
        title={part.toolName}
        type={`tool-${part.toolName}`}
      />
      <ToolContent>
        <ToolInput input={part.input} />
        <ToolOutput errorText={part.errorText} output={part.output} />
      </ToolContent>
    </Tool>
  )
}
```

Tools start collapsed. The header is the readable tool name, plus a short input summary when the call has a path, command, query, or pattern. Expand to see JSON under Input and Output. `approval-requested` reads “Needs approval”; `output-denied` reads “Denied”.

The row is used in the [chat page](/blocks). The prompt there is the [chat input](/docs/components/chat-input).


# Worked
URL: /docs/components/worked

Fold the agent's work. Keep the answer.



<ComponentPreview name="worked" />

## Installation [#installation]

```bash
npx shadcn@latest add @simple-ai/worked
```

The CLI also installs shadcn `collapsible`.

## Usage [#usage]

Fold the agent's work before the last assistant text. The answer stays visible. Live turns stay open.

```tsx
import {
  splitWorkedParts,
  Worked,
  WorkedContent,
  WorkedTrigger,
} from "@/components/ui/worked"

export function AssistantParts({
  parts,
  isStreaming,
  duration,
  renderPart,
}: {
  parts: Array<{ type: string }>
  isStreaming: boolean
  duration?: number
  renderPart: (part: { type: string }, index: number) => React.ReactNode
}) {
  return splitWorkedParts(parts).map((segment) => {
    if (segment.kind === "worked") {
      return (
        <Worked
          duration={duration}
          isStreaming={isStreaming}
          key={segment.items[0]?.index}
        >
          <WorkedTrigger />
          <WorkedContent>
            {segment.items.map((item) => renderPart(item.part, item.index))}
          </WorkedContent>
        </Worked>
      )
    }
    return renderPart(segment.item.part, segment.item.index)
  })
}
```

`splitWorkedParts` groups work before the last `text` part. Trailing tools after that text stay outside the fold. Text never folds. While `isStreaming` is true the row reads “Working” and stays open; when the turn settles it reads “Worked” or “Worked for 12s”.

The fold lives in the [chat page](/blocks). Tool calls inside it use [tool](/docs/components/tool).


# Introduction
URL: /docs

Curated agent examples you can build upon.



simple-ai is a registry of agent examples. Copy them into your app. Change the source.

A [complete chat page](/blocks) you can copy. A modern agent chat: the thread, the prompt, tools, thinking, and the work folded away so the answer stays readable. shadcn is how you add it.

## Install [#install]

```bash
npx shadcn@latest add @simple-ai/chat-page
```

See [Installation](/docs/installation).

Until `@simple-ai` is in the official directory, point `components.json` at the hosted registry:

```json
{
  "registries": {
    "@simple-ai": "https://www.simple-ai.dev/r/{name}.json"
  }
}
```

Or install by URL:

```bash
npx shadcn@latest add https://www.simple-ai.dev/r/chat-page.json
```

GitHub works too, once this repo's root `registry.json` is on `main`:

```bash
npx shadcn@latest add Alwurts/simple-ai/chat-page
```


# Installation
URL: /docs/installation

Add simple-ai to a shadcn project.



## Prerequisites [#prerequisites]

Start from a [shadcn/ui](https://ui.shadcn.com) project with the Base UI style. Then add examples. The source is yours.

## CLI [#cli]

```bash
npx shadcn@latest add @simple-ai/chat-page
```

`chat-page` is the [complete chat](/blocks). The CLI also pulls in the [chat input](/docs/components/chat-input), [tool](/docs/components/tool) rows, thinking, and the [work fold](/docs/components/worked), plus the page layout. It also installs shadcn `sidebar`, `message`, `bubble`, `attachment`, and `message-scroller`.

The page UI lands at `src/features/assistant/page.tsx` (or `features/assistant/page.tsx` if the app has no `src`). Wire a route to it:

```tsx
// Next.js App Router — app/assistant/page.tsx
export { default } from "@/features/assistant/page";
```

```tsx
// TanStack Start — src/routes/assistant.tsx
import { createFileRoute } from "@tanstack/react-router";
import ChatPage from "@/features/assistant/page";

export const Route = createFileRoute("/assistant")({
  component: ChatPage,
});
```

`chat-page` ships a mocked transport, so the gallery and a fresh install work without a model. Point a live transport at your own API when you have one.

## Pieces [#pieces]

If you only want a piece, add [chat input](/docs/components/chat-input), [tool](/docs/components/tool), or the [work fold](/docs/components/worked):

```bash
npx shadcn@latest add @simple-ai/chat-input
npx shadcn@latest add @simple-ai/tool
npx shadcn@latest add @simple-ai/worked
```

## Hosted registry [#hosted-registry]

If `@simple-ai` is not in the public directory yet, add this to `components.json`:

```json
{
  "registries": {
    "@simple-ai": "https://www.simple-ai.dev/r/{name}.json"
  }
}
```