> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pharen.app/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Components

> Build AI messages, tool calls, thinking states, and conversation interfaces.

Import these components from the dedicated `@pharen/ui/components/ai` path.

```ts theme={null}
import { Conversation, Message, Tool } from '@pharen/ui/components/ai';
```

<CardGroup cols={3}>
  <Card title="Approval" icon="box" href="/ui/ai/approval">
    1 exported component
  </Card>

  <Card title="Chain of thought" icon="box" href="/ui/ai/chain-of-thought">
    7 exported components
  </Card>

  <Card title="Checkpoint" icon="box" href="/ui/ai/checkpoint">
    3 exported components
  </Card>

  <Card title="Code block" icon="box" href="/ui/ai/code-block">
    4 exported components
  </Card>

  <Card title="Context" icon="box" href="/ui/ai/context">
    8 exported components
  </Card>

  <Card title="Conversation" icon="box" href="/ui/ai/conversation">
    3 exported components
  </Card>

  <Card title="Message" icon="box" href="/ui/ai/message">
    11 exported components
  </Card>

  <Card title="Pharen thinking" icon="box" href="/ui/ai/pharen-thinking">
    1 exported component
  </Card>

  <Card title="Plan" icon="box" href="/ui/ai/plan">
    2 exported components
  </Card>

  <Card title="Reasoning" icon="box" href="/ui/ai/reasoning">
    1 exported component
  </Card>

  <Card title="Shimmer" icon="box" href="/ui/ai/shimmer">
    1 exported component
  </Card>

  <Card title="Suggestion" icon="box" href="/ui/ai/suggestion">
    2 exported components
  </Card>

  <Card title="Thinking label" icon="box" href="/ui/ai/thinking-label">
    1 exported component
  </Card>

  <Card title="Tool" icon="box" href="/ui/ai/tool">
    3 exported components
  </Card>
</CardGroup>