Built-in Components

11 components covering the common conversational UI patterns. Import them all with defaultComponents.

1import { defaultComponents } from "wireai-rn/components";
2// or
3import { defaultComponents } from "wireai-rn";
4
5<WireAIProvider llm={config} components={defaultComponents}>

Component selection guide

Use case	Component
Pick one from a short list (< 6 options, longer labels)	`SelectionCard`
Pick one or many from compact labels (seasons, tags, activities)	`ChipSelectCard`
Selectable list where each item has a description	`ContentSelectCard`
Pick a number (days, people, budget, rating)	`NumberStepperCard`
Collect free text (name, destination, notes)	`TextInputCard`
Read-only key-value summary (no selection)	`InfoList`
Ordered steps / action plan / itinerary	`StepList`
Yes/no or confirm an action	`ConfirmPrompt`
Offer 1–3 next-step choices	`ActionCard`
Show success / error / info outcome	`StatusCard`
Plain text message (use sparingly)	`MessageBubble`

Component reference

Offers 1–3 next-step action buttons. Use after InfoList, StepList, or StatusCard.

When to use: Use when the user says 'Continue.' or after any read-only display component.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "ActionCard",
4  "props": {
5    "title": "What would you like to do next?",
6    "body": "Here are some options:",
7    "primaryLabel": "Plan another trip",
8    "primaryAction": "new_trip",
9    "secondaryLabel": "Save my itinerary",
10    "secondaryAction": "save",
11    "tertiaryLabel": "Start over",
12    "tertiaryAction": "restart"
13  }
14}

Props

Prop	Type	Req.	Description
title	string	✓	Card heading
body	string?	—	Optional description below the title
primaryLabel	string	✓	Primary button text
primaryAction	string	✓	Action key emitted when primary is pressed
secondaryLabel	string?	—	Second button text
secondaryAction	string?	—	Action key for second button
tertiaryLabel	string?	—	Third button text
tertiaryAction	string?	—	Action key for third button

Compact multi-toggle for short labels: tags, categories, activities, seasons.

When to use: Use when options are short (1–3 words) and multiple can be selected simultaneously.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "ChipSelectCard",
4  "props": {
5    "title": "What activities do you enjoy?",
6    "chips": ["Beach", "Hiking", "Culture", "Food", "Shopping"],
7    "multiSelect": true,
8    "maxSelections": 3,
9    "submitLabel": "These are my interests"
10  }
11}

Props

Prop	Type	Req.	Description
title	string	✓	Card heading
chips	string[]	✓	Array of chip labels
multiSelect	boolean?	—	Allow selecting multiple chips (default: false)
maxSelections	number?	—	Maximum chips that can be selected
submitLabel	string?	—	Submit button text (default: 'Continue')

Yes/no confirmation. Use for destructive actions, saving data, or any binary decision.

When to use: Use before saving, deleting, or any irreversible action.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "ConfirmPrompt",
4  "props": {
5    "question": "Save this to your journal?",
6    "confirmLabel": "Yes, save it",
7    "cancelLabel": "No, skip"
8  }
9}

Props

Prop	Type	Req.	Description
question	string	✓	The question to ask
confirmLabel	string?	—	Confirm button text (default: 'Yes')
cancelLabel	string?	—	Cancel button text (default: 'No')

Selectable list where each item has a title and description. For items that need explanation.

When to use: Use for techniques, recipes, destinations, recommendations: anything with a description.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "ContentSelectCard",
4  "props": {
5    "title": "Choose a technique",
6    "items": [
7      { "id": "box", "title": "Box Breathing", "description": "4-4-4-4 pattern, calms in 2 minutes" },
8      { "id": "478", "title": "4-7-8 Breathing", "description": "Inhale 4s, hold 7s, exhale 8s" }
9    ],
10    "multiSelect": false,
11    "submitLabel": "Try this one"
12  }
13}

Props

Prop	Type	Req.	Description
title	string	✓	Card heading
items	{ id: string; title: string; description: string }[]	✓	Items to display
multiSelect	boolean?	—	Allow multiple selection (default: false)
submitLabel	string?	—	Submit button text (default: 'Continue')

Read-only key-value summary. For booking details, trip summaries, check-in recaps.

