Reference
Chat Bubble
Props, command overrides, styling.
Overview
Start with the chat bubble when you want one surface that supports customers, operators, internal authors, commands, and workflows.
Basic Usage
tsx
import { ModelNexChatBubble } from '@modelnex/sdk'
<ModelNexChatBubble
agentName="Copilot"
appName="My Product"
placeholder="Ask me anything..."
welcomeMessage="Hi. I can help you navigate and complete setup."
theme={{
accentColor: '#3b82f6',
panelWidth: '400px',
}}
/>Props
| Prop | Type | Description |
|---|---|---|
agentName |
string |
Display name in the header. Defaults to ModelNex AI. |
appName Required |
string |
Product name used in customer-facing copy and narration. |
placeholder |
string |
Command input placeholder text. |
defaultCommand |
string |
Fallback command when the user submits an empty input. |
welcomeMessage |
string |
Empty-state message shown before the first interaction. |
theme |
object |
Inline theme overrides for colors, sizing, and shadows. |
className |
string |
Additional CSS class for the container. |
Custom Command Handling
If you build your own shell, use useRunCommand from the SDK and decide how to display responses, loading state, and retry behavior.
Styling
Configure the design with the theme prop or with global CSS variables when you need a deeper integration.
Using the Theme Prop
The theme prop handles colors, dimensions, radii, and panel sizing.
tsx
<ModelNexChatBubble
theme={{
accentColor: '#3b82f6',
accentForeground: '#ffffff',
panelWidth: '400px',
panelMaxHeight: '700px',
bubbleSize: '64px',
bubbleIconSize: '24px',
borderRadius: '16px',
zIndex: 2000000,
}}
/>Using CSS Variables
Override CSS variables globally when you want the bubble to inherit product-wide design tokens.
css
:root {
--modelnex-accent: #3b82f6;
--modelnex-bg: #ffffff;
--modelnex-fg: #18181b;
--modelnex-panel-width: 380px;
--modelnex-bubble-size: 56px;
}