Custom cards
Custom cards let you render your own UI components directly inside the co-pilot chat (React, Vue, or Angular based on your SDK). 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.
| 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
- Define a tool with
type: 'inline_ui'and acard_type - Register a framework component for that
card_type - When the co-pilot suggests the tool, your component renders inline in chat
- The user interacts with it and confirms, triggering your callback
Use cases
- Confirmation dialogs — Before destructive actions (delete, remove, cancel)
- Data entry forms — Collect structured data (invite member, create task)
- Data previews — Show formatted previews before acting (project summary, config preview)
- Multi-step wizards — Break complex inputs into steps within the chat
Card lifecycle
| Callback | When it's called |
|---|---|
onConfirm | User clicks confirm/submit |
onCancel | User clicks cancel/dismiss |
onStateChange | Card updates its internal state |
Your tool 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, etc.).
Next steps
- Building custom cards — Step-by-step implementation guide