Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Welcome API
Common Examples
Basic Usage
Display the onboarding welcome screen:import { Welcome } from "@servicetitan/anvil2-ext-atlas";
function WelcomeScreen() {
const [showWelcome, setShowWelcome] = useState(true);
if (!showWelcome) {
return <ChatInterface />;
}
return (
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={() => setShowWelcome(false)}
/>
);
}
Conditional Screen Display
Switch between welcome and chat states:import { Welcome, ChatWindow, Content } from "@servicetitan/anvil2-ext-atlas";
function AtlasApp() {
const [showWelcome, setShowWelcome] = useState(true);
if (showWelcome) {
return (
<Welcome
title="Welcome to Atlas"
onContinue={() => {
setShowWelcome(false);
initializeChat();
}}
/>
);
}
return (
<ChatWindow open>
<Content>{/* messages */}</Content>
</ChatWindow>
);
}
With Test ID
Include test ID for automation:import { Welcome } from "@servicetitan/anvil2-ext-atlas";
function WelcomeWithTestId() {
return (
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={handleContinue}
continueButtonId="welcome-continue-btn"
/>
);
}
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={handleContinue}
continueButtonId="welcome-continue"
/>
Welcome Props
() => void
required
Callback fired when the user clicks the Continue button.
string
Test ID for the continue button.
string
Secondary heading text displayed below the title.
string
Main heading text displayed on the welcome screen.