Skip to main content

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.

​
Common Examples

import { Content, UserMessage, MarkdownMessage } from "@servicetitan/anvil2-ext-atlas";

function ChatContent() {
  const messages = [
    { id: 1, type: "user", content: "Hello!" },
    { id: 2, type: "assistant", content: "Hi! How can I help you?" },
  ];

  return (
    <Content itemsLength={messages.length}>
      {messages.map((msg) =>
        msg.type === "user" ? (
          <UserMessage key={msg.id} message={msg.content} />
        ) : (
          <MarkdownMessage key={msg.id} message={msg.content} />
        )
      )}
    </Content>
  );
}

​
With Loading State

Display a loading spinner while fetching initial messages:
import { Content } from "@servicetitan/anvil2-ext-atlas";

function LoadingContent() {
  const [loading, setLoading] = useState(true);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fetchMessages().then((data) => {
      setMessages(data);
      setLoading(false);
    });
  }, []);

  return (
    <Content itemsLength={messages.length} loading={loading}>
      {messages.map((msg) => (
        <Message key={msg.id} {...msg} />
      ))}
    </Content>
  );
}

​
Auto-Scroll Behavior

The component automatically scrolls to the bottom when new messages are added:
import { Content, UserMessage } from "@servicetitan/anvil2-ext-atlas";

function AutoScrollContent() {
  const [messages, setMessages] = useState([]);

  const addMessage = (text) => {
    setMessages((prev) => [
      ...prev,
      { id: Date.now(), content: text },
    ]);
    // Content will automatically smooth-scroll to show new message
  };

  return (
    <Content itemsLength={messages.length}>
      {messages.map((msg) => (
        <UserMessage key={msg.id} message={msg.content} />
      ))}
    </Content>
  );
}
Last modified on April 9, 2026