Skip to main content

Common Examples

Single Suggestion

Display a single suggestion chip:
import { Suggestion } from "@servicetitan/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/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/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}
    />
  );
}
Last modified on February 12, 2026