Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.open.cx/llms.txt

Use this file to discover all available pages before exploring further.

Use when a normal chat bubble is not enough. Common examples include account summaries, order status cards, onboarding steps, appointment pickers, and other action results that are easier to use as UI than as plain text.
If you have not installed the widget yet, start with Install Widget first.
Custom components sit on top of the default widget UI — use the Playground to dial in the widget’s look first, then layer your action components on top.

​
When Custom Components Are Worth It

Use custom components when your AI action returns data that should be presented as a card, table, summary, or interactive block.
Use custom components or when a visitor should move through a richer flow than normal back-and-forth chat.
Use a component with a clear fallback state when an action may return incomplete or unexpected data.

​
Choose Your Path

React Components

Best when you use the default React widget and want to register components by action key.

Headless

Best when you own the renderer, routing, or storage layer and need full control over message UI.

​
Two Kinds Of Advanced Widget UI

Do not mix these concepts together:

Action result components

Render a custom UI after the AI calls an action and gets structured data back.

Conversation mode components

Render a dedicated UI for an active mode or canvas flow with modesComponents.
Both are valid. Pick the one that matches whether you are rendering a result or driving a flow.

React Components

Register action-specific UI in the default React widget.

Headless

Build custom rendering with the headless widget packages.

Configuration

Use modesComponents, styling, and behavior options together.

Headless

Build custom rendering with the headless widget packages.