Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Implementation
ArtifactCard API
Common Examples
Basic Usage
Render an artifact trigger with a title and description:import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";
function ArtifactTrigger() {
return (
<ArtifactCard
title="Insights for Invoice #10492"
description="Single-visit industrial install, closed under quote with a 40% margin."
artifactId="insight-1"
onClick={() => openPanel("insight-1")}
/>
);
}
Active State
Pass active while the corresponding ArtifactPanel is open so the card shows the elevated visual state:import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";
function ActiveTrigger({ openId, onOpen }) {
return (
<ArtifactCard
title="Customer note draft"
description="Plain-language summary of the variance."
artifactId="insight-2"
active={openId === "insight-2"}
onClick={() => onOpen("insight-2")}
/>
);
}
Pairing with ArtifactPanel
Wire the card’s onClick to the consumer state that drives an ArtifactPanel:import { useState } from "react";
import { ArtifactCard, ArtifactPanel } from "@servicetitan/anvil2-ext-atlas";
function ChatWithArtifact() {
const [activeId, setActiveId] = useState<string | null>(null);
return (
<>
<ArtifactCard
title="Insights for Invoice #10492"
description="Single-visit industrial install."
artifactId="insight-1"
active={activeId === "insight-1"}
onClick={() => setActiveId("insight-1")}
/>
<ArtifactPanel
isOpen={activeId !== null}
onOpenChange={(open) => {
if (!open) setActiveId(null);
}}
title="Insight details"
triggerKey={activeId ?? undefined}
>
{/* artifact content */}
</ArtifactPanel>
</>
);
}
React Accessibility
- The card renders as a
role="group" wrapping an interactive button via Anvil2’s InteractiveCard. The whole surface is clickable.
- The
title is used for both the wrapper’s aria-label and the action button’s aria-label (prefixed with “View ”).
artifactId is emitted as data-artifact-id for analytics and event wiring; it is not announced to assistive technology.
<ArtifactCard
title="Insights for Invoice #10492"
description="Single-visit industrial install."
artifactId="insight-1"
active={false}
onClick={handleClick}
/>
ArtifactCard Props
Supplementary description shown beneath the title.
Called when the card is activated. Consumers typically open the corresponding ArtifactPanel here.
Bold heading rendered inside the card.
When true, the card shows the active visual state. Set when the corresponding ArtifactPanel is open.
Identifier for the artifact this card references. Emitted as a data-artifact-id attribute for analytics and event handling.
