# chat-thread — Examples

## basic

```html
<chat-thread-ui>
  <div role="user">What's the capital of France?</div>
  <div role="assistant">The capital of France is Paris.</div>
</chat-thread-ui>
```

## streaming

```html
<chat-thread-ui>
  <div role="user">Explain black holes briefly.</div>
  <div role="assistant" streaming>A black hole is a region of spacetime where gravity is so strong that</div>
</chat-thread-ui>
```

## with input

```html
<chat-thread-ui>
  <div role="user">Give me a short haiku about the ocean.</div>
  <div role="assistant">
    Waves whisper secrets —
    <br>
    the tide retreats then returns,
    <br>
    carrying the moon.
  </div>
</chat-thread-ui>
<chat-input-ui placeholder="Type a message..."></chat-input-ui>
```
