50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1757,"use client"; import { Card } from "@/components/ui/card"; import * as React from "react"; import { SearchToolCall, type SearchResult } from "@/components/ui/search-tool-call"; import { Reasoning } from "@/components/ui/reasoning"; import { SourceCard } from "@/components/ui/source-card"; import { InlineCitation, CitationList, type Citation } from "@/components/ui/citation-ui"; /* ------------------------------------------------------------------ */ /* Data */ /* ------------------------------------------------------------------ */ const SEARCH_RESULTS: SearchResult[] = [ { title: "Claude Fable 5 and Mythos 5 — Anthropic", url: "https://www.anthropic.com/news/claude-fable-5-mythos-5", snippet: "Fable 5 is the most advanced generally available Claude model to date.", }, { title: "Claude 5 family: model overview", url: "https://docs.anthropic.com/models/overview", snippet: "Capabilities, context windows and pricing for the Claude 5 line.", }, { title: "Anthropic model pricing", url: "https://docs.anthropic.com/pricing", snippet: "Per-token pricing for Opus, Sonnet and Haiku tiers.", }, ]; const REASONING_STEPS = [ { title: "Parsed the question", detail: "The user asks for the latest Claude 5 tier and its pricing.", }, { title: "Formulated queries", detail: "Ran two searches: model capabilities and per-tier pricing.", }, { title: "Cross-checked sources", detail: "Matched official docs against release notes.", }, { title: "Synthesized the answer", detail: "Combined 3 sources into a single recommendation.", }, ]; const SOURCES: Citation[] = [ { id: 1, title: "Claude Fable 5 and Mythos 5", url: "https://www.anthropic.com/news/claude-fable-5-mythos-5", domain: "anthropic.com", snippet: "Fable 5 is the most advanced generally available Claude model.", }, { id: 2, title: "Claude 5 family: model overview", url: "https://docs.anthropic.com/models/overview", domain: "docs.anthropic.com", }, { id: 3, title: "Anthropic model pricing", url: "https://docs.anthropic.com/pricing", domain: "docs.anthropic.com", }, ]; /* ------------------------------------------------------------------ */ /* ResearchAssistantPattern */ /* ------------------------------------------------------------------ */ export function ResearchAssistantPattern() { const [phase, setPhase] = React.useState<0 | 1 | 2>(0); React.useEffect(() => { if (phase !== 0) return; const t = window.setTimeout(() => setPhase(1), 3200); return () => window.clearTimeout(t); }, [phase]); React.useEffect(() => { if (phase !== 1) return; const t = window.setTimeout(() => setPhase(2), 3600); return () => window.clearTimeout(t); }, [phase]); return ( {/* Question header */}

Research Question

Which Claude 5 model is most cost-effective for a high-volume support bot?

{/* Main column */}

{/* Search tools */}

= 1 ? "done" : "searching"} results={SEARCH_RESULTS.slice(0, 2)} elapsed={phase >= 1 ? "2.4s" : "1.4s"} /> = 1 ? "done" : "searching"} results={SEARCH_RESULTS.slice(2)} elapsed={phase >= 1 ? "1.9s" : "0.8s"} />

{/* Reasoning */} {/* Answer */} {phase === 2 && (

Final Answer

For high-volume support traffic, Claude Haiku 4.5 is the most cost-effective tier: it keeps per-token cost a fraction of Opus while still handling the routine routing and drafting that support bots handle best{" "} . Reserve Opus{" "} for escalation paths where reasoning quality outweighs cost. At scale, streaming with Haiku keeps first-token latency low and the bill predictable .

)}

{/* Sources sidebar */}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@scrimui","registryDependencies":["https://scrimui.dev/r/search-tool-call.json","https://scrimui.dev/r/reasoning.json","https://scrimui.dev/r/source-card.json","https://scrimui.dev/r/citation-ui.json","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/showcase/patterns/research-assistant/research-assistant.tsx","content":"$52","type":"registry:block","target":"components/blocks/research-assistant.tsx"}],"className":"h-[70svh] min-h-80"}]]}]