Sandbox ↗
noOriginal Documentation
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.
Build an IDE-like UI for a coding agent backed by a sandbox environment
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: <svg width="14" height="14" viewBox="0 -14 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M210.483381,73.8236374 C207.827698,72.9095503 205.075867,72.0446761 202.24247,71.2267368 C202.708172,69.3261098 203.135596,67.4500894 203.515631,65.6059664 C209.753843,35.3248922 205.675082,10.9302478 191.747328,2.89849283 C178.392359,-4.80289661 156.551327,3.22703567 134.492936,22.4237776 C132.371761,24.2697233 130.244662,26.2241201 128.118477,28.2723861 C126.701777,26.917204 125.287358,25.6075897 123.876584,24.3549348 C100.758745,3.82852863 77.5866802,-4.82157937 63.6725966,3.23341515 C50.3303869,10.9571328 46.3792156,33.8904224 51.9945178,62.5880206 C52.5367729,65.3599011 53.1706189,68.1905639 53.8873982,71.068617 C50.6078941,71.9995641 47.4418534,72.9920277 44.4125156,74.0478303 C17.3093297,83.497195 0,98.3066828 0,113.667995 C0,129.533287 18.5815786,145.446423 46.8116526,155.095373 C49.0394553,155.856809 51.3511025,156.576778 53.7333796,157.260293 C52.9600965,160.37302 52.2875179,163.423318 51.7229345,166.398431 C46.3687351,194.597975 50.5500231,216.989464 63.8566899,224.664425 C77.6012619,232.590464 100.66852,224.443422 123.130185,204.809231 C124.905501,203.257196 126.687196,201.611293 128.472081,199.886102 C130.785552,202.113904 133.095375,204.222319 135.392897,206.199955 C157.14963,224.922338 178.637969,232.482469 191.932332,224.786092 C205.663234,216.837268 210.125675,192.78347 204.332202,163.5181 C203.88974,161.283006 203.374826,158.99961 202.796573,156.675661 C204.416503,156.196743 206.006814,155.702335 207.557482,155.188332 C236.905331,145.46465 256,129.745175 256,113.667995 C256,98.2510906 238.132466,83.3418093 210.483381,73.8236374 Z M204.118035,144.807565 C202.718197,145.270987 201.281904,145.718918 199.818271,146.153177 C196.578411,135.896354 192.205739,124.989735 186.854729,113.72131 C191.961041,102.721277 196.164656,91.9540963 199.313837,81.7638014 C201.93261,82.5215915 204.474374,83.3208483 206.923636,84.1643056 C230.613348,92.3195488 245.063763,104.377206 245.063763,113.667995 C245.063763,123.564379 229.457753,136.411268 204.118035,144.807565 Z M193.603754,165.642007 C196.165567,178.582766 196.531475,190.282717 194.834536,199.429057 C193.309843,207.64764 190.243595,213.12715 186.452366,215.321689 C178.384612,219.991462 161.131788,213.921395 142.525146,197.909832 C140.392124,196.074366 138.243609,194.114502 136.088259,192.040261 C143.301619,184.151133 150.510878,174.979732 157.54698,164.793993 C169.922699,163.695814 181.614905,161.900447 192.218042,159.449363 C192.740247,161.555956 193.204126,163.621993 193.603754,165.642007 Z M87.2761866,214.514686 C79.3938934,217.298414 73.1160375,217.378157 69.3211631,215.189998 C61.2461189,210.532528 57.8891498,192.554265 62.4682434,168.438039 C62.9927272,165.676183 63.6170041,162.839142 64.3365173,159.939216 C74.8234575,162.258154 86.4299951,163.926841 98.8353334,164.932519 C105.918826,174.899534 113.336329,184.06091 120.811247,192.08264 C119.178102,193.65928 117.551336,195.16028 115.933685,196.574699 C106.001303,205.256705 96.0479605,211.41654 87.2761866,214.514686 Z M50.3486141,144.746959 C37.8658105,140.48046 27.5570398,134.935332 20.4908634,128.884403 C14.1414664,123.446815 10.9357817,118.048415 10.9357817,113.667995 C10.9357817,104.34622 24.8334611,92.4562517 48.0123604,84.3748281 C50.8247961,83.3942121 53.7689223,82.4701001 56.8242337,81.6020363 C60.0276398,92.0224477 64.229889,102.917218 69.3011135,113.93411 C64.1642716,125.11459 59.9023288,136.182975 56.6674809,146.725506 C54.489347,146.099407 52.3791089,145.440499 50.3486141,144.746959 Z M62.7270678,60.4878073 C57.9160346,35.9004118 61.1112387,17.3525532 69.1516515,12.6982729 C77.7160924,7.74005624 96.6544653,14.8094222 116.614922,32.5329619 C117.890816,33.6657739 119.171723,34.8514442 120.456275,36.0781256 C113.018267,44.0647686 105.66866,53.1573386 98.6480514,63.0655695 C86.6081646,64.1815215 75.0831931,65.9741531 64.4868907,68.3746571 C63.8206914,65.6948233 63.2305903,63.0619242 62.7270678,60.4878073 Z M173.153901,87.7550367 C170.620796,83.3796304 168.020249,79.1076627 165.369124,74.9523483 C173.537126,75.9849113 181.362914,77.3555864 188.712066,79.0329319 C186.505679,86.1041206 183.755673,93.4974728 180.518546,101.076741 C178.196419,96.6680702 175.740322,92.2229454 173.153901,87.7550367 Z M128.122121,43.8938899 C133.166461,49.3588189 138.218091,55.4603279 143.186789,62.0803968 C138.179814,61.8439007 133.110868,61.720868 128.000001,61.720868 C122.937434,61.720868 117.905854,61.8411667 112.929865,62.0735617 C117.903575,55.515009 122.99895,49.4217021 128.122121,43.8938899 Z M82.8018984,87.830679 C80.2715265,92.2183886 77.8609975,96.6393627 75.5753239,101.068539 C72.3906004,93.5156998 69.6661103,86.0886276 67.440586,78.9171899 C74.7446255,77.2826781 82.5335049,75.9461789 90.6495601,74.9332099 C87.9610684,79.1268011 85.3391054,83.4302106 82.8018984,87.8297677 Z M90.8833221,153.182899 C82.4979621,152.247395 74.5919739,150.979704 67.289757,149.390303 C69.5508242,142.09082 72.3354636,134.505173 75.5876271,126.789657 C77.8792246,131.215644 80.2993228,135.638441 82.8451877,140.03572 C85.4388987,144.515476 88.1255676,148.90364 90.8833221,153.182899 Z M128.424691,184.213105 C123.24137,178.620587 118.071264,172.434323 113.021912,165.780078 C117.923624,165.972373 122.921029,166.0708 128.000001,166.0708 C133.217953,166.0708 138.376211,165.953235 143.45336,165.727219 C138.468257,172.501308 133.434855,178.697141 128.424691,184.213105 Z M180.622896,126.396409 C184.044571,134.195313 186.929004,141.741317 189.219234,148.9164 C181.796719,150.609693 173.782736,151.973534 165.339049,152.986959 C167.996555,148.775595 170.619884,144.430263 173.197646,139.960532 C175.805484,135.438399 178.28163,130.90943 180.622896,126.396409 Z M163.724586,134.496971 C159.722835,141.435557 155.614455,148.059271 151.443648,154.311611 C143.847063,154.854776 135.998946,155.134562 128.000001,155.134562 C120.033408,155.134562 112.284171,154.887129 104.822013,154.402745 C100.48306,148.068386 96.285368,141.425078 92.3091341,134.556664 C88.3442923,127.706935 84.6943232,120.799333 81.3870228,113.930466 C84.6934118,107.045648 88.3338117,100.130301 92.276781,93.292874 C96.2293193,86.4385872 100.390102,79.8276317 104.688954,73.5329157 C112.302398,72.9573964 120.109505,72.6571055 127.999545,72.6571055 C135.925583,72.6571055 143.742714,72.9596746 151.353879,73.5402067 C155.587114,79.7888993 159.719645,86.3784378 163.688588,93.2350031 C167.702644,100.168578 171.389978,107.037901 174.724618,113.77508 C171.400003,120.627999 167.720871,127.566587 163.724586,134.496971 Z M186.284677,12.3729198 C194.857321,17.3165548 198.191049,37.2542268 192.804953,63.3986692 C192.461372,65.0669011 192.074504,66.7661189 191.654369,68.4881206 C181.03346,66.0374921 169.500286,64.2138746 157.425315,63.0810626 C150.391035,53.0639249 143.101577,43.9572289 135.784778,36.073113 C137.751934,34.1806885 139.716356,32.3762092 141.672575,30.673346 C160.572216,14.2257007 178.236518,7.73185406 186.284677,12.3729198 Z M128.000001,90.8080696 C140.624975,90.8080696 150.859926,101.042565 150.859926,113.667995 C150.859926,126.292969 140.624975,136.527922 128.000001,136.527922 C115.375026,136.527922 105.140075,126.292969 105.140075,113.667995 C105.140075,101.042565 115.375026,90.8080696 128.000001,90.8080696 Z" fill="#00D8FF"/></svg>,
vue: <svg width="14" height="14" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4L16 28L30 4H24.5L16 18.5L7.5 4H2Z" fill="#41B883"/><path d="M7.5 4L16 18.5L24.5 4H19.5L16.0653 10.0126L12.5 4H7.5Z" fill="#35495E"/></svg>,
svelte: <svg width="14" height="14" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M26.47,5.7A8.973,8.973,0,0,0,14.677,3.246L7.96,7.4a7.461,7.461,0,0,0-3.481,5.009,7.686,7.686,0,0,0,.8,5.058,7.358,7.358,0,0,0-1.151,2.8,7.789,7.789,0,0,0,1.4,6.028,8.977,8.977,0,0,0,11.794,2.458L24.04,24.6a7.468,7.468,0,0,0,3.481-5.009,7.673,7.673,0,0,0-.8-5.062,7.348,7.348,0,0,0,1.152-2.8A7.785,7.785,0,0,0,26.47,5.7" fill="#ff3e00"/><path d="M14.022,26.64A5.413,5.413,0,0,1,8.3,24.581a4.678,4.678,0,0,1-.848-3.625,4.307,4.307,0,0,1,.159-.61l.127-.375.344.238a8.76,8.76,0,0,0,2.628,1.274l.245.073-.025.237a1.441,1.441,0,0,0,.271.968,1.63,1.63,0,0,0,1.743.636,1.512,1.512,0,0,0,.411-.175l6.7-4.154a1.366,1.366,0,0,0,.633-.909,1.407,1.407,0,0,0-.244-1.091,1.634,1.634,0,0,0-1.726-.622,1.509,1.509,0,0,0-.413.176l-2.572,1.584a4.934,4.934,0,0,1-1.364.582,5.415,5.415,0,0,1-5.727-2.06A4.678,4.678,0,0,1,7.811,13.1,4.507,4.507,0,0,1,9.9,10.09l6.708-4.154a4.932,4.932,0,0,1,1.364-.581A5.413,5.413,0,0,1,23.7,7.414a4.679,4.679,0,0,1,.848,3.625,4.272,4.272,0,0,1-.159.61l-.127.375-.344-.237a8.713,8.713,0,0,0-2.628-1.274l-.245-.074.025-.237a1.438,1.438,0,0,0-.272-.968,1.629,1.629,0,0,0-1.725-.622,1.484,1.484,0,0,0-.411.176l-6.722,4.14a1.353,1.353,0,0,0-.631.908,1.394,1.394,0,0,0,.244,1.092,1.634,1.634,0,0,0,1.726.621,1.538,1.538,0,0,0,.413-.175l2.562-1.585a4.9,4.9,0,0,1,1.364-.581,5.417,5.417,0,0,1,5.728,2.059,4.681,4.681,0,0,1,.843,3.625A4.5,4.5,0,0,1,22.1,21.905l-6.707,4.154a4.9,4.9,0,0,1-1.364.581" fill="#fff"/></svg>,
angular: <svg width="14" height="14" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a-clip)"><mask id="a-mask" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="14" y="0" width="484" height="512"><path d="M14 0h484v512H14V0z" fill="#fff"/></mask><g mask="url(#a-mask)"><path d="M496 86l-18 272L312 0l184 86zM380 438l-124 72-126-72 24-62h202l24 62zM256 136l64 160H190l66-160zM32 358L14 86 198 0 32 358z" fill="url(#a-grad1)"/><path d="M496 86l-18 272L312 0l184 86zM380 438l-124 72-126-72 24-62h202l24 62zM256 136l64 160H190l66-160zM32 358L14 86 198 0 32 358z" fill="url(#a-grad2)"/></g></g><defs><linearGradient id="a-grad1" x1="120.4" y1="463.8" x2="504" y2="281.4" gradientUnits="userSpaceOnUse"><stop stop-color="#E40035"/><stop offset=".2" stop-color="#F60A48"/><stop offset=".4" stop-color="#F20755"/><stop offset=".5" stop-color="#DC087D"/><stop offset=".7" stop-color="#9717E7"/><stop offset="1" stop-color="#6C00F5"/></linearGradient><linearGradient id="a-grad2" x1="103" y1="61.4" x2="354" y2="348" gradientUnits="userSpaceOnUse"><stop stop-color="#FF31D9"/><stop offset="1" stop-color="#FF5BE1" stop-opacity="0"/></linearGradient><clipPath id="a-clip"><path fill="#fff" transform="translate(14)" d="M0 0h484v512H0z"/></clipPath></defs></svg>
};
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 = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
var VIEW_CODE_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>;
var CHEVRON_DOWN_SVG = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>;
var TRACE_ICON_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>;
var TRACE_SPINNER_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="animate-spin"><circle cx="12" cy="12" r="10" opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg>;
var EXTERNAL_LINK_SVG = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>;
var DOWNLOAD_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>;
var EXPAND_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>;
var CLOSE_SVG = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
var LANG_TS_SVG = <svg fill="none" height="18" viewBox="0 0 512 512" width="18" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/></svg>;
var LANG_PYTHON_SVG = <svg version="1.1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0.21 -0.077 110 110" enable-background="new 0.21 -0.077 110 110" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="63.8159" y1="56.6829" x2="118.4934" y2="1.8225" gradientTransform="matrix(1 0 0 -1 -53.2974 66.4321)"> <stop offset="0" style="stop-color:#387EB8"/> <stop offset="1" style="stop-color:#366994"/></linearGradient><path fill="url(#SVGID_1_)" d="M55.023-0.077c-25.971,0-26.25,10.081-26.25,12.156c0,3.148,0,12.594,0,12.594h26.75v3.781 c0,0-27.852,0-37.375,0c-7.949,0-17.938,4.833-17.938,26.25c0,19.673,7.792,27.281,15.656,27.281c2.335,0,9.344,0,9.344,0 s0-9.765,0-13.125c0-5.491,2.721-15.656,15.406-15.656c15.91,0,19.971,0,26.531,0c3.902,0,14.906-1.696,14.906-14.406 c0-13.452,0-17.89,0-24.219C82.054,11.426,81.515-0.077,55.023-0.077z M40.273,8.392c2.662,0,4.813,2.15,4.813,4.813 c0,2.661-2.151,4.813-4.813,4.813s-4.813-2.151-4.813-4.813C35.46,10.542,37.611,8.392,40.273,8.392z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="97.0444" y1="21.6321" x2="155.6665" y2="-34.5308" gradientTransform="matrix(1 0 0 -1 -53.2974 66.4321)"> <stop offset="0" style="stop-color:#FFE052"/> <stop offset="1" style="stop-color:#FFC331"/></linearGradient><path fill="url(#SVGID_2_)" d="M55.397,109.923c25.959,0,26.282-10.271,26.282-12.156c0-3.148,0-12.594,0-12.594H54.897v-3.781 c0,0,28.032,0,37.375,0c8.009,0,17.938-4.954,17.938-26.25c0-23.322-10.538-27.281-15.656-27.281c-2.336,0-9.344,0-9.344,0 s0,10.216,0,13.125c0,5.491-2.631,15.656-15.406,15.656c-15.91,0-19.476,0-26.532,0c-3.892,0-14.906,1.896-14.906,14.406 c0,14.475,0,18.265,0,24.219C28.366,100.497,31.562,109.923,55.397,109.923z M70.148,101.454c-2.662,0-4.813-2.151-4.813-4.813 s2.15-4.813,4.813-4.813c2.661,0,4.813,2.151,4.813,4.813S72.809,101.454,70.148,101.454z"/></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 = <span>${SDK_LOGOS[value]}</span>${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 &&
<button type="button" aria-label="Preview" onClick={() => switchView("preview")}>
<span dangerouslySetInnerHTML={{
__html: VIEW_EYE_SVG }} /> Preview <button type=“button” aria-label=“Code” onClick={() => switchView(“code”)}> <span dangerouslySetInnerHTML={{ __html: VIEW_CODE_SVG }} /> Code {(traceUrl || traceLoading) && !useLocalPreview && { if (!traceUrl) e.preventDefault(); else cachedRef.current?.host.trackEvent(“trace_tab_clicked”, { pattern }); }} aria-disabled={!traceUrl}> <span dangerouslySetInnerHTML={{ __html: traceUrl ? TRACE_ICON_SVG : TRACE_SPINNER_SVG }} /> Trace {traceUrl && <span className=“ml-0.5” dangerouslySetInnerHTML={{ __html: EXTERNAL_LINK_SVG }} />} }
{activeView === “code” && <button type=“button” aria-label=“TypeScript” onClick={() => setAgentLang(“js”)} title=“TypeScript / JavaScript”> <span dangerouslySetInnerHTML={{ __html: LANG_TS_SVG }} /> <button type=“button” aria-label=“Python” onClick={() => setAgentLang(“python”)} title=“Python”> <span dangerouslySetInnerHTML={{ __html: LANG_PYTHON_SVG }} /> }
<button type="button" aria-label={expanded ? "Collapse" : "Expand"} onClick={() => setExpanded(v => !v)} className="lc-expand-btn" title={expanded ? "Collapse" : "Expand"}>
<span dangerouslySetInnerHTML={{
__html: expanded ? CLOSE_SVG : EXPAND_SVG }} />
{}
<button type="button" aria-label="Download project" title="Download project to run locally" onClick={() => {
const base = normalizeAgentServerBase(agentServer, useLocalPreview);
const params = new URLSearchParams({
sdk,
lang: agentLang
});
const url = ${base}/download/${encodeURIComponent(pattern)}?${params};
const a = document.createElement(“a”);
a.href = url;
a.download = ${pattern}.zip;
document.body.appendChild(a);
a.click();
a.remove();
cachedRef.current?.host.trackEvent(“download_clicked”, {
pattern,
sdk,
lang: agentLang
});
}} className=“lc-expand-btn”>
<span dangerouslySetInnerHTML={{
__html: DOWNLOAD_SVG
}} />
{}
<button ref={sdkButtonRef} type="button" onClick={() => setSdkDropdownOpen(o => !o)} className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border lc-sdk-btn font-medium cursor-pointer transition-colors">
<span dangerouslySetInnerHTML={{
__html: SDK_LOGOS[sdk] }} /> {SDK_LABELS[sdk]} <span dangerouslySetInnerHTML={{ __html: CHEVRON_DOWN_SVG }} />
; const slot = {!ready && !error &&
}
{error && Preview Error
{error}
} ; return{toolbar}
{slot}
; };
Coding agents need more than a chat window. They need a file browser, a code viewer, and a diff panel, an IDE experience. This pattern connects a deep agent to a sandbox so it can read, write, and execute code in an isolated environment, then exposes the sandbox filesystem through a custom API server so the frontend can display files in real time as the agent works.
Architecture#
The sandbox pattern has three layers:
Deep agent with sandbox backend: The agent gets filesystem tools (
read_file,write_file,edit_file,execute) automatically from the sandboxCustom API server — A FastAPI app exposed via
langgraph.json’shttp.appfield, providing file browsing endpoints the frontend can callIDE frontend: A three-panel layout (file tree, code/diff viewer, chat) that syncs files in real time as the agent makes changes
%%{
init: {
"fontFamily": "monospace",
"flowchart": {
"curve": "curve"
}
}
}%%
graph LR
UI["IDE Frontend"]
API["API Server"]
AGENT["createDeepAgent()"]
SANDBOX["Sandbox"]
UI --"useStream()"--> AGENT
UI --"/api/sandbox/:threadId/*"--> API
AGENT --"read/write/execute"--> SANDBOX
API --"ls / read"--> SANDBOX
classDef blueHighlight fill:#DBEAFE,stroke:#2563EB,color:#1E3A8A;
classDef greenHighlight fill:#DCFCE7,stroke:#16A34A,color:#14532D;
classDef purpleHighlight fill:#EDE9FE,stroke:#7C3AED,color:#4C1D95;
classDef orangeHighlight fill:#FEF3C7,stroke:#D97706,color:#92400E;
class UI blueHighlight;
class AGENT greenHighlight;
class SANDBOX purpleHighlight;
class API orangeHighlight;Sandbox lifecycle#
Before diving into the code, it’s important to understand how sandboxes are scoped. The scoping strategy determines who shares a sandbox, how long it lives, and how it’s resolved at runtime.
Thread-scoped sandbox (recommended)#
Each LangGraph thread gets its own sandbox. The sandbox ID is stored in the
thread’s metadata and resolved via the backend factory’s runtime.configurable.thread_id.
This is the recommended approach for most applications:
- Conversations are isolated — file changes in one thread don’t affect another
- Sandbox state persists across page reloads (same thread = same sandbox)
- Cleanup is straightforward: when a thread is deleted, its sandbox can be too
sequenceDiagram
participant FE as Frontend
participant LG as LangGraph API
participant HTTP as API Server
participant SB as Sandbox
Note over FE: Page loads
FE->>LG: POST /threads
LG-->>FE: threadId
FE->>HTTP: GET /api/sandbox/:threadId/tree
HTTP->>LG: threads.get(threadId) → metadata.sandbox_id
alt No sandbox yet
HTTP->>SB: LangSmithSandbox.create()
HTTP->>LG: threads.update(threadId, metadata.sandbox_id)
else Existing sandbox
HTTP->>SB: connect(sandbox_id)
end
HTTP-->>FE: file tree
Note over FE: User sends message
FE->>LG: POST /threads/:threadId/runs/stream
LG->>LG: backend factory reads thread_id from runtime
LG->>SB: connect to same sandboxAgent-scoped sandbox#
All threads under the same assistant share a single sandbox. Useful for persistent project environments where you want changes to carry across conversations:
def sandbox_backend_factory(runtime):
assistant_id = runtime.config.get("configurable", {}).get("assistant_id")
return get_or_create_sandbox_for_assistant(assistant_id)User-scoped sandbox#
Each user gets their own sandbox across all threads. Requires custom authentication and user identification:
def sandbox_backend_factory(runtime):
user_id = runtime.config.get("configurable", {}).get("user_id")
return get_or_create_sandbox_for_user(user_id)Session-scoped sandbox (client-side)#
For simpler apps without LangGraph threads, the frontend can generate a session ID and pass it directly. This approach doesn’t persist across browser sessions and is best for demos or prototyping:
import uuid
import urllib.parse
import urllib.request
session_id = str(uuid.uuid4())
query = urllib.parse.urlencode({"sessionId": session_id})
urllib.request.urlopen(f"http://localhost:2024/api/sandbox/tree?{query}")The rest of this guide uses thread-scoped sandboxes as the primary example.
Setting up the agent#
Choose a sandbox provider#
Deep Agents supports multiple sandbox providers. Any provider that implements the SandboxBackendProtocol works:
from deepagents import create_deep_agent
from deepagents.sandbox import LangSmithSandbox # or DaytonaSandbox, etc.
sandbox = LangSmithSandbox.create()
agent = create_deep_agent(model="anthropic:claude-sonnet-4-5", backend=sandbox)The agent automatically gets filesystem tools (read_file, write_file,
edit_file, ls, glob, grep) and an execute tool for running shell
commands. No tool configuration needed.
Use a backend factory for thread-scoped sandboxes#
Instead of creating a sandbox at module level (which would be shared across all threads and may expire), use a backend factory that resolves the
:
sandbox per-thread at runtime. The factory receives a BackendRuntime object
with configurable.thread_id from the current LangGraph run:
from deepagents import create_deep_agent
from deepagents.sandbox import LangSmithSandbox
def sandbox_backend_factory(runtime):
thread_id = runtime.config.get("configurable", {}).get("thread_id")
if not thread_id:
raise ValueError("No thread_id — agent must run on a thread")
return get_or_create_sandbox_for_thread(thread_id)
agent = create_deep_agent(
model="anthropic:claude-sonnet-4-5",
backend=sandbox_backend_factory,
)Seed the sandbox#
Before the agent runs, populate the sandbox with your project files using
uploadFiles:
For LangSmith sandboxes, the container image and resource limits come from a
sandbox template. Pass templateName when creating
the sandbox (see get_or_create_sandbox_for_thread above). upload_files seeds or updates
project files at runtime on top of that image.
const SEED_FILES: Record<string, string> = {
"package.json": JSON.stringify({ name: "my-app", version: "1.0.0" }, null, 2),
"src/index.js": 'console.log("Hello");',
};
const encoder = new TextEncoder();
await sandbox.uploadFiles(
Object.entries(SEED_FILES).map(([path, content]) => [`/app/${path}`, encoder.encode(content)]),
);
Run sandbox.execute("cd /app && npm install") after uploading package.json to install
dependencies before the agent starts.
Adding the file browsing API#
The agent can read and write files, but the frontend also needs direct access to
browse the sandbox filesystem. Add a custom FastAPI API server
and expose it through the http.app field in langgraph.json.
Create the API server#
The sandbox API endpoints use the thread ID as a URL path parameter. This
ensures the frontend always accesses the correct sandbox for the current
conversation, using the same get_or_create_sandbox_for_thread function as the
agent’s backend factory:
# src/api/server.py
from fastapi import FastAPI, Query, Path
from utils import get_or_create_sandbox_for_thread
app = FastAPI()
@app.get("/api/sandbox/{thread_id}/tree")
async def list_tree(
thread_id: str = Path(...),
path: str = Query("/app"),
):
sandbox = await get_or_create_sandbox_for_thread(thread_id)
result = await sandbox.aexecute(
f"find {path} -printf '%y\\t%s\\t%p\\n' 2>/dev/null | sort"
)
entries = []
for line in result.output.strip().split("\n"):
if not line:
continue
type_char, size_str, full_path = line.split("\t")
entries.append({
"name": full_path.split("/")[-1],
"type": "directory" if type_char == "d" else "file",
"path": full_path,
"size": int(size_str),
})
return {"path": path, "entries": entries, "sandbox_id": sandbox.id}
@app.get("/api/sandbox/{thread_id}/file")
async def read_file(
thread_id: str = Path(...),
path: str = Query(...),
):
sandbox = await get_or_create_sandbox_for_thread(thread_id)
results = await sandbox.adownload_files([path])
return {"path": path, "content": results[0].content.decode()}
Both the agent’s backend factory and the API server call the same
get_or_create_sandbox_for_thread function. This ensures they always resolve
to the same sandbox for a given thread. The sandbox ID in thread metadata is the single source of truth — no in-memory caches needed.
Configure langgraph.json#
Register both the agent graph and the API server. The http.app field tells
the LangGraph platform to serve your custom routes alongside the default ones:
{
"graphs": {
"coding_agent": "./src/agents/my_agent.py:agent"
},
"env": ".env",
"http": {
"app": "./src/api/server.py:app"
}
}Your custom routes are available at the same host as the LangGraph API. For
local development with langgraph dev, that’s http://localhost:2024.
Custom routes defined in http.app take priority over default LangGraph routes. This means you
can shadow built-in endpoints if needed, but be careful not to accidentally override routes like
/threads or /runs.
Building the frontend#
The frontend has three panels: a file tree sidebar, a code/diff viewer, and a
chat panel. It uses useStream for the agent conversation and the custom API
endpoints for file browsing.
Thread creation#
Create a LangGraph thread when the page loads and persist its ID in
sessionStorage so page reloads reconnect to the same sandbox:
const THREAD_KEY = "sandbox-thread-id";
function IDEPreview() {
const [threadId, setThreadId] = useState<string | null>(
() => sessionStorage.getItem(THREAD_KEY),
);
const updateThreadId = useCallback((id: string | null) => {
setThreadId(id);
if (id) sessionStorage.setItem(THREAD_KEY, id);
else sessionStorage.removeItem(THREAD_KEY);
}, []);
const stream = useStream<typeof myAgent>({
apiUrl: AGENT_URL,
assistantId: "coding_agent",
threadId,
onThreadId: updateThreadId,
});
// Create thread on first mount
useEffect(() => {
if (threadId) return;
stream.client.threads.create().then((t) => updateThreadId(t.thread_id));
}, [stream.client, threadId, updateThreadId]);
// Pass threadId to sandbox file hooks
const { tree, files } = useSandboxFiles(threadId);
// ...
}The “new thread” button clears the stored ID so the next mount creates a fresh thread (and sandbox):
function handleNewThread() {
stream.switchThread(null);
updateThreadId(null);
}File state management#
Track two snapshots of the sandbox filesystem: the original state (before the agent runs) and the current state (updated in real time). The thread ID is included in the API URL so requests always hit the correct sandbox:
const AGENT_URL = "http://localhost:2024";
async function fetchTree(threadId: string): Promise<FileEntry[]> {
const res = await fetch(
`${AGENT_URL}/api/sandbox/${encodeURIComponent(threadId)}/tree?filePath=/app`,
);
const data = await res.json();
return data.entries.filter((e: FileEntry) => !e.path.includes("node_modules"));
}
async function fetchFile(threadId: string, path: string): Promise<string | null> {
const res = await fetch(
`${AGENT_URL}/api/sandbox/${encodeURIComponent(threadId)}/file?filePath=${encodeURIComponent(path)}`,
);
const data = await res.json();
return data.content ?? null;
}Real-time file sync#
The key to the IDE experience is updating files as the agent works, not
after it finishes. Watch the stream’s messages for ToolMessage instances
from file-mutating tools. When a write_file or edit_file tool call
completes, refresh that specific file. When execute completes, refresh
everything (since a shell command could modify any file):
import { useStream } from "@langchain/react";
import { ToolMessage, AIMessage } from "langchain";
const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
export function IDEPreview() {
const stream = useStream<typeof myAgent>({
apiUrl: AGENT_URL,
assistantId: "coding_agent",
});
const processedIds = useRef(new Set<string>());
useEffect(() => {
// Build a map of file-mutating tool calls from AI messages
const toolCallMap = new Map();
for (const msg of stream.messages) {
if (!AIMessage.isInstance(msg)) continue;
for (const tc of msg.tool_calls ?? []) {
if (tc.id && FILE_MUTATING_TOOLS.has(tc.name)) {
toolCallMap.set(tc.id, { name: tc.name, args: tc.args });
}
}
}
// When a ToolMessage appears for a file-mutating tool, refresh
for (const msg of stream.messages) {
if (!ToolMessage.isInstance(msg)) continue;
const id = msg.id ?? msg.tool_call_id;
if (!id || processedIds.current.has(id)) continue;
const call = toolCallMap.get(msg.tool_call_id);
if (!call) continue;
processedIds.current.add(id);
if (call.name === "write_file" || call.name === "edit_file") {
refreshSingleFile(call.args.path);
} else if (call.name === "execute") {
refreshAllFiles();
}
}
}, [stream.messages]);
}import { Component, effect } from "@angular/core";
import { useStream } from "@langchain/angular";
import { ToolMessage, AIMessage } from "langchain";
const FILE_MUTATING_TOOLS = new Set(["write_file", "edit_file", "execute"]);
@Component({
selector: "app-ide-preview",
template: `<!-- ... -->`,
})
export class IdePreviewComponent {
stream = useStream<typeof myAgent>({
apiUrl: AGENT_URL,
assistantId: "coding_agent",
});
private processedIds = new Set<string>();
constructor() {
effect(() => {
const messages = this.stream.messages();
const toolCallMap = new Map();
for (const msg of messages) {
if (AIMessage.isInstance(msg)) {
for (const tc of (msg as AIMessage).tool_calls ?? []) {
if (tc.id && FILE_MUTATING_TOOLS.has(tc.name)) {
toolCallMap.set(tc.id, { name: tc.name, args: tc.args });
}
}
}
}
for (const msg of messages) {
if (!ToolMessage.isInstance(msg)) continue;
const id = (msg as ToolMessage).id ?? (msg as ToolMessage).tool_call_id;
if (!id || this.processedIds.has(id)) continue;
const call = toolCallMap.get((msg as ToolMessage).tool_call_id);
if (!call) continue;
this.processedIds.add(id);
if (call.name === "write_file" || call.name === "edit_file") {
this.refreshSingleFile(call.args.path);
} else if (call.name === "execute") {
this.refreshAllFiles();
}
}
});
}
}Detecting changed files#
Before each agent run, snapshot the current file contents. After files refresh, compare against the snapshot to identify which files changed:
function detectChanges(current: FileSnapshot, original: FileSnapshot): Set<string> {
const changed = new Set<string>();
for (const [path, content] of Object.entries(current)) {
if (original[path] !== content) changed.add(path);
}
for (const path of Object.keys(original)) {
if (!(path in current)) changed.add(path);
}
return changed;
}When a user selects a changed file, default to the diff view so they immediately see what the agent modified.
Displaying diffs#
Use a framework-appropriate diff library to render unified diffs:
| Framework | Library | Component |
|---|---|---|
| React | @pierre/diffs | <FileDiff> with parseDiffFromFile |
| Vue | @git-diff-view/vue | <DiffView> with generateDiffFile from @git-diff-view/file |
| Svelte | @git-diff-view/svelte | <DiffView> with generateDiffFile from @git-diff-view/file |
| Angular | ngx-diff | <ngx-unified-diff> with [before] and [after] |
Example with @pierre/diffs (React):
function DiffPanel({ original, current, fileName }) {
const diff = parseDiffFromFile(
{ name: fileName, contents: original },
{ name: fileName, contents: current },
);
return (
<FileDiff
fileDiff={diff}
options={{ theme: "github-dark", diffStyle: "unified", diffIndicators: "bars" }}
/>
);
}Changed files summary#
Show a summary of all modified files with line-level addition/deletion counts.
This gives users a quick overview of the agent’s impact — similar to a git status:
function ChangedFilesSummary({ changedFiles, files, originalFiles, onSelect }) {
const stats = [...changedFiles].map((path) => {
const oldLines = (originalFiles[path] ?? "").split("\n");
const newLines = (files[path] ?? "").split("\n");
// Compute additions/deletions by comparing lines
return { path, additions, deletions };
});
return (
<h3>{stats.length} Files Changed</h3>
{stats.map((file) => (
<button key={file.path} onClick={() => onSelect(file.path)}>
{file.path}
<span className="text-green-400">+{file.additions}</span>
<span className="text-red-400">-{file.deletions}</span>
</button>
))}
);
}The three-panel layout#
The IDE layout arranges three panels side by side:
| Panel | Width | Purpose |
|---|---|---|
| File tree | Fixed (208px) | Browse sandbox files, see change indicators |
| Code / Diff | Flexible | View file content or unified diff |
| Chat | Fixed (320px) | Interact with the agent |
<FileTree />
<ChangedFilesSummary />
<CodePanel /* flex-1 */ />
<ChatPanel />
The file tree shows VS Code-style icons (using
@iconify-json/vscode-icons)
and amber dots on modified files. Selecting a modified file automatically
switches to the diff tab.
Use cases#
A sandbox is the right choice when:
- Coding agents that create, modify, and run code need a visual interface beyond chat
- Code review workflows where the agent suggests changes and the user reviews diffs before accepting
- Tutorial or learning apps where an AI assistant helps users build a project step by step, showing changes in context
- Prototyping tools where users describe features in natural language and watch the agent implement them in real time
Best practices#
- Use thread-scoped sandboxes for production apps. Store the sandbox ID in
thread metadata and resolve it via the backend factory’s
runtime.configurable.thread_id. This avoids module-level state and keeps sandboxes isolated per conversation. - Share
getOrCreateSandboxForThreadbetween the agent backend factory and the API server. Both should resolve the sandbox the same way — via thread metadata — so there’s a single source of truth with no in-memory caches. - Persist
threadIdinsessionStorageso page reloads reconnect to the same thread and sandbox instead of creating new ones. - Sync files on every relevant tool call, not just when the run finishes. This
makes the IDE feel live. Watch for
write_file,edit_file, andexecutetool messages and refresh immediately. - Default to diff view for changed files. When a user clicks a file that was modified by the agent, show the diff first — that’s what they care about.
- Show compact tool results for read-only operations. Instead of dumping
the full output of
read_filein the chat, show a one-liner likeRead router.js L1-42. Reserve the full output display for mutating tools. - Seed the sandbox with a real project. Starting from an empty sandbox is disorienting. Upload a working starter project so users (and the agent) have context immediately.
- Filter
node_modulesfrom the file tree. Nobody wants to browse thousands of dependency files. Filter them out when fetching the tree.
Edit this page on GitHub or file an issue.
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.