Custom Cards
Custom cards let you render your own React components directly inside the co-pilot chat. Instead of just text responses, the co-pilot can show interactive forms, confirmation dialogs, data previews, and more.
Why Custom Cards
Sometimes text isn't enough. Custom cards enable:
| Scenario | Without Cards | With Cards |
|---|---|---|
| Confirm deletion | "Are you sure? Type 'yes' to confirm" | Interactive confirm/cancel buttons |
| Invite team member | "Enter email in the form above" | Email input form right in chat |
| Preview data | "Here's the JSON..." | Formatted, styled data preview |
Cards bring your UI into the conversation.
How It Works
Specify a cardId that maps to your component.
Provide a React component that renders the card UI.
When relevant, the co-pilot suggests the action to the user.
Your component appears inline. User interacts with it directly.
Use Cases
Confirmation Dialogs
Before destructive actions, show a confirmation card with clear cancel/confirm options:
- Delete a project
- Remove a team member
- Cancel a subscription
Data Entry Forms
Collect structured data right in the chat:
- Invite a team member (email, role)
- Create a quick task (title, assignee, due date)
- Submit feedback (rating, comments)
Data Previews
Show formatted previews of data the user is about to act on:
- Project summary before archiving
- User details before sending an invite
- Configuration preview before applying changes
Multi-Step Wizards
Break complex inputs into steps within the chat:
- Onboarding questionnaires
- Configuration wizards
- Guided setup flows
Card Lifecycle
Cards receive callbacks for user interactions:
| Callback | When It's Called |
|---|---|
onConfirm | User clicks confirm/submit |
onCancel | User clicks cancel/dismiss |
onStateChange | Card updates its internal state |
Your action handler receives the final data when the user confirms.
Styling
Cards inherit Pillar's theme by default, so they match the panel's look and feel. You can also apply your own styles or use your design system components.
CSS variables from your theme are available:
--pillar-primary--pillar-bg--pillar-text- And more...
Next Steps
- Building Custom Cards — Step-by-step implementation guide
- Action Types Reference — The
inline_uitype specification - Theme Options — Customize card styling