> ## Documentation Index > Fetch the complete documentation index at: https://docs.langchain.com/llms.txt > Use this file to discover all available pages before exploring further. # Time travel > Inspect, navigate, and resume from any checkpoint in the conversation history export const PatternEmbed = ({pattern, theme, height, minHeight = 400, maxHeight = 700, className, defaultView = "preview", defaultSdk = "react", defaultLanguage = "js", showCodeTab = true, agentServer = "prod", onError, onReady}) => { var VALID_GUEST_TYPES = new Set(["READY", "RESIZE", "ERROR", "RUN_STARTED", "TRACE_URL", "THREAD_CLEARED"]); function stub() { return { safeParse: data => ({ success: true, data }), optional: () => stub(), min: () => stub(), url: () => stub() }; } var z = { object: _shape => stub(), literal: _value => stub(), string: () => stub(), number: () => stub(), boolean: () => stub(), enum: _values => stub(), array: _el => stub(), union: _schemas => stub(), record: (_key, _value) => stub(), discriminatedUnion: (_key, _schemas) => ({ safeParse(data) { if (data != null && typeof data === "object" && ("type" in data) && typeof data.type === "string" && VALID_GUEST_TYPES.has(data.type)) { return { success: true, data }; } return { success: false }; }, optional: () => stub(), min: () => stub(), url: () => stub() }) }; var SetThemeMessageSchema = z.object({ type: z.literal("SET_THEME"), theme: z.enum(["light", "dark"]) }); var SetPatternMessageSchema = z.object({ type: z.literal("SET_PATTERN"), slug: z.string() }); var ResetMessageSchema = z.object({ type: z.literal("RESET") }); var SetViewMessageSchema = z.object({ type: z.literal("SET_VIEW"), view: z.enum(["preview", "code"]) }); var SetLanguageMessageSchema = z.object({ type: z.literal("SET_LANGUAGE"), language: z.enum(["js", "python"]) }); var CodeFileSchema = z.object({ filename: z.string(), content: z.string() }); var UpdateCodeMessageSchema = z.object({ type: z.literal("UPDATE_CODE"), files: z.array(CodeFileSchema).min(1), entryFile: z.string() }); var TrackEventMessageSchema = z.object({ type: z.literal("TRACK_EVENT"), name: z.string(), properties: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional() }); var HostToGuestMessageSchema = z.discriminatedUnion("type", [SetThemeMessageSchema, SetPatternMessageSchema, ResetMessageSchema, UpdateCodeMessageSchema, SetViewMessageSchema, SetLanguageMessageSchema, TrackEventMessageSchema]); var ReadyMessageSchema = z.object({ type: z.literal("READY"), framework: z.enum(["react", "vue", "angular", "svelte"]) }); var ResizeMessageSchema = z.object({ type: z.literal("RESIZE"), height: z.number() }); var ErrorMessageSchema = z.object({ type: z.literal("ERROR"), message: z.string(), stack: z.string().optional() }); var RunStartedMessageSchema = z.object({ type: z.literal("RUN_STARTED"), runId: z.string() }); var TraceUrlMessageSchema = z.object({ type: z.literal("TRACE_URL"), url: z.string().url(), runId: z.string() }); var ThreadClearedMessageSchema = z.object({ type: z.literal("THREAD_CLEARED") }); var GuestToHostMessageSchema = z.discriminatedUnion("type", [ReadyMessageSchema, ResizeMessageSchema, ErrorMessageSchema, RunStartedMessageSchema, TraceUrlMessageSchema, ThreadClearedMessageSchema]); var PreviewMessageSchema = z.union([HostToGuestMessageSchema, GuestToHostMessageSchema]); function isOriginAllowed(origin, allowedOrigins) { return allowedOrigins.includes("*") || allowedOrigins.includes(origin); } function createPreviewHost(iframe, options) { const {allowedOrigins} = options; const targetOrigins = options.targetOrigins ?? allowedOrigins; const listeners = new Map(); function postToGuest(message) { if (!iframe.contentWindow) return; for (const origin of targetOrigins) { iframe.contentWindow.postMessage(message, origin); } } function addListener(type, callback) { if (!listeners.has(type)) { listeners.set(type, new Set()); } listeners.get(type).add(callback); return () => { listeners.get(type)?.delete(callback); }; } function handleMessage(event) { if (!isOriginAllowed(event.origin, allowedOrigins)) return; const result = GuestToHostMessageSchema.safeParse(event.data); if (!result.success) return; const msg = result.data; const cbs = listeners.get(msg.type); if (!cbs) return; for (const cb of cbs) { switch (msg.type) { case "READY": cb(msg.framework); break; case "RESIZE": cb(msg.height); break; case "ERROR": cb(msg.message, msg.stack); break; case "RUN_STARTED": cb(msg.runId); break; case "TRACE_URL": cb(msg.url, msg.runId); break; case "THREAD_CLEARED": cb(); break; } } } window.addEventListener("message", handleMessage); return { setTheme(theme) { postToGuest({ type: "SET_THEME", theme }); }, setPattern(slug) { postToGuest({ type: "SET_PATTERN", slug }); }, setView(view) { postToGuest({ type: "SET_VIEW", view }); }, setLanguage(language) { postToGuest({ type: "SET_LANGUAGE", language }); }, updateCode(files, entryFile) { postToGuest({ type: "UPDATE_CODE", files, entryFile }); }, reset() { postToGuest({ type: "RESET" }); }, trackEvent(name, properties) { postToGuest({ type: "TRACK_EVENT", name, properties }); }, onReady(callback) { return addListener("READY", callback); }, onResize(callback) { return addListener("RESIZE", callback); }, onError(callback) { return addListener("ERROR", callback); }, onRunStarted(callback) { return addListener("RUN_STARTED", callback); }, onTraceUrl(callback) { return addListener("TRACE_URL", callback); }, onThreadCleared(callback) { return addListener("THREAD_CLEARED", callback); }, destroy() { window.removeEventListener("message", handleMessage); listeners.clear(); } }; } var PROD_BASE = "https://ui-patterns.langchain.com"; var SDK_LABELS = { react: "React", vue: "Vue", svelte: "Svelte", angular: "Angular" }; var SDK_LOCAL_HOSTS = { react: "http://localhost:4100", vue: "http://localhost:4200", svelte: "http://localhost:4300", angular: "http://localhost:4400" }; var SDK_PROD_HOSTS = { react: `${PROD_BASE}/react`, vue: `${PROD_BASE}/vue`, svelte: `${PROD_BASE}/svelte`, angular: `${PROD_BASE}/angular` }; var SDK_LOGOS = { react: ``, vue: ``, svelte: ``, angular: `` }; var PROD_AGENT_API_BASE = `${PROD_BASE}/api/langgraph`; function normalizeAgentServerBase(agentServer, useLocalPreview) { const trimmed = agentServer.trim(); if (useLocalPreview) { return "http://localhost:2024"; } if (trimmed === "prod") { return PROD_AGENT_API_BASE; } if (trimmed === "local") { return PROD_AGENT_API_BASE; } return PROD_AGENT_API_BASE; } function isLocalhost() { if (typeof window === "undefined") return false; const {hostname} = window.location; return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::]"; } function detectPageTheme() { if (typeof document === "undefined") return "light"; const el = document.documentElement; if (el.classList.contains("dark")) return "dark"; if (el.getAttribute("data-theme") === "dark") return "dark"; if (el.style.colorScheme === "dark") return "dark"; return "light"; } var CACHE_KEY = "__lcPlaygroundIframeCache"; var iframeCache = globalThis[CACHE_KEY] ?? (() => { const m = new Map(); globalThis[CACHE_KEY] = m; return m; })(); var SDK_CACHE_KEY = "__lcPlaygroundSdkCache"; var sdkCache = globalThis[SDK_CACHE_KEY] ?? (() => { const m = new Map(); globalThis[SDK_CACHE_KEY] = m; return m; })(); var LANG_CACHE_KEY = "__lcPlaygroundLangCache"; var langCache = globalThis[LANG_CACHE_KEY] ?? (() => { const m = new Map(); globalThis[LANG_CACHE_KEY] = m; return m; })(); var VIEW_EYE_SVG = ``; var VIEW_CODE_SVG = ``; var CHEVRON_DOWN_SVG = ``; var TRACE_ICON_SVG = ``; var TRACE_SPINNER_SVG = ``; var EXTERNAL_LINK_SVG = ``; var DOWNLOAD_SVG = ``; var EXPAND_SVG = ``; var CLOSE_SVG = ``; var LANG_TS_SVG = ``; var LANG_PYTHON_SVG = ` `; var SDK_OPTIONS = Object.keys(SDK_LABELS).map(k => [k, SDK_LABELS[k]]); var EMBED_CSS = ` [data-lc-pe] .lc-tab{font-size:13px;font-family:inherit} [data-lc-pe] .lc-sdk-option{font-size:13px} [data-lc-pe] .lc-border{border-color:#B8DFFF} [data-lc-pe].dark .lc-border{border-color:#1A2740} [data-lc-pe] .lc-bg-surface{background-color:white} [data-lc-pe].dark .lc-bg-surface{background-color:#0B1120} [data-lc-pe] .lc-bg-wash{background-color:#F2FAFF} [data-lc-pe].dark .lc-bg-wash{background-color:#030710} [data-lc-pe] .lc-tab-active{background-color:#7FC8FF;color:#030710} [data-lc-pe] .lc-tab-inactive{background-color:transparent;color:#6B8299} [data-lc-pe] .lc-tab-inactive:hover{background-color:#E5F4FF;color:#030710} [data-lc-pe].dark .lc-tab-inactive:hover{background-color:#1A2740;color:#C8DDF0} [data-lc-pe] .lc-tab-trace{background-color:#FFF3E0;color:#E65100} [data-lc-pe].dark .lc-tab-trace{background-color:#3E2723;color:#FFB74D} [data-lc-pe] .lc-tab-trace:hover{background-color:#FFE0B2} [data-lc-pe].dark .lc-tab-trace:hover{background-color:#4E342E} [data-lc-pe] .lc-tab-trace-loading{background-color:transparent;color:#6B8299;cursor:not-allowed} [data-lc-pe] .lc-sdk-btn{border-color:#B8DFFF;background-color:white;font-size:13px;color:#030710} [data-lc-pe].dark .lc-sdk-btn{border-color:#1A2740;background-color:#0B1120;color:#C8DDF0} [data-lc-pe] .lc-sdk-btn:hover{background-color:#E5F4FF} [data-lc-pe].dark .lc-sdk-btn:hover{background-color:#1A2740} [data-lc-pe] .lc-dropdown{border-color:#B8DFFF;background-color:white;min-width:120px} [data-lc-pe].dark .lc-dropdown{border-color:#1A2740;background-color:#0B1120} [data-lc-pe] .lc-sdk-selected{background-color:#E5F4FF;color:#030710} [data-lc-pe].dark .lc-sdk-selected{background-color:#1A2740;color:#C8DDF0} [data-lc-pe] .lc-sdk-unselected{color:#6B8299} [data-lc-pe] .lc-sdk-unselected:hover{background-color:#F2FAFF;color:#030710} [data-lc-pe].dark .lc-sdk-unselected:hover{background-color:#1A2740;color:#C8DDF0} [data-lc-pe] .lc-spinner{border-color:#B8DFFF;border-top-color:#7FC8FF} [data-lc-pe].dark .lc-spinner{border-color:#1A2740;border-top-color:#7FC8FF} [data-lc-pe] .lc-error{background-color:rgb(178 125 117/0.1);border-color:rgb(178 125 117/0.3);color:#B27D75} [data-lc-pe] .lc-error-btn{border-color:rgb(178 125 117/0.3);background-color:white;color:#B27D75} [data-lc-pe].dark .lc-error-btn{background-color:#0B1120} [data-lc-pe] .lc-lang-switcher .lc-tab{padding:4px 8px} @media(max-width:639px){ [data-lc-pe] .lc-toolbar{flex-wrap:wrap;gap:8px} [data-lc-pe] .lc-tab-label{display:none} [data-lc-pe] .lc-tab{padding-left:10px;padding-right:10px} [data-lc-pe] .lc-sdk-btn{margin-left:auto} } [data-lc-pe] .lc-expand-btn{border:none;background:transparent;cursor:pointer;padding:6px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#6B8299;transition:background-color 0.15s,color 0.15s} [data-lc-pe] .lc-expand-btn:hover{background-color:#E5F4FF;color:#030710} [data-lc-pe].dark .lc-expand-btn:hover{background-color:#1A2740;color:#C8DDF0} .lc-pe-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} `; const slotRef = useRef(null); const cardRef = useRef(null); const placeholderRef = useRef(null); const cachedRef = useRef(null); const useLocalPreview = agentServer === "local" || agentServer === "prod" && isLocalhost(); const agentQuery = agentServer !== "local" && agentServer !== "prod" ? `?agentServer=${encodeURIComponent(agentServer)}` : ""; const sdkCacheKey = `${agentServer}|${pattern}`; const [sdk, setSdkRaw] = useState(() => { const fromCache = sdkCache.get(sdkCacheKey); if (fromCache) return fromCache; const hosts = useLocalPreview ? SDK_LOCAL_HOSTS : SDK_PROD_HOSTS; let best = null; for (const [s, url] of Object.entries(hosts)) { const entry = iframeCache.get(`${url}|${agentQuery}`); if (entry?.lastActiveAt && (!best || entry.lastActiveAt > best.at)) { best = { sdk: s, at: entry.lastActiveAt }; } } if (best) return best.sdk; return defaultSdk; }); const setSdk = useCallback(s => { sdkCache.set(sdkCacheKey, s); setSdkRaw(s); }, [sdkCacheKey]); const [sdkDropdownOpen, setSdkDropdownOpen] = useState(false); const langCacheKey = `${agentServer}|${pattern}`; const [agentLang, setAgentLangRaw] = useState(() => langCache.get(langCacheKey) ?? defaultLanguage); const setAgentLang = useCallback(l => { langCache.set(langCacheKey, l); setAgentLangRaw(l); }, [langCacheKey]); const previewUrl = useLocalPreview ? SDK_LOCAL_HOSTS[sdk] : SDK_PROD_HOSTS[sdk]; const cacheKey = `${previewUrl}|${agentQuery}`; const [ready, setReady] = useState(() => iframeCache.get(cacheKey)?.ready ?? false); const [iframeHeight, setIframeHeight] = useState(() => iframeCache.get(cacheKey)?.lastHeight ?? minHeight); const [error, setError] = useState(null); const [activeView, setActiveView] = useState(() => iframeCache.get(cacheKey)?.lastView ?? defaultView); const [traceUrl, setTraceUrl] = useState(null); const [traceLoading, setTraceLoading] = useState(false); const [expanded, setExpanded] = useState(false); const expandedRef = useRef(false); expandedRef.current = expanded; const [pageTheme, setPageTheme] = useState(detectPageTheme); useEffect(() => { setPageTheme(detectPageTheme()); const observer = new MutationObserver(() => setPageTheme(detectPageTheme())); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] }); return () => observer.disconnect(); }, []); const effectiveTheme = theme ?? pageTheme; useEffect(() => { if (document.getElementById("lc-pe-css")) return; const style = document.createElement("style"); style.id = "lc-pe-css"; style.textContent = EMBED_CSS; document.head.appendChild(style); }, []); const onErrorRef = useRef(onError); onErrorRef.current = onError; const onReadyRef = useRef(onReady); onReadyRef.current = onReady; const patternRef = useRef(pattern); patternRef.current = pattern; const themeRef = useRef(effectiveTheme); themeRef.current = effectiveTheme; const activeViewRef = useRef(activeView); activeViewRef.current = activeView; const agentLangRef = useRef(agentLang); agentLangRef.current = agentLang; useEffect(() => { let cached = iframeCache.get(cacheKey); if (cached?.hideTimer) { clearTimeout(cached.hideTimer); cached.hideTimer = void 0; } if (!cached) { const iframe2 = document.createElement("iframe"); iframe2.src = `${previewUrl}/${agentQuery}#/${patternRef.current}`; iframe2.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms"); iframe2.setAttribute("allow", "clipboard-write"); iframe2.title = `${patternRef.current} pattern`; iframe2.setAttribute("data-cache-key", cacheKey); Object.assign(iframe2.style, { position: "fixed", border: "none", visibility: "hidden", pointerEvents: "auto", zIndex: "1", borderRadius: "0 0 15px 15px" }); document.body.appendChild(iframe2); let iframeOrigin; try { iframeOrigin = new URL(previewUrl).origin; } catch { iframeOrigin = previewUrl; } const host2 = createPreviewHost(iframe2, { allowedOrigins: [iframeOrigin] }); cached = { iframe: iframe2, host: host2, ready: false, lastHeight: minHeight, lastView: defaultView, lastActiveAt: 0 }; iframeCache.set(cacheKey, cached); } cachedRef.current = cached; const {iframe, host} = cached; if (cached.ready) { setReady(true); setIframeHeight(cached.lastHeight); host.setTheme(themeRef.current); host.setPattern(patternRef.current); host.setLanguage(agentLangRef.current); if (activeViewRef.current !== "preview") { host.setView(activeViewRef.current); } cached.lastActiveAt = Date.now(); iframe.style.visibility = "visible"; } const unsubReady = host.onReady(() => { cached.ready = true; cached.lastActiveAt = Date.now(); setReady(true); host.setTheme(themeRef.current); host.setPattern(patternRef.current); host.setLanguage(agentLangRef.current); if (activeViewRef.current !== "preview") { host.setView(activeViewRef.current); } iframe.style.visibility = "visible"; onReadyRef.current?.(); }); const unsubResize = host.onResize(h => { if (expandedRef.current) return; const clamped = Math.min(maxHeight, Math.max(minHeight, h)); cached.lastHeight = clamped; setIframeHeight(clamped); }); const unsubError = host.onError((message, stack) => { setError(message); iframe.style.visibility = "hidden"; onErrorRef.current?.(message, stack); }); const unsubRunStarted = host.onRunStarted(() => { setTraceUrl(null); setTraceLoading(true); }); const unsubTraceUrl = host.onTraceUrl((url, _runId) => { setTraceUrl(url); setTraceLoading(false); }); const unsubThreadCleared = host.onThreadCleared(() => { setTraceUrl(null); setTraceLoading(false); }); function syncPosition() { const slot2 = slotRef.current; if (!slot2) return; const rect = slot2.getBoundingClientRect(); const {style} = iframe; style.top = `${rect.top}px`; style.left = `${rect.left}px`; style.width = `${rect.width}px`; style.setProperty("height", `${rect.height}px`, "important"); if (expandedRef.current) { style.zIndex = "10000"; } else { style.zIndex = "1"; } } syncPosition(); const ro = new ResizeObserver(syncPosition); if (slotRef.current) ro.observe(slotRef.current); document.addEventListener("scroll", syncPosition, { passive: true, capture: true }); window.addEventListener("resize", syncPosition, { passive: true }); let frameCount = 0; let rafId = 0; function initialSync() { syncPosition(); if (++frameCount < 5) rafId = requestAnimationFrame(initialSync); } rafId = requestAnimationFrame(initialSync); return () => { cancelAnimationFrame(rafId); ro.disconnect(); document.removeEventListener("scroll", syncPosition, { capture: true }); window.removeEventListener("resize", syncPosition); unsubReady(); unsubResize(); unsubError(); unsubRunStarted(); unsubTraceUrl(); unsubThreadCleared(); cachedRef.current = null; cached.hideTimer = setTimeout(() => { iframe.style.visibility = "hidden"; }, 200); }; }, [cacheKey, previewUrl, agentQuery, defaultView, minHeight, maxHeight]); useEffect(() => { requestAnimationFrame(() => window.dispatchEvent(new Event("resize"))); if (!expanded) return; const card = cardRef.current; const placeholder = placeholderRef.current; if (!card || !placeholder) return; const wrapper = document.createElement("div"); wrapper.setAttribute("data-lc-pe", ""); wrapper.className = `${effectiveTheme === "dark" ? "dark" : ""}`; document.body.appendChild(wrapper); const backdrop = document.createElement("div"); backdrop.className = "lc-pe-backdrop"; backdrop.addEventListener("click", () => setExpanded(false)); wrapper.appendChild(backdrop); wrapper.appendChild(card); Object.assign(card.style, { position: "fixed", zIndex: "9999", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "min(70vw, calc(100vw - 48px))", height: "85vh", display: "flex", flexDirection: "column" }); const handleKeyDown = e => { if (e.key === "Escape") setExpanded(false); }; document.addEventListener("keydown", handleKeyDown); const pageWrapper = document.body.children[0]; const savedFilter = pageWrapper?.style.filter ?? ""; const savedPointerEvents = pageWrapper?.style.pointerEvents ?? ""; if (pageWrapper && pageWrapper !== wrapper) { pageWrapper.style.filter = "blur(4px)"; pageWrapper.style.pointerEvents = "none"; } requestAnimationFrame(() => window.dispatchEvent(new Event("resize"))); return () => { document.removeEventListener("keydown", handleKeyDown); if (pageWrapper && pageWrapper !== wrapper) { pageWrapper.style.filter = savedFilter; pageWrapper.style.pointerEvents = savedPointerEvents; } card.style.cssText = ""; placeholder.appendChild(card); wrapper.remove(); requestAnimationFrame(() => window.dispatchEvent(new Event("resize"))); }; }, [expanded, effectiveTheme]); useEffect(() => { if (!ready || !cachedRef.current) return; setError(null); cachedRef.current.host.setPattern(pattern); }, [pattern, ready]); useEffect(() => { if (!ready || !cachedRef.current) return; cachedRef.current.host.setTheme(effectiveTheme); }, [effectiveTheme, ready]); useEffect(() => { if (!ready || !cachedRef.current) return; cachedRef.current.host.setLanguage(agentLang); }, [agentLang, ready]); const switchView = useCallback(view => { setActiveView(view); if (cachedRef.current) { cachedRef.current.lastView = view; if (cachedRef.current.ready) { cachedRef.current.host.setView(view); if (view === "code") { cachedRef.current.host.trackEvent("code_tab_clicked", { pattern }); } } } }, [pattern]); const sdkButtonRef = useRef(null); useEffect(() => { if (!sdkDropdownOpen || !sdkButtonRef.current) return; const isDark = effectiveTheme === "dark"; const rect = sdkButtonRef.current.getBoundingClientRect(); const dropdown = document.createElement("div"); Object.assign(dropdown.style, { position: "fixed", top: `${rect.bottom + 4}px`, right: `${window.innerWidth - rect.right}px`, zIndex: expandedRef.current ? "10001" : "10", minWidth: "120px", borderRadius: "8px", border: `1px solid ${isDark ? "#1A2740" : "#B8DFFF"}`, backgroundColor: isDark ? "#0B1120" : "white", boxShadow: "0 4px 12px rgba(0,0,0,0.15)", padding: "4px 0" }); for (const [value, label] of SDK_OPTIONS) { const isSelected = value === sdk; const btn = document.createElement("button"); btn.type = "button"; Object.assign(btn.style, { display: "flex", alignItems: "center", gap: "6px", width: "100%", textAlign: "left", padding: "6px 12px", fontSize: "13px", cursor: "pointer", border: "none", fontWeight: isSelected ? "500" : "normal", backgroundColor: isSelected ? isDark ? "#1A2740" : "#E5F4FF" : "transparent", color: isSelected ? isDark ? "#C8DDF0" : "#030710" : "#6B8299" }); btn.innerHTML = `${SDK_LOGOS[value]}${label}`; btn.addEventListener("mouseenter", () => { if (!isSelected) { btn.style.backgroundColor = isDark ? "#1A2740" : "#F2FAFF"; btn.style.color = isDark ? "#C8DDF0" : "#030710"; } }); btn.addEventListener("mouseleave", () => { if (!isSelected) { btn.style.backgroundColor = "transparent"; btn.style.color = "#6B8299"; } }); btn.addEventListener("click", () => { setSdk(value); setSdkDropdownOpen(false); cachedRef.current?.host.trackEvent("sdk_switched", { sdk: value, pattern }); }); dropdown.appendChild(btn); } document.body.appendChild(dropdown); const handleClose = e => { if (!dropdown.contains(e.target) && !sdkButtonRef.current?.contains(e.target)) { setSdkDropdownOpen(false); } }; const timer = setTimeout(() => document.addEventListener("mousedown", handleClose), 0); return () => { clearTimeout(timer); document.removeEventListener("mousedown", handleClose); dropdown.remove(); }; }, [sdkDropdownOpen, sdk, effectiveTheme, setSdk, pattern]); const handleReset = useCallback(() => { cachedRef.current?.host.reset(); if (cachedRef.current?.ready) { cachedRef.current.host.setPattern(pattern); } }, [pattern]); const resolvedHeight = height ?? Math.min(maxHeight, Math.max(minHeight, iframeHeight)); const heightStyle = typeof resolvedHeight === "number" ? `${resolvedHeight}px` : resolvedHeight; useEffect(() => { if (!expanded) { slotRef.current?.style.setProperty("height", heightStyle, "important"); } else { slotRef.current?.style.removeProperty("height"); } }, [heightStyle, expanded]); const tabBase = "lc-tab inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg border-none font-medium cursor-pointer transition-all duration-150"; const tabActiveClass = `${tabBase} lc-tab-active shadow-sm`; const tabInactiveClass = `${tabBase} lc-tab-inactive`; const tabTraceActiveClass = `${tabBase} lc-tab-trace`; const tabTraceLoadingClass = `${tabBase} lc-tab-trace-loading`; const toolbar = showCodeTab &&
{(traceUrl || traceLoading) && !useLocalPreview && { if (!traceUrl) e.preventDefault(); else cachedRef.current?.host.trackEvent("trace_tab_clicked", { pattern }); }} className={traceUrl ? tabTraceActiveClass : tabTraceLoadingClass} aria-disabled={!traceUrl}> Trace {traceUrl && } }
{activeView === "code" &&
}
{} {}
; const slot =
{!ready && !error &&
} {error &&
Preview Error

{error}

}
; return
{toolbar} {slot}
; }; Every state change in a LangGraph agent creates a **checkpoint**, a complete snapshot of the agent's state at that moment. Time travel lets you inspect any checkpoint, view the exact state the agent held, and **resume execution from that point** to explore alternative paths. It's a debugger, an undo button, and an audit log all in one. This feature requires the [LangGraph Agent Server](/langsmith/local-server). Run your agent locally with `langgraph dev` or [deploy it to LangSmith](/langsmith/deployment) to use this pattern. ## How checkpoints work LangGraph persists agent state after every node execution. Each persisted state is a `ThreadState` object that captures: * **checkpoint**: metadata identifying this specific snapshot (ID, timestamp) * **values**: the full agent state at this point (messages, custom keys) * **tasks**: the graph nodes that were scheduled to run next * **next**: the names of upcoming nodes in the execution plan This creates a linear timeline of every decision the agent made, every tool it called, and every response it produced. Your UI can render this timeline and let users jump to any point. ## Setting up useStream Enable checkpoint history by passing `fetchStateHistory: true` to `useStream`. This tells the hook to load the full checkpoint timeline for the current thread. Define a TypeScript interface matching your agent's state schema and pass it as a type parameter to `useStream` for type-safe access to state values. In the examples below, replace `typeof myAgent` with your interface name: ```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} import type { BaseMessage } from "@langchain/core/messages"; interface AgentState { messages: BaseMessage[]; } ``` ```tsx React theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} import { useStream } from "@langchain/react"; const AGENT_URL = "http://localhost:2024"; export function TimeTravelChat() { const stream = useStream({ apiUrl: AGENT_URL, assistantId: "time_travel", fetchStateHistory: true, }); const history = stream.history ?? []; return (
stream.submit(null, { checkpoint: cp.checkpoint })} />
); } ``` ```vue Vue theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} ``` ```svelte Svelte theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
``` ```ts Angular theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} import { Component, computed } from "@angular/core"; import { useStream } from "@langchain/angular"; const AGENT_URL = "http://localhost:2024"; @Component({ selector: "app-time-travel-chat", template: `
`, }) export class TimeTravelChatComponent { stream = useStream({ apiUrl: AGENT_URL, assistantId: "time_travel", fetchStateHistory: true, }); history = computed(() => this.stream.history() ?? []); resumeFrom(cp: ThreadState) { this.stream.submit(null, { checkpoint: cp.checkpoint }); } } ``` ## The ThreadState object Each entry in the `history` array is a `ThreadState` representing one checkpoint in the timeline: ```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} interface ThreadState { checkpoint: { checkpoint_id: string; checkpoint_ns: string; }; values: Record; tasks: Array<{ id: string; name: string; interrupts?: unknown[]; }>; next: string[]; } ``` | Property | Description | | ------------ | -------------------------------------------------------------------------------------- | | `checkpoint` | Identifies this snapshot. Pass it to `submit` to resume from here | | `values` | The complete agent state at this point, including `messages` and any custom state keys | | `tasks` | The graph nodes that ran at this checkpoint, including their names and any interrupts | | `next` | Names of nodes scheduled to execute after this checkpoint | ## Building a checkpoint timeline The timeline sidebar shows every checkpoint as a clickable entry. Each entry displays the node that ran and how many messages existed at that point: ```tsx theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} function TimelineSidebar({ history, onSelect, }: { history: ThreadState[]; onSelect: (cp: ThreadState) => void; }) { return ( ); } ``` ## Inspecting checkpoint state Clicking a checkpoint should show the full state at that point. A JSON viewer gives developers complete visibility into what the agent knew and decided: ```tsx theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} function CheckpointInspector({ checkpoint }: { checkpoint: ThreadState }) { const [expanded, setExpanded] = useState(false); return (

Checkpoint {checkpoint.checkpoint.checkpoint_id.slice(0, 8)}...

Node:{" "} {checkpoint.tasks?.[0]?.name ?? "—"}

Next:{" "} {checkpoint.next?.join(", ") || "—"}

Messages:{" "} {(checkpoint.values?.messages as unknown[])?.length ?? 0}

{expanded && ( 
            {JSON.stringify(checkpoint.values, null, 2)}
)}
); } ``` For production UIs, consider using a proper JSON viewer component with collapsible nodes instead of raw `JSON.stringify`. Libraries like `react-json-view` or `react-json-tree` give users a much better exploration experience. ## Resuming from a checkpoint The core of time travel is the ability to **resume execution from any prior checkpoint**. When a user selects a checkpoint, call `submit` with `null` input and pass the checkpoint reference: ```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} stream.submit(null, { checkpoint: selectedCheckpoint.checkpoint }); ``` This tells LangGraph to: 1. Roll back to the selected checkpoint's state 2. Re-execute the graph from that point forward 3. Stream the new results to the client The existing messages after the selected checkpoint are replaced by the new execution path. This effectively creates a **branch** in the conversation timeline. Resuming from a checkpoint does not delete the original timeline. The previous checkpoints remain available in the history. This means users can always go back and try a different path without losing any prior work. ## The SplitView layout Time travel works best with a split layout, with the main chat on the left and the timeline on the right: ```tsx theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} function TimeTravelLayout() { const stream = useStream({ apiUrl: AGENT_URL, assistantId: "time_travel", fetchStateHistory: true, }); const [selectedCheckpoint, setSelectedCheckpoint] = useState(null); const history = stream.history ?? []; return (
{/* Main chat area */}
{stream.messages.map((msg) => ( ))}
stream.submit({ messages: [{ type: "human", content: text }] }) } isLoading={stream.isLoading} />
{/* Timeline sidebar */}
); } ``` ## Extracting checkpoint metadata Transform raw checkpoint data into display-friendly entries for your timeline: ```ts theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} function formatCheckpoints(history: ThreadState[]) { return history.map((cp, index) => ({ index, id: cp.checkpoint?.checkpoint_id, taskName: cp.tasks?.[0]?.name ?? "unknown", messageCount: (cp.values?.messages as unknown[])?.length ?? 0, hasInterrupts: cp.tasks?.some((t) => t.interrupts?.length) ?? false, nextNodes: cp.next ?? [], })); } ``` This makes it easy to render timeline entries with meaningful labels instead of raw IDs. ## Use cases Time travel is invaluable across many scenarios: * **Debugging agent behavior**: step through the agent's decisions to understand why it chose a particular path * **Undoing actions**: if the agent took a wrong turn, resume from an earlier checkpoint and try again * **Exploring alternatives**: fork from a mid-conversation checkpoint to see how different inputs change the outcome * **Auditing**: review the complete history of an agent's actions for compliance, quality assurance, or post-incident analysis * **Teaching**: walk through an agent's execution step by step to explain how multi-step reasoning works Time travel is especially powerful when combined with [human-in-the-loop](/oss/python/langchain/frontend/human-in-the-loop) patterns. If a human reviewer rejects an agent's action at an interrupt, they can resume from the checkpoint before the action was taken and provide corrective input. ## Handling interrupts in the timeline Checkpoints that contain interrupts (human-in-the-loop pauses) deserve special visual treatment. They represent moments where the agent stopped and waited for human input: ```tsx theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} function TimelineEntry({ checkpoint, index, }: { checkpoint: ThreadState; index: number; }) { const hasInterrupt = checkpoint.tasks?.some( (t) => t.interrupts && t.interrupts.length > 0 ); return (
#{index + 1} {hasInterrupt && ( Interrupt )}

{checkpoint.tasks?.[0]?.name ?? "—"}

); } ``` ## Best practices * **Load history lazily**: for threads with hundreds of checkpoints, paginate or load only the most recent N entries to keep the UI responsive. * **Show meaningful labels**: display node names and message counts instead of raw checkpoint IDs. Users need context, not UUIDs. * **Confirm before resuming**: resuming from an old checkpoint replaces the current execution path. Show a confirmation dialog so users don't accidentally lose the current conversation state. * **Highlight the current checkpoint**: make it visually obvious which checkpoint corresponds to the current state of the conversation. * **Support keyboard navigation**: power users will want to step through checkpoints with arrow keys. Add keyboard handlers to the timeline for a smooth debugging experience. * **Diff state between checkpoints**: for advanced users, showing what changed between two consecutive checkpoints can reveal exactly how the agent's state evolved at each step. ***
[Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers. [Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/oss/langchain/frontend/time-travel.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).