Tool Invocation

AI calling an external/system tool.

search_docs Running Success Error

query: "rate limits", limit: 5

html

<div class="ti ti--running" style="--accent:#BFD9F2;">
  <div class="ti__head">
    <span class="ti__icon" aria-hidden="true">
      <span class="ti__icon-part ti__icon-part--running">↻</span>
      <span class="ti__icon-part ti__icon-part--success">✓</span>
      <span class="ti__icon-part ti__icon-part--error">✕</span>
    </span>
    <code class="ti__name">search_docs</code>
    <span class="ti__status-text">
      <span class="ti__status-part ti__status-part--running">Running</span>
      <span class="ti__status-part ti__status-part--success">Success</span>
      <span class="ti__status-part ti__status-part--error">Error</span>
    </span>
  </div>
  <p class="ti__args">query: &quot;rate limits&quot;, limit: 5</p>
</div>
<style>
.ti { font: 13px/1.5 ui-monospace, monospace; max-width: 440px; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid #24143026; background: #FAF7F2; color: #241430; }
.ti__head { display: flex; align-items: center; gap: 8px; font-family: system-ui, sans-serif; }
.ti__icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); font-size: 11px; flex: none; }
.ti__icon-part { display: none; }
.ti__name { flex: 1; font-weight: 600; }
.ti__status-part { display: none; font-family: system-ui, sans-serif; font-weight: 600; font-size: 12px; }
.ti--running .ti__icon-part--running { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ti--running .ti__icon-part--running { animation: ti-spin .2s linear infinite; }
}
.ti--running .ti__status-part--running { display: inline-block; color: #241430b3; }
.ti--success .ti__icon-part--success { display: inline-block; }
.ti--success .ti__status-part--success { display: inline-block; color: #2F8F5B; }
.ti--error .ti__icon-part--error { display: inline-block; }
.ti--error .ti__status-part--error { display: inline-block; color: #B4433A; }
@keyframes ti-spin { to { transform: rotate(360deg); } }
.ti__args { margin: 8px 0 0; padding: 8px 10px; background: #24143008; border-radius: 6px; overflow-x: auto; white-space: pre; }
</style>

tailwind

<div class="ti-tw ti-tw--running max-w-md p-3.5 rounded-[10px] border-[1.5px] border-[#24143026] bg-[#FAF7F2] text-[#241430] font-mono text-[13px]" style="--accent:#BFD9F2;">
  <div class="flex items-center gap-2 font-sans">
    <span aria-hidden="true" class="inline-flex w-[18px] h-[18px] items-center justify-center rounded-full flex-none text-[11px]" style="background:#BFD9F2">
      <span class="ti-tw__icon-part ti-tw__icon-part--running">↻</span>
      <span class="ti-tw__icon-part ti-tw__icon-part--success">✓</span>
      <span class="ti-tw__icon-part ti-tw__icon-part--error">✕</span>
    </span>
    <code class="flex-1 font-semibold">search_docs</code>
    <span class="font-sans font-semibold text-xs">
      <span class="ti-tw__status-part ti-tw__status-part--running">Running</span>
      <span class="ti-tw__status-part ti-tw__status-part--success">Success</span>
      <span class="ti-tw__status-part ti-tw__status-part--error">Error</span>
    </span>
  </div>
  <p class="mt-2 mb-0 px-2.5 py-2 bg-[#24143008] rounded-md overflow-x-auto whitespace-pre">query: &quot;rate limits&quot;, limit: 5</p>
</div>
<style>
.ti-tw__icon-part, .ti-tw__status-part { display: none; }
.ti-tw--running .ti-tw__icon-part--running { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ti-tw--running .ti-tw__icon-part--running { animation: ti-tw-spin .2s linear infinite; }
}
.ti-tw--running .ti-tw__status-part--running { display: inline-block; color: #241430b3; }
.ti-tw--success .ti-tw__icon-part--success { display: inline-block; }
.ti-tw--success .ti-tw__status-part--success { display: inline-block; color: #2F8F5B; }
.ti-tw--error .ti-tw__icon-part--error { display: inline-block; }
.ti-tw--error .ti-tw__status-part--error { display: inline-block; color: #B4433A; }
@keyframes ti-tw-spin { to { transform: rotate(360deg); } }
</style>

react

export function ToolInvocation({
  toolName = "search_docs",
  argsSummary = "query: &quot;rate limits&quot;, limit: 5",
  status = "running",
  accent = "#BFD9F2",
}) {
  const meta = {
    running: { icon: "↻", text: "Running", color: "#241430b3", spin: true },
    success: { icon: "✓", text: "Success", color: "#2F8F5B", spin: false },
    error: { icon: "✕", text: "Error", color: "#B4433A", spin: false },
  }[status];
  return (
    <div style={{ maxWidth: 440, padding: "12px 14px", borderRadius: 10, border: "1.5px solid #24143026",
      background: "#FAF7F2", color: "#241430", fontFamily: "ui-monospace, monospace", fontSize: 13 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "system-ui, sans-serif" }}>
        <span aria-hidden="true" className={meta.spin ? "ti-react__icon ti-react__icon--spin" : "ti-react__icon"} style={{ display: "inline-flex", width: 18, height: 18, alignItems: "center",
          justifyContent: "center", borderRadius: "50%", background: accent, fontSize: 11, flex: "none" }}>
          {meta.icon}
        </span>
        <code style={{ flex: 1, fontWeight: 600 }}>{toolName}</code>
        <span style={{ fontWeight: 600, fontSize: 12, color: meta.color }}>{meta.text}</span>
      </div>
      <p style={{ margin: "8px 0 0", padding: "8px 10px", background: "#24143008", borderRadius: 6,
        overflowX: "auto", whiteSpace: "pre" }}>
        {argsSummary}
      </p>
      <style>{`
        @keyframes ti-react-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: no-preference) {
          .ti-react__icon--spin { animation: ti-react-spin .2s linear infinite; }
        }
      `}</style>
    </div>
  );
}