Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Suggestion API
- SuggestionList API
Common Examples
Single Suggestion
Display a single suggestion chip:import { Suggestion } from "@servicetitan/anvil2-ext-atlas";
function SingleSuggestion() {
return (
<Suggestion
text="How do I schedule an appointment?"
onClick={(text) => sendMessage(text)}
/>
);
}
Suggestion List
Display multiple suggestions:import { SuggestionList } from "@servicetitan/anvil2-ext-atlas";
function MultipleSuggestions() {
const suggestions = [
"How do I schedule an appointment?",
"What are your business hours?",
"Tell me about your services",
];
return (
<SuggestionList
suggestions={suggestions}
onSelect={(text) => sendMessage(text)}
/>
);
}
Dynamic Suggestions
Update suggestions based on context:import { SuggestionList } from "@servicetitan/anvil2-ext-atlas";
function ContextualSuggestions({ topic }) {
const suggestions = useMemo(() => {
if (topic === "scheduling") {
return ["Book now", "See availability", "Reschedule"];
}
return ["Get started", "Learn more", "Contact us"];
}, [topic]);
return (
<SuggestionList
suggestions={suggestions}
onSelect={handleSelect}
/>
);
}
<Suggestion
text="How do I schedule?"
onClick={handleClick}
/>
Suggestion Props
(suggestion: string) => void
required
Callback fired when the suggestion is clicked, receives the suggestion text.
string
required
The suggestion text to display and pass to the onClick callback.