When to use: Use ONLY for read-only display. For selectable lists, use ContentSelectCard.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "InfoList",
4  "props": {
5    "title": "Your Trip Summary",
6    "items": [
7      { "label": "Destination", "value": "Tokyo, Japan" },
8      { "label": "Duration", "value": "7 days" },
9      { "label": "Travellers", "value": "2 people" }
10    ],
11    "continueLabel": "Looks good, continue →"
12  }
13}

Props

Prop	Type	Req.	Description
title	string	✓	Card heading
items	{ label: string; value: string }[]	✓	Key-value pairs
continueLabel	string?	—	CTA button text (default: 'Continue')

Numeric input with +/− buttons. Use for integers with known bounds.

When to use: Use for days, people, budget steps, ratings, or any bounded integer.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "NumberStepperCard",
4  "props": {
5    "label": "How many days?",
6    "min": 1,
7    "max": 30,
8    "defaultValue": 7,
9    "unit": "days",
10    "submitLabel": "That's my trip length"
11  }
12}

Props

Prop	Type	Req.	Description
label	string	✓	Input label
min	number	✓	Minimum value
max	number	✓	Maximum value
defaultValue	number?	—	Starting value (default: min)
unit	string?	—	Unit shown after the number (e.g. 'days', '/ 10')
submitLabel	string?	—	Submit button text (default: 'Continue')

Single or multi-choice row selector. For 2–8 options with longer labels.

When to use: Use when options need to stand out as rows. For compact chips, use ChipSelectCard.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "SelectionCard",
4  "props": {
5    "title": "What's weighing on you most?",
6    "options": [
7      "I feel overwhelmed and don't know where to start",
8      "I'm struggling to stay motivated",
9      "I keep putting off something important"
10    ],
11    "submitLabel": "That's my challenge"
12  }
13}

Props

Prop	Type	Req.	Description
title	string	✓	Card heading
options	string[] \| {value:string;label:string}[]	✓	Options (strings are auto-converted)
submitLabel	string?	—	Submit button text (default: 'Continue')
multiSelect	boolean?	—	Allow multiple selection (default: false)

Success, error, or info status with a CTA. For real outcomes, not acknowledgments.

When to use: Use ONLY for real outcomes: saved data, completed actions, confirmed bookings.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "StatusCard",
4  "props": {
5    "status": "success",
6    "title": "Check-in Complete",
7    "message": "Well done for showing up for yourself today.",
8    "ctaLabel": "What would you like to do next?"
9  }
10}

Props

Prop	Type	Req.	Description
status	'success' \| 'error' \| 'info'	✓	Visual variant
title	string	✓	Status heading
message	string	✓	Status body text
ctaLabel	string	✓	CTA button text. Always required to keep conversation alive

Ordered list of steps with titles and descriptions. For plans, itineraries, instructions.

When to use: Use for action plans, recipes, how-to guides. Always set ctaLabel.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "StepList",
4  "props": {
5    "title": "Your Box Breathing Practice",
6    "steps": [
7      { "title": "Find a quiet spot", "description": "Sit comfortably" },
8      { "title": "Inhale for 4 counts", "description": "Breathe in through your nose" },
9      { "title": "Hold for 4 counts", "description": "Hold gently, no tension" },
10      { "title": "Exhale for 4 counts", "description": "Release slowly through your mouth" }
11    ],
12    "ctaLabel": "I'm done. What's next?"
13  }
14}

Props

Prop	Type	Req.	Description
title	string	✓	List heading
steps	{ title: string; description: string }[]	✓	Steps to display
ctaLabel	string	✓	CTA button text. Always required

Free-text input field. For names, destinations, open-ended answers, notes.

When to use: Use when you need free-form text input from the user.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "TextInputCard",
4  "props": {
5    "label": "Tell me more about what's going on",
6    "placeholder": "Describe what's on your mind",
7    "submitLabel": "That's what's happening",
8    "multiline": true
9  }
10}

Props

Prop	Type	Req.	Description
label	string	✓	Input label
placeholder	string?	—	Placeholder text
submitLabel	string?	—	Submit button text (default: 'Submit')
multiline	boolean?	—	Enable multiline input (default: false)

Plain text message bubble. Use sparingly. Prefer the 'message' field on render responses.

When to use: Use only when a text message is the only output. Otherwise, add a 'message' field to a render response.

LLM JSON

Json

1{
2  "action": "render",
3  "component": "MessageBubble",
4  "props": {
5    "text": "Great choice! Let me put together your plan."
6  }
7}

Props

Prop	Type	Req.	Description
text	string	✓	The message text to display

← A2A Adapter Custom Components →