https://showcase-claude-sdk-typescript-production.up.railway.app/demos/hitl-in-app

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/d6ee38b07b61a41b.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/23b5713e6b6360df.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-0b8617e9074abd8b.js"/>

1<script src="/_next/static/chunks/4bd1b696-182b6b13bdad92e3.js" async=""></script>

1<script src="/_next/static/chunks/1255-f5c4f3c719acc9db.js" async=""></script>

1<script src="/_next/static/chunks/main-app-f3336e172256d2ab.js" async=""></script>

1<script src="/_next/static/chunks/d3ac728e-c168d39ae19d599f.js" async=""></script>

1<script src="/_next/static/chunks/6574c8a1-1bb482fd399ed96a.js" async=""></script>

1<script src="/_next/static/chunks/3287155c-c589d1f003914e15.js" async=""></script>

1<script src="/_next/static/chunks/9146-dad544cd93e66efd.js" async=""></script>

1<script src="/_next/static/chunks/app/demos/hitl-in-app/page-c9a26045e8c935c8.js" async=""></script>

1<title>Claude Agent SDK (TypeScript)</title>

1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>

1</head><body><div hidden=""><!--$--><!--/$--></div>

1<script>console.log('[showcase] Demo loaded:', window.location.href);
2console.log('[showcase] In iframe:', window.self !== window.top);
3window.addEventListener('error', function(e) {
4  console.error('[showcase] Uncaught error:', e.message, e.filename, e.lineno);
5});
6window.addEventListener('unhandledrejection', function(e) {
7  console.error('[showcase] Unhandled rejection:', e.reason);
8});</script>

8<div class="h-screen bg-gray-50"><div class="flex h-full flex-col overflow-hidden"><header class="border-b border-gray-200 bg-white px-6 py-4"><div class="text-xs font-medium uppercase tracking-wide text-gray-500">Support Inbox</div><h1 class="text-xl font-semibold text-gray-900">Open tickets</h1><p class="mt-1 text-sm text-gray-600">Ask the copilot to take an action. Every customer-affecting action will pop up an approval dialog here in the app — outside the chat.</p></header><div class="flex-1 overflow-y-auto p-6"><ul class="space-y-3"><li data-testid="ticket-12345" class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="font-mono text-xs text-gray-500">#12345</span><span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">Open</span></div><div class="mt-2 text-sm font-semibold text-gray-900">Jordan Rivera</div><div class="text-sm text-gray-700">Refund request — duplicate charge</div><div class="mt-2 text-xs text-gray-500">Disputed amount: $<!-- -->50.00</div></li><li data-testid="ticket-12346" class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="font-mono text-xs text-gray-500">#12346</span><span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">Open</span></div><div class="mt-2 text-sm font-semibold text-gray-900">Priya Shah</div><div class="text-sm text-gray-700">Downgrade plan to Starter</div></li><li data-testid="ticket-12347" class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="font-mono text-xs text-gray-500">#12347</span><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">Escalating</span></div><div class="mt-2 text-sm font-semibold text-gray-900">Morgan Lee</div><div class="text-sm text-gray-700">Escalate: payment stuck in pending</div></li></ul></div></div><div style="display:contents"><button type="button" data-copilotkit="true" data-testid="copilot-chat-toggle" data-slot="chat-toggle-button" data-state="open" class="copilotKitButton cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out cpk:

8hover:scale-[1.04] cpk:hover:shadow-md cpk:cursor-pointer cpk:active:scale-[0.96] cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:pointer-events-none cpk:disabled:opacity-60" aria-label="Close chat" aria-pressed="true"><span aria-hidden="true" data-slot="chat-toggle-button-open-icon" class="cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform" style="transition:opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);opacity:0;transform:scale(0.75) rotate(90deg)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle cpk:h-6 cpk:w-6" aria-hidden="true" focusable="false"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span><span aria-hidden="true" data-slot="chat-toggle-button-close-icon" class="cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform" style="transition:opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);opacity:1;transform:scale(1) rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x cpk:h-6 cpk:w-6" aria-hidden="true" focusable="false"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></span></button><div data-copilotkit="true" class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"><div tabindex="-1" role="dialog" aria-label="CopilotKit Chat" data-testid="copilot-popup" data-copilot-popup="true" class="copilotKitPopup copilotKitWindow cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-opacity cpk:duration-200 cpk:ease-out cpk:md:transition-opacity cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0 cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)] cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)] cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40 cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" style="--copilot-popup-width:420px;--copilot-popup-height:560px;--copilot-popup-max-width:calc(100vw - 3rem);--copilot-popup-max-height:calc(100dvh - 7.5rem);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)"><header data-testid="copilot-modal-header" data-slot="copilot-modal-header" class="copilotKitHeader cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4 cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80"><div class="cpk:flex cpk:w-full cpk:items-center cpk:gap-2"><div class="cpk:flex cpk:flex-1 cpk:justify-start"><span aria-hidden="true"></span></div><div class="cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center"><div data-testid="copilot-header-title" class="cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground">CopilotKit Chat</div></div><div class="cpk:flex cpk:flex-1 cpk:justify-end"><button type="button" data-testid="copilot-close-button" class="cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x cpk:h-4 cpk:w-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div></header><div class="cpk:flex-1 cpk:overflow-hidden" data-popup-chat="true"><div data-copilotkit="true" data-testid="copilot-chat" data-copilot-running="false" class="copilotKitChat cpk:@container cpk:relative cpk:flex cpk:flex-col cpk:h-full cpk:min-h-0"><div class="cpk:h-full cpk:flex cpk:flex-col"><div class="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4">

