# Inline chat (/docs/modules/inline)

`AiChatInline` places the chat where you render it, as a card of fixed height whose conversation scrolls inside it. It suits a help page, a "find the right product" section or a dedicated assistant page.

## Add it [#add-it]

```tsx title="src/HelpPage.tsx"
import { AiChatInline } from '@aiconnect/react';

const SYSTEM = 'You answer questions about this shop\'s orders and products. Look them up with the tools before you answer.';

export function HelpPage() {
  return (
    <main>
      <h1>Help</h1>
      <AiChatInline system={SYSTEM} mcp="/api/mcp" title="Shop assistant" intro="What can we help you with?"
        suggestions={['Where is my order?', 'Which size fits me?']} />
    </main>
  );
}
```

The chat takes the width of its place. Its height is the `--aic-inline-height` token, 560px by default; set it on the chat's class or an ancestor:

```css
.help-chat {
  --aic-inline-height: 70vh;
}
```

```tsx
<AiChatInline className="help-chat" system={SYSTEM} mcp="/api/mcp" />
```

## As a Web Component [#as-a-web-component]

```html
<script src="https://your-site.example/aiconnect-elements.js" defer></script>
<aiconnect-chat mcp="/api/mcp" heading="Shop assistant"
  system="You answer questions about this shop's orders and products."></aiconnect-chat>
```

`inline` is the element's default variant.

## Props [#props]

### AiChatInlineProps

| Prop                 | Type                                                 | Description |
| -------------------- | ---------------------------------------------------- | ----------- |
| `system`             | `string`                                             |             |
| `tools?`             | `ToolSource \| undefined`                            |             |
| `mcp?`               | `string \| undefined`                                |             |
| `title?`             | `string \| undefined`                                |             |
| `intro?`             | `string \| undefined`                                |             |
| `placeholder?`       | `string \| undefined`                                |             |
| `suggestions?`       | `string[] \| undefined`                              |             |
| `toolLabels?`        | `Record<string, string> \| undefined`                |             |
| `renderToolResults?` | `((turn: ChatTurn) => React.ReactNode) \| undefined` |             |
| `className?`         | `string \| undefined`                                |             |