1(globalThis.webpackChunk_N_E=globalThis.webpackChunk_N_E||[]).push([[9526],{1579:(e,a,s)=>{"use strict";s.d(a,{default:()=>u});var t=s(87448),n=s(11041),i=s(73605),r=s(32562),o=s.n(r);let c="/images/homepage-redesign/analytics",l=[{label:"Completed",value:68,style:"completed"},{label:"Failed",value:12,style:"failed"},{label:"Handed off",value:11,style:"handedOff"},{label:"Abandoned",value:9,style:"abandoned"}];function d(e){let{name:a}=e;return(0,t.jsx)(i.default,{src:"".concat(c,"/").concat(a,".svg"),width:12,height:12,alt:""})}let p=(e,a)=>{let s=e.utils.selector(a);return e.timeline({paused:!0,defaults:{ease:"power2.out"}}).from(s("[data-chart-widget]"),{y:12,opacity:0,stagger:.12,duration:.65}).from(s("[data-chart-bar]"),{scaleX:0,transformOrigin:"left center",stagger:.08,duration:.9},.2).from(s("[data-chart-lines]"),{clipPath:"inset(0 100% 0 0)",duration:1.2},.35).from(s("[data-chart-donut]"),{opacity:0,scale:.85,transformOrigin:"center",duration:.8},.3)};function u(){let e=(0,n.y)(p);return(0,t.jsxs)("figure",{ref:e,className:o().dashboard,"aria-label":"Illustrative product analytics dashboard",children:[(0,t.jsx)("figcaption",{className:"sr-only",children:"Illustrative values, not live account data."}),(0,t.jsxs)("div",{className:o().dashboardContent,children:[(0,t.jsxs)("div",{className:o().topRow,children:[(0,t.jsxs)("div",{className:o().widget,"data-chart-widget":!0,children:[(0,t.jsxs)("div",{className:o().activitySummary,children:[(0,t.jsx)("p",{className:o().widgetTitle,children:"Agent activity"}),(0,t.jsx)("strong",{className:o().activityCount,children:"4,832"}),(0,t.jsx)("span",{className:o().increase,children:"â 12%"})]}),(0,t.jsx)("dl",{className:o().activityDetails,children:[{icon:"play",label:"Runs",value:"4,832"},{icon:"tools",label:"Tool calls",value:"18,672"},{icon:"clock",label:"Avg. response time",value:"2.4s"}].map(e=>{let{icon:a,label:s,value:n}=e;return(0,t.jsxs)("div",{children:[(0,t.jsxs)("dt",{children:[(0,t.jsx)(d,{name:a}),s]}),(0,t.jsx)("dd",{children:n})]},s)})})]}),(0,t.jsxs)("div",{className:"".concat(o().widget," ").concat(o().performance),"data-chart-widget":!0,children:[(0,t.jsx)("p",{className:o().widgetTitle,children:"Agents performance"}),(0,t.jsx)("div",{className:o().agentBars,children:[{name:"Customer Support",style:"support"},{name:"Research",style:"research"},{name:"Sales Assistant",style:"sales"},{name:"Onboarding",style:"onboarding"}].map(e=>{let{name:a,style:s}=e;return(0,t.jsxs)("div",{children:[(0,t.jsx)("span",{children:a}),(0,t.jsx)("i",{className:o()[s],"aria-hidden":"true","data-chart-bar":!0})]},a)})}),(0,t.jsxs)("span",{className:o().allAgents,children:["View all agents ",(0,t.jsx)(i.default,{src:"".concat(c,"/arrow.svg"),width:16,height:16,alt:""})]})]})]}),(0,t.jsxs)("div",{className:o().bottomRow,children:[(0,t.jsxs)("div",{className:o().widget,"data-chart-widget":!0,children:[(0,t.jsx)("p",{className:o().widgetTitle,children:"Outcomes"}),(0,t.jsxs)("div",{className:o().outcomeContent,children:[(0,t.jsxs)("div",{className:o().donut,"data-chart-donut":!0,children:[(0,t.jsx)("svg",{className:o().segments,viewBox:"0 0 124 124","aria-hidden":"true",children:l.map((e,a)=>{let{label:s,value:n,style:i}=e;return(0,t.jsx)("circle",{className:o()[i],cx:62,cy:62,r:60,pathLength:100,strokeDasharray:"".concat(n," ").concat(100-n),strokeDashoffset:-l.slice(0,a).reduce((e,a)=>e+a.value,0)},s)})}),(0,t.jsxs)("div",{className:o().donutLabel,children:[(0,t.jsxs)("strong",{children:[l[0].value,"%"]}),(0,t.jsx)("span",{children:"completed"})]})]}),(0,t.jsx)("dl",{className:o().outcomeLegend,children:l.map(e=>{let{label:a,value:s,style:n}=e;return(0,t.jsxs)("div",{children:[(0,t.jsxs)("dt",{children:[(0,t.jsx)("i",{className:o()[n],"aria-hidden":"true"}),a]}),(0,t.jsxs)("dd",{children:[s,"%"]})]},a)})})]})]}),(0,t.jsxs)("div",{className:o().widget,"data-chart-widget":!0,children:[(0,t.jsx)("p",{className:o().widgetTitle,children:"Performance over time"}),(0,t.jsxs)("div",{className:o().lineChart,"aria-hidden":"true","data-chart-lines":!0,children:[(0,t.jsx)(i.default,{className:o().responseLine,src:"".concat(c,"/line-response.svg"),width:190,height:96,alt:""}),(0,t.jsx)(i.default,{className:o().runsLine,src:"".concat(c,"/line-runs.svg"),width:191,height:73,alt:""})]}),(0,t.jsxs)("div",{className:o().lineLegend,children:[(0,t.jsxs)("span",{children:[(0,t.jsx)("i",{}),"Response time"]}),(0,t.jsxs)("span",{children:[(0,t.jsx)("i",{}),"Runs completed"]})]})]})]})]})]})}},3596:e=>{e.exports={layout:"ecosystem-section_layout__NgaZk",intro:"ecosystem-section_intro__ePSh4",badge:"ecosystem-section_badge__cLSZ9",title:"ecosystem-section_title__aopSF",grid:"ecosystem-section_grid__aUiwo",cell:"ecosystem-section_cell__p1WAO",logo:"ecosystem-section_logo___uMF5",wall:"ecosystem-section_wall__9qP5x",badgeShimmer:"ecosystem-section_badgeShimmer__dBItT"}},4087:e=>{e.exports={section:"testimonials_section__9qGs5",heading:"testimonials_heading__MX0Bk",cards:"testimonials_cards__76o5B",card:"testimonials_card__D7OpY",brand:"testimonials_brand__LMrvd",docusign:"testimonials_docusign__juZTC",evergreen:"testimonials_evergreen__ux3mZ",logo:"testimonials_logo__0HJYT",story:"testimonials_story__EKbCC",quote:"testimonials_quote__l5jo4",attribution:"testimonials_attribution__bhfHW",portrait:"testimonials_portrait__MroFF",author:"testimonials_author__y3tB7",company:"testimonials_company__9ZvMP"}},5077:(e,a,s)=>{"use strict";s.d(a,{default:()=>x});var t=s(87448),n=s(23796),i=s(42069),r=s(33829),o=s.n(r),c=s(73605),l=s(74423),d=s(31829),p=s(75562),u=s(37505),h=s(35586),v=s(32470),m=s(52127),g=s(32819),_=s.n(g);function f(e){return(8e3-e)/8e3}function b(e){return 8e3-e<250?1:f(e)}let y=[{id:"knowledge",icon:"book",title:"Company knowledge base",tagline:"Search, analyze and act on company knowledge.",blurb:"Connect the sources your company already trusts. Give every employee one agent that can answer with citations, analyze across systems, and prepare the next action.",demoLocation:"use-cases-knowledge",demoLabel:"Talk to an Engineer about the Company Knowledge Base template"},{id:"saas",icon:"code",title:"SaaS Agent",tagline:"Embedded in your product.",blurb:"Build an agent directly into your product. It understands live application state, takes actions through your frontend, and renders interfaces from your own components.",demoLocation:"use-cases-saas",demoLabel:"Talk to an Engineer about the SaaS Agent template"},{id:"messaging",icon:"message",title:"Slack, Teams, and text-messaging agents",tagline:"Work in channels your team already uses.",blurb:"Bring the same agent to Slack, Microsoft Teams, and messaging surfaces while keeping identity, context, tools, and thread state consistent.",demoLocation:"use-cases-messaging",demoLabel:"Talk to an Engineer about the Slack + Teams template"},{id:"support",icon:"like",title:"Customer support",tagline:"Resolve issues with a clear human handoff.",blurb:"Resolve customer requests with product-aware actions and generative UI. Keep the work legible, auditable, and ready for a person to take over.",demoLocation:"use-cases-support",demoLabel:"Talk to an Engineer about the Customer Support template"}];function x(){var e;
1let a=(0,h.sf)(),[s,r]=(0,n.useState)("knowledge"),[o,u]=(0,n.useState)("columns");(0,n.useEffect)(()=>{let e=window.matchMedia("(min-width: 768px) and (max-width: 1199px)"),a=window.matchMedia("(max-width: 767px)"),s=()=>u(e.matches?"grid":a.matches?"accordion":"columns");return s(),e.addEventListener("change",s),a.addEventListener("change",s),()=>{e.removeEventListener("change",s),a.removeEventListener("change",s)}},[]);let v="grid"===o,m=null!=(e=y.find(e=>e.id===s))?e:y[0],g=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"click";if("auto"!==t&&x.reset(),e===s)return;let n="accordion"===o?document.getElementById("use-case-tab-".concat(e)):null;if(n){let a=n.getBoundingClientRect().top;(0,i.flushSync)(()=>r(e));let s=n.getBoundingClientRect().top-a;s&&window.scrollBy({top:s,behavior:"instant"})}else r(e);"auto"!==t&&a.capture("homepage.use_cases.template_selected",{template:e,interaction:t})},x=function(e){let{activeKey:a,onAdvance:s,axis:t="y",enabled:i=!0}=e,r=(0,n.useRef)(null),o=(0,n.useRef)(null),c=(0,n.useRef)(s),l=(0,n.useRef)(8e3),d=(0,n.useRef)({activeKey:a,revision:0}
1),[p,u]=(0,n.useState)(0),[h,v]=(0,n.useState)(!1),[m,g]=(0,n.useState)(!1),[_,y]=(0,n.useState)(!1),[x,k]=(0,n.useState)(!1),[w,A]=(0,n.useState)(!1),[j,C]=(0,n.useState)(!1);(0,n.useEffect)(()=>{c.current=s},[s]),(0,n.useEffect)(()=>{let e=r.current;if(!e)return;let a=window.matchMedia("(prefers-reduced-motion: reduce)"),s=()=>{a.matches&&C(!0)},t="undefined"==typeof IntersectionObserver,n=()=>{if(document.hidden)return;let a=e.getBoundingClientRect(),s=Math.max(0,Math.min(a.right,window.innerWidth)-Math.max(a.left,0)),t=Math.max(0,Math.min(a.bottom,window.innerHeight)-Math.max(a.top,0));g(a.width>0&&a.height>0&&s*t/(a.width*a.height)>=.2)},i=()=>{y(!document.hidden),t&&n()};s(),i(),v(!0),a.addEventListener("change",s),document.addEventListener("visibilitychange",i);let o=t?null:new IntersectionObserver(e=>{let a=e.at(-1);a&&g(a.isIntersecting&&a.intersectionRatio>=.2)},{threshold:.2});return null==o||o.observe(e),t&&(window.addEventListener("scroll",n,{capture:!0,passive:!0}),window.addEventListener("resize",n)),()=>{null==o||o.disconnect(),t&&(window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)),a.removeEventListener("change",s),document.removeEventListener("visibilitychange",i)}},[]);let N=i&&h&&m&&_&&!x&&!w&&!j;return(0,n.useLayoutEffect)(()=>{let e;(d.current.activeKey!==a||d.current.revision!==p)&&(d.current={activeKey:a,revision:p},l.current=8e3);let s="x"===t?"scaleX":"scaleY",n=o.current,i=l.current,r="".concat(s,"(").concat(N?f(i):b(i),")");if(n&&(n.style.transition="none",n.style.transform=r),!N)return;let u=performance.now();(null==n?void 0:n.animate)?e=n.animate([{transform:r},{transform:"".concat(s,"(1)")}],{duration:i,easing:"linear",fill:"forwards"}):n&&(n.getBoundingClientRect(),n.style.transition="transform ".concat(i,"ms linear"),n.style.transform="".concat(s,"(1)"));let h=window.setTimeout(()=>c.current(),i);return()=>{window.clearTimeout(h),l.current=Math.max(0,i-(performance.now()-u)),null==e||e.cancel(),n&&(n.style.transition="none",n.style.transform="".concat(s,"(").concat(b(l.current),")"))}},[a,t,N,p]),{rootRef:r,progressRef:o,playing:N,userPaused:j,interacting:x||w,reset:()=>u(e=>e+1),togglePlayback:()=>C(e=>!e),onPointerEnter:e=>{"touch"!==e.pointerType&&k(!0)},onPointerLeave:()=>k(!1),onFocusCapture:()=>A(!0),onBlurCapture:e=>{e.currentTarget.contains(e.relatedTarget)||A(!1)}}}({activeKey:s,axis:v?"x":"y",enabled:"accordion"!==o,onAdvance:()=>{let e=y.findIndex(e=>e.id===s);g(y[(e+1)%y.length].id,"auto")}}),w=(e,a)=>{var s;let t;if(a===(v?"ArrowRight":"ArrowDown")&&(t=(e+1)%y.length),a===(v?"ArrowLeft":"ArrowUp")&&(t=(e-1+y.length)%y.length),"Home"===a&&(t=0),"End"===a&&(t=y.length-1),void 0===t)return!1;let n=y[t];return g(n.id,"keyboard"),null==(s=document.getElementById("use-case-tab-".concat(n.id)))||s.focus(),!0};return(0,t.jsxs)("div",{ref:x.rootRef,className:_().root,"data-use-case-selected":s,"data-cycle-playing":x.playing,onPointerEnter:x.onPointerEnter,onPointerLeave:x.onPointerLeave,onFocusCapture:x.onFocusCapture,onBlurCapture:x.onBlurCapture,children:[(0,t.jsxs)("header",{className:_().heading,"data-home-entrance":"",children:[(0,t.jsx)("h2",{className:_().title,children:"Use cases & templates"}),(0,t.jsx)("p",{className:_().intro,children:"Start from a real agent experience, then make every interaction look and feel like your product."})]}),(0,t.jsxs)("div",{className:_().playback,children:[(0,t.jsxs)("button",{type:"button",onClick:x.togglePlayback,className:_().playbackButton,"aria-describedby":"use-case-playback-help",children:[x.userPaused?(0,t.jsx)(l.j,{size:14,weight:"fill","aria-hidden":"true"}):(0,t.jsx)(d.v,{size:14,weight:"fill","aria-hidden":"true"}),x.userPaused?"Play rotation":"Pause rotation"]}),(0,t.jsx)("span",{id:"use-case-playback-help",className:"sr-only left-0",children:"Advances to the next template every 8 seconds. Rotation pauses while you hover over or interact with this section."})]}),(0,t.jsxs)("div",{className:_().explorer,"data-home-entrance":"",children:[(0,t.jsx)("div",{className:_().tabs,role:"tablist","aria-label":"Use cases","aria-orientation":v?"horizontal":"vertical",children:y.map((e,a)=>{let n=e.id===s;return(0,t.jsxs)("button",{id:"use-case-tab-".concat(e.id),type:"button",role:"tab","aria-selected":n,"aria-label":"".concat(e.title," ").concat(e.tagline),"aria-controls":"use-case-panel",tabIndex:n?0:-1,onClick:()=>g(e.id),onKeyDown:e=>{w(a,e.key)&&e.preventDefault()},className:_().tab,children:[(0,t.jsx)(c.default,{src:"/images/home/use-cases/redesign/".concat(e.icon,".svg"),alt:"",width:24,height:24,className:_().icon}),(0,t.jsx)("span",{className:_().tabTitle,children:e.title}),(0,t.jsx)("span",{className:_().tagline,children:e.tagline}),(0,t.jsx)(p.a,{size:24,className:_().chevron,"aria-hidden":"true"}),n&&(0,t.jsx)("span",{ref:x.progressRef,className:_().progress,"data-use-case-progress":!0,"aria-hidden":"true"})]},e.id)})}),(0,t.jsx)(k,{useCase:m},m.id)]})]})}function k(e){let{useCase:a}=e;return(0,t.jsxs)("section",{id:"use-case-panel",role:"tabpanel",tabIndex:0,"aria-labelledby":"use-case-tab-".concat(a.id),className:_().panel,children:[(0,t.jsxs)("div",{className:_().copy,children:[(0,t.jsx)("h3",{children:a.title}),(0,t.jsx)("div",{"data-testid":"selected-use-case-description",children:(0,t.jsx)("p",{children:a.blurb})}),(0,t.jsxs)("div",{className:_().actions,children:[(0,t.jsx)(j,{location:a.demoLocation,label:a.demoLabel}),(0,t.jsx)("div",{className:_().prompt,children:(0,t.jsx)(m.default,{createPrompt:"messaging"===a.id?()=>(0,v.Cz)():void 0,surface:"messaging"===a.id?"website_home_use_cases_messaging":"website_home_use_cases_".concat(a.id)})})]})]}),(0,t.jsx)("div",{"data-testid":"selected-use-case-visual",className:_().visual,children:(0,t.jsx)(c.default,{src:w[a.id],alt:A[a.id],width:"support"===a.id?431:425,height:"support"===a.id?349:324,className:_().illustration,sizes:"(min-width: 1440px) 472px, (min-width: 1200px) 40vw, (min-width: 768px) 70vw, 85vw"})})]})}let w={knowledge:{src:"/_next/static/media/knowledge.9ed610c3.png",height:1293,width:1700,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAFVBMVEX+/f739/ji6eX+/v739/jz8vPm6u1LTnx6AAAAA3RSTlP29vnNuMc/AAAACXBIWXMAACxLAAAsSwGlPZapAAAAKklEQVR4nCXGxw3AQBADsdEq9F/ywTBfpHGSiDt3q9jaxIDTfvEPJAm4BxIgAJBbzw+wAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:6},saas:{src:"/_next/static/media/saas.fffc9832.png",height:1293,width:1700,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAADFBMVEX7+/z19vXx8fL///6DCwQsAAAAA3RSTlP8/fUqbdcJAAAACXBIWXMAACxLAAAsSwGlPZapAAAAJUlEQVR4nC2KQQ4AMAyCUP7/56VrPRgkElQEwlQ/JO3M9W7uAn0FrgA17JJF5wAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:6},messaging:{src:"/_next/static/media/messaging.9290f8fc.png",height:1293,width:1700,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAJFBMVEX8/Pz5+PjV6Nb////8+/vu7u/g7t/f3/Po6tHU3d7rzeno8+kLzghMAAAAA3RSTlP6+/7vaNW1AAAACXBIWXMAACxLAAAsSwGlPZapAAAALElEQVR4nBXIyREAIAACMXDBq/+CHfOM2gSQ7mlsR2vVSRBz1Aax5w9kW98DE8kAoOl5zUIAAAAASUVORK5CYII=",blurWidth:8,blurHeight:6},support:{src:"/_next/static/media/support.d52b9038.png",height:1394,width:1722,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAMFBMVEX29vn39/vh4efu7vD8/P3j5Pv09Pj//
1//s7PrW2Pve3vH////6+/3g4f7FxfbU1Np6U1QUAAAAC3RSTlPA/vz82tvG26Tb/XnJ8+MAAAAJcEhZcwAALEsAACxLAaU9lqkAAAAxSURBVHicJcZJDsAgDATBMQlL1GPz/99GiDqVwjgzu7Cjqj7tDX78qjVHnAAGpq6xfi+SAYMjwosDAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:6}},A={knowledge:"An internal knowledge-base chat app searches CRM notes and company data with citations.",saas:"A SaaS application with an agent panel reviewing a customer renewal pipeline.",messaging:"A Slack and Microsoft Teams agent answers a lead-conversion question with a native chart.",support:"A company website with its support chat checking an order and refund policy."};function j(e){let{location:a,label:s}=e,n=(0,h.sf)();return(0,t.jsxs)(o(),{href:"/talk-to-an-engineer?ref=book_demo_use_cases",className:_().demo,"aria-label":s,onClick:()=>n.capture("book_demo_clicked",{location:a}),children:["Talk to an Engineer",(0,t.jsx)(u.Q,{size:20,"aria-hidden":"true"})]})}},5743:e=>{e.exports={proof:"proof-logos_proof__jXtVb",heading:"proof-logos_heading__Z2dWU",fortune:"proof-logos_fortune__HbUXP",title:"proof-logos_title__wpOqV",grid:"proof-logos_grid__QdcmI",cell:"proof-logos_cell__Y_NuO",logo:"proof-logos_logo__bEJKb",ambient:"proof-logos_ambient__wAH_q",glow:"proof-logos_glow__JS9NA"}},9165:e=>{e.exports={section:"enterprise-band_section__bZnzn",container:"enterprise-band_container__CQLZB",introduction:"enterprise-band_introduction__PLa6X",heading:"enterprise-band_heading__jA30_",gradient:"enterprise-band_gradient__SUv9x",description:"enterprise-band_description__rz31t",actions:"enterprise-band_actions__GlZ_C",primary:"enterprise-band_primary__FTgWx",secondary:"enterprise-band_secondary__q9gOW",facts:"enterprise-band_facts__Hos_y",fact:"enterprise-band_fact__jj0uo",icon:"enterprise-band_icon__EscjR"}},11041:(e,a,s)=>{"use strict";s.d(a,{y:()=>n});var t=s(23796);function n(e){let a=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let t,n,i=a.current;if(!i||!window.matchMedia||!window.IntersectionObserver)return;let r=!1,o=!1,c=!1,l=0,d=window.matchMedia("(prefers-reduced-motion: reduce)"),p=()=>null==t?void 0:t.paused(!o||document.hidden||d.matches),u=async()=>{if(c||t||d.matches)return;c=!0;let a=++l,o=await Promise.all([s.e(9701),s.e(9732)]).then(s.bind(s,79732)).catch(()=>null);if(!o){c=!1;return}let{gsap:u}=o;if(r||a!==l||d.matches){c=!1;return}n=u.context(()=>{t=e(u,i)},i),p()},h=new IntersectionObserver(e=>{let[a]=e;(o=a.isIntersecting)&&u(),p()},{threshold:.12}),v=()=>{d.matches?(l++,null==n||n.revert(),n=void 0,t=void 0,c=!1):o&&u()};return h.observe(i),d.addEventListener("change",v),document.addEventListener("visibilitychange",p),()=>{r=!0,h.disconnect(),d.removeEventListener("change",v),document.removeEventListener("visibilitychange",p),null==n||n.revert()}},[e]),a}},12904:e=>{e.exports={hero:"hero_hero__Dv7FE",copy:"hero_copy__xunwz",eyebrow:"hero_eyebrow__f97pr",heading:"hero_heading__5X9k1",line:"hero_line__oMiVG",emphasis:"hero_emphasis__JqsiM",description:"hero_description__jYzPd",actions:"hero_actions__L0lOt",diagram:"hero_diagram__d3Elt",desktopBreak:"hero_desktopBreak__aYHzv"}},17475:(e,a,s)=>{"use strict";s.d(a,{default:()=>p});var t=s(87448),n=s(11041),i=s(73605),r=s(21433),o=s.n(r);let c="/images/homepage-redesign/learning",l=[{name:"quality",label:"Quality â"},{name:"speed",label:"Speed â"},{name:"cost",label:"Cost â"}],d=(e,a)=>e.timeline({paused:!0}).from(a.querySelector("[data-learning-curves]"),{clipPath:"inset(0 100% 0 0)",duration:1.6,ease:"power2.out"});function p(){let e=(0,n.y)(d);return(0,t.jsxs)("div",{ref:e,className:o().layout,children:[(0,t.jsxs)("div",{className:o().intro,children:[(0,t.jsxs)("h2",{className:o().title,children:["Agents that improve with ",(0,t.jsx)("span",{children:"every interaction"})]}),(0,t.jsx)("p",{className:o().description,children:"Turn real usage into a controlled learning loop that makes agent quality and speed rise while cost falls."})]}),(0,t.jsxs)("figure",{className:o().chart,"aria-labelledby":"learning-chart-title","aria-describedby":"learning-chart-description",children:[(0,t.jsx)("figcaption",{id:"learning-chart-title",className:o().chartTitle,children:"User interactions over time"}),(0,t.jsxs)("div",{className:o().plot,"aria-hidden":"true",children:[(0,t.jsx)(i.default,{src:"".concat(c,"/grid.svg"),width:612,height:267,className:o().grid,alt:""}),(0,t.jsx)(i.default,{src:"".concat(c,"/curves.svg"),width:614,height:251,className:o().curves,"data-learning-curves":!0,alt:""})]}),(0,t.jsx)("ul",{className:o().legend,"aria-label":"Illustrative outcomes",children:l.map(e=>{let{name:a,label:s}=e;return(0,t.jsxs)("li",{className:o()[a],children:[(0,t.jsx)(i.default,{src:"".concat(c,"/").concat(a,".svg"),width:9,height:9,alt:""}),(0,t.jsx)("span",{children:s})]},a)})}),(0,t.jsx)("p",{id:"learning-chart-description",className:"sr-only",children:"Illustrative trends: quality and speed rise while cost falls as user interactions accumulate. These
1curves are conceptual, not measured performance data."})]})]})}},20745:(e,a,s)=>{"use strict";s.d(a,{IM:()=>i,fK:()=>r,hC:()=>n});let t=["hero","production","continuity","portability","learning","own-cloud","closing","footer","direct"];function n(e){var a;return null!=(a=t.find(a=>a===e))?a:"direct"}function i(e){let a=n(e);return"direct"===a?"executive_apply":"executive_apply_".concat(a)}function r(e,a,s){try{void 0===s?null==e||e.capture(a):null==e||e.capture(a,s)}catch(e){console.warn("Application analytics unavailable.")}}},21433:e=>{e.exports={layout:"improve-auto-graph_layout__finMO",intro:"improve-auto-graph_intro__L_a5U",title:"improve-auto-graph_title__s_AIK",description:"improve-auto-graph_description__uCRPM",chart:"improve-auto-graph_chart__PwKUu",chartTitle:"improve-auto-graph_chartTitle__EEIvb",plot:"improve-auto-graph_plot__T3VD5",grid:"improve-auto-graph_grid__Hz0El",curves:"improve-auto-graph_curves__780Pc",legend:"improve-auto-graph_legend__TlwND",quality:"improve-auto-graph_quality__EzUer",speed:"improve-auto-graph_speed__kIN8T",cost:"improve-auto-graph_cost___Zciq"}},24208:e=>{e.exports={card:"walkthrough-video_card__1zBAo",trigger:"walkthrough-video_trigger__8c3B6",close:"walkthrough-video_close__JU9yT",thumbnail:"walkthrough-video_thumbnail__oFtNs",poster:"walkthrough-video_poster__qhBEQ",preview:"walkthrough-video_preview__DexJe",playOverlay:"walkthrough-video_playOverlay__0atTr",copy:"walkthrough-video_copy__LRd_U",eyebrow:"walkthrough-video_eyebrow__FbSf_",title:"walkthrough-video_title__ANngk",arrow:"walkthrough-video_arrow__VEZtr",dialog:"walkthrough-video_dialog__EcCSd",player:"walkthrough-video_player__3A7zR"}},30353:(e,a,s)=>{"use strict";s.d(a,{default:()=>i});var t=s(87448),n=s(23796);function i(e){let{className:a,children:s}=e,i=(0,n.useRef)(null);return(0,n.useEffect)(()=>{let e=i.current;if(!e)return;if("undefined"==typeof IntersectionObserver){e.dataset.running="true";return}let a=!1,s=()=>{e.dataset.running=String(a&&!document.hidden)},t=new IntersectionObserver(e=>{var t,n;a=null!=(n=null==(t=e.at(-1))?void 0:t.isIntersecting)&&n,s()});return t.observe(e),document.addEventListener("visibilitychange",s),()=>{t.disconnect(),document.removeEventListener("visibilitychange",s)}},[]),(0,t.jsx)("div",{ref:i,className:a,"aria-hidden":"true","data-testid":"logo-marquee","data-running":"false",children:s})}},30837:(e,a,s)=>{"use strict";s.d(a,{default:()=>l});var t=s(87448),n=s(23796),i=s(42069),r=s(77017),o=s.n(r);function c(e){let{direction:a}=e;return(0,t.jsx)("svg",{viewBox:"0 0 20 20",fill:"none","aria-hidden":"true",focusable:"false",children:(0,t.jsx)("path",{d:"next"===a?"M1 10h18M13 4l6 6-6 6":"M19 10H1M7 4l-6 6 6 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function l(e){let{scrollerId:a}=e,[s,r]=(0,n.useState)(!0),[l,d]=(0,n.useState)(!1),p=(0,n.useRef)(null),u=(0,n.useRef)(null),h=(0,n.useRef)(null);(0,n.useEffect)(()=>{let e=document.getElementById(a);if(!e)return;let s=()=>{var a,s;let t=e.scrollWidth-e.clientWidth,n=e.scrollLeft<=1,o=e.scrollLeft>=t-1,c=h.current;if(c){let a=Math.abs(e.scrollLeft-c.left);a<=1||a>c.distance?h.current=null:c.distance=a}let l=document.activeElement;o&&!n&&l===u.current?((0,i.flushSync)(()=>r(!1)),null==(a=p.current)||a.focus()):n&&!o&&l===p.current&&((0,i.flushSync)(()=>d(!1)),null==(s=u.current)||s.focus()),r(n),d(o)},t=()=>{h.current=null};return s(),e.addEventListener("scroll",s,{passive:!0}),e.addEventListener("scrollend",t),window.addEventListener("resize",s),()=>{e.removeEventListener("scroll",s),e.removeEventListener("scrollend",t),window.removeEventListener("resize",s)}},[a]);let v=e=>{var s,t;let n=document.getElementById(a);if(!n)return;let i=n.querySelectorAll("a");if(i.length<2)return;let r=i[1].getBoundingClientRect().left-i[0].getBoundingClientRect().left;if(r<=0)return;let o=n.scrollWidth-n.clientWidth,c=Array.from(i,(e,a)=>Math.min(a*r,o)),l=null!=(t=null==(s=h.current)?void 0:s.left)?t:n.scrollLeft,d=e>0?Math.max(n.scrollLeft,l):Math.min(n.scrollLeft,l),p=e>0?c.find(e=>e>d+1):c.reverse().find(e=>e<d-1);if(void 0===p)return;h.current={left:p,distance:Math.abs(n.scrollLeft-p)};let u="function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;"function"==typeof n.scrollTo?n.scrollTo({left:p,behavior:u?"auto":"smooth"}):n.scrollLeft=p};return(0,t.jsxs)("div",{className:o().controls,children:[(0,t.jsx)("button",{ref:p,type:"button",className:o().control,"aria-label":"Previous story","aria-controls":a,disabled:s,onClick:()=>v(-1),children:(0,t.jsx)(c,{direction:"previous"})}),(0,t.jsx)("button",{ref:u,type:"button",className:o().control,"aria-label":"Next story","aria-controls":a,disabled:l,onClick:()=>v(1),children:(0,t.jsx)(c,{direction:"next"})})]})}},32364:(e,a,s)=>{"use strict";s.d(a,{default:()=>x});var t=s(87448),n=s(23796),i=s(73605),r=s(70300),o=s(35235),c=s.n(o);let l="/images/home/protocol-diagram",d="".concat(l,"/connectors"),p=[["vue","Vue"],["angular","Angular"],["react","React"],["ios","iOS"],["android","Android"],["slack","Slack"],["teams","Teams"],["whatsapp","WhatsApp"]],u=[["openai","OpenAI","Agents SDK"],["claude","Claude","Agent SDK"],["langchain","LangChain"],["google-adk","Google","ADK"],["strands","AWS","Strands"],["mastra","Mastra"]];function h(e){let a="url(".concat(d,"/").concat(e,")");return{WebkitMaskImage:a,maskImage:a}}function v(e){let{name:a,label:s,secondLine:n,kind:r}=e;return(0,t.jsxs)("div",{className:c().card,"data-node-kind":r,"data-node-name":a,"data-static-selected":"android"===a||"langchain"===a?"true":void 0,children:[(0,t.jsx)(i.default,{src:"".concat(l,"/").concat(a,".svg"),width:32,height:32,alt:""}),(0,t.jsxs)("span",{children:[s,n&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("br",{}),n]})]})]})}function m(e){let{icon:a,children:s}=e;return(0,t.jsxs)("div",{className:c().capability,children:[(0,t.jsx)(i.default,{src:"".concat(l,"/").concat(a,".svg"),width:24,height:24,alt:""}),(0,t.jsx)("span",{children:s})]})}function g(){return(0,t.jsxs)("div",{className:c().diagram,children:[(0,t.jsx)(r.A,{}),(0,t.jsxs)("div",{className:c().layers,children:[(0,t.jsx)("p",{className:"".concat(c().more," ").concat(c().frameworks),children:"+4 more frameworks"}),(0,t.jsx)("div",{className:c().surfaces,"aria-label":"User surfaces",children:p.map(e=>{let[a,s]=e;return(0,t.jsx)(v,{name:a,label:s,kind:"surface"},a)})}),(0,t.jsx)("div",{className:"".concat(c().connectors," ").concat(c().surfaceConnectors),style:h("surface-connectors.svg"),"aria-hidden":"true",children:p.map((e,a)=>{let[s]=e;return(0,t.jsx)("div",{className:c().trace,style:h("surface-trace-".concat(a,".svg")),"data-connection":"surface","data-connection-index":a},s)})}),(0,t.jsxs)("div",{className:c().center,"data-node-kind":"hub",children:[(0,t.jsxs)("div",{className:c().capabilities,children:[(0,t.jsxs)(m,{icon:"brush",children:["Streaming &",(0,t.jsx)("br",{}),"Generative UI"]}),(0,t.jsxs)(m,{icon:"auth",children:["User",(0,t.jsx)("br",{}),"Authentication"]})]}),(0,t.jsxs)("div",{className:c().brand,children:[(0,t.jsx)(i.default,{src:"".concat(l,"/logo.svg"),width:46,height:46,alt:""}),(0,t.jsx)(i.default,{src:"".concat(l,"/wordmark.svg"),width:77,height:15,alt:"CopilotKit"})]}),(0,t.jsxs)("div",{className:c().capabilities,children:[(0,t.jsxs)(m,{icon:"actions",children:["In-App Actions",(0,t.jsx)("br",{}),"& Shared State"]}),(0,t.jsxs)(m,{icon:"learning",children:["Automatic",(0,t.jsx)("br",{}),"Learning"]})]})]}),(0,t.jsx)("div",{className:"".concat(c().connectors," ").concat(c().agentConnectors),style:h("agent-connectors.svg"),"aria-hidden":"true",children:u.map((e,a)=>{let[s]=e;return(0,t.jsx)("div",{className:c().trace,style:h("agent-trace-".concat(a,".svg")),"data-connection":"agent","data-connection-index":a},s)})}),(0,t.jsxs)("div",{className:c().agents,"aria-label":"Agent frameworks connected through AG-UI",children:[(0,t.jsx)("div",{className:"".concat(c().card," ").concat(c().ghost),"aria-hidden":"true"}),(0,t.jsx)("div",{className:"".concat(c().card," ").concat(c().ghost),"aria-hidden":"true"}),u.map(e=>{let[a,s,n]=e;return(0,t.jsx)(v,{name:a,label:s,secondLine:n,kind:"agent"},a)}),(0,t.jsx)("div",{className:"".concat(c().card," ").concat(c().ghost),"aria-hidden":"true"}),(0,t.jsx)("div",{className:"".concat(c().card," ").concat(c().ghost),"aria-hidden":"true"})]}),(0,t.jsx)("p",{className:"".concat(c().more," ").concat(c().wideCount),children:"+18 more agents"}),(0,t.jsx)("p",{className:"".concat(c().more," ").concat(c().phoneCount),children:"+20 more agents"})]})]})}let _=[2,3,4,5],f=[1,2,3,4],b=[.426,14.59,28.754,42.918,57.082,71.246,85.41,99.574],y=[23.307,33.984,44.661,55.339,66.016,76.693];function x(){let e=(0,n.useRef)(null);return(0,n.useEffect)(()=>{let a,t,n=e.current;if(!n||"undefined"==typeof IntersectionObserver)return;let i=window.matchMedia("(prefers-reduced-motion: reduce)"),r=window.matchMedia("(max-width: 767px)"),o=!1,c=!1,l=!1,d=!1,p=!1,u=Array.from(n.querySelectorAll('[data-node-kind="surface"]')),h=Array.from(n.querySelectorAll('[data-node-kind="agent"]')),v=Array.from(n.querySelectorAll('[data-connection="surface"]')),m=Array.from(n.querySelectorAll('[data-connection="agent"]')),g=()=>
1{u.concat(h).forEach(e=>delete e.dataset.active),delete n.dataset.activeSurface,delete n.dataset.activeAgent},x=()=>{null==a||a.kill(),null==t||t.revert(),a=void 0,t=void 0,g()},k=()=>{if(!c){if(i.matches){x(),n.dataset.animationState="reduced";return}if(!o||document.hidden){null==a||a.pause(),n.dataset.animationState=a?"paused":"static";return}if(a){p?a.play(2.6,!1):a.play(),p=!1,n.dataset.animationState="running";return}!l&&d&&(l=!0,Promise.all([s.e(9701),s.e(9732)]).then(s.bind(s,79732)).then(e=>{let{gsap:s}=e;l=!1,c||i.matches||!o||document.hidden||(t=s.context(()=>{a=s.timeline({repeat:-1,paused:!0});let e=r.matches;for(let s=0;s<(e?4:8);s++){let t=e?_[(s+2)%4]:(s+4)%8,i=e?f[(s+1)%4]:(s+2)%6,r=u[t],o=h[i],c=v[t],l=m[i],d=4.6*s;a.call(()=>{g(),r.dataset.active="true",n.dataset.activeSurface=r.dataset.nodeName},[],d);let p=b[t],x=y[i],k=e=>e>0?e:-2,w=(e,a,s,t)=>"inset(".concat(s<100?k(e):e,"% ").concat(k(a),"% ").concat(k(s),"% ").concat(k(t),"%)"),A=(e,a,s)=>w(a,99.4-e,s,e-.6),j=(e,a,s,t)=>w(s,99.4-Math.max(e,a),t,Math.min(e,a)-.6);a.fromTo(c,{opacity:1,clipPath:A(p,0,100)},{opacity:1,clipPath:A(p,0,51.3),duration:.2,ease:"none"},d+.45),a.to(c,{clipPath:j(p,50,0,51.3),duration:.65,ease:"none"},d+.65),a.to(c,{clipPath:j(p,50,0,0),duration:.2,ease:"none"},d+1.3),a.fromTo(l,{opacity:1,clipPath:A(50,0,100)},{opacity:1,clipPath:A(50,0,48),duration:.2,ease:"none"},d+1.5),a.to(l,{clipPath:j(50,x,0,48),duration:.65,ease:"none"},d+1.7),a.to(l,{clipPath:j(50,x,0,0),duration:.2,ease:"none"},d+2.35),a.call(()=>{o.dataset.active="true",n.dataset.activeAgent=o.dataset.nodeName},[],d+2.55),a.to([c,l],{opacity:0,duration:.5},d+3.65),a.call(g,[],d+4.15)}a.to({},{duration:.45})},n),p=!0,k())}).catch(()=>{l=!1}))}},w=new IntersectionObserver(e=>{let a=e.at(-1);a&&(o=a.isIntersecting,k())},{threshold:.1}),A=()=>{x(),k()};w.observe(n),i.addEventListener("change",k),r.addEventListener("change",A),document.addEventListener("visibilitychange",k);let j=function(e){let a,s,t,n=()=>{window.removeEventListener("load",n),clearTimeout(t),"function"==typeof window.requestIdleCallback?a=window.requestIdleCallback(e,{timeout:2e3}):s=setTimeout(e,200)};return"complete"===document.readyState?n():(window.addEventListener("load",n),t=setTimeout(n,4e3)),()=>{window.removeEventListener("load",n),clearTimeout(t),void 0!==a&&window.cancelIdleCallback(a),clearTimeout(s)}}(()=>{d=!0,k()});return()=>{c=!0,j(),w.disconnect(),i.removeEventListener("change",k),r.removeEventListener("change",A),document.removeEventListener("visibilitychange",k),null==a||a.kill(),null==t||t.revert(),g()}},[]),(0,t.jsx)("div",{ref:e,role:"img","aria-label":"CopilotKit connects agent frameworks through AG-UI to web, mobile and messaging surfaces, with generative UI, authentication, app actions and automatic learning","data-testid":"hero-animation","data-animation-state":"static",children:(0,t.jsx)(g,{})})}},32470:(e,a,s)=>{"use strict";s.d(a,{Cz:()=>r,xH:()=>i});var t=s(52127);let n=["slack","teams"];function i(e){return n.includes(e)}function r(e){let{runId:a}=(0,t.e)();return{runId:a,prompt:(0,t.l)(a,"slack"===e?"Slack":"teams"===e?"Microsoft Teams":"channels")}}},32562:e=>{e.exports={section:"analytics-section_section__P6WqT",header:"analytics-section_header__sglTT",frame:"analytics-section_frame__lbOHR",dashboard:"analytics-section_dashboard__5uTSn",dashboardContent:"analytics-section_dashboardContent__rh4Nd",topRow:"analytics-section_topRow__VlKWG",bottomRow:"analytics-section_bottomRow__pWJyn",widget:"analytics-section_widget__wW0gi",widgetTitle:"analytics-section_widgetTitle__LhtGl",activitySummary:"analytics-section_activitySummary__MjVHX",activityCount:"analytics-section_activityCount___iqH0",increase:"analytics-section_increase__1mGTe",activityDetails:"analytics-section_activityDetails__M5l_1",outcomeLegend:"analytics-section_outcomeLegend__StibS",performance:"analytics-section_performance__c0hve",agentBars:"analytics-section_agentBars__H6ZK5",support:"analytics-section_support__8jYWO",research:"analytics-section_research__W89EJ",sales:"analytics-section_sales__44K_z",onboarding:"analytics-section_onboarding__m004_",allAgents:"analytics-section_allAgents__DGbyP",outcomeContent:"analytics-section_outcomeContent__hVWaA",donut:"analytics-section_donut__73VE_",segments:"analytics-section_segments__e5muV",donutLabel:"analytics-section_donutLabel__8KiC7",lineLegend:"analytics-section_lineLegend__3Bt9q",completed:"analytics-section_completed__enY79",failed:"analytics-section_failed__5faiI",handedOff:"analytics-section_handedOff__92f3k",abandoned:"analytics-section_abandoned__oITH7",lineChart:"analytics-section_lineChart__I_AA5",responseLine:"analytics-section_responseLine__DIxor",runsLine:"analytics-section_runsLine__vN8CX",capabilities:"analytics-section_capabilities__VyBwG",capability:"analytics-section_capability__OvPyY"}},32819:e=>{e.exports={root:"use-cases-templates_root__cpv5I",heading:"use-cases-templates_heading__UY4Pq",title:"use-cases-templates_title__AgZ4_",intro:"use-cases-templates_intro__b1MYF",explorer:"use-cases-templates_explorer__8iEUs",tabs:"use-cases-templates_tabs__9nc_N",tab:"use-cases-templates_tab__eBVDl",panel:"use-cases-templates_panel__FXhrl",demo:"use-cases-templates_demo__0wX3H",icon:"use-cases-templates_icon__Kwm0M",tabTitle:"use-cases-templates_tabTitle__J3CDn",tagline:"use-cases-templates_tagline__wl4Cv",progress:"use-cases-templates_progress__6EVit",copy:"use-cases-templates_copy__TyMBz",actions:"use-cases-templates_actions__UaBwh",prompt:"use-cases-templates_prompt__qe_gF",visual:"use-cases-templates_visual___nfDs",illustration:"use-cases-templates_illustration__JG5HJ",playback:"use-cases-templates_playback__FODXV",playbackButton:"use-cases-templates_playbackButton__NoowS",chevron:"use-cases-templates_chevron__xUPql","use-case-enter"
1:"use-cases-templates_use-case-enter___GGYd"}},33011:()=>{},35235:e=>{e.exports={diagram:"hero-protocol-diagram_diagram__cf7JC",texture:"hero-protocol-diagram_texture__UnrLF",layers:"hero-protocol-diagram_layers__ZT9cK",surfaces:"hero-protocol-diagram_surfaces__9zLIT",agents:"hero-protocol-diagram_agents__zld73",card:"hero-protocol-diagram_card__r1qdm",selected:"hero-protocol-diagram_selected__hxuou",ghost:"hero-protocol-diagram_ghost__zYN44",center:"hero-protocol-diagram_center__tw5v7",brand:"hero-protocol-diagram_brand__q8gb3",capabilities:"hero-protocol-diagram_capabilities__lh1H0",capability:"hero-protocol-diagram_capability__OKvrB",connectors:"hero-protocol-diagram_connectors__ghJbg",trace:"hero-protocol-diagram_trace___Wt7R",surfaceConnectors:"hero-protocol-diagram_surfaceConnectors__zxtso",agentConnectors:"hero-protocol-diagram_agentConnectors__rjdGN",more:"hero-protocol-diagram_more__ZxrTc",frameworks:"hero-protocol-diagram_frameworks__lFLE8",phoneCount:"hero-protocol-diagram_phoneCount__K0jCE",wideCount:"hero-protocol-diagram_wideCount__1J6Om"}},43286:(e,a,s)=>{"use strict";s.d(a,{AudienceToggle:()=>c});var t=s(87448),n=s(33829),i=s.n(n),r=s(35586),o=s(20745);function c(e){let{active:a,currentPage:s=a}=e,n=(0,r.sf)();return(0,t.jsx)("div",{className:"audience-row container",children:(0,t.jsx)("nav",{className:"audience-selector","aria-label":"Choose your experience",children:["builder","executive"].map(e=>(0,t.jsx)(i(),{href:"executive"===e&&"executive"!==s?"/executive?entry=audience_toggle":"builder"===e?"/":"/executive",className:a===e?"active":void 0,"aria-current":s===e?"page":void 0,onClick:()=>{e!==a&&(0,o.fK)(n,"audience.toggle.switched",{from:a,to:e})},children:"builder"===e?"Builder":"Executive"},e))})})}},43337:(e,a,s)=>{"use strict";s.d(a,{default:()=>l});var t=s(87448),n=s(33829),i=s.n(n),r=s(35586),o=s(63558);let c={dark:"flex items-center gap-2 rounded-full border border-white/15 bg-[#181c1f] py-3 pr-4 pl-6 font-jakarta text-sm font-semibold whitespace-nowrap text-white shadow-sm transition-colors hover:bg-[#2b2f32]",light:"flex items-center gap-2 rounded-full border border-[rgba(190,194,255,0.5)] bg-white/90 py-3 pr-4 pl-6 font-jakarta text-sm font-semibold whitespace-nowrap text-gray-1000 shadow-sm transition-colors hover:bg-white"},l=e=>{let{appearance:a}=e,s=(0,r.sf)();return(0,t.jsxs)(i(),{href:"/talk-to-an-engineer?ref=book_demo_hero",className:c[a],onClick:()=>s.capture("book_demo_clicked",{location:"hero"}),children:["Book a Demo",(0,t.jsx)(o.L2n,{size:20})]})}},43500:e=>{e.exports={texture:"pixel-texture_texture__9jiz_",glisten:"pixel-texture_glisten__qL9Tr",pointer:"pixel-texture_pointer__4lmmk"}},44600:(e,a,s)=>{"use strict";s.d(a,{default:()=>v});var t=s(87448),n=s(73605),i=s(33829),r=s.n(i),o=s(35586);function c(e){let{className:a,children:s,eventLocation:n}=e,i=(0,o.sf)();return(0,t.jsx)(r(),{href:"https://go.copilotkit.ai/get-started-button",target:"_blank",rel:"noopener",onClick:()=>i.capture("try_for_free_clicked",{location:n}),className:a,children:s})}var l=s(70300),d=s(74454),p=s.n(d);let u="/images/homepage-redesign/closing";function h(){return(0,t.jsx)("div",{className:p().fanViewport,"aria-hidden":"true",children:(0,t.jsxs)("div",{className:p().fan,children:[(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().farLeft),children:(0,t.jsx)(n.default,{className:p().llamaCard,src:"".concat(u,"/llama-card.svg"),alt:"",width:271,height:291})}),(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().farRight," ").concat(p().lightCard),children:(0,t.jsx)(n.default,{className:p().squareLogo,src:"".concat(u,"/mastra.svg"),alt:"",width:71,height:71})}),(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().middleLeft," ").concat(p().lightCard),children:(0,t.jsx)(n.default,{className:p().squareLogo,src:"".concat(u,"/openai.svg"),alt:"",width:74,height:73})}),(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().middleRight," ").concat(p().lightCard),children:(0,t.jsx)(n.default,{className:p().strandsLogo,src:"".concat(u,"/strands.svg"),alt:"",width:45,height:72})}),(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().innerLeft),children:(0,t.jsx)(n.default,{className:p().claudeCard,src:"".concat(u,"/claude-card.svg"),alt:"",width:286,height:338})}),(0,t.jsx)("div",{className:"".concat(p().tile," ").concat(p().innerRight," ").concat(p().lightCard),children:(0,t.jsx)(n.default,{className:p().squareLogo,src:"".concat(u,"/right-inner-logo.svg"),alt:"",width:88,height:87})}),(0,t.jsxs)("div",{className:"".concat(p().tile," ").concat(p().centerCard),children:[(0,t.jsx)(n.default,{className:p().brandMark,src:"".concat(u,"/copilotkit-mark.svg"),alt:"",width:98,height:98}),(0,t.jsx)(n.default,{className:p().wordmark,src:"".concat(u,"/copilotkit-wordmark.svg"),alt:"",width:165,height:32})]})]})})}function v(){let e=(0,o.sf)();return(0,t.jsxs)("section",{className:p().section,"aria-labelledby":"home-closing-heading","data-home-entrance":"",children:[(0,t.jsx)(l.A,{className:p().pixels}),(0,t.jsxs)("div",{className:p().content,children:[(0,t.jsx)("p",{className:p().eyebrow,children:"Start building"}),(0,t.jsxs)("h2",{id:"home-closing-heading",children:["Enhance your applications",(0,t.jsx)("br",{})," with powerful ",(0,t.jsx)("span",{children:"AI capabilities"})]}),(0,t.jsxs)("div",{className:p().actions,children:[(0,t.jsxs)("div",{className:p().primaryActions,children:[(0,t.jsxs)(r
1(),{href:"/talk-to-an-engineer?ref=home-bottom-cta",onClick:()=>e.capture("talk_to_us_clicked",{location:"home_bottom_cta"}),className:"".concat(p().button," ").concat(p().expert),children:["Talk to an expert",(0,t.jsx)(n.default,{src:"".concat(u,"/arrow-dark.svg"),alt:"",width:20,height:20})]}),(0,t.jsx)(c,{eventLocation:"home_bottom_cta",className:"".concat(p().button," ").concat(p().getStarted),children:"Get started"})]}),(0,t.jsxs)(r(),{href:"https://docs.copilotkit.ai",target:"_blank",rel:"noopener noreferrer",className:"".concat(p().button," ").concat(p().docs),children:["Explore Docs",(0,t.jsx)(n.default,{src:"".concat(u,"/arrow-light.svg"),alt:"",width:20,height:20})]})]})]}),(0,t.jsx)(h,{})]})}},46250:(e,a,s)=>{"use strict";s.d(a,{default:()=>D});var t=s(87448),n=s(23796),i=s(35586),r=s(73605),o=s(90416),c=s(37505),l=s(69288),d=s(52127),p=s(74423),u=s(13642),h=s(24208),v=s.n(h);let m="/images/home/build-redesign/walkthrough.jpg";function g(){let e=(0,n.useRef)(null),a=(0,n.useRef)(null),[s,i]=(0,n.useState)(!1),o=(0,n.useRef)(null),[c,l]=(0,n.use
1State)(!1),[d,h]=(0,n.useState)(!1),[g,_]=(0,n.useState)(!0),[f,b]=(0,n.useState)(!1),[y,x]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{var e;let s=window.matchMedia("(prefers-reduced-motion: reduce)"),t=()=>_(s.matches),n=()=>h(!document.hidden);t(),n(),null==(e=s.addEventListener)||e.call(s,"change",t),document.addEventListener("visibilitychange",n);let i=new IntersectionObserver(e=>{let[a]=e;return l(a.isIntersecting)});return a.current&&i.observe(a.current),()=>{var e;i.disconnect(),null==(e=s.removeEventListener)||e.call(s,"change",t),document.removeEventListener("visibilitychange",n)}},[]),(0,n.useEffect)(()=>{let e=o.current;if(!e)return;if(!c||!d||g||f||s)return void e.pause();let a=!1;return e.play().catch(()=>{a||b(!0)}),()=>{a=!0,e.pause()}},[c,d,g,f,s]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:v().card,"data-home-entrance":"",children:(0,t.jsxs)("button",{ref:a,type:"button",onClick:()=>{var a;null===u.Ay||void 0===u.Ay||u.Ay.capture("homepage.build_walkthrough.open",{location:"home_build"}),i(!0),null==(a=e.current)||a.showModal()},"aria-haspopup":"dialog","aria-label":"5-min video walkthrough Watch the walkthrough",className:v().trigger,children:[(0,t.jsxs)("span",{className:v().thumbnail,children:[(0,t.jsx)(r.default,{src:m,alt:"",width:660,height:400,className:v().poster,sizes:"(max-width: 767px) 100vw, 330px"}),!g&&!f&&(0,t.jsx)("video",{ref:o,src:"/videos/home/build-walkthrough-preview.mp4",poster:m,muted:!0,loop:!0,playsInline:!0,preload:"none","aria-hidden":"true",className:v().preview,style:{opacity:+!!y},onPlaying:()=>x(!0),onError:()=>b(!0)}),(0,t.jsx)("span",{className:v().playOverlay,"data-play-overlay":"","aria-hidden":"true",children:(0,t.jsx)(p.j,{size:28,weight:"fill"})})]}),(0,t.jsxs)("span",{className:v().copy,children:[(0,t.jsx)("span",{className:v().eyebrow,children:"5-min video walkthrough"}),(0,t.jsxs)("span",{className:v().title,children:["Watch the walkthrough",(0,t.jsx)(r.default,{src:"/images/home/build-redesign/walkthrough-arrow.svg",alt:"",width:44,height:44,className:v().arrow})]})]})]})}),(0,t.jsx)("dialog",{ref:e,onClick:a=>{a.target===e.current&&e.current.close()},onClose:()=>{var e;i(!1),null==(e=a.current)||e.focus()},className:v().dialog,"aria-label":"Developer walkthrough video",children:(0,t.jsxs)("div",{className:v().player,children:[(0,t.jsx)("button",{type:"button",onClick:()=>{var a;return null==(a=e.current)?void 0:a.close()},"aria-label":"Close video",className:v().close,children:(0,t.jsx)("svg",{"aria-hidden":"true",width:"20",height:"20",viewBox:"0 0 20 20",children:(0,t.jsx)("path",{d:"m5 5 10 10M15 5 5 15",stroke:"currentColor",strokeWidth:"2"})})}),s&&(0,t.jsx)("iframe",{src:"https://www.youtube-nocookie.com/embed/".concat("uIxMIzosz7g","?rel=0"),title:"Give Your Google ADK a Frontend with CopilotKit: Complete Overview in Five Minutes",allow:"encrypted-media; picture-in-picture",allowFullScreen:!0})]})})]})}let _={react:{label:"React",icon:"/images/home/train-map/react.svg"},angular:{label:"Angular",icon:"/images/home/train-map/fw-web-angular.svg"},vue:{label:"Vue",icon:"/images/home/train-map/fw-web-vue.svg"},native:{label:"React Native",icon:"/images/home/train-map/react.svg"},channels:{label:"Channels SDK",icon:"/images/home/train-map/agui-kite.png"}};function f(e){return"web"===e?["react","angular","vue"]:"ios"===e||"android"===e?["native"]:["channels"]}let b="https://docs.copilotkit.ai",y={ui:"Explore Chat UI in the docs",genui:"Explore the full generative UI spectrum (including A2UI, MCP Apps, Open Generative UI, and more)",hitl:"Approvals in Docs",tools:"Tools in Docs",auth:"User auth in Docs",state:"Shared state in Docs"},x={ui:'// Use pre-built chat, styled with your CSS\n<CopilotChat agentId="support" className="acme-chat" />\n\n// or swap any subcomponent via slots\n<CopilotChat\n messageView={AcmeMessages}\n input={AcmeInput}\n/>\n\n// or fully headless, for full programmatic control\nconst { agent } = useAgent();\nconst { renderActivityMessage } = useRenderActivityMessage();\n{ agent.messages.map((m) => (\n <AcmeBubble key={m.id} message={m}>\n {/* headless UI supports all generative UI */}\n { renderActivityMessage(m) }\n </AcmeBubble>\n)) }\n{ agent.isRunning && <AcmeThinking /> }',genui:'// Controlled generative UI\nuseComponent({\n name: "showRefundStatus",\n description: "Show a refund status card.",\n parameters: z.object({\n orderId: z.string(),\n amount: z.number(),\n method: z.string(),\n }
1),\n // your component, your design system\n render: RefundStatusCard,\n});\n\nfunction RefundStatusCard({ orderId, amount }) {\n return <Card>â¦</Card>; // breakdown pie, your design system\n}',hitl:'useHumanInTheLoop({\n name: "chooseRefundMethod",\n parameters: z.object({ orderId: z.string() }),\n render: ({ respond }) => (\n <RefundMethodChoice\n options={["original card", "store credit"]}\n allowCustomAnswer\n onChoose={(answer) => respond?.(answer)}\n />\n ),\n});',tools:'useFrontendTool({\n name: "selectOrder",\n description: "Open an order in the dashboard.",\n parameters: z.object({ orderId: z.string() }),\n handler: async ({ orderId }) => {\n openOrder(orderId); // your app code\n return { status: "selected", orderId };\n },\n});',auth:'// the token comes from your app\'s session\n<CopilotKitProvider\n runtimeUrl="/api/copilotkit"\n headers={{ Authorization: "Bearer " + token }}\n>\n <CopilotChat agentId="support" />\n</CopilotKitProvider>\n\n// your server verifies it before the agent runs',state:'const { agent } = useAgent({ agentId: "support" });\n\n// read the agent\'s shared state\nagent.state.focus // "refunds"\n\n// Modify the agent\'s state.\nagent.setState({\n ...agent.state,\n focus: "returns",\n});\n\n// Read-write, agent read-only,\n// or frontend read-only.'},k={ui:'// pre-built chat, inside the native provider\n<CopilotKitProvider\n runtimeUrl="https://your-server.com/api/copilotkit"\n>\n <CopilotChat agentName="support" />\n</CopilotKitProvider>\n\n// or fully headless\nconst { agent } = useAgent();\n{ agent.messages.map((m) => (\n <AcmeBubble key={m.id} message={m} />\n)) }',genui:x.genui,hitl:x.hitl,tools:x.tools,auth:'// the token comes from your app\'s session\n<CopilotKitProvider\n runtimeUrl="https://your-server.com/api/copilotkit"\n headers={{ Authorization: "Bearer " + token }}\n>\n <App />\n</CopilotKitProvider>\n\n// your server verifies it before the agent runs',state:'const { agent } = useAgent({ agentId: "support" });\n\n// read the agent\'s shared state\nagent.state.focus // "refunds"\n\n// write it from a button press, the agent sees the change\nfunction focusReturns() {\n agent.setState({ ...agent.state, focus: "returns" });\n}'},w={react:x,angular:{ui:'\x3c!-- pre-built chat, styled with your CSS --\x3e\n<copilot-chat agentId="support" class="acme-chat" />\n\n\x3c!-- or swap subcomponents --\x3e\n<copilot-chat\n [assistantMessageComponent]="messageComponent"\n [inputComponent]="inputComponent"\n/>\n\n\x3c!-- or fully headless --\x3e\n@for (m of store().messages(); track m.id) {\n <acme-bubble [message]="m">\n \x3c!-- headless UI supports all generative UI --\x3e\n <copilot-activity [message]="m" agentId="support" />\n </acme-bubble>\n}\n\n// in your component class\nreadonly messageComponent = AcmeMessage;\nreadonly inputComponent = AcmeInput;\nreadonly store = injectAgentStore("support");',genui:'// Controlled generative UI, from a component constructor\nregisterComponent({\n name: "showRefundStatus",\n description: "Show a refund status card.",\n parameters: z.object({\n orderId: z.string(),\n amount: z.number(),\n }),\n // your component, your design system\n component: RefundCardComponent,\n});',hitl:'registerHumanInTheLoop({\n name: "chooseRefundMethod",\n description: "Let the user pick how to refund.",\n parameters: z.object({ orderId: z.string() }),\n // its toolCall carries respond() for the user\'s answer\n component: RefundMethodChoiceComponent,\n});',tools:'registerFrontendTool({\n name: "selectOrder",\n description: "Open an order in the dashboard.",\n parameters: z.object({ orderId: z.string() }),\n handler: async ({ orderId }) => {\n openOrder(orderId); // your app code\n return { status: "selected", orderId };\n },\n});',auth:'// app.config.ts, the token comes from your auth\nprovideCopilotKit({\n runtimeUrl: "/api/copilotkit",\n headers: { Authorization: "Bearer " + token },\n});\n\n// your server verifies it before the agent runs',state:'const store = injectAgentStore("support");\n\n// read the agent\'s shared state, a signal\nstore().state()\n\n// write it, the agent sees the change\nstore().agent.setState({\n ...store().agent.state,\n focus: "returns",\n});'},vue:{ui:'<template>\n \x3c!-- pre-built chat, styled with your CSS --\x3e\n <CopilotChat agent-id="support" class="acme-chat" />\n \x3c!-- or swap subcomponents via slots --\x3e\n <CopilotChat>\n <template #message-view="view">\n <AcmeMessages v-bind="view" />\n </template>\n <template #input="input">\n <AcmeInput v-bind="input" />\n </template>\n </CopilotChat>\n \x3c!-- or fully headless --\x3e\n <AcmeBubble v-for="m in agent?.messages" :key="m.id" :message="m">\n \x3c!-- headless UI supports all generative UI --\x3e\n <component\n :is="renderActivityMessage(m)?.renderer"\n v-bind="renderActivityMessage(m)?.props"\n />\n </AcmeBubble>\n</template>\n<script setup>\nconst { agent } = useAgent();\nconst { renderActivityMessage } = useRenderActivityMessage();\n<\/script>',genui:'// Controlled generative UI, in <script setup>\nuseComponent({\n name: "showRefundStatus",\n description: "Show a refund status card.",\n parameters: z.object({\n orderId: z.string(),\n amount: z.number(),\n }
1),\n // your component, your design system\n render: RefundCard,\n});',hitl:'useHumanInTheLoop({\n name: "chooseRefundMethod",\n parameters: z.object({ orderId: z.string() }),\n // your component receives respond() as a prop\n render: RefundMethodChoice,\n});',tools:'// useFrontendTool from "@copilotkit/vue/v2"\nuseFrontendTool({\n name: "selectOrder",\n description: "Open an order in the dashboard.",\n parameters: z.object({ orderId: z.string() }),\n handler: async ({ orderId }) => {\n openOrder(orderId); // your app code\n return { status: "selected", orderId };\n },\n});',auth:'\x3c!-- the token comes from your app\'s session --\x3e\n<CopilotKitProvider\n runtime-url="/api/copilotkit"\n :headers="{ Authorization: \'Bearer \' + token }"\n>\n <CopilotChat agent-id="support" />\n</CopilotKitProvider>\n\n\x3c!-- your server verifies it before the agent runs --\x3e',state:'const { agent } = useAgent({ agentId: "support" });\n\n// read the agent\'s shared state, agent is a ref\nagent.value?.state.focus // "refunds"\n\n// write it, the agent sees the change\nagent.value?.setState({\n ...agent.value?.state,\n focus: "returns",\n});'},native:k},A=[["c",/\/\*[\s\S]*?\*\/|<!--[\s\S]*?-->|\/\/[^\n]*/y],["s",/"[^"\n]*"|'[^'\n]*'|`[^`]*`/y],["k",/(?:import|from|export|const|let|return|async|await|if|function|class|new|throw|type|true|false|null|undefined)(?![\w$])/y],["f",/[A-Z][a-z][\w$]*/y],["fn",/[a-z_][\w$]*(?=\s*(?:\?\.)?\()/y],["a",/:?[a-z_][\w$-]*(?==[^=>])/y],["a",/[a-z_][\w$]*(?=\s*:(?!:))/y],["n",/\d+(?:\.\d+)?/y],[null,/[A-Za-z_][\w$]*/y]],j=/[a-z_][\w$]*(?=,[ \t]*(?:\n|$))/y;function C(e){let a=[],s="",n=()=>{s&&a.push(s),s=""},i=(e,s)=>{n(),a.push((0,t.jsx)("span",{className:e,children:s},a.length))},r=0;for(;r<e.length;){j.lastIndex=r;let a=!function(e,a){let s=e.lastIndexOf("\n",a-1)+1;return/^[ \t]*$/.test(e.slice(s,a))}(e,r)?null:j.exec(e);if(a){i("a",a[0]),r+=a[0].length;continue}let t=!1;for(let[a,n]of A){n.lastIndex=r;let o=n.exec(e);if(o&&("f"!==a||">"!==function(e,a){let s=a-1;for(;s>=0&&/\s/.test(e[s]);)s-=1;return s>=0?e[s]:""}(e,r))){a?i(a,o[0]):s+=o[0],r+=o[0].length,t=!0;break}}t||(s+=e[r],r+=1)}return n(),a}var N=s(32470);s(33011);let S=[{id:"ui",name:"Chat UI",detail:"drop-in UI, your own components and styling, or headless control"},{id:"genui",name:"Generative UI",detail:"with your own components"},{id:"hitl",name:"Human-in-the-loop approvals",detail:"user feedback"}
1,{id:"tools",name:"Frontend tools",detail:"the agent calls your app code",icon:"frontend-tools.svg"},{id:"auth",name:"User auth",detail:"agent routing and config tied to user auth"},{id:"state",name:"Realtime shared state",detail:"read/write and read-only"}],L=[{id:"web",name:"Web",icon:"/images/home/build-redesign/web.svg"},{id:"slack",name:"Slack",icon:"/images/home/train-map/slack.svg"},{id:"teams",name:"Teams",icon:"/images/home/train-map/teams.svg"},{id:"ios",name:"iOS",icon:"/images/home/train-map/ios.svg"},{id:"android",name:"Android",icon:"/images/home/train-map/android.svg"},{id:"whatsapp",name:"WhatsApp",icon:"/images/home/train-map/whatsapp.svg"}],T=Object.fromEntries(Array.from('<section class="mock m-slack" data-surface="slack" aria-label="Slack sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/slack.svg" alt=""><span>Slack</span></span>\n <div class="mbody">\n <div class="rail"><i></i><i></i><i></i></div>\n <div class="chan">\n <div class="cttl">Acme Inc</div>\n <i></i><i class="on"></i><i></i><i></i><i></i>\n </div>\n <div class="body">\n <div class="bhead"># support <span>\xb7 thread</span></div>\n <div class="msgs"><div class="thread-base">\n <div class="srow">\n <div class="avat hum">DK</div>\n <div style="min-width:0;">\n <div class="sender">Dana K.<span class="time">2:13 PM</span></div>\n <div class="stxt">Customer in the ticket queue is asking about a refund on order #4821, can someone take a look?</div>\n </div>\n </div>\n <div class="srow">\n <div class="avat"><i></i></div>\n <div style="min-width:0;">\n <div class="sender">Refund Agent<span class="badge">APP</span><span class="time">2:14 PM</span></div>\n <div class="stxt">Customer asked about order #4821. Policy allows a full refund, <span class="mention">@dana</span> needs to approve amounts over $50.</div>\n <div class="acard" data-as="acard">\n <div class="atxt" data-as-type>Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n \n <div class="fitem f-genui">\n <div class="gcard">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="approve">\n <div class="alab">Human_Approval</div>\n <div class="aq">Refund #4821 is above your $50 auto-limit.</div>\n <div class="opt sel">Approve full $86.40</div>\n <div class="opt">Approve $69.60, keep shipping</div>\n <div class="afree">Or reply with a noteâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="ubub">What card did they pay with?</div>\n <div class="acard">\n <div class="atxt">Full card numbers aren’t in your permissions. I can share the last 4: \xb7\xb7 4242.</div>\n </div>\n </div>\n <div class="fitem f-tools">\n <div class="ubub">How many people are in this channel, and how many are in PT?</div>\n <div class="acard"><div class="atxt">23 members in #support. 9 of them are in Pacific Time.</div></div>\n <div class="actionline"><span class="ok">â</span><span><b>channel.members</b> read from Slack context \xb7 TOOL_CALL</span></div>\n </div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">Dana approved this from her phone. The thread updated the moment she did.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n <div class="react" data-as="react"><span>â 2</span><span>+1 3</span></div>\n <div class="tmeta" data-as="react">3 replies \xb7 today at 2:16 PM</div>\n </div>\n </div>\n <div class="srow" data-as="react">\n <div class="avat hum">DK</div>\n <div style="min-width:0;">\n <div class="sender">Dana K.<span class="time">2:16 PM</span></div>\n <div class="stxt">Approved. Refund is on its way to the customer.</div>\n </div>\n </div>\n </div><div class="thread-rich"><div class="srow"><div class="avat hum">DK</div><div style="min-width:0;"><div class="sender">Dana K.<span class="time">2:13 PM</span></div><div class="stxt">Analyze our Q3 vendor spend</div></div></div><div class="srow"><div class="avat"><i></i></div><div style="min-width:0;"><div class="sender">
1Vendor Agent<span class="badge">APP</span><span class="time">2:14 PM</span></div><div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div><div class="gcard" style="max-width:420px;margin-top:8px"><div class="pierow"><svg class="pie" viewBox="0 0 40 40" aria-hidden="true"><g class="pg"><circle class="pbg" cx="20" cy="20" r="15.915"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle></g><text class="pt" x="20" y="19.6">$184.2k</text><text class="pt2" x="20" y="24.4">TOTAL</text></svg><div class="plegend"><div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div><div class="pl"><i style="background:#189370"></i><span>Salesforce</span><b>$31.2k</b></div><div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div><div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div><div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div></div></div></div></div></div><div class="srow"><div class="avat hum">DK</div><div style="min-width:0;"><div class="sender">Dana K.<span class="time">2:15 PM</span></div><div class="stxt">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span></div></div></div><div class="streamline"><span data-stream="Reparsed with the new sheet."></span><span class="scaret"></span></div></div></div>\n <div class="composer">Reply in threadâ¦<span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span></div>\n </div>\n </div>\n </section>\n\n<section class="mock m-web" data-surface="web" aria-label="Web app sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/react.svg" alt=""><span>React</span></span>\n <div class="mbody">\n <div class="chrome"><i></i><i></i><i></i><span class="url"><span class="u-base">app.acme.com/orders</span><span class="u-tools">app.acme.com/expenses</span></span></div>\n <div class="app">\n <div class="nav"><i></i><i></i><i></i><i></i><i></i><i></i></div>\n <div class="main"><div class="app-base">\n <div class="ttl"></div>\n \n <div class="row"></div><div class="row short"></div><div class="row"></div>\n <div class="blk"></div>\n <div class="row short"></div><div class="row"></div><div class="row short"></div>\n <div class="blk tall"></div>\n <div class="row"></div><div class="row short"></div>\n </div><div class="app-tools"><div class="xp-title">Expenses</div><div class="xp-filters"><span class="xp-chip">Top 10 \xb7 by amount</span><span class="xp-chip">Last 30 days</span><span class="xp-added">added by agent</span></div><div class="xp-row"><span>AWS \xb7 Compute</span><b>$12,400</b></div><div class="xp-row"><span>Salesforce \xb7 Licenses</span><b>$8,150</b></div><div class="xp-row"><span>Datadog \xb7 Observability</span><b>$3,900</b></div><div class="xp-row"><span>Snowflake \xb7 Storage</span><b>$2,750</b></div><div class="xp-row"><span>Figma \xb7 Seats</span><b>$1,240</b></div><div class="xp-row"><span>Linear \xb7 Seats</span><b>$890</b></div><div class="xp-more">4 moreâ¦</div></div></div>\n <div class="side"><div class="thread-base">\n <div class="ubub">Where\'s my refund? Order #4821</div>\n <div class="acard" data-as="acard">\n <div class="atxt" data-as-type>Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n <div class="fitem f-genui">\n <div class="gcard" data-as="gui">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="approve">\n <div class="alab">Human_Input</div>\n <div class="aq">How should we send your $86.40?</div>\n <div class="opt sel">Original card \xb7 Visa \xb7\xb7 4242</div>\n <div class="opt">Store credit, instant</div>\n <div class="afree">Or type something elseâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="ubub">Can you open order #7130 too?</div>\n <div class="acard">\n <div class="atxt">Order #7130 isn’t on your account, so I can’t open it. Ask about one of your orders.</div>\n </div>\n </div>\n <div class="fitem f-tools"><div class="ubub">Show the 10 most expensive charges this month</div><div class="acard"><div class="atxt">I can filter the Expenses page down to those. Take you there?</div></div><div class="hitl-mini"><span class="opt sel">
1Yes, take me there</span><span class="opt">Stay here</span></div><div class="acard"><div class="atxt">Here you are. AWS alone is over a third of the month.</div></div></div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">You approved this on your phone a minute ago. Everything here is already up to date.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n \n <div class="askbar" data-as="react">Ask anythingâ¦<span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span></div></div>\n<div class="thread-rich">\n<div class="ubub">Analyze our Q3 vendor spend</div>\n<div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div>\n<div class="gcard">\n<div class="pierow">\n<svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n<g class="pg">\n<circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n<circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle>\n<circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle>\n<circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle>\n<circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle>\n<circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle>\n</g>\n<text class="pt" x="20" y="19.6">$184.2k</text>\n<text class="pt2" x="20" y="24.4">TOTAL</text>\n</svg>\n<div class="plegend">\n<div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div>\n<div class="pl"><i style="background:#189370"></i><span>Salesforce</span><b>$31.2k</b></div>\n<div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div>\n<div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div>\n<div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div>\n</div>\n</div>\n</div>\n<div class="ubub">Anything we’re overpaying for?</div>\n<div class="aplain">Datadog looks high for your usage, and 3 licenses appear unused.</div>\n<div class="ubub">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span></div>\n<div class="streamline"><span data-stream="Reparsed with the new sheet."></span><span class="scaret"></span></div>\n</div>\n </div>\n </div>\n </div>\n </section>\n\n<section class="mock m-ios" data-surface="ios" aria-label="iOS sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/ios.svg" alt=""><span>iOS</span></span>\n <div class="mbody">\n <div class="istatus"><b>9:41</b><span class="idots"><i></i><i></i><i></i></span></div>\n <div class="inav"><span class="iback">‹</span><div class="ititl">Acme Support<span>agent \xb7 online</span></div><span class="iavat"><i></i></span></div>\n <div class="imsgs"><div class="thread-base">\n <div class="iub">Where’s my refund? Order #4821</div>\n <div class="acard">\n <div class="atxt">Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n \n <div class="fitem f-genui">\n <div class="gcard">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="approve">\n <div class="alab">Human_Input</div>\n <div class="aq">How should we send your $86.40?</div>\n <div class="opt sel">Original card \xb7 Visa \xb7\xb7 4242</div>\n <div class="opt">Store credit, instant</div>\n <div class="afree">Or type something elseâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="ubub">Can you open order #7130 too?</div>\n <div class="acard">\n <div class="atxt">Order #7130 isn’t on your account, so I can’t open it. Ask about one of your orders.</div>\n </div>\n </div>\n <div class="fitem f-tools">\n <div class="toolline"><span class="ok">â</span><span><b>refund.issue</b> executed in-app \xb7 TOOL_CALL</span></div>\n </div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">You started this on the web dashboard. The conversation carried over, mid-run.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n </div><div class="thread-rich"><div class="iub">Analyze our Q3 vendor spend</div><div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div><div class="gcard"><div class="pierow"><svg class="pie" viewBox="0 0 40 40" aria-hidden="true"><g class="pg"><circle class="pbg" cx="20" cy="20" r="15.915"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle></g><text class="pt" x="20" y="19.6">$184.2k</text><text class="pt2" x="20" y="24.4">TOTAL</text></svg><div class="plegend"><div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div><div class="pl"><i style="background:#189370"></i><span>
1Salesforce</span><b>$31.2k</b></div><div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div><div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div><div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div></div></div></div><div class="iub">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span></div><div class="streamline"><span data-stream="Reparsed with the new sheet."></span><span class="scaret"></span></div></div></div>\n <div class="ibar"><span class="ifield">Message</span><span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span><span class="isend">↑</span></div>\n <div class="homebar"></div>\n </div>\n </section>\n\n<section class="mock m-android" data-surface="android" aria-label="Android sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/android.svg" alt=""><span>Android</span></span>\n <div class="mbody">\n <div class="astatus"><b>9:41</b><span class="adots"><i></i><i></i><i></i></span></div>\n <div class="abar"><span class="aback">←</span><span class="aav"><i></i></span><div class="atit"><b>Acme Support</b><span>agent \xb7 online</span></div><span class="amenu">⋮</span></div>\n <div class="msgs"><div class="thread-base">\n <div class="aub">Where’s my refund? Order #4821</div>\n <div class="acard">\n <div class="atxt">Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n \n <div class="fitem f-genui">\n <div class="gcard">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="approve">\n <div class="alab">Human_Input</div>\n <div class="aq">How should we send your $86.40?</div>\n <div class="opt sel">Original card \xb7 Visa \xb7\xb7 4242</div>\n <div class="opt">Store credit, instant</div>\n <div class="afree">Or type something elseâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="aub">Can you open order #7130 too?</div>\n <div class="acard">\n <div class="atxt">Order #7130 isn’t on your account, so I can’t open it. Ask about one of your orders.</div>\n </div>\n </div>\n <div class="fitem f-tools">\n <div class="toolline"><span class="ok">â</span><span><b>refund.issue</b> executed in-app \xb7 TOOL_CALL</span></div>\n </div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">You started this on the web dashboard. The conversation carried over, mid-run.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n </div><div class="thread-rich"><div class="aub">Analyze our Q3 vendor spend</div><div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div><div class="gcard"><div class="pierow"><svg class="pie" viewBox="0 0 40 40" aria-hidden="true"><g class="pg"><circle class="pbg" cx="20" cy="20" r="15.915"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle></g><text class="pt" x="20" y="19.6">$184.2k</text><text class="pt2" x="20" y="24.4">TOTAL</text></svg><div class="plegend"><div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div><div class="pl"><i style="background:#189370"></i><span>
1Salesforce</span><b>$31.2k</b></div><div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div><div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div><div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div></div></div></div><div class="aub">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span></div><div class="streamline"><span data-stream="Reparsed with the new sheet."></span><span class="scaret"></span></div></div></div>\n <div class="ainput"><span class="afield">Message<span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span></span><span class="asend">↑</span></div>\n <div class="navpill"></div>\n </div>\n </section>\n\n<section class="mock m-teams" data-surface="teams" aria-label="Microsoft Teams sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/teams.svg" alt=""><span>Teams</span></span>\n <div class="mbody">\n <div class="rail"><i></i><i></i><i></i><i></i></div>\n <div class="body">\n <div class="bhead">Refunds \xb7 General <span>\xb7 Acme Inc</span></div>\n <div class="msgs"><div class="thread-base">\n <div class="tmsg">\n <div class="tavat hum">DK</div>\n <div>\n <div class="tname">Dana K. \xb7 2:13 PM</div>\n <div class="tbub">Where\'s the refund for order #4821?</div>\n </div>\n </div>\n <div class="tmsg">\n <div class="tavat bot"><i></i></div>\n <div style="min-width:0;">\n <div class="tname">Refund Agent \xb7 2:14 PM</div>\n <div class="acard">\n <div class="atxt">Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n \n <div class="fitem f-genui">\n <div class="adaptive">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="adaptive">\n <div class="attl">Refund #4821 needs a decision</div>\n <div class="aq">Amount is above the $50 auto-limit.</div>\n <div class="opt sel">Approve full $86.40</div>\n <div class="opt">Approve $69.60, keep shipping</div>\n <div class="afree">Or reply with a noteâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="ubub">What card did they pay with?</div>\n <div class="acard">\n <div class="atxt">Full card numbers aren’t in your permissions. I can share the last 4: \xb7\xb7 4242.</div>\n </div>\n </div>\n <div class="fitem f-tools">\n <div class="ubub">How many people are in this team, and how many are in PT?</div>\n <div class="acard"><div class="atxt">12 members in Refunds \xb7 General. 5 of them are in Pacific Time.</div></div>\n <div class="toolline"><span class="ok">â</span><span><b>team.roster</b> read from Teams context \xb7 TOOL_CALL</span></div>\n </div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">Approved from mobile just now. This thread is already up to date.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n </div>\n </div>\n </div><div class="thread-rich"><div class="tmsg"><div class="tavat hum">DK</div><div><div class="tname">Dana K. \xb7 2:13 PM</div><div class="tbub">Analyze our Q3 vendor spend</div></div></div><div class="tmsg"><div class="tavat bot"><i></i></div><div style="min-width:0;"><div class="tname">Vendor Agent \xb7 2:14 PM</div><div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div><div class="trichcard"><div class="pierow"><svg class="pie" viewBox="0 0 40 40" aria-hidden="true"><g class="pg"><circle class="pbg" cx="20" cy="20" r="15.915"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle></g><text class="pt" x="20" y="19.6">$184.2k</text><text class="pt2" x="20" y="24.4">TOTAL</text></svg><div class="plegend"><div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div><div class="pl"><i style="background:#189370"></i><span>
1Salesforce</span><b>$31.2k</b></div><div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div><div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div><div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div></div></div></div></div></div><div class="tmsg"><div class="tavat hum">DK</div><div><div class="tname">Dana K. \xb7 2:15 PM</div><div class="tbub">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span></div></div></div><div class="streamline"><span data-stream="Reparsed with the new sheet."></span><span class="scaret"></span></div></div></div>\n <div class="composer">Type a message<span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span></div>\n </div>\n </div>\n </section>\n\n<section class="mock m-wa" data-surface="whatsapp" aria-label="WhatsApp sub-hero">\n <span class="chip tag"><img src="/images/home/train-map/whatsapp.svg" alt=""><span>WhatsApp</span></span>\n <div class="mbody">\n <div class="whead">\n <span class="wavat">A</span>\n <div class="wname">Acme Support <span>Business account \xb7 agent-assisted</span></div>\n </div>\n <div class="msgs"><div class="thread-base">\n <div class="green">Where\'s my refund? Order #4821<span class="wmeta">14:02 ââ</span></div>\n <div class="acard">\n <div class="atxt">Refund approved: $86.40 back on your Visa, 3 - 5 days.</div>\n </div>\n \n <div class="fitem f-genui">\n <div class="gcard">\n <div class="pierow">\n <svg class="pie" viewBox="0 0 40 40" aria-hidden="true">\n <g class="pg">\n <circle class="pbg" cx="20" cy="20" r="15.915"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="69.4 30.6" stroke-dashoffset="0"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="17.9 82.1" stroke-dashoffset="-70.9"></circle>\n <circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="8.2 91.8" stroke-dashoffset="-90.3"></circle>\n </g>\n <text class="pt" x="20" y="21.8">$86.40</text>\n </svg>\n <div class="plegend">\n <div class="pl"><i style="background:#6666FC"></i><span>Item</span><b>$61.20</b></div>\n <div class="pl"><i style="background:#189370"></i><span>Shipping</span><b>$16.80</b></div>\n <div class="pl"><i style="background:#FFAC4D"></i><span>Tax</span><b>$8.40</b></div>\n </div>\n</div>\n </div>\n </div>\n <div class="fitem f-hitl">\n <div class="approve">\n <div class="alab">Human_Input</div>\n <div class="aq">How should we send your $86.40?</div>\n <div class="opt sel">Original card \xb7 Visa \xb7\xb7 4242</div>\n <div class="opt">Store credit, instant</div>\n <div class="afree">Or type something elseâ¦</div>\n </div>\n </div>\n <div class="fitem f-auth">\n <div class="ubub">Can you open order #7130 too?</div>\n <div class="acard">\n <div class="atxt">Order #7130 isn’t on your account, so I can’t open it. Ask about one of your orders.</div>\n </div>\n </div>\n <div class="fitem f-tools">\n <div class="toolline"><span class="ok">â</span><span><b>refund.issue</b> executed \xb7 TOOL_CALL</span></div>\n </div>\n <div class="fitem f-state"><div class="acard"><div class="atxt">Approved on the web dashboard. This chat updated instantly.</div></div><div class="sync-chip">STATE_DELTA \xb7 synced across devices</div></div>\n <div class="green">Track refund<span class="wmeta">14:03 ââ</span></div>\n <div class="acard">\n <div class="atxt">On its way, arriving Thu, Mar 12. I\'ll message you here the moment it lands.</div>\n </div>\n </div><div class="thread-rich"><div class="green">Analyze our Q3 vendor spend<span class="wmeta">14:02 ââ</span></div><div class="acard"><div class="atxt">Parsed 47 vendors. Top spend:</div></div><div class="gcard" style="max-width:82%"><div class="pierow"><svg class="pie" viewBox="0 0 40 40" aria-hidden="true"><g class="pg"><circle class="pbg" cx="20" cy="20" r="15.915"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#6666FC" stroke-dasharray="28.4 71.6" stroke-dashoffset="0"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#189370" stroke-dasharray="16.9 83.1" stroke-dashoffset="-28.4"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#FFAC4D" stroke-dasharray="6.9 93.1" stroke-dashoffset="-45.3"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#E3B14B" stroke-dasharray="4.8 95.2" stroke-dashoffset="-52.2"></circle><circle class="ps" cx="20" cy="20" r="15.915" stroke="#C4C4D2" stroke-dasharray="42.8 57.2" stroke-dashoffset="-57"></circle></g><text class="pt" x="20" y="19.6">$184.2k</text><text class="pt2" x="20" y="24.4">TOTAL</text></svg><div class="plegend"><div class="pl"><i style="background:#6666FC"></i><span>AWS</span><b>$52.4k</b></div><div class="pl"><i style="background:#189370"></i><span>
1Salesforce</span><b>$31.2k</b></div><div class="pl"><i style="background:#FFAC4D"></i><span>Datadog</span><b>$12.8k</b></div><div class="pl"><i style="background:#E3B14B"></i><span>Figma</span><b>$8.9k</b></div><div class="pl"><i style="background:#C4C4D2"></i><span>Other</span><b>$78.9k</b></div></div></div></div><div class="green">Use the updated spreadsheet instead<span class="fchip"><svg viewBox="0 0 12 14" aria-hidden="true"><path d="M2 1h5.5L11 4.5V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z" fill="#fff" stroke="#189370" stroke-width="1.2"/><path d="M3.5 6.5h5M3.5 8.7h5M6 6.5v4.2" stroke="#189370" stroke-width="1.1"/></svg>q3-vendors.xlsx<i>2.1 MB</i></span><span class="wmeta">14:03 ââ</span></div><div class="acard wa-chunk" data-chunk="1"><div class="atxt">Reparsed with the new sheet.</div></div><div class="acard wa-chunk" data-chunk="2"><div class="atxt">Same picture. Datadog still looks high for your usage.</div></div></div></div>\n <div class="winput"><i></i><span class="cmic"><svg viewBox="0 0 14 14" aria-hidden="true"><rect x="5" y="1.2" width="4" height="7.2" rx="2" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3.2 6.8a3.8 3.8 0 0 0 7.6 0M7 10.6v2.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span></div>\n </div>\n </section>'.matchAll(/<section class="mock\b[^>]*data-surface="([^"]+)"[\s\S]*?<\/section>/g),e=>{let[a,s]=e;return[s,a.replace(/<span data-stream="([^"]*)"><\/span>/g,'<span data-stream="$1">$1</span>')]})),I={ui:"Chat UI",genui:"Generative UI",hitl:"HITL Approvals",tools:"Frontend tools",auth:"User auth",state:"Shared state"},E={"--sans":"var(--font-plus-jakarta), system-ui, sans-serif","--cond":"var(--font-spline-sans-mono), ui-monospace, monospace","--mono":"var(--font-spline-sans-mono), ui-monospace, monospace"},M=[{id:"copilotkit",name:"CopilotKit",href:"https://github.com/CopilotKit/CopilotKit",logo:"/icons/copilot-kit-logo.svg",logoWidth:110},{id:"agui",name:"AG-UI",href:"https://github.com/ag-ui-protocol/ag-ui",logo:"/images/home/train-map/agui-kite.png",logoWidth:18,label:"AG-UI"}],P=e=>e>=1e3?"".concat((e/1e3).toFixed(1),"k"):"".concat(e);function B(e){let{githubStars:a}=e,s=(0,i.sf)(),[o,c]=(0,n.useState)(!1),d=(0,n.useRef)(null),p=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(!o)return;let e=e=>{var a;(null==(a=d.current)?void 0:a.contains(e.target))||c(!1)},a=e=>{if("Escape"===e.key){var a;c(!1),null==(a=p.current)||a.focus()}};return document.addEventListener("mousedown",e),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",a)}},[o]),(0,t.jsxs)("div",{className:"build-stars-wrap",ref:d,children:[(0,t.jsxs)("button",{type:"button",className:"build-stars",ref:p,"aria-expanded":o,"aria-label":"".concat(P(a.copilotkit+a.agui)," GitHub stars across CopilotKit and AG-UI"),onClick:()=>c(e=>!e),children:[(0,t.jsx)(l.hL4,{"aria-hidden":"true"}),P(a.copilotkit+a.agui)]}),o&&(0,t.jsx)("div",{className:"build-stars-pop",children:M.map(e=>(0,t.jsxs)("a",{href:e.href,target:"_blank",rel:"noopener noreferrer","aria-label":"".concat(e.name," on GitHub, ").concat(P(a[e.id])," stars"),onClick:()=>null==s?void 0:s.capture("homepage.github_stars.click",{repo:e.id}),children:[(0,t.jsxs)("span",{className:"pop-brand",children:[(0,t.jsx)(r.default,{src:e.logo,alt:"label"in e?"":e.name,width:e.logoWidth,height:20}),"label"in e?(0,t.jsx)("span",{children:e.label}):null]}),(0,t.jsx)("b",{children:P(a[e.id])})]},e.id))})]})}function D(e){var a;let{githubStars:s}=e,l=(0,i.sf)(),p=(0,n.useRef)(null),u=(0,n.useRef)(null),[h,v]=(0,n.use
1State)("ui"),[m,x]=(0,n.useState)("web"),[k,A]=(0,n.useState)("react"),[j,M]=(0,n.useState)(!1),[P,D]=(0,n.useState)(!1),[R,F]=(0,n.useState)("code"),O=j&&!P,[z,U]=(0,n.useState)(!1),$=O&&z,H=function(e,a,s){let t=f(e),n=t.includes(a)?a:t[0],i="channels"===n?function(e,a){let s="whatsapp"===e,t="teams"===e?"Teams":s?"WhatsApp":"Slack",n="".concat(b,"/reference/channels/"),i="";return"ui"===a?(n+=s?"sdk/direct-adapters":"functions/createChannel",i=s?'// WhatsApp talks to your channel directly\nconst channel = createChannel({\n name: "support",\n identifyUser: "platform",\n agent: makeAgent,\n adapters: [\n whatsapp({\n accessToken: process.env.WHATSAPP_ACCESS_TOKEN!,\n phoneNumberId: process.env.WHATSAPP_PHONE_NUMBER_ID!,\n appSecret: process.env.WHATSAPP_APP_SECRET!,\n verifyToken: process.env.WHATSAPP_VERIFY_TOKEN!,\n })\n ],\n});\nchannel.onMessage(async ({ thread }) => {\n await thread.runAgent();\n});\n// CopilotRuntime({ intelligence, channels: [channel] })':"// connect ".concat(t,' through CopilotKit Intelligence\nconst channel = createChannel({\n name: "support",\n identifyUser: "platform",\n agent: makeAgent,\n});\n\n// every incoming message runs your agent\nchannel.onMessage(async ({ thread }) => {\n await thread.runAgent();\n});\n\n// CopilotRuntime({ intelligence, channels: [channel] })')):"genui"===a?(n+="components/Message",i="// generative UI, rendered as native ".concat(t," content\nchannel.onMessage(async ({ thread }) => {\n await thread.post(\n <Message>\n <Section>Refund #4821: $86.40 approved.</Section>\n </Message>\n );\n});")):"hitl"===a?(n=s?"".concat(b,"/reference/channels/components/Button"):"".concat(b,"/").concat(e,"/interactive"),i="// pause the agent, ask a human in ".concat(t,', resume\nchannel.onInterrupt("approval", async ({ thread }) => {\n await thread.post(\n <Message>\n <Actions>\n <Button\n onClick={async ({ thread }) => {\n await thread.resume({ approved: true });\n }}\n >\n Approve refund\n </Button>\n </Actions>\n </Message>\n );\n});')):"tools"===a?(n+="functions/defineChannelTool",i="// a tool the agent can call from ".concat(t,'\nconst lookupOrder = defineChannelTool({\n name: "lookup_order",\n description: "Read an order by ID.",\n parameters: z.object({ orderId: z.string() }),\n handler: async ({ orderId }) => getOrder(orderId),\n});\n\nchannel.tool(lookupOrder); // before startup')):"auth"===a?(n=s?"".concat(b,"/reference/channels/functions/createChannel"):"".concat(b,"/").concat(e,"/identity-and-memory"),i="// map ".concat(t,' accounts to your own users\nconst channel = createChannel({\n name: "support",\n agent: makeAgent,\n identifyUser: async ({ provider, tenant, actor }) =>\n linkedAccounts.get(\n provider + ":" + tenant.id + ":" + actor.id\n ) ?? null,\n').concat(s?" adapters: [whatsappAdapter], // as in Chat UI\n":"","});")):(n+="classes/Thread",i='// conversation state, typed by the store.state schema\nchannel.onMessage(async ({ thread }) => {\n const state = await thread.state();\n\n await thread.setState({ ...state, focus: "returns" });\n await thread.runAgent();\n});'),{code:i,href:n,label:"ui"===a?"Channels in Docs":y[a]}}(e,s):function(e,a){let s="angular"===e,t={react:"",angular:"angular/",vue:"vue/",native:"react-native/"}[e],n={ui:"reference/".concat(t,"components/CopilotChat"),genui:"reference/".concat(t).concat(s?"functions/registerComponent":"hooks/useComponent"),hitl:"reference/".concat(t).concat(s?"functions/registerHumanInTheLoop":"hooks/useHumanInTheLoop"),tools:"reference/".concat(t).concat(s?"functions/registerFrontendTool":"hooks/useFrontendTool"),auth:s?"angular/auth":"auth",state:"reference/".concat(t).concat(s?"functions/injectAgentStore":"hooks/useAgent")};return{code:w[e][a],href:"".concat(b,"/").concat(n[a]),label:y[a],highlightedLines:"react"===e&&"state"===a?[4,7,8,9,10]:void 0}}(n,s);return"genui"===s?{...i,href:"/generative-ui-spectrum"}:i}(m,k,h),q="genui"===h||"ui"===h&&"web"===m,K=f(m),V=null!=(a=L.find(e=>e.id===m))?a:L[0];(0,n.useEffect)(()=>{var e;let a=p.current;if(!a)return;let s=window.matchMedia("(prefers-reduced-motion: reduce)"),t=!1,n=()=>M(t&&!document.hidden&&!s.matches),i="undefined"==typeof IntersectionObserver?null:new IntersectionObserver(e=>{let a=e[e.length-1];a&&(t=a.isIntersecting,n())});return null==i||i.observe(a),null==(e=s.addEventListener)||e.call(s,"change",n),document.addEventListener("visibilitychange",n),(
1)=>{var e;null==i||i.disconnect(),null==(e=s.removeEventListener)||e.call(s,"change",n),document.removeEventListener("visibilitychange",n)}},[]),(0,n.useEffect)(()=>{let e=u.current;if(!e||"undefined"==typeof IntersectionObserver)return;let a=new IntersectionObserver(e=>{let a=e[e.length-1];a&&U(a.isIntersecting)});return a.observe(e),()=>a.disconnect()},[]);let W=(e,a)=>{v(e),null==l||l.capture("homepage.build.feature_selected",{feature:e,surface:m,interaction:a})},G=e=>{x(e),A(f(e)[0]),null==l||l.capture("homepage.build.surface_selected",{feature:h,surface:e})},J=(e,a)=>{null==l||l.capture("homepage.build.resource_clicked",{resource:e,href:a,feature:h,surface:m})};(0,n.useEffect)(()=>{var e;let a,s=()=>{var e,a;return null!=(a=null==(e=p.current)?void 0:e.querySelectorAll(".stage [data-stream]"))?a:[]},t=s()[0];if(!t)return;let n=null!=(e=t.getAttribute("data-stream"))?e:"";if("ui"!==h||!$)return void s().forEach(e=>e.textContent=n);let i=!1,r=e=>{i||(s().forEach(a=>a.textContent=n.slice(0,e)),a=e<n.length?window.setTimeout(()=>r(e+1),55):window.setTimeout(()=>r(0),3600))};return a=window.setTimeout(()=>r(0),900),()=>{i=!0,clearTimeout(a)}},[$,m,h]),(0,n.useEffect)(()=>{let e,a=e=>{var a;return null==(a=p.current)?void 0:a.querySelectorAll(".stage [data-chunk]").forEach(a=>{a.classList.toggle("on",Number(a.getAttribute("data-chunk"))<=e)})};if("whatsapp"!==m||"ui"!==h||!$)return void a(2);let s=!1,t=()=>{s||(a(0),e=window.setTimeout(()=>{a(1),e=window.setTimeout(()=>{a(2),e=window.setTimeout(t,3800)},1100)},800))};return t(),()=>{s=!0,clearTimeout(e)}},[$,m,h]);let Z=e=>{var a;let s=S.findIndex(e=>e.id===h),t=S[(s+e+S.length)%S.length];W(t.id,"keyboard"),null==(a=document.getElementById("tm2-featrow-".concat(t.id)))||a.focus()};return(0,t.jsx)("section",{ref:p,id:"build-v2","aria-labelledby":"build-v2-heading",className:"w-full",style:E,"data-animations":O?"running":"paused",children:(0,t.jsxs)("div",{className:"wrap",children:[(0,t.jsx)("div",{className:"build-header","data-home-entrance":"",children:(0,t.jsx)("div",{className:"platsign",children:(0,t.jsxs)("div",{className:"plat-txt",children:[(0,t.jsxs)("h2",{id:"build-v2-heading",children:["Build fast. ",(0,t.jsx)("strong",{children:"Make it yours."})]}),(0,t.jsx)("p",{className:"build-subtitle",children:"Drop in a ready-made agent interface, adapt it with your design system and existing app components, or build with low-level, headless APIs for full programmatic control."})]})})}),(0,t.jsxs)("div",{className:"build-heading-actions","data-home-entrance":"",children:[(0,t.jsx)("div",{className:"build-prompt",children:(0,t.jsx)(d.default,{surface:(0,N.xH)(m)?"website_home_build_surface_picker":"website_home_build",createPrompt:(0,N.xH)(m)?()=>(0,N.Cz)(m):void 0,tone:"dark"},m)}),(0,t.jsxs)("div",{className:"build-resource-links","aria-label":"Build resources",children:[s&&(0,t.jsx)(B,{githubStars:s}),(0,t.jsxs)("a",{href:"https://dojo.showcase.copilotkit.ai/?integration=langgraph-python&demo=beautiful-chat",target:"_blank",rel:"noopener noreferrer",onClick:()=>{J("dojo","https://dojo.showcase.copilotkit.ai/?integration=langgraph-python&demo=beautiful-chat"),null==l||l.capture("homepage.dojo_cta.view_dojo",{location:"home_build"})},children:["Try in Dojo ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"}),(0,t.jsx)(o.F,{className:"build-link-icon",size:20,"aria-hidden":"true"})]}),(0,t.jsxs)("a",{href:"https://docs.copilotkit.ai/",target:"_blank",rel:"noopener noreferrer",onClick:()=>J("docs","https://docs.copilotkit.ai/"),children:["Explore Docs ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"}),(0,t.jsx)(o.F,{className:"build-link-icon",size:20,"aria-hidden":"true"})]})]})]}),(0,t.jsxs)("div",{className:"build-demo",children:[(0,t.jsxs)("div",{className:"surface-control",children:[(0,t.jsx)("div",{className:"build-control-head",children:(0,t.jsx)("span",{children:"Choose a user surface"})}),(0,t.jsx)("div",{className:"surface-picker-body",children:(0,t.jsxs)("div",{className:"selrow",role:"group","aria-label":"Choose a user surface",children:[L.map(e=>(0,t.jsxs)("button",{className:"cardface","data-surface":e.id,type:"button","aria-pressed":e.id===m,onClick:()=>G(e.id),children:[(0,t.jsx)(r.default,{src:e.icon,alt:"",width:24,height:24}),(0,t.jsx)("span",{className:"cfname",children:e.name})]},e.id)),(0,t.jsx)("a",{className:"surface-more",href:"https://docs.copilotkit.ai/reference/channels/sdk/direct-adapter
1s",target:"_blank",rel:"noopener noreferrer",onClick:()=>J("more_surfaces","https://docs.copilotkit.ai/reference/channels/sdk/direct-adapters"),children:"+ more"})]})})]}),(0,t.jsxs)("div",{className:"capability-control featpanel",children:[(0,t.jsx)("div",{className:"build-control-head",children:(0,t.jsx)("span",{children:"Choose a capability"})}),(0,t.jsxs)("div",{className:"capability-row",children:[(0,t.jsx)("div",{className:"featlist",role:"radiogroup","aria-label":"Choose a build feature",children:S.map((e,a)=>(0,t.jsxs)("button",{id:"tm2-featrow-".concat(e.id),className:"featrow",role:"radio","aria-checked":e.id===h,tabIndex:e.id===h?0:-1,"data-feature":e.id,type:"button","aria-label":"tools"===e.id&&"channels"===k?"Channel tools: the agent calls tools in your channel":"".concat(I[e.id],": ").concat(e.name,", ").concat(e.detail),onClick:()=>W(e.id,"click"),onKeyDown:e=>{"ArrowDown"===e.key||"ArrowRight"===e.key?(e.preventDefault(),Z(1)):"ArrowUp"===e.key||"ArrowLeft"===e.key?(e.preventDefault(),Z(-1)):("Home"===e.key||"End"===e.key)&&(e.preventDefault(),Z("Home"===e.key?-a:S.length-a-1))},children:[(0,t.jsx)(r.default,{src:"/images/home/build-redesign/".concat("icon"in e?e.icon:"".concat(e.id,".svg")),alt:"",width:24,height:24}),(0,t.jsx)("span",{className:"fname",children:"tools"===e.id&&"channels"===k?"Channel tools":I[e.id]})]},e.id))}),(0,t.jsxs)("a",{className:"featmore",href:"https://docs.copilotkit.ai/",target:"_blank",rel:"noopener noreferrer",onClick:()=>J("all_features","https://docs.copilotkit.ai/"),children:["and much more ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"})]})]})]}),(0,t.jsx)("div",{className:"build-view-toggle",role:"group","aria-label":"Show code or example",children:["code","example"].map(e=>(0,t.jsx)("button",{type:"button","aria-pressed":R===e,onClick:()=>F(e),children:"code"===e?"Code":"Example"},e))}),(0,t.jsxs)("div",{className:"buildsplit","data-mobile-view":R,children:[(0,t.jsxs)("div",{className:"codecard",role:"region","aria-label":"SDK code examples",children:[(0,t.jsx)("div",{className:"webfw",role:"tablist","aria-label":"".concat(V.name," SDK"),children:K.map(e=>(0,t.jsxs)("button",{type:"button",role:"tab",id:"build-sdk-".concat(e),"aria-controls":"build-code-panel","aria-selected":e===k,className:"webfw-item","data-primary":e===k,tabIndex:e===k?0:-1,onKeyDown:a=>{var s;let t=K.indexOf(e),n="ArrowRight"===a.key?(t+1)%K.length:"ArrowLeft"===a.key?(t+K.length-1)%K.length:"Home"===a.key?0:"End"===a.key?K.length-1:-1;if(n<0)return;a.preventDefault();let i=K[n];A(i),null==(s=document.getElementById("build-sdk-".concat(i)))||s.focus(),null==l||l.capture("homepage.build.framework_selected",{surface:m,feature:h,framework:i})},onClick:()=>{A(e),null==l||l.capture("homepage.build.framework_selected",{surface:m,feature:h,framework:e})},children:[(0,t.jsx)(r.default,{src:_[e].icon,alt:"",width:16,height:16}),_[e].label,"whatsapp"===m?" \xb7 Direct adapter":""]},e))}),(0,t.jsx)("div",{id:"build-code-panel",role:"tabpanel","aria-labelledby":"build-sdk-".concat(k),tabIndex:0,className:"codeview active","data-feature":h,children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:function(e,a){if(!(null==a?void 0:a.length))return C(e);let s=e.split("\n");return s.map((e,i)=>(0,t.jsxs)(n.Fragment,{children:[a.includes(i+1)?(0,t.jsx)("mark",{className:"code-line-highlight",children:C(e)}):C(e),i<s.length-1?"\n":""]},i))}(H.code,H.highlightedLines)})})},"".concat(m,"-").concat(k,"-").concat(h)),(0,t.jsxs)("div",{className:q?"codelink-line codelink-comment":"codelink-line","data-feature":h,children:[q&&(0,t.jsx)("span",{className:"cm","aria-hidden":"true",children:"// "}),(0,t.jsxs)("a",{className:"codelink",href:H.href,target:"_blank",rel:"noopener noreferrer",onClick:()=>J("feature_".concat(h),H.href),children:[H.label,(0,t.jsx)("span",{"aria-hidden":"true",children:" â"}),(0,t.jsx)(c.Q,{className:"build-link-icon",size:20,"aria-hidden":"true"})]})]})]}),(0,t.jsxs)("div",{className:"selstage",children:[(0,t.jsx)("button",{type:"button",className:"demo-playback","aria-controls":"stage",onClick:()=>D(e=>!e),children:P?"Resume demo":"Pause demo"}),(0,t.jsx)("div",{className:"stage-outer",children:(0,t.jsx)("div",{ref:u,className:"stage",id:"stage","data-feature":h,"data-active":m,role:"region",tabIndex:0,"aria-label":"Illustrative ".concat(V.name," application preview"),children:(0,t.jsx)("div",{className:"active-surface",dangerouslySetInnerHTML:{__html:T[m]}},m)})})]})]})]}),(0,t.jsx)(g,{})]})})}},52127:(e,a,s)=>{"use strict";s.d(a,{e:()=>m,l:()=>v,default:()=>f});var t=s(87448),n=s(73605),i=s(94710),r=s(35586),o=s(79688),c=s(39817),l=s(24058),d=s(69111),p=s(23796),u=s(84319),h=s.n(u);function v(e,a){return"Read ".concat("https://copilotkit.ai","/onboarding-prompts/").concat(e," and help me get set up")+(void 0===a?"":" with ".concat(a))+"."}function m(){let e=function(){let e=globalThis.crypto;if("function"==typeof(null==e?void 0:e.randomUUID))return e.randomUUID().replaceAll("-","").slice(0,12);if("function"==typeof(null==e?void 0:e.getRandomValues))return Array.from(e.getRandomValues(new Uint8Array(6)),e=>e.toString(16).padStart(2,"0")).join("");let a="";for(;a.length<12;)a+=Math.floor(16*Math.random()).toString(16);return a.slice(0,12)}();return{runId:e,prompt:v(e)}}function g(){return(0,t.jsxs)("svg",{className:h().roundedCopyIcon,"data-copy-icon":"rounded",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:[(0,t.jsx)("rect",{x:"2.75",y:"8.75",width:"12.5",height:"12.5",rx:"3.75"}),(0,t.jsx)("path",{d:"M8.75 8.75V6.5a3.75 3.75 0 0 1 3.75-3.75h5a3.75 3.75 0 0 1 3.75 3.75v5a3.75 3.75 0 0 1-3.75 3.75h-2.25"})]})}function _(){return(0,t.jsxs)("svg",{className:h().eyeIcon,"data-view-icon":"eye",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:[(0,t.jsx)("path",{d:"M2.01677 10.5943C1.90328 10.4146 1.84654 10.3248 1.81477 10.1862C1.79091 10.0821 1.79091 9.91792 1.81477 9.81382C1.84654 9.67523 1.90328 9.58538 2.01677 9.40568C2.95461 7.9207 5.74617 4.16667 10.0003 4.16667C14.2545 4.16667 17.0461 7.9207 17.9839 9.40568C18.0974 9.58538 18.1541 9.67523 18.1859 9.81382C18.2098 9.91792 18.2098 10.0821 18.1859 10.1862C18.1541 10.3248 18.0974 10.4146 17.9839 10.5943C17.0461 12.0793 14.2545 15.8333 10.0003 15.8333C5.74617 15.8333 2.95461 12.0793 2.01677 10.5943Z"}),(0,t.jsx)("path",{d:"M10.0003 12.5C11.381 12.5 12.5003 11.3807 12.5003 10C12.5003 8.61929 11.381 7.5 10.0003 7.5C8.61962 7.5 7.50034 8.61929 7.50034 10C7.50034 11.3807 8.61962 12.5 10.0003 12.5Z"})]})}function f(){var e;let{createPrompt:a=m,surface:s="website_home_hero",label:u="Copy Prompt",tone:v="light",tabletView:f="text"}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},b=(0,r.sf)(),y=(0,i.usePathname)(),x=(0,p.useId)(),k=(0,p.useId)(),w=(0,p.useRef)(null),A=(0,p.useRef)(null),j=(0,p.useRef)(null),C=(0,p.useRef)(0),[N,S]=(0,p.useState)(!1),[L,T]=(0,p.useState)(null),[I,E]=(0,p.useState)(!1),[M,P]=(0,p.useState)("");function B(e,a){try{null==b||b.capture("docs.intelligence_onboarding_prompt_action_clicked",{from_path:y,onboarding_run_id:e.runId,surface:s,action:a})}catch(e){}}async function D(e,a){let t=++C.current;j.current&&clearTimeout(j.current),S(!1);try{await navigator.clipboard.writeText(e.prompt)}catch(a){if(t!==C.current)return;T(e),E(!0),P("Copy is blocked. Select the prompt and copy it manually.");return}try{null==b||b.capture("docs.intelligence_onboarding_prompt_copied",{from_path:y,onboarding_run_id:e.runId,surface:s,action:a})}catch(e){}t===C.current&&(S(!0),E(!1),P("Prompt copied"),j.current=setTimeout(()=>S(!1),1600))}async function R(){let e=a();B(e,"copy"),await D(e,"copy")}return(0,p.useEffect)(()=>()=>{C.current+=1,j.current&&clearTimeout(j.current)},[]),(0,p.useEffect)(()=>{var e,a,s,t;!L||(null==(e=w.current)?void 0:e.open)||null==(a=w.current)||a.showModal(),L&&I&&(null==(s=A.current)||s.focus(),null==(t=A.current)||t.select())},[L,I]),(0,t.jsxs)("div",{className:[h().root,"dark"===v&&h().dark,"eye"===f&&h().eyeView].filter(
1Boolean).join(" "),"data-testid":"copy-onboarding-prompt-button","data-tone":v,"data-tablet-view":"eye"===f?"eye":void 0,children:[(0,t.jsx)("div",{className:h().pill,role:"group","aria-label":"Agent prompt",children:(0,t.jsxs)("button",{className:h().copy,type:"button","aria-label":"Copy prompt to clipboard",onClick:()=>R(),children:[N?(0,t.jsx)(o.A,{size:16,className:h().check,"aria-hidden":"true"}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(c.A,{size:16,"aria-hidden":"true","data-copy-icon":"square"}),(0,t.jsx)(g,{})]}),(0,t.jsx)("span",{children:u}),(0,t.jsxs)("span",{className:h().logos,"aria-hidden":"true",children:[(0,t.jsx)("span",{className:h().divider}),(0,t.jsx)(n.default,{src:"/icons/prompt-claude.webp",width:30,height:30,alt:""}),(0,t.jsx)(n.default,{src:"/icons/prompt-codex.webp",width:30,height:30,alt:""})]})]})}),(0,t.jsx)("div",{className:h().peek,"data-prompt-peek":"",children:(0,t.jsxs)("button",{className:h().view,type:"button",onClick:function(){let e=a();B(e,"view_prompt"),C.current+=1,j.current&&clearTimeout(j.current),S(!1),E(!1),P(""),T(e)},children:[(0,t.jsx)(l.A,{size:14,"aria-hidden":"true","data-view-icon":"file"}),(0,t.jsx)(_,{}),(0,t.jsx)("span",{"data-view-label":"",children:"View prompt"})]})}),(0,t.jsx)("span",{className:"sr-only",role:"status",children:M}),(0,t.jsxs)("dialog",{ref:w,className:h().dialog,"aria-labelledby":x,"aria-describedby":k,onClose:()=>{T(null),E(!1)},children:[(0,t.jsxs)("div",{className:h().dialogHeading,children:[(0,t.jsx)("h2",{id:x,children:"Agent prompt"}),(0,t.jsx)("button",{className:h().close,type:"button","aria-label":"Close prompt",onClick:()=>{var e;return null==(e=w.current)?void 0:e.close()},children:(0,t.jsx)(d.A,{size:20,"aria-hidden":"true"})})]}),(0,t.jsx)("p",{id:k,className:h().dialogHint,children:"Paste into a coding agent running in your project folder."}),(0,t.jsx)("textarea",{ref:A,"aria-label":"Agent prompt",value:null!=(e=null==L?void 0:L.prompt)?e:"",readOnly:!0,className:h().prompt}),I&&(0,t.jsx)("p",{className:h().error,children:"Copy is blocked. Select the prompt and copy it manually."}),(0,t.jsxs)("button",{className:h().dialogCopy,type:"button",onClick:()=>{if(L)return B(L,"copy_preview"),D(L,"copy_preview")},children:[N?(0,t.jsx)(o.A,{size:16,"aria-hidden":"true"}):(0,t.jsx)(c.A,{size:16,"aria-hidden":"true"})," Copy prompt"]})]})]})}},59818:e=>{e.exports={section:"buyer-case_section__QJ9My",header:"buyer-case_header__ADMo_",title:"buyer-case_title___9mxS",emphasis:"buyer-case_emphasis__uBBvh",intro:"buyer-case_intro__kD6dl",grid:"buyer-case_grid__uArDJ",reason:"buyer-case_reason__hVRtM",iconTile:"buyer-case_iconTile__YZtRV",exportedTile:"buyer-case_exportedTile__R_Lwa",glow:"buyer-case_glow__ODkpX",icon:"buyer-case_icon__PgqHv",text:"buyer-case_text__wHa7J"}},64502:(e,a,s)=>{"use strict";s.d(a,{default:()=>f});var t=s(87448),n=s(11041),i=s(73605),r=s(90802),o=s.n(r);let c="/images/homepage-redesign/learning-process";function l(e){let{name:a,size:s=24}=e;return(0,t.jsx)(i.default,{src:"".concat(c,"/").concat(a,".svg"),width:s,height:s,alt:""})}function d(){let e=(0,n.y)(m);return(0,t.jsxs)("div",{ref:e,className:o().appSketch,"aria-hidden":"true",children:[(0,t.jsxs)("div",{className:o().appWindow,"data-app-content":!0,children:[(0,t.jsxs)("div",{className:o().overview,children:[(0,t.jsx)("b",{children:"Overview"}),(0,t.jsxs)("span",{children:[(0,t.jsx)("span",{"data-week":!0,children:"Last 7 days"}),(0,t.jsx)("span",{"data-month":!0,children:"Last 30 days"}),"â"]})]}),(0,t.jsx)("div",{className:o().metrics,children:[["Revenue","$39K","$426K","2.3%","7%"],["Active users","982","3,628","1%","4%"],["Conversion","15.7%","10.2%","",""]].map(e=>{let[a,s,n,i,r]=e;return(0,t.jsxs)("div",{children:[(0,t.jsx)("label",{children:a}),(0,t.jsx)("span",{"data-week":!0,children:s}),(0,t.jsx)("span",{"data-month":!0,children:n}),(0,t.jsx)("small",{"data-week":!0,children:i}),(0,t.jsx)("small",{"data-month":!0,children:r})]},a)})}),(0,t.jsxs)("div",{className:o().salesChart,"data-sales":!0,children:[(0,t.jsx)("span",{children:"Sales Overview"}),(0,t.jsx)(i.default,{src:"/images/homepage-redesign/learning-process/sales-line-one.svg",width:190,height:96,alt:""})]})]}),(0,t.jsx)("div",{className:o().dateMenu,"data-date-menu":!0,children:["Last 7 days","Last 30 days","Last 90 days","Custom range"].map(e=>(0,t.jsx)("span",{children:e},e))}),(0,t.jsx)("div",{className:o().appCursor,"data-app-cursor":!0,children:(0,t.jsx)(l,{name:"cursor",size:20})})]})}function p(){let e=(0,n.y)(g);return(0,t.jsxs)("div",{ref:e,className:o().chatSketch,"aria-hidden":"true",children:[(0,t.jsxs)("div",{className:o().chatBar,children:["Acme Support ",(0,t.jsx)("span",{children:"\xd7"})]}),(0,t.jsx)("div",{className:o().chatBody,children:(0,t.jsxs)("div",{className:o().chatTranscript,"data-chat-transcript":!0,children:[(0,t.jsx)("div",{className:o().query,"data-query":!0,
1children:"Find flights from SFO to JFK for next Tuesday."}),(0,t.jsx)("div",{className:o().typing,"data-typing":!0,children:"\xb7\xb7\xb7"}),(0,t.jsx)("div",{className:o().toolCall,"data-tool":!0,children:"â search_flights"}),(0,t.jsx)("div",{className:o().flights,"data-flights":!0,children:[["United Airlines","08:00 AM","04:30 PM","$329"],["Delta Airlines","9:45 AM","6:20 PM","$312"]].map(e=>{let[a,s,n,i]=e;return(0,t.jsxs)("div",{children:[(0,t.jsx)("small",{children:a}),(0,t.jsxs)("b",{children:["SFO ",(0,t.jsx)("span",{children:"â"})," JFK"]}),(0,t.jsxs)("div",{className:o().flightTimes,children:[(0,t.jsx)("span",{children:s}),(0,t.jsx)("span",{children:n})]}),(0,t.jsxs)("footer",{children:[(0,t.jsx)("strong",{children:i}),(0,t.jsxs)("span",{children:["Select","Delta Airlines"===a&&(0,t.jsx)("i",{className:o().chatCursor,"data-chat-cursor":!0,children:(0,t.jsx)(l,{name:"cursor",size:16})})]})]})]},a)})})]})}),(0,t.jsxs)("div",{className:o().chatInput,children:["Type message ",(0,t.jsx)("span",{children:"â"})]})]})}function u(){return(0,t.jsx)("div",{className:o().skillsSketch,children:[{name:"analytics-skill.md",state:"improved"},{name:"search-skill.md",state:"created"}].map(e=>{let{name:a,state:s}=e;return(0,t.jsxs)("div",{className:o().skillFile,children:[(0,t.jsxs)("span",{children:[(0,t.jsx)(l,{name:"chevron",size:8}),a]}),(0,t.jsx)("span",{className:o()[s],children:s})]},a)})})}function h(){let e=(0,n.y)(_);return(0,t.jsxs)("div",{ref:e,className:o().datasetSketch,children:[(0,t.jsxs)("div",{className:o().datasetWindow,children:[(0,t.jsxs)("div",{className:o().windowBar,"aria-hidden":"true",children:[(0,t.jsx)("i",{}),(0,t.jsx)("i",{}),(0,t.jsx)("i",{})]}),(0,t.jsx)("div",{className:o().tableHead,children:["Company","Issue Date","Value","Status"].map(e=>(0,t.jsx)("span",{children:e},e))}),(0,t.jsx)("div",{className:o().tableRows,"aria-hidden":"true",children:[["Acme Inc.","09/12/26","$426,000","Active"],["Northstar","09/10/26","$318,500","Pending"],["Vertex Labs","09/08/26","$192,200","Active"],["Atlas Co.","09/05/26","$87,400","Active"]].map((e,a)=>(0,t.jsx)("div",{"data-dataset-row":a,children:e.map((e,a)=>(0,t.jsx)("span",{className:3===a?o().datasetStatus:void 0,children:e},e))},e[0]))})]}),(0,t.jsxs)("div",{className:o().export,"data-export":!0,children:[(0,t.jsx)(l,{name:"export",size:30}),(0,t.jsx)("span",{children:"JSON"})]})]})}function v(e){let{direction:a}=e;return(0,t.jsxs)("div",{className:"".concat(o().connectors," ").concat("out"===a?o().outgoing:""),"aria-hidden":"true",children:[(0,t.jsx)(i.default,{src:"".concat(c,"/desktop-").concat(a,".svg"),width:60,height:170,alt:""}),(0,t.jsx)(i.default,{src:"".concat(c,"/desktop-").concat(a,".svg"),width:60,height:170,alt:""})]})}let m=(e,a)=>{let s=e.utils.selector(a);return e.timeline({paused:!0,defaults:{duration:.45,ease:"power2.out"}}).set(s("[data-month], [data-sales], [data-date-menu], [data-app-cursor]"),{autoAlpha:0}).fromTo(s("[data-app-cursor]"),{x:25,y:20},{x:0,y:0,autoAlpha:1},1).to(s("[data-date-menu]"),{autoAlpha:1},1.8).to(s("[data-app-cursor]"),{y:45,x:-18},2.5).set(s("[data-week]"),{autoAlpha:0,display:"none"},3.1).set(s("[data-month]"),{autoAlpha:1,display:"inline"},3.1).to(s("[data-date-menu], [data-app-cursor]"),{autoAlpha:0},3.8).fromTo(s("[data-sales]"),{y:8},{y:0,autoAlpha:1},4.5).to(s("[data-app-content]"),{autoAlpha:0},6.2).set(s("[data-week]"),{display:"inline",autoAlpha:1},6.8).set(s("[data-month], [data-sales]"),{autoAlpha:0},6.8).set(s("[data-month]"),{display:"none"},6.8).to(s("[data-app-content]"),{autoAlpha:1},7.2)},g=(e,a)=>{let s=e.utils.selector(a);return e.timeline({paused:!0,defaults:{duration:.45,ease:"power2.out"}}).set(s("[data-chat-transcript]"),{y:0}).set(s("[data-typing], [data-tool], [data-flights], [data-chat-cursor]"),{autoAlpha:0}).to(s("[data-typing]"),{autoAlpha:1},1.1).set(s("[data-typing]"),{autoAlpha:0},2.3).to(s("[data-tool]"),{autoAlpha:1},2.3).to(s("[data-chat-transcript]"),{y:-40},3.3).fromTo(s("[data-flights]"),{y:8},{y:0,autoAlpha:1},3.3).fromTo(s("[data-chat-cursor]"),{x:20,y:20},{x:0,y:0,autoAlpha:1},4.6).to(s("[data-chat-cursor]"),{scale:.8,duration:.15,yoyo:!0,repeat:1},5.3).to(s("[data-query], [data-tool], [data-flights], [data-chat-cursor]"),{autoAlpha:0},6.2).set(s("[data-chat-transcript]"),{y:0},6.8).to(s("[data-query]"),{autoAlpha:1},7.2)},_=(e,a)=>{let s=e.utils.selector(a);return e.timeline({paused:!0,defaults:{duration:.45,ease:"power2.out"}}).set(s("[data-export], [data-dataset-row]:not([data-dataset-row='0'])"),{autoAlpha:0}).fromTo(s("[data-dataset-row]:not([data-dataset-row='0'])"),{y:6},{autoAlpha:1,y:0,stagger:.35},1.2).fromTo(s("[data-export]"),{y:10,scale:.94},{y:0,scale:1,autoAlpha:1},3.1)};function f(){return(0,t.jsxs)("section",{className:o().process,"aria-labelledby":"learning-process-title",children:[(0,t.jsxs)("header",{className:o().header,children:[(0,t.jsxs)("h3",{id:"learning-process-title",children:["How automatic ",(0,t.jsx)("strong",{children:"learning works"})]}),(0,t.jsx)("p",{children:"Follow each production interaction from captured signal to a safer, more capable agent."})]}),(0,t.jsxs)("div",{className:o().stages,children:[(0,t.jsxs)("div",{className:o().stage,children:[(0,t.jsxs)("h4",{children:["Every interaction is captured. ",(0,t.jsx)("br",{}),"In-chat & in-app."]}),(0,t.jsxs)("div",{className:o().pair,children:[(0,t.jsxs)("div",{className:o().panel,children:[(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"In-app interactions."})," What users do in your app: clicks, edits, and navigation outside the chat."]}),(0,t.jsx)(d,{})]}),(0,t.jsxs)("div",{className:o().panel,children:[(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"Agent-user interactions."})," The back-and-forth with the agent: ask, feedback signals, approvals, edits, retries."]}),(0,t.jsx)(p,{})]})]})]}),(0,t.jsx)(v,{direction:"in"}),(0,t.jsxs)("div",{className:o().stage,children:[(0,t.jsx)("h4",{children:"Define learning containers for users, groups of users, or entire organizations."}),(0,t.jsxs)("div",{className:"".concat(o().panel," ").concat(o().containersPanel),children:[(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"Self-learning"})," lets you define learning containers for users, groups of users, or entire organizations."]}),(0,t.jsx)("div",{className:o().containers,children:[{icon:"user",label:"Per user"},{icon:"group",label:"Per group of users"},{icon:"organization",label:"Per organization"}].map(e=>{let{icon:a,label:s}=e;return(0,t.jsxs)("div",{children:[(0,t.jsx)(l,{name:a,size:35}),(0,t.jsx)("span",{children:s})]},a)})})]})]}),(0,t.jsx)(v,{direction:"out"}),(0,t.jsxs)("div",{className:o().stage,children:[(0,t.jsx)("h4",{children:"Your agent automatically improves with every interaction."}),(0,t.jsxs)("div",{className:o().pair,children:[(0,t.jsxs)("div",{className:o().panel,children:[(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"Self-improving skills"})," are automatically adopted by your agents."]}),(0,t.jsx)(u,{})]}),(0,t.jsxs)("div",{className:o().panel,children:[(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"Export datasets to fine-tune"})," custom models."]}),(0,t.jsx)(h,{})]})]})]})]})]})}},69526:(e,a,s)=>{Promise.resolve().then(s.t.bind(s,62714,23)),Promise.resolve().then(s.bind(s,43286)),Promise.resolve().then(s.t.bind(s,93325,23)),Promise.resolve().then(s.bind(s,43337)),Promise.resolve().then(s.bind(s,44600)),Promise.resolve().then(s.bind(s,52127)),Promise.resolve().then(s.bind(s,71909)),Promise.resolve().then(s.bind(s,30837)),Promise.resolve().then(s.bind(s,99459)),Promise.resolve().then(s.t.bind(s,3596,23)),Promise.resolve().then(s.bind(s,95661)),Promise.resolve().then(s.t.bind(s,92810,23)),Promise.resolve().then(s.bind(s,30353)),Promise.resolve().then(s.t.bind(s,76948,23)),Promise.resolve().then(s.t.bind(s,77017,23)),Promise.resolve().then(s.t.bind(s,86626,23)),Promise.resolve().then(s.bind(s,1579)),Promise.resolve().then(s.bind(s,46250)),Promise.resolve().then(s.bind(s,69543)),Promise.resolve().then(s.t.bind(s,9165,23)),Promise.resolve().then(s.bind(s,32364)),Promise.resolve().then(s.t.bind(s,12904,23)),Promise.resolve().then(s.t.bind(s,4087,23)),Promise.resolve().then(s.t.bind(s,7989
11,23)),Promise.resolve().then(s.bind(s,17475)),Promise.resolve().then(s.bind(s,64502)),Promise.resolve().then(s.t.bind(s,5743,23)),Promise.resolve().then(s.t.bind(s,59818,23)),Promise.resolve().then(s.t.bind(s,32562,23)),Promise.resolve().then(s.t.bind(s,90802,23)),Promise.resolve().then(s.bind(s,5077))},69543:(e,a,s)=>{"use strict";s.d(a,{default:()=>d});var t=s(87448),n=s(33829),i=s.n(n),r=s(73605),o=s(35586),c=s(9165),l=s.n(c);function d(){let e=(0,o.sf)();return(0,t.jsxs)("div",{className:l().actions,children:[(0,t.jsxs)(i(),{className:l().primary,href:"/talk-to-an-engineer?ref=home-enterprise",onClick:()=>e.capture("talk_to_us_clicked",{location:"home_enterprise_band"}),children:["Talk to an expert",(0,t.jsx)(r.default,{src:"/images/home/enterprise/arrow.svg",alt:"",width:20,height:20})]}),(0,t.jsx)("a",{className:l().secondary,href:"https://go.copilotkit.ai/intelligence-signup",target:"_blank",rel:"noopener",onClick:()=>e.capture("try_for_free_clicked",{location:"home_enterprise_band"}),children:"Get started"})]})}},70300:(e,a,s)=>{"use strict";s.d(a,{A:()=>o});var t=s(87448),n=s(23796),i=s(43500),r=s.n(i);function o(e){let{className:a=""}=e,s=(0,n.useRef)(null);return(0,n.useEffect)(()=>{let e=s.current,a=null==e?void 0:e.parentElement;if(!e||!a||"undefined"==typeof IntersectionObserver)return;let t=window.matchMedia("(prefers-reduced-motion: reduce)"),n=!1,i=0,r=0,o=0,c=()=>{e.dataset.running=String(n&&!document.hidden&&!t.matches),(t.matches||document.hidden||!n)&&(delete e.dataset.hovered,cancelAnimationFrame(i),i=0)},l=s=>{if(t.matches||!n||"touch"===s.pointerType)return;let c=a.getBoundingClientRect();r=s.clientX-c.left,o=s.clientY-c.top,i||(i=requestAnimationFrame(()=>{i=0,e.style.setProperty("--pixel-x","".concat(r,"px")),e.style.setProperty("--pixel-y","".concat(o,"px")),e.dataset.hovered="true"}))},d=()=>{cancelAnimationFrame(i),i=0,delete e.dataset.hovered},p=new IntersectionObserver(e=>{var a,s;n=null!=(s=null==(a=e.at(-1))?void 0:a.isIntersecting)&&s,c()});return p.observe(a),a.addEventListener("pointermove",l,{passive:!0}),a.addEventListener("pointerleave",d),t.addEventListener("change",c),document.addEventListener("visibilitychange",c),c(),()=>{cancelAnimationFrame(i),p.disconnect(),a.removeEventListener("pointermove",l),a.removeEventListener("pointerleave",d),t.removeEventListener("change",c),document.removeEventListener("visibilitychange",c)}},[]),(0,t.jsxs)("div",{ref:s,className:"".concat(r().texture," ").concat(a),"aria-hidden":"true","data-running":"false",children:[(0,t.jsx)("div",{className:r().glisten}),(0,t.jsx)("div",{className:r().pointer})]})}},71909:(e,a,s)=>{"use strict";s.d(a,{default:()=>c});var t=s(87448),n=s(73605),i=s(35586),r=s(77017),o=s.n(r);function c(e){let{item:a,variant:s="featured"}=e,r=(0,i.sf)(),c="compact"===s;return(0,t.jsxs)("a",{href:a.url,target:"_blank",rel:"noopener noreferrer",onClick:()=>{null==r||r.capture("news_item_clicked",{item:a.id,outlet:a.outlet,url:a.url})},className:"".concat(o().card," ").concat(c?o().compact:o().featured),children:[(0,t.jsx)("div",{className:o().media,children:(0,t.jsx)(n.default,{src:a.image.src,alt:a.image.alt,width:a.image.width,height:a.image.height,className:o().photo,loading:"lazy",sizes:c?"(max-width: 375px) calc(100vw - 41px), (max-width: 767px) 334px, (max-width: 1023px) 44vw, (max-width: 1439px) 34vw, 480px":"(max-width: 375px) calc(100vw - 41px), (max-width: 767px) 334px, (max-width: 1023px) 92vw, (max-width: 1439px) 54vw, 776px"})}),(0,t.jsxs)("div",{className:o().body,children:[(0,t.jsx)("span",{className:o().outlet,children:a.outlet}),(0,t.jsx)("h3",{children:a.headline}),(0,t.jsx)("p",{className:o().description,children:a.description}),(0,t.jsxs)("span",{className:o().cta,children:[a.ctaLabel,(0,t.jsx)(n.default,{src:"/images/homepage-redesign/news/arrow-right.svg",alt:"",width:20,height:20})]})]})]})}},74454:e=>{e.exports={section:"bottom-cta_section__mP8S_",pixels:"bottom-cta_pixels__DkNIW",content:"bottom-cta_content__sqk3m",eyebrow:"bottom-cta_eyebrow__5c_zX",actions:"bottom-cta_actions__EDJd4",primaryActions:"bottom-cta_primaryActions__B3MoA",button:"bottom-cta_button__6OIM2",docs:"bottom-cta_docs__D_l_P",expert:"bottom-cta_expert__1LNjQ",getStarted:"bottom-cta_getStarted__cGHFr",fanViewport:"bottom-cta_fanViewport__VerH9",fan:"bottom-cta_fan__Z6p72",tile:"bottom-cta_tile__6MOy9",lightCard:"bottom-cta_lightCard__4NiPv",farLeft:"bottom-cta_farLeft__uTGQc",farRight:"bottom-cta_farRight__v_vfS",middleLeft:"bottom-cta_middleLeft__4sHVr",middleRight:"bottom-cta_middleRight__ilZq7",innerLeft:"bottom-cta_innerLeft__JHiP0",innerRight:"bottom-cta_innerRight__1dphz",llamaCard:"bottom-cta_llamaCard__jOGsm",claudeCard:"bottom-cta_claudeCard__K_Urz",squareLogo:"bottom-cta_squareLogo__REA3b",strandsLogo:"bottom-cta_strandsLogo__va_Xr",centerCard:"bottom-cta_centerCard__E
1DD4i",brandMark:"bottom-cta_brandMark__g_HgH",wordmark:"bottom-cta_wordmark__11fhn"}},76948:e=>{e.exports={marquee:"logo-marquee_marquee__4UQKD",customers:"logo-marquee_customers__x_CjG",partners:"logo-marquee_partners__V20QG",row:"logo-marquee_row__l6cfF",track:"logo-marquee_track__3uB2g",tile:"logo-marquee_tile__tA8_h",logo:"logo-marquee_logo__ycgC2","marquee-loop":"logo-marquee_marquee-loop__r0r08",duplicate:"logo-marquee_duplicate__XH7O5"}},77017:e=>{e.exports={section:"news_section__LQK46",header:"news_header__aPRt3",grid:"news_grid__vBXLR",supporting:"news_supporting__6orA5",card:"news_card__H7ayT",cta:"news_cta__cMt2M",media:"news_media__ANs7R",featured:"news_featured__kLs5j",photo:"news_photo__HPtq_",body:"news_body__gawAD",outlet:"news_outlet__CzZE8",description:"news_description__IElpY",compact:"news_compact__5zLvO",controls:"news_controls__bTBZt",control:"news_control__zi10w"}},84319:e=>{e.exports={root:"copy-onboarding-prompt-button_root__Dh3_i",pill:"copy-onboarding-prompt-button_pill__Sdkvt",copy:"copy-onboarding-prompt-button_copy__pl8v9",check:"copy-onboarding-prompt-button_check__eBvJ5",logos:"copy-onboarding-prompt-button_logos___tPsb",divider:"copy-onboarding-prompt-button_divider__wR3T0",roundedCopyIcon:"copy-onboarding-prompt-button_roundedCopyIcon__L2gO7",peek:"copy-onboarding-prompt-button_peek__fzfJ1",view:"copy-onboarding-prompt-button_view__YRkay",eyeIcon:"copy-onboarding-prompt-button_eyeIcon__clBUW",dialog:"copy-onboarding-prompt-button_dialog__FUZbY",dialogHeading:"copy-onboarding-prompt-button_dialogHeading__q5BOO",close:"copy-onboarding-prompt-button_close__0Dghl",dialogHint:"copy-onboarding-prompt-button_dialogHint__L_ATD",prompt:"copy-onboarding-prompt-button_prompt__mHPQo",error:"copy-onboarding-prompt-button_error__8REKz",dialogCopy:"copy-onboarding-prompt-button_dialogCopy__MtJDS",eyeView:"copy-onboarding-prompt-button_eyeView___uKZc",dark:"copy-onboarding-prompt-button_dark__bPqPZ"}},86626:e=>{e.exports={page:"homepage-assembly_page__KxK6o",introduction:"homepage-assembly_introduction__Q92Be",hero:"homepage-assembly_hero__6bYEz",useCases:"homepage-assembly_useCases__g0Z2d",ecosystem:"homepage-assembly_ecosystem__wJwBS",buyer:"homepage-assembly_buyer__7Htlb",developer:"homepage-assembly_developer__6LowE",learningAndAnalytics:"homepage-assembly_learningAndAnalytics__r0pWk",stories:"homepage-assembly_stories__PQLIy"}},90802:e=>{e.exports={assembly:"learning-process_assembly__mT8OC",graph:"learning-process_graph__7G5PC",process:"learning-process_process__Ep0bY",header:"learning-process_header__kXEPr",stages:"learning-process_stages__JjJE3",stage:"learning-process_stage__pFsEv",pair:"learning-process_pair__xeDdV",panel:"learning-process_panel__DDbGC",containersPanel:"learning-process_containersPanel__Jv7Hj",containers:"learning-process_containers__yCPIM",connectors:"learning-process_connectors__P4J_J",outgoing:"learning-process_outgoing__ecA6F",appSketch:"learning-process_appSketch__77t5g",appWindow:"learning-process_appWindow__6o4dy",placeholder:"learning-process_placeholder__ucZPT",metrics:"learning-process_metrics__JDHZu",newTask:"learning-process_newTask__ykVAl",cursor:"learning-process_cursor___3y_g",chatSketch:"learning-process_chatSketch__KrAjg",agent:"learning-process_agent__qmQ3t",approval:"learning-process_approval__hdAmt",approvalLabel:"learning-process_approvalLabel__TmwEG",lines:"learning-process_lines__UwA6v",approvalActions:"learning-process_approvalActions__mNCfq",skillsSketch:"learning-process_skillsSketch__9oSoI",skillFile:"learning-process_skillFile__sfrJS",improved:"learning-process_improved__PM_cC",created:"learning-process_created__x_XdX",datasetSketch:"learning-process_datasetSketch__2mQex",datasetWindow:"learning-process_datasetWindow__548eU",windowBar:"learning-process_windowBar__A7Cw6",tableHead:"learning-process_tableHead__9qEIi",tableRows:"learning-process_tableRows__XYpoe",export:"learning-process_export__YCDec",overview:"learning-process_overview___ghff",salesChart:"learning-process_salesChart__QLdZa",dateMenu:"learning-process_dateMenu__JurRh",appCursor:"learning-process_appCursor___zXsA",chatBar:"learning-process_chatBar__Iz_CO",chatBody:"learning-process_chatBody__40ok7",chatTranscript:"learning-process_chatTranscript__u_kv3",query:"learning-process_query__ukoJX",typing:"learning-process_typing__rCOEv",toolCall:"learning-process_toolCall__6iHIl",flights:"learning-process_flights__ZFMMF",flightTimes:"learning-process_flightTimes__sO4TU",chatInput:"learning-process_chatInput__HItpN",chatCursor:"learning-process_chatCursor__k1pRW",datasetStatus:"learning-process_datasetStatus__1g5pz"}},92810:e=>{e.exports={page:"homepage_page__GKNKl",container:"homepage_container__of15I",section:"homepage_section__2m152",sectionHeader:"homepage_sectionHeader__wlOI0",centered:"homepage_centered__mPoPI",displayTitle:"homepage_displayTitle__o61wQ",sectionTitle:"homepage_sectionTitle__kpZBN",bodyCopy:"homepage_bodyCopy__jUHIS",monoLabel:"homepage_monoLabel__yZ6YN",darkSection:"homepage_darkSection__70K_T",ambient:"homepage_ambient__LXWhk",ambientGlow:"homepage_ambientGlow__mSZkT",content:"homepage_content__IJoTC"}},93325:()=>{},95661:(e,a,s)=>{"use strict";s.d(a,{default:()=>n});var t=s(23796);function n(e){let{rootId:a}=e;return(0,t.useEffect)(()=>{let e=document.getElementById(a);if(!e||"undefined"==typeof IntersectionObserver)return;let s=window.matchMedia("(prefers-reduced-motion: reduce)"),t=new Set,n=Array.from(e.querySelectorAll("[data-home-entrance]")).flatMap(e=>{let a=Array.from(e.querySelectorAll("h2, h3, p, article, li, [data-home-reveal]"));return a.filter(e=>!a.some(a=>a!==e&&a.contains(e)))}),i=new IntersectionObserver(e=>{let a=0;
1e.forEach(e=>{if(!e.isIntersecting)return;i.unobserve(e.target);let n=e.target;if(s.matches||document.hidden||!n.animate)return;let r=n.animate([{opacity:.35,transform:"translateY(10px)"},{opacity:1,transform:"translateY(0)"}],{duration:620,delay:Math.min(35*a++,175),easing:"cubic-bezier(0.22, 1, 0.36, 1)",fill:"backwards"});t.add(r),r.onfinish=()=>t.delete(r)})},{threshold:.12});n.forEach(e=>i.observe(e));let r=()=>{(s.matches||document.hidden)&&(t.forEach(e=>e.cancel()),t.clear())};return s.addEventListener("change",r),document.addEventListener("visibilitychange",r),()=>{i.disconnect(),s.removeEventListener("change",r),document.removeEventListener("visibilitychange",r),t.forEach(e=>e.cancel())}},[a]),null}},99459:(e,a,s)=>{"use strict";s.d(a,{default:()=>c});var t=s(87448),n=s(23796),i=s(73605),r=s(3596),o=s.n(r);function c(){let e=(0,n.useRef)(null);return(0,n.useEffect)(()=>{let a,s=e.current;if(!s||"undefined"==typeof IntersectionObserver)return;let t=window.matchMedia("(prefers-reduced-motion: reduce)"),n=!1,i=()=>{t.matches&&(null==a||a.cancel(),n=!0)},r=new IntersectionObserver(e=>{if(n||!e.some(e=>e.isIntersecting))return;n=!0;let i=s.querySelector("[data-agui-shimmer]");!t.matches&&(null==i?void 0:i.animate)&&(a=i.animate([{clipPath:"inset(0 0 0 0)",opacity:1},{clipPath:"inset(0 0 0 48%)",opacity:.9,offset:.55},{clipPath:"inset(0 0 0 100%)",opacity:0}],{duration:1500,easing:"cubic-bezier(0.22, 1, 0.36, 1)"})),r.disconnect()},{threshold:.5});return r.observe(s),t.addEventListener("change",i),()=>{r.disconnect(),null==a||a.cancel(),t.removeEventListener("change",i)}},[]),(0,t.jsxs)("span",{ref:e,className:o().badge,children:[(0,t.jsx)(i.default,{src:"/images/homepage-redesign/ecosystem/ag-ui.svg",alt:"AG-UI",width:141,height:48}),(0,t.jsx)("span",{className:o().badgeShimmer,"data-agui-shimmer":!0,"aria-hidden":"true"})]})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.