Interface modules
Inline chat
A chat set in the page's flow, such as on a help page or beside a product.
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
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:
.help-chat {
--aic-inline-height: 70vh;
}<AiChatInline className="help-chat" system={SYSTEM} mcp="/api/mcp" />As a Web Component
<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
Prop
Type