> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/components/component-library/ai-components/component-chat-panel.md).

# Component: Chat Panel

Inline AI assistant panel: an in-page chat surface built on the agent client SDK.

**Available from:** Release 117

**Purpose**: Embed Limio's conversational agent inline in a page, as a chat card rather than a floating popup.

In the Page Builder this component is called **Chat Panel**. It renders a card with a header, a scrolling message list, and a message input, and connects to the same agent as the [Chat Widget](/components/component-library/ai-components/component-chat-widget.md). Use it when you want a persistent assistant inside the page layout, such as a support page, an account page, or a dedicated help column.

The panel is built on the [agent client SDK](https://docs.limio.com/agents/limio-agents/getting-started) (`@limio/sdk/ai`), so it shares the widget's conversation behaviour.

## Behaviour

* The greeting shows when the panel loads. The conversation is created on the visitor's first message.
* Visitor messages appear immediately; a typing indicator shows while the agent replies.
* Agent replies render markdown; visitor messages render as plain text.
* Authentication is automatic for signed-in customers and guests on your shop domain.
* The panel is text-only: it does not render interactive agent components such as file upload. For those, use the [Chat Widget](/components/component-library/ai-components/component-chat-widget.md).

## Props

| Prop Label              | Type   | Default Value                                                     | Notes                                                                                            |
| ----------------------- | ------ | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Assistant name          | string | Assistant                                                         | Shown in the header and above each agent reply. Seeds the avatar initial when no avatar is set.  |
| Status label            | string | Online                                                            | Small label next to the status dot in the header.                                                |
| Greeting message        | text   | Hi 👋 I'm here to help. Ask me anything about your order or plan. | Opening assistant message. Falls back to the agent's configured greeting if cleared.             |
| Input placeholder       | string | Reply to the assistant…                                           | Placeholder text in the message input.                                                           |
| Avatar initial or emoji | string | (empty)                                                           | Initial or emoji shown in the avatar square. Defaults to the first letter of the assistant name. |

The panel's colours and bubble style come from the agent's theme, set on the agent's Presentation tab in the admin, not from component props. See **Theming an Agent** in the Limio Agents docs.

## Pairing with a layout

For a full-height, side-by-side layout, with the agent in one column and your content in the other, choose the **Two Column — Full Panel** cart layout when creating the page. Its panel column fills the full column width and viewport height, which suits the Chat Panel.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.limio.com/components/component-library/ai-components/component-chat-panel.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.