Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- SingleRecommendationCard API
- Shared Types
Common Examples
Basic Usage
Present a single-select choice:import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SingleSelectExample() {
const handleSubmit = (response) => {
console.log("Selected:", response.optionIds[0]);
console.log("Action:", response.actionId);
};
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like to schedule?"
options={[
{ id: "opt-1", label: "HVAC Maintenance", description: "Annual checkup and filter replacement" },
{ id: "opt-2", label: "Plumbing Inspection", description: "Full system evaluation" },
{ id: "opt-3", label: "Electrical Review", description: "Safety inspection and testing" },
]}
actions={[
{ id: "confirm", name: "Schedule", type: "primary" },
{ id: "cancel", name: "Cancel", type: "ghost" },
]}
onSubmit={handleSubmit}
/>
);
}
Submitted State
Show previously selected values:import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like?"
options={options}
actions={actions}
onSubmit={() => {}}
submitted={true}
selected={["opt-2"]}
/>
);
}
<SingleRecommendationCard
recommendationId="rec-123"
message="Select an option"
options={[
{ id: "opt-1", label: "Option 1", description: "Description" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
submitted={false}
selected={[]}
/>
SingleRecommendationCard Props
RecommendationAction[]
required
Array of action buttons with
id, name, and optional type.string
required
The prompt message to display above the options.
(response: ConfirmationResponse) => void
required
Callback fired when an action button is clicked. Receives
sourceMessageId, optionIds, and actionId.Options[]
required
Array of selectable options with
id, label, and optional description.string
Unique identifier for this recommendation, included in the submit response.
string[]
Array of selected option IDs to display when
submitted is true.boolean
default:"false"
When true, disables all inputs and shows the selected state.
Options Interface
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
RecommendationAction Interface
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}