https://showcase-google-adk-production.up.railway.app/demos/tool-rendering

1<!DOCTYPE html><!--3ODEJyQox9g6UwoKEWVbw--><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/d5d3dc0d291fabd2.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-338ec4f6b1ae25e3.js"/>

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

1<script src="/_next/static/chunks/1255-7cc4270733dcc56b.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-7cc681c4228dc8a8.js" async=""></script>

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

1<script src="/_next/static/chunks/859-c32dbb5f9edbf571.js" async=""></script>

1<script src="/_next/static/chunks/app/demos/tool-rendering/page-b0233196f4f8e22a.js" async=""></script>

1<title>CopilotKit Showcase</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="flex justify-center items-center h-screen w-full"><div class="h-full w-full max-w-4xl"><div style="display:contents"><div data-copilotkit="true" data-testid="copilot-chat" data-copilot-running="false" class="copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col h-full rounded-2xl"><div data-testid="copilot-welcome-screen" class="cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4"><div class="cpk:w-full cpk:max-w-3xl cpk:flex cpk:flex-col cpk:items-center"><div class="cpk:mb-6"><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 class="cpk:w-full"><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" t

8ype="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 class="cpk:mt-4 cpk:flex cpk:justify-center"></div></div></div></div></div></div></div><!--$--><!--/$-->

8<script src="/_next/static/chunks/webpack-338ec4f6b1ae25e3.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[77316,[\"7330\",\"static/chunks/d3ac728e-c168d39ae19d599f.js\",\"1398\",\"static/chunks/6574c8a1-7cc681c4228dc8a8.js\",\"5001\",\"static/chunks/3287155c-c589d1f003914e15.js\",\"859\",\"static/chunks/859-c32dbb5f9edbf571.js\",\"4313\",\"static/chunks/app/demos/tool-rendering/page-b0233196f4f8e22a.js\"],\"default\"]\n8:I[24431,[],\"OutletBoundary\"]\na:I[15278,[],\"AsyncMetadataOutlet\"]\nc:I[24431,[],\"ViewportBoundary\"]\ne:I[24431,[],\"MetadataBoundary\"]\nf:\"$Sreact.suspense\"\n11:I[57150,[],\"\"]\n:HL[\"/_next/static/css/d6ee38b07b61a41b.css\",\"style\"]\n:HL[\"/_next/static/css/d5d3dc0d291fabd2.css\",\"style\"]\n"])</script>

8<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"3ODEJyQox9g6UwoKEWVbw\",\"p\":\"\",\"c\":[\"\",\"demos\",\"tool-rendering\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"demos\",{\"children\":[\"tool-rendering\",{\"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/d5d3dc0d291fabd2.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\":[\"tool-rendering\",[\"$\",\"$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\":{},\"promises\":[\"$@6\",\"$@7\"]}],null,[\"$\",\"$L8\",null,{\"children\":[\"$L9\",[\"$\",\"$La\",null,{\"promise\":\"$@b\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],null],[\"$\",\"$Le\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$f\",null,{\"fallback\":null,\"children\":\"$L10\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"s\":false,\"S\":true}\n"])</script>

8<script>self.__next_f.push([1,"6:{}\n7:\"$0:f:0:1:2:children:2:children:2:children:1:props:children:0:props:params\"\n"])</script>

8<script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n9:null\n"])</script>

8<script>self.__next_f.push([1,"b:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"CopilotKit Showcase\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>

8<script>self.__next_f.push([1,"10:\"$b:metadata\"\n"])</script>

8</body></html>