8<h1 class="cpk:text-xl cpk:sm:text-2xl cpk:font-medium cpk:text-foreground cpk:text-center">How can I help you today?</h1></div><div><div class="cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4"></div><div class="cpk:w-full"><div data-copilotkit="true" class="cpk:pointer-events-none cpk:relative cpk:z-20" style="transition:transform 0.2s ease-out"><div class="cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&amp;]:px-8 cpk:[div[data-popup-chat]_&amp;]:px-4 cpk:pointer-events-auto"><div data-testid="copilot-chat-input" class="copilotKitInput cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center cpk:cursor-text cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size cpk:bg-white cpk:dark:bg-[#303030] cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]" data-layout="compact"><div class="cpk:grid cpk:w-full cpk:gap-x-3 cpk:gap-y-3 cpk:px-3 cpk:py-2 cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:items-center" data-layout="compact"><div class="cpk:flex cpk:items-center cpk:row-start-1 cpk:col-start-1"><button data-slot="button" class="cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:text-sm cpk:font-medium cpk:disabled:pointer-events-none cpk:[&amp;_svg]:pointer-events-none cpk:[&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 cpk:shrink-0 cpk:[&amp;_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive cpk:cursor-pointer cpk:bg-transparent cpk:text-[#444444] cpk:dark:text-white cpk:dark:border-[#404040] cpk:transition-colors cpk:focus:outline-none cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333] cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF] cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444] cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC] cpk:h-9 cpk:w-9 cpk:rounded-full cpk:ml-1" type="button" data-testid="copilot-add-menu-button" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus cpk:size-[20px]" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></button></div><div class="cpk:relative cpk:flex cpk:min-w-0 cpk:flex-col cpk:min-h-[50px] cpk:justify-center cpk:col-start-2 cpk:row-start-1"><textarea data-testid="copilot-chat-textarea" placeholder="Type a message" class="cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:font-regular cpk:text-[16px] cpk:placeholder:text-[#00000077] cpk:dark:placeholder:text-[#fffc] cpk:w-full cpk:py-3 cpk:pr-5" style="overflow:auto;resize:none" rows="1"></textarea></div><div class="cpk:flex cpk:items-center cpk:justify-end cpk:gap-2 cpk:col-start-3 cpk:row-start-1"><div class="cpk:mr-[10px]"><button data-slot="button" class="cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:text-sm cpk:font-medium cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&amp;_svg]:pointer-events-none cpk:[&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 cpk:shrink-0 cpk:[&amp;_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive cpk:cursor-pointer cpk:bg-black cpk:text-white cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white cpk:transition-colors cpk:focus:outline-none cpk:hover:opacity-70 cpk:disabled:hover:opacity-100 cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)] cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white cpk:h-9 cpk:w-9 cpk:rounded-full" type="button" data-testid="copilot-send-button" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up cpk:size-[18px]" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></div></div></div><div class="cpk:text-center cpk:text-xs cpk:text-muted-foreground cpk:py-3 cpk:px-4 cpk:max-w-3xl cpk:mx-auto">AI can make mistakes. Please verify important information.</div></div></div></div></div></div></div></div></div></div></div><!--$--><!--/$-->

8<script src="/_next/static/chunks/webpack-0b8617e9074abd8b.js" id="_R_" async=""></script>

8<script>(self.__next_f=self.__next_f||[]).push([0])</script>

8<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[98924,[],\"\"]\n4:I[81959,[],\"ClientPageRoot\"]\n5:I[66864,[\"7330\",\"static/chunks/d3ac728e-c168d39ae19d599f.js\",\"1398\",\"static/chunks/6574c8a1-1bb482fd399ed96a.js\",\"5001\",\"static/chunks/3287155c-c589d1f003914e15.js\",\"9146\",\"static/chunks/9146-dad544cd93e66efd.js\",\"8761\",\"static/chunks/app/demos/hitl-in-app/page-c9a26045e8c935c8.js\"],\"default\"]\n6:I[24431,[],\"OutletBoundary\"]\n8:I[15278,[],\"AsyncMetadataOutlet\"]\na:I[24431,[],\"ViewportBoundary\"]\nc:I[24431,[],\"MetadataBoundary\"]\nd:\"$Sreact.suspense\"\nf:I[57150,[],\"\"]\n:HL[\"/_next/static/css/d6ee38b07b61a41b.css\",\"style\"]\n:HL[\"/_next/static/css/23b5713e6b6360df.css\",\"style\"]\n"])</script>

8<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"yJQN-4e_BNbt28_9uIfWv\",\"p\":\"\",\"c\":[\"\",\"demos\",\"hitl-in-app\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"demos\",{\"children\":[\"hitl-in-app\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d6ee38b07b61a41b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/23b5713e6b6360df.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"console.log('[showcase] Demo loaded:', window.location.href);\\nconsole.log('[showcase] In iframe:', window.self !== window.top);\\nwindow.addEventListener('error', function(e) {\\n  console.error('[showcase] Uncaught error:', e.message, e.filename, e.lineno);\\n});\\nwindow.addEventListener('unhandledrejection', function(e) {\\n  console.error('[showcase] Unhandled rejection:', e.reason);\\n});\"}}],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}],{\"children\":[\"demos\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"hitl-in-app\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L4\",null,{\"Component\":\"$5\",\"searchParams\":{},\"params\":{}}],null,[\"$\",\"$L6\",null,{\"children\":[\"$L7\",[\"$\",\"$L8\",null,{\"promise\":\"$@9\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],null],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$d\",null,{\"fallback\":null,\"children\":\"$Le\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"s\":false,\"S\":false}\n"])</script>

8<script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n7:null\n9:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Claude Agent SDK (TypeScript)\"}]],\"error\":null,\"digest\":\"$undefined\"}\ne:\"$9:metadata\"\n"])</script>

8</body></html>