1(globalThis.webpackChunk_N_E=globalThis.webpackChunk_N_E||[]).push([[8441],{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",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:()=>_});var t=s(87448),n=s(23796),i=s(33829),r=s.n(i),o=s(73605),c=s(74423),l=s(31829),d=s(37505),p=s(35586),u=s(32470),h=s(20661),v=s(32819),m=s.n(v);let g=[{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 _(){var e;
1let a=(0,p.sf)(),[s,i]=(0,n.useState)("knowledge"),[r,d]=(0,n.useState)(!1);(0,n.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),a=()=>d(e.matches);return a(),e.addEventListener("change",a),()=>e.removeEventListener("change",a)},[]);let u=null!=(e=g.find(e=>e.id===s))?e:g[0],h=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"click";"auto"!==t&&v.reset(),e!==s&&(i(e),"auto"!==t&&a.capture("homepage.use_cases.template_selected",{template:e,interaction:t}))},v=function(e){let{activeKey:a,onAdvance:s}=e,t=(0,n.useRef)(null),i=(0,n.useRef)(null),r=(0,n.useRef)(s),o=(0,n.useRef)(8e3),c=(0,n.useRef)({activeKey:a,revision:0}),[l,d]=(0,n.useState)(0),[p,u]=(0,n.useState)(!1),[h,v]=(0,n.useState)(!1),[m,g]=(0,n.useState)(!1),[_,f]=(0,n.useState)(!1),[b,y]=(0,n.useState)(!1),[x,k]=(0,n.useState)(!1);(0,n.useEffect)(()=>{r.current=s},[s]),(0,n.useEffect)(()=>{let e=t.current;if(!e)return;let a=window.matchMedia("(prefers-reduced-motion: reduce)"),s=()=>{a.matches&&k(!0)},n="undefined"==typeof IntersectionObserver,i=()=>{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));v(a.width>0&&a.height>0&&s*t/(a.width*a.height)>=.2)},r=()=>{g(!document.hidden),n&&i()};s(),r(),u(!0),a.addEventListener("change",s),document.addEventListener("visibilitychange",r);let o=n?null:new IntersectionObserver(e=>{let a=e.at(-1);a&&v(a.isIntersecting&&a.intersectionRatio>=.2)},{threshold:.2});return null==o||o.observe(e),n&&(window.addEventListener("scroll",i,{capture:!0,passive:!0}),window.addEventListener("resize",i)),()=>{null==o||o.disconnect(),n&&(window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)),a.removeEventListener("change",s),document.removeEventListener("visibilitychange",r)}},[]);let w=p&&h&&m&&!_&&!b&&!x;return(0,n.useEffect)(()=>{let e;(c.current.activeKey!==a||c.current.revision!==l)&&(c.current={activeKey:a,revision:l},o.current=8e3);let s=i.current,t=o.current,n="scaleY(".concat(t/8e3,")");if(s&&(s.style.transition="none",s.style.transform=n),!w)return;let d=performance.now();(null==s?void 0:s.animate)?e=s.animate([{transform:n},{transform:"scaleY(0)"}],{duration:t,easing:"linear",fill:"forwards"}):s&&(s.getBoundingClientRect(),s.style.transition="transform ".concat(t,"ms linear"),s.style.transform="scaleY(0)");let p=window.setTimeout(()=>r.current(),t);return()=>{window.clearTimeout(p),o.current=Math.max(0,t-(performance.now()-d)),null==e||e.cancel(),s&&(s.style.transition="none",s.style.transform="scaleY(".concat(o.current/8e3,")"))}},[a,w,l]),{rootRef:t,progressRef:i,playing:w,userPaused:x,interacting:_||b,reset:()=>d(e=>e+1),togglePlayback:()=>k(e=>!e),onPointerEnter:e=>{"touch"!==e.pointerType&&f(!0)},onPointerLeave:()=>f(!1),onFocusCapture:()=>y(!0),onBlurCapture:e=>{e.currentTarget.contains(e.relatedTarget)||y(!1)}}}({activeKey:s,onAdvance:()=>{let e=g.findIndex(e=>e.id===s);h(g[(e+1)%g.length].id,"auto")}}),_=(e,a)=>{var s;let t;if(a===(r?"ArrowRight":"ArrowDown")&&(t=(e+1)%g.length),a===(r?"ArrowLeft":"ArrowUp")&&(t=(e-1+g.length)%g.length),"Home"===a&&(t=0),"End"===a&&(t=g.length-1),void 0===t)return!1;let n=g[t];return h(n.id,"keyboard"),null==(s=document.getElementById("use-case-tab-".concat(n.id)))||s.focus(),!0};return(0,t.jsxs)("div",{ref:v.rootRef,className:m().root,"data-use-case-selected":s,"data-cycle-playing":v.playing,onPointerEnter:v.onPointerEnter,onPointerLeave:v.onPointerLeave,onFocusCapture:v.onFocusCapture,onBlurCapture:v.onBlurCapture,children:[(0,t.jsxs)("header",{className:m().heading,"data-home-entrance":"",children:[(0,t.jsx)("h2",{className:m().title,children:"Use cases & templates"}),(0,t.jsx)("p",{className:m().intro,children:"Start from a real agent experience, then make every interaction look and feel like your product."})]}),(0,t.jsxs)("div",{className:m().playback,children:[(0,t.jsxs)("button",{type:"button",onClick:v.togglePlayback,className:m().playbackButton,"aria-describedby":"use-case-playback-help",children:[v.userPaused?(0,t.jsx)(c.j,{size:14,weight:"fill","aria-hidden":"true"}):(0,t.jsx)(l.v,{size:14,weight:"fill","aria-hidden":"true"}),v.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:m().explorer,"data-home-entrance":"",children:[(0,t.jsx)("div",{className:m().tabs,role:"tablist","aria-label":"Use cases","aria-orientation":r?"horizontal":"vertical",children:g.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:()=>h(e.id),onKeyDown:e=>{_(a,e.key)&&e.preventDefault()},className:m().tab,children:[(0,t.jsx)(o.default,{src:"/images/home/use-cases/redesign/".concat(e.icon,".svg"),alt:"",width:24,height:24,className:m().icon}),(0,t.jsx)("span",{className:m().tabTitle,children:e.title}),(0,t.jsx)("span",{className:m().tagline,children:e.tagline}),n&&(0,t.jsx)("span",{ref:v.progressRef,className:m().progress,"data-use-case-progress":!0,"aria-hidden":"true"})]},e.id)})}),(0,t.jsx)(f,{useCase:u},u.id)]})]})}function f(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:m().panel,children:[(0,t.jsxs)("div",{className:m().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:m().actions,children:[(0,t.jsx)(x,{location:a.demoLocation,label:a.demoLabel}),(0,t.jsx)("div",{className:m().prompt,children:(0,t.jsx)(h.default,{createPrompt:"messaging"===a.id?()=>(0,u.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:m().visual,children:(0,t.jsx)(o.default,{src:b[a.id],alt:y[a.id],width:"support"===a.id?431:425,height:"support"===a.id?349:324,className:m().illustration,sizes:"(min-width: 1440px) 472px, (min-width: 1200px) 40vw, (min-width: 768px) 70vw, 85vw"})})]})}let b={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}},y={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 x(e){let{location:a,label:s}=e,n=(0,p.sf)();return(0,t.jsxs)(r(),{href:"/talk-to-an-engineer?ref=book_demo_use_cases",className:m().demo,"aria-label":s,onClick:()=>n.capture("book_demo_clicked",{location:a}),children:["Talk to an Engineer",(0,t.jsx)(d.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."})]})]})}},20661:(e,a,s)=>{"use strict";s.d(a,{default:()=>_,ev:()=>m,lw:()=>v});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)}}async function g(e,a,s){let t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:e=>window.location.assign(e),n=!0;try{t(("claude"===e?"claude-cli://open?q=":"codex://new?prompt=")+encodeURIComponent(a))}catch(e){n=!1}return await s(),n}function _(){var e;let{createPrompt:a=m,surface:s="website_home_hero",label:u="Copy Prompt",tone:v="light"}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},_=(0,r.sf)(),f=(0,i.usePathname)(),b=(0,p.useId)(),y=(0,p.useRef)(null),x=(0,p.useRef)(null),k=(0,p.useRef)(null),w=(0,p.useRef)(0),[A,j]=(0,p.useState)(!1),[C,N]=(0,p.useState)(null),[S,T]=(0,p.useState)(!1),[L,E]=(0,p.useState)("");function M(e,a){try{null==_||_.capture("docs.intelligence_onboarding_prompt_action_clicked",{from_path:f,onboarding_run_id:e.runId,surface:s,action:a})}catch(e){}}async function P(e,a){let t=++w.current;k.current&&clearTimeout(k.current),j(!1);try{await navigator.clipboard.writeText(e.prompt)}catch(a){if(t!==w.current)return;N(e),T(!0),E("Copy is blocked. Select the prompt and copy it manually.");return}try{null==_||_.capture("docs.intelligence_onboarding_prompt_copied",{from_path:f,onboarding_run_id:e.runId,surface:s,action:a})}catch(e){}t===w.current&&(j(!0),T(!1),E("Prompt copied"),k.current=setTimeout(()=>j(!1),1600))}async function I(e){let s=a(),t="claude"===e?"open_claude":"codex"===e?"open_codex":"copy";if(M(s,t),e){E("Opening ".concat("claude"===e?"Claude Code":"Codex"," requested"));let a=w.current+1,n=await g(e,s.prompt,()=>P(s,t));if(a!==w.current)return;let i="claude"===e?"Claude Code":"Codex";E(e=>"".concat(e,". ").concat(n?"Opening ".concat(i," requested."):"The browser blocked opening ".concat(i,".")))}else await P(s,t)}return(0,p.useEffect)(()=>()=>{w.current+=1,k.current&&clearTimeout(k.current)},[]),(0,p.useEffect)(()=>{var e,a,s,t;!C||(null==(e=y.current)?void 0:e.open)||null==(a=y.current)||a.showModal(),C&&S&&(null==(s=x.current)||s.focus(),null==(t=x.current)||t.select())},[C,S]),(0,t.jsxs)("div",{className:"dark"===v?"".concat(h().root," ").concat(h().dark):h().root,"data-testid":"copy-onboarding-prompt-button","data-tone":v,children:[(0,t.jsxs)("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:()=>I(),children:[A?(0,t.jsx)(o.A,{size:16,className:h().check,"aria-hidden":"true"}):(0,t.jsx)(c.A,{size:16,"aria-hidden":"true"}),(0,t.jsx)("span",{children:u})]}),(0,t.jsx)("span",{className:h().divider,"aria-hidden":"true"}),(0,t.jsx)("button",{className:h().provider,type:"button","aria-label":"Open prompt in Claude Code",title:"Open in Claude Code",onClick:()=>I("claude"),children:(0,t.jsx)(n.default,{src:"/icons/prompt-claude.webp",width:20,height:20,alt:""})}),(0,t.jsx)("button",{className:h().provider,type:"button","aria-label":"Open prompt in Codex",title:"Open in Codex",onClick:()=>I("codex"),children:(0,t.jsx)(n.default,{src:"/icons/prompt-codex.webp",width:20,height:20,alt:""})})]}),(0,t.jsx)("div",{className:h().peek,children:(0,t.jsxs)("button",{className:h().view,type:"button",onClick:()=>{let e=a();M(e,"view_prompt"),w.current+=1,k.current&&clearTimeout(k.current),j(!1),T(!1),E(""),N(e)},children:[(0,t.jsx)(l.A,{size:14,"aria-hidden":"true"})," View prompt"]})}),(0,t.jsx)("span",{className:"sr-only",role:"status",children:L}),(0,t.jsxs)("dialog",{ref:y,className:h().dialog,"aria-labelledby":b,onClose:()=>{N(null),T(!1)},children:[(0,t.jsxs)("div",{className:h().dialogHeading,children:[(0,t.jsx)("h2",{id:b,children:"Agent prompt"}),(0,t.jsx)("button",{className:h().close,type:"button","aria-label":"Close prompt",onClick:()=>{var e;return null==(e=y.current)?void 0:e.close()},children:(0,t.jsx)(d.A,{size:20,"aria-hidden":"true"})})]}),(0,t.jsx)("textarea",{ref:x,"aria-label":"Agent prompt",value:null!=(e=null==C?void 0:C.prompt)?e:"",readOnly:!0,className:h().prompt}),S&&(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:()=>
1{if(C)return M(C,"copy_preview"),P(C,"copy_preview")},children:[A?(0,t.jsx)(o.A,{size:16,"aria-hidden":"true"}):(0,t.jsx)(c.A,{size:16,"aria-hidden":"true"})," Copy prompt"]})]})]})}},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"}},32470:(e,a,s)=>{"use strict";s.d(a,{Cz:()=>r,xH:()=>i});var t=s(20661);let n=["slack","teams"];function i(e){return n.includes(e)}function r(e){let{runId:a}=(0,t.ev)();return{runId:a,prompt:(0,t.lw)(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","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",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",surfaceConnectors:"hero-protocol-diagram_surfaceConnectors__zxtso",agentConnectors:"hero-protocol-diagram_agentConnectors__rjdGN",more:"hero-protocol-diagram_more__ZxrTc",trace:"hero-protocol-diagram_trace___Wt7R",mobileConnections:"hero-protocol-diagram_mobileConnections__b9Tg5"}},38441:(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,92797,23)),Promise.resolve().then(s.bind(s,43337)),Promise.resolve().then(s.bind(s,44600)),Promise.resolve().then(s.bind(s,20661)),Promise.resolve().then(s.bind(s,71909)),Promise.resolve().then(s.bind(s,99459)),Promise.resolve().then(s.bind(s,95661)),Promise.resolve().then(s.t.bind(s,92810,23)),Promise.resolve().then(s.bind(s,1579)),Promise.resolve().then(s.t.bind(s,32562,23)),Promise.resolve().then(s.t.bind(s,4087,23)),Promise.resolve().then(s.t.bind(s,3596,23)),Promise.resolve().then(s.t.bind(s,79891,23)),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,76112)),Promise.resolve().then(s.t.bind(s,12904,23)),Promise.resolve().then(s.t.bind(s,77017,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,90802,23)),Promise.resolve().then(s.t.bind(s,86626,23)),Promise.resolve().then(s.bind(s,5077))},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:()=>P});var t=s(87448),n=s(23796),i=s(35586),r=s(73605),o=s(69288),c=s(20661),l=s(74423),d=s(13642),p=s(24208),u=s.n(p);let h="/images/home/build-redesign/walkthrough.jpg";function v(){let e=(0,n.useRef)(null),a=(0,n.useRef)(null),[s,i]=(0,n.useState)(!1),o=(0,n.useRef)(null),[c,p]=(0,n.useState)(!1),[v,m]=(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=()=>m(!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 p(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||!v||g||f||s)return void e.pause();let a=!1;return e.play().catch(()=>{a||b(!0)}),()=>{a=!0,e.pause()}},[c,v,g,f,s]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:u().card,"data-home-entrance":"",children:(0,t.jsxs)("button",{ref:a,type:"button",onClick:()=>{var a;null===d.Ay||void 0===d.Ay||d.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:u().trigger,children:[(0,t.jsxs)("span",{className:u().thumbnail,children:[(0,t.jsx)(r.default,{src:h,alt:"",width:660,height:400,className:u().poster,sizes:"(max-width: 600px) 90vw, 330px"}),!g&&!f&&(0,t.jsx)("video",{ref:o,src:"/videos/home/build-walkthrough-preview.mp4",poster:h,muted:!0,loop:!0,playsInline:!0,preload:"none","aria-hidden":"true",className:u().preview,style:{opacity:+!!y},onPlaying:()=>x(!0),onError:()=>b(!0)}),(0,t.jsx)("span",{className:u().playOverlay,"data-play-overlay":"","aria-hidden":"true",children:(0,t.jsx)(l.j,{size:28,weight:"fill"})})]}),(0,t.jsxs)("span",{className:u().copy,children:[(0,t.jsx)("span",{className:u().eyebrow,children:"5-min video walkthrough"}),(0,t.jsxs)("span",{className:u().title,children:["Watch the walkthrough",(0,t.jsx)(r.default,{src:"/images/home/build-redesign/walkthrough-arrow.svg",alt:"",width:44,height:44,className:u().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:u().dialog,"aria-label":"Developer walkthrough video",children:(0,t.jsxs)("div",{className:u().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:u().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 m={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 g(e){return"web"===e?["react","angular","vue"]:"ios"===e||"android"===e?["native"]:["channels"]}let _="https://docs.copilotkit.ai",f={ui:"Chat UI in Docs",genui:"Generative UI in Docs",hitl:"Ap
1provals in Docs",tools:"Tools in Docs",auth:"User auth in Docs",state:"Shared state in Docs"},b={ui:'// pre-built chat, styled with your CSS\n<CopilotChat agentId="support"\n className="acme-chat" />\n\n// or swap any subcomponent via slots\n<CopilotChat\n messageView={AcmeMessages}\n input={AcmeInput} />\n\n// or fully headless\nconst { agent } = useAgent();\n{ agent.messages.map((m) => (\n <AcmeBubble key={m.id} message={m} />\n)) }',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 }),\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:'const handler = createCopilotRuntimeHandler({\n runtime,\n hooks: {\n onRequest: ({ request }) => {\n const jwt = request.headers.get("authorization");\n const user = verifyJwt(jwt);\n if (!user)\n throw new Response(null, { status: 401 });\n // only verified users reach the agent\n },\n },\n});',state:'const { agent } = useAgent({ agentId: "support" });\n\n// read the agent\'s shared state\nagent.state.focus // "refunds"\n\n// write it, the agent sees the change\nagent.setState({ ...agent.state, focus: "returns" });'},y={ui:'// pre-built chat, inside the native provider\n<CopilotKitProvider\n runtimeUrl="https://your-server.com/api/copilotkit">\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:b.genui,hitl:b.hitl,tools:b.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}'},x={react:b,angular:{ui:'// pre-built chat, as a standalone component\n@Component({\n selector: "app-chat",\n imports: [CopilotChat],\n template: \'<copilot-chat agentId="support" />\',\n})\nexport class ChatComponent {}\n\n// configured once, in app.config.ts\nprovideCopilotKit({ runtimeUrl: "/api/copilotkit" });',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:'\x3c!-- pre-built chat, inside the provider --\x3e\n<CopilotKitProvider runtime-url="/api/copilotkit">\n <CopilotChat agent-id="support" />\n</CopilotKitProvider>\n\n\x3c!-- default look: import "@copilotkit/vue/styles.css" --\x3e',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:y},k=[["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]],w=/[a-z_][\w$]*(?=,[ \t]*(?:\n|$))/y;var A=s(32470);s(33011);let j=[{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"},{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"}],C=[{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"}],N=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>')]})),S={ui:"Chat UI",genui:"Generative UI",hitl:"HITL Approvals",tools:"Frontend tools",auth:"User auth",state:"Shared state"},T={"--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"},L=[{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"}],E=e=>e>=1e3?"".concat((e/1e3).toFixed(1),"k"):"".concat(e);function M(e){let{githubStars:a}
1=e,s=(0,i.sf)(),[c,l]=(0,n.useState)(!1),d=(0,n.useRef)(null),p=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(!c)return;let e=e=>{var a;(null==(a=d.current)?void 0:a.contains(e.target))||l(!1)},a=e=>{if("Escape"===e.key){var a;l(!1),null==(a=p.current)||a.focus()}};return document.addEventListener("mousedown",e),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",a)}},[c]),(0,t.jsxs)("div",{className:"build-stars-wrap",ref:d,children:[(0,t.jsxs)("button",{type:"button",className:"build-stars",ref:p,"aria-expanded":c,"aria-label":"".concat(E(a.copilotkit+a.agui)," GitHub stars across CopilotKit and AG-UI"),onClick:()=>l(e=>!e),children:[(0,t.jsx)(o.hL4,{"aria-hidden":"true"}),E(a.copilotkit+a.agui)]}),c&&(0,t.jsx)("div",{className:"build-stars-pop",children:L.map(e=>(0,t.jsxs)("a",{href:e.href,target:"_blank",rel:"noopener noreferrer","aria-label":"".concat(e.name," on GitHub, ").concat(E(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:E(a[e.id])})]},e.id))})]})}function P(e){var a;let{githubStars:s}=e,o=(0,i.sf)(),l=(0,n.useRef)(null),[d,p]=(0,n.useState)("ui"),[u,h]=(0,n.useState)("web"),[b,y]=(0,n.useState)("react"),[L,E]=(0,n.useState)(!1),[P,I]=(0,n.useState)(!1),D=L&&!P,R=function(e,a,s){let t=g(e),n=t.includes(a)?a:t[0];return"channels"===n?function(e,a){let s="whatsapp"===e,t="teams"===e?"Teams":s?"WhatsApp":"Slack",n="".concat(_,"/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: [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\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(_,"/reference/channels/components/Button"):"".concat(_,"/").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 onClick={async ({ thread }) => {\n await thread.resume({ approved: true });\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(_,"/reference/channels/functions/createChannel"):"".concat(_,"/").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 }) =>
1 {\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":f[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:x[e][a],href:"".concat(_,"/").concat(n[a]),label:f[a]}}(n,s)}(u,b,d),B=g(u),F=null!=(a=C.find(e=>e.id===u))?a:C[0];(0,n.useEffect)(()=>{var e;let a=l.current;if(!a)return;let s=window.matchMedia("(prefers-reduced-motion: reduce)"),t=!1,n=()=>E(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),()=>{var e;null==i||i.disconnect(),null==(e=s.removeEventListener)||e.call(s,"change",n),document.removeEventListener("visibilitychange",n)}},[]);let O=(e,a)=>{p(e),null==o||o.capture("homepage.build.feature_selected",{feature:e,surface:u,interaction:a})},z=e=>{h(e),y(g(e)[0]),null==o||o.capture("homepage.build.surface_selected",{feature:d,surface:e})},$=(e,a)=>{null==o||o.capture("homepage.build.resource_clicked",{resource:e,href:a,feature:d,surface:u})};(0,n.useEffect)(()=>{var e;let a,s=()=>{var e,a;return null!=(a=null==(e=l.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"!==d||!D)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)}},[D,u,d]),(0,n.useEffect)(()=>{let e,a=e=>{var a;return null==(a=l.current)?void 0:a.querySelectorAll(".stage [data-chunk]").forEach(a=>{a.classList.toggle("on",Number(a.getAttribute("data-chunk"))<=e)})};if("whatsapp"!==u||"ui"!==d||!D)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)}},[D,u,d]);let U=e=>{var a;let s=j.findIndex(e=>e.id===d),t=j[(s+e+j.length)%j.length];O(t.id,"keyboard"),null==(a=document.getElementById("tm2-featrow-".concat(t.id)))||a.focus()};return(0,t.jsx)("section",{ref:l,id:"build-v2","aria-labelledby":"build-v2-heading",className:"w-full",style:T,"data-animations":D?"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)(c.default,{surface:(0,A.xH)(u)?"website_home_build_surface_picker":"website_home_build",createPrompt:(0,A.xH)(u)?()=>(0,A.Cz)(u):void 0,tone:"dark"},u)}),(0,t.jsxs)("div",{className:"build-resource-links","aria-label":"Build resources",children:[s&&(0,t.jsx)(M,{githubStars:s}),(0,t.jsxs)("a",{href:"https://dojo.showcase.copilotkit.ai/?integration=langgraph-python&demo=beautiful-chat",target:"_blank",rel:"noopener noreferrer",onClick:()=>{$("dojo","https://dojo.showcase.copilotkit.ai/?integration=langgraph-python&demo=beautiful-chat"),null==o||o.capture("homepage.dojo_cta.view_dojo",{location:"home_build"})},children:["Try in Dojo ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"})]}),(0,t.jsxs)("a",{href:"https://docs.copilotkit.ai/",target:"_blank",rel:"noopener noreferrer",onClick:()=>$("docs","https://docs.copilotkit.ai/"),children:["Explore Docs ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"})]})]})]}),(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:[C.map(e=>(0,t.jsxs)("button",{className:"cardface","data-surface":e.id,type:"button","aria-pressed":e.id===u,onClick:()=>z(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:()=>$("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:j.map((e,a)=>(0,t.jsxs)("button",{id:"tm2-featrow-".concat(e.id),className:"featrow",role:"radio","aria-checked":e.id===d,tabIndex:e.id===d?0:-1,"data-feature":e.id,type:"button","aria-label":"tools"===e.id&&"channels"===b?"Channel tools: the agent calls tools in your channel":"".concat(S[e.id],": ").concat(e.name,", ").concat(e.detail),onClick:()=>O(e.id,"click"),onKeyDown:e=>{"ArrowDown"===e.key||"ArrowRight"===e.key?(e.preventDefault(),U(1)):"ArrowUp"===e.key||"ArrowLeft"===e.key?(e.preventDefault(),U(-1)):("Home"===e.key||"End"===e.key)&&(e.preventDefault(),U("Home"===e.key?-a:j.length-a-1))},children:[(0,t.jsx)(r.default,{src:"/images/home/build-redesign/".concat(e.id,".svg"),alt:"",width:24,height:24}),(0,t.jsx)("span",{className:"fname",children:"tools"===e.id&&"channels"===b?"Channel tools":S[e.id]})]},e.id))}),(0,t.jsxs)("a",{className:"featmore",href:"https://docs.copilotkit.ai/",target:"_blank",rel:"noopener noreferrer",onClick:()=>$("all_features","https://docs.copilotkit.ai/"),children:["and much more ",(0,t.jsx)("span",{"aria-hidden":"true",children:"â"})]})]})]}),(0,t.jsxs)("div",{className:"buildsplit",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(F.name," SDK"),children:B.map(e=>(0,t.jsxs)("button",{type:"button",role:"tab",id:"build-sdk-".concat(e),"aria-controls":"build-code-panel","aria-selected":e===b,className:"webfw-item","data-primary":e===b,tabIndex:e===b?0:-1,onKeyDown:a=>{var s;let t=B.indexOf(e),n="ArrowRight"===a.key?(t+1)%B.length:"ArrowLeft"===a.key?(t+B.length-1)%B.length:"Home"===a.key?0:"End"===a.key?B.length-1:-1;if(n<0)return;a.preventDefault();let i=B[n];y(i),null==(s=document.getElementById("build-sdk-".concat(i)))||s.focus(),null==o||o.capture("homepage.build.framework_selected",{surface:u,feature:d,framework:i})},onClick:()=>{y(e),null==o||o.capture("homepage.build.framework_selected",{surface:u,feature:d,framework:e})},children:[(0,t.jsx)(r.default,{src:m[e].icon,alt:"",width:16,height:16}),m[e].label,"whatsapp"===u?" \xb7 Direct adapter":""]},e))}),(0,t.jsx)("div",{id:"build-code-panel",role:"tabpanel","aria-labelledby":"build-sdk-".concat(b),tabIndex:0,className:"codeview active","data-feature":d,children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:function(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;){w.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:w.exec(e);if(a){i("a",a[0]),r+=a[0].length;continue}let t=!1;for(let[a,n]of k){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}(R.code)})})},"".concat(u,"-").concat(b,"-").concat(d)),(0,t.jsx)("div",{className:"codelink-line",children:(0,t.jsxs)("a",{className:"codelink",href:R.href,target:"_blank",rel:"noopener noreferrer",onClick:()=>$("feature_".concat(d),R.href),children:[R.label,(0,t.jsx)("span",{"aria-hidden":"true",children:" â"})]})})]}),(0,t.jsxs)("div",{className:"selstage",children:[(0,t.jsx)("button",{type:"button",className:"demo-playback","aria-controls":"stage",onClick:()=>I(e=>!e),children:P?"Resume demo":"Pause demo"}),(0,t.jsx)("div",{className:"stage-outer",children:(0,t.jsx)("div",{className:"stage",id:"stage","data-feature":d,"data-active":u,role:"region",tabIndex:0,"aria-label":"Illustrative ".concat(F.name," application preview"),children:(0,t.jsx)("div",{className:"active-surface",dangerouslySetInnerHTML:{__html:N[u]}},u)})})]})]})]}),(0,t.jsx)(v,{})]})})}},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,
1children:"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,children:"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,"/").concat(a,"-top.svg"),width:59,height:169,alt:""}),(0,t.jsx)(i.default,{src:"".concat(c,"/").concat(a,"-bottom.svg"),width:59,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,{})]})]})]})]})]})}},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});
1var 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: 639px) calc(100vw - 40px), (max-width: 1023px) 44vw, (max-width: 1439px) 34vw, 480px":"(max-width: 639px) calc(100vw - 40px), (max-width: 1023px) 89vw, (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",expert:"bottom-cta_expert__1LNjQ",getStarted:"bottom-cta_getStarted__cGHFr",docs:"bottom-cta_docs__D_l_P",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__EDD4i",brandMark:"bottom-cta_brandMark__g_HgH",wordmark:"bottom-cta_wordmark__11fhn"}},76112:(e,a,s)=>{"use strict";s.d(a,{default:()=>f});var t=s(87448),n=s(23796);let i=e=>(e.left+e.right)/2;function r(e,a){let s=a.filter(a=>1>Math.abs(a.top-e.top)&&a!==e),t=s.filter(a=>a.left>=e.right).sort((e,a)=>e.left-a.left)[0];if(t)return(e.right+t.left)/2;let n=s.filter(a=>a.right<=e.left).sort((e,a)=>a.right-e.right)[0];return n?(n.right+e.left)/2:i(e)}function o(e,a,s,t){if(s<=0)return;let n=0;e.beginPath(),e.moveTo(a[0].x,a[0].y);for(let s=1;s<a.length;s++){let t=a[s-1],i=a[s],r=Math.hypot(i.x-t.x,i.y-t.y);n+=r;let o=a[s+1];if(o){let a=Math.min(12,r/2,Math.hypot(o.x-i.x,o.y-i.y)/2);e.arcTo(i.x,i.y,o.x,o.y,a),n-=a*(2-Math.PI/2)}else e.lineTo(i.x,i.y)}e.strokeStyle=t,e.lineWidth=1.5,e.lineCap="round",e.setLineDash(s>=1?[]:[n,n]),e.lineDashOffset=s>=1?0:n*(1-s),e.stroke()}var c=s(73605),l=s(70300),d=s(35235),p=s.n(d);let u="/images/home/protocol-diagram",h=[["vue","Vue"],["angular","Angular"],["react","React"],["ios","iOS"],["android","Android"],["slack","Slack"],["teams","Teams"],["whatsapp","WhatsApp"]],v=[["openai","OpenAI","Agents SDK"],["claude","Claude","Agent SDK"],["langchain","LangChain"],["google-adk","Google","ADK"],["strands","AWS","Strands"],["mastra","Mastra"]];function m(e){let{name:a,label:s,secondLine:n,kind:i}=e;return(0,t.jsxs)("div",{className:p().card,"data-node-kind":i,"data-node-name":a,"data-static-selected":"android"===a||"langchain"===a?"true":void 0,children:[(0,t.jsx)(c.default,{src:"".concat(u,"/").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 g(e){let{icon:a,children:s}=e;return(0,t.jsxs)("div",{className:p().capability,children:[(0,t.jsx)(c.default,{src:"".concat(u,"/").concat(a,".svg"),width:24,height:24,alt:""}),(0,t.jsx)("span",{children:s})]})}function _(){return(0,t.jsxs)("div",{className:p().diagram,children:[(0,t.jsx)(l.A,{}),(0,t.jsx)("canvas",{className:p().mobileConnections,"data-mobile-connections":!0,"aria-hidden":"true"}),(0,t.jsx)("div",{className:p().surfaces,"aria-label":"User surfaces",children:h.map(e=>{let[a,s]=e;return(0,t.jsx)(m,{name:a,label:s,kind:"surface"},a)})}),(0,t.jsxs)("div",{className:"".concat(p().connectors," ").concat(p().surfaceConnectors),"aria-hidden":"true",children:[(0,t.jsx)(c.default,{src:"".concat(u,"/surface-connectors.svg"),width:77,height:1018,alt:""}),h.map((e,a)=>{let[s]=e;return(0,t.jsx)(c.default,{src:"".concat(u,"/surface-connection-").concat(a,".svg"),width:77,height:1018,alt:"",className:p().trace,"data-connection":"surface","data-connection-index":a},s)})]}),(0,t.jsxs)("div",{className:p().center,"data-node-kind":"hub",children:[(0,t.jsxs)("div",{className:p().capabilities,children:[(0,t.jsxs)(g,{icon:"brush",children:["Streaming &",(0,t.jsx)("br",{}),"Generative UI"]}),(0,t.jsxs)(g,{icon:"auth",children:["User",(0,t.jsx)("br",{}),"Authentication"]})]}),(0,t.jsxs)("div",{className:p().brand,children:[(0,t.jsx)(c.default,{src:"".concat(u,"/logo.svg"),width:46,height:46,alt:""}),(0,t.jsx)(c.default,{src:"".concat(u,"/wordmark.svg"),width:77,height:15,alt:"CopilotKit"})]}),(0,t.jsxs)("div",{className:p().capabilities,children:[(0,t.jsxs)(g,{icon:"actions",children:["In-App Actions",(0,t.jsx)("br",{}),"& Shared State"]}),(0,t.jsxs)(g,{icon:"learning",children:["Automatic",(0,t.jsx)("br",{}),"Learning"]})]})]}),(0,t.jsxs)("div",{className:"".concat(p().connectors," ").concat(p().agentConnectors),"aria-hidden":"true",children:[(0,t.jsx)(c.default,{src:"".concat(u,"/agent-connectors.svg"),width:79,height:1345,alt:""}),v.map((e,a)=>{let[s]=e;return(0,t.jsx)(c.default,{src:"".concat(u,"/agent-connection-").concat(a,".svg"),width:79,height:1345,alt:"",className:p().trace,"data-connection":"agent","data-connection-index":a},s)})]}),(0,t.jsxs)("div",{className:p().agents,"aria-label":"Agent frameworks connected through AG-UI",children:[(0,t.jsx)("div",{className:"".concat(p().card," ").concat(p().ghost),"aria-hidden":"true"}),(0,t.jsx)("div",{className:"".concat(p().card," ").concat(p().ghost),"aria-hidden":"true"}),v.map(e=>{let[a,s,n]=e;return(0,t.jsx)(m,{name:a,label:s,secondLine:n,kind:"agent"},a)}),(0,t.jsx)("div",{className:"".concat(p().card," ").concat(p().ghost),"aria-hidden":"true"}),(0,t.jsx)("div",{className:"".concat(p().card," ").concat(p().ghost),"aria-hidden":"true"})]}),(0,t.jsx)("p",{className:p().more,children:"+18 more agents"})]})}function f(){let e=(0,n.useRef)(null);return(0,n.useEffect)(()=>{let a,t,n=e.current;if(!n||"undefined"==typeof IntersectionObserver)return;let c=function(e){let a,s=e.querySelector("[data-mobile-connections]"),t=null==s?void 0:s.parentElement,n=null,c=0,l=0,d=0,p={surface:4,agent:2,sourceProgress:1,agentProgress:1,opacity:1},u=()=>{if(n&&a){for(let e of(n.clearRect(0,0,l,d),[...a.surfaces,...a.agents]))o(n,e,1,"rgba(255,255,255,0.7)");n.globalAlpha=p.opacity,o(n,a.surfaces[p.surface],p.sourceProgress,"#141021"),o(n,a.agents[p.agent],p.agentProgress,"#141021"),n.globalAlpha=1}},h=()=>
1{if(c=0,!s||!t||window.innerWidth>=900){a=void 0;return}let o=t.getBoundingClientRect();if(!o.width||!o.height||(null!=n||(n=s.getContext("2d")),!n))return;l=o.width,d=o.height;let p=Math.min(window.devicePixelRatio||1,2);s.width=Math.round(l*p),s.height=Math.round(d*p),n.setTransform(p,0,0,p,0,0);let h=e=>{let a=e.getBoundingClientRect();return{left:a.left-o.left,right:a.right-o.left,top:a.top-o.top,bottom:a.bottom-o.top}},v=e.querySelector('[data-node-kind="hub"]');v&&(a=function(e,a,s){let t=Math.max(...e.map(e=>e.bottom)),n=Math.min(...a.map(e=>e.top)),o=(t+s.top)/2,c=(s.bottom+n)/2;return{surfaces:e.map(a=>{let n={x:i(a),y:a.bottom};if(1>Math.abs(a.bottom-t))return[n,{x:n.x,y:o},{x:i(s),y:o},{x:i(s),y:s.top}];let c=Math.min(...e.filter(e=>e.top>a.bottom).map(e=>e.top)),l=(a.bottom+c)/2,d=r(a,e);return[n,{x:n.x,y:l},{x:d,y:l},{x:d,y:o},{x:i(s),y:o},{x:i(s),y:s.top}]}),agents:a.map(e=>{let t={x:i(s),y:s.bottom},o={x:i(e),y:e.top};if(1>Math.abs(e.top-n))return[t,{x:t.x,y:c},{x:o.x,y:c},o];let l=(Math.max(...a.filter(a=>a.bottom<e.top).map(e=>e.bottom))+e.top)/2,d=r(e,a);return[t,{x:t.x,y:c},{x:d,y:c},{x:d,y:l},{x:o.x,y:l},o]})}}(Array.from(e.querySelectorAll('[data-node-kind="surface"]'),h),Array.from(e.querySelectorAll('[data-node-kind="agent"]'),h),h(v)),s.dataset.ready="true",u
1())},v=()=>{c||(c=requestAnimationFrame(h))},m="undefined"==typeof ResizeObserver?null:new ResizeObserver(v);return t&&(null==m||m.observe(t)),window.addEventListener("resize",v,{passive:!0}),v(),{update(e){p=e,u()},reset(){p={surface:4,agent:2,sourceProgress:1,agentProgress:1,opacity:1},u()},dispose(){null==m||m.disconnect(),window.removeEventListener("resize",v),cancelAnimationFrame(c)}}}(n),l=window.matchMedia("(prefers-reduced-motion: reduce)"),d=!1,p=!1,u=!1,h=Array.from(n.querySelectorAll('[data-node-kind="surface"]')),v=Array.from(n.querySelectorAll('[data-node-kind="agent"]')),m=Array.from(n.querySelectorAll('[data-connection="surface"]')),g=Array.from(n.querySelectorAll('[data-connection="agent"]')),_=()=>{h.concat(v).forEach(e=>delete e.dataset.active),delete n.dataset.activeSurface,delete n.dataset.activeAgent},f=()=>{if(!p){if(l.matches){null==a||a.kill(),null==t||t.revert(),a=void 0,t=void 0,_(),c.reset(),n.dataset.animationState="reduced";return}if(!d||document.hidden){null==a||a.pause(),n.dataset.animationState=a?"paused":"static";return}if(a){a.play(),n.dataset.animationState="running";return}u||(u=!0,Promise.all([s.e(9701),s.e(9732)]).then(s.bind(s,79732)).then(e=>{let{gsap:s}=e;u=!1,p||l.matches||!d||document.hidden||(t=s.context(()=>{a=s.timeline({repeat:-1,paused:!0});for(let e=0;e<8;e++){let s=(e+4)%8,t=(e+2)%6,i=h[s],r=v[t],o=m[s],l=g[t],d=4.6*e,p={surface:s,agent:t,sourceProgress:0,agentProgress:0,opacity:1};a.call(()=>{_(),Object.assign(p,{sourceProgress:0,agentProgress:0,opacity:1}),c.update(p),i.dataset.active="true",n.dataset.activeSurface=i.dataset.nodeName},[],d),a.to(p,{sourceProgress:1,duration:1.05,ease:"none",onUpdate:()=>c.update(p)},d+.45),a.to(p,{agentProgress:1,duration:1.05,ease:"none",onUpdate:()=>c.update(p)},d+1.5),a.to(p,{opacity:0,duration:.5,onUpdate:()=>c.update(p)},d+3.65);let u=[.42,14.76,28.9,43.12,57.17,71.5,85.53,99.58][s],f=[23.47,34.17,44.94,55.67,66.51,77.16][t],b=(e,a,s)=>"inset(".concat(Math.max(0,e-.6),"% ").concat(s,"% ").concat(Math.max(0,99.4-e),"% ").concat(a,"%)"),y=(e,a,s,t)=>"inset(".concat(Math.max(0,Math.min(e,a)-.6),"% ").concat(t,"% ").concat(Math.max(0,99.4-Math.max(e,a)),"% ").concat(s,"%)");a.fromTo(o,{opacity:1,clipPath:b(u,0,100)},{opacity:1,clipPath:b(u,0,51),duration:.2,ease:"none"},d+.45),a.to(o,{clipPath:y(u,50.2,0,51),duration:.65,ease:"none"},d+.65),a.to(o,{clipPath:y(u,50.2,0,0),duration:.2,ease:"none"},d+1.3),a.fromTo(l,{opacity:1,clipPath:b(50.4,100,0)},{opacity:1,clipPath:b(50.4,47,0),duration:.2,ease:"none"},d+1.5),a.to(l,{clipPath:y(50.4,f,47,0),duration:.65,ease:"none"},d+1.7),a.to(l,{clipPath:y(50.4,f,0,0),duration:.2,ease:"none"},d+2.35),a.call(()=>{r.dataset.active="true",n.dataset.activeAgent=r.dataset.nodeName},[],d+2.55),a.to([o,l],{opacity:0,duration:.5},d+3.65),a.call(_,[],d+4.15)}a.to({},{duration:.45})},n),f())}).catch(()=>{u=!1}))}},b=new IntersectionObserver(e=>{let a=e.at(-1);a&&(d=a.isIntersecting,f())},{threshold:.1});return b.observe(n),l.addEventListener("change",f),document.addEventListener("visibilitychange",f),()=>{p=!0,c.dispose(),b.disconnect(),l.removeEventListener("change",f),document.removeEventListener("visibilitychange",f),null==a||a.kill(),null==t||t.revert(),_()}},[]),(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)(_,{})})}},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"}},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",provider:"copy-onboarding-prompt-button_provider__avMPD",check:"copy-onboarding-prompt-button_check__eBvJ5",divider:"copy-onboarding-prompt-button_divider__wR3T0",peek:"copy-onboarding-prompt-button_peek__fzfJ1",view:"copy-onboarding-prompt-button_view__YRkay",dialog:"copy-onboarding-prompt-button_dialog__FUZbY",dialogHeading:"copy-onboarding-prompt-button_dialogHeading__q5BOO",close:"copy-onboarding-prompt-button_close__0Dghl",prompt:"copy-onboarding-prompt-button_prompt__mHPQo",error:"copy-onboarding-prompt-button_error__8REKz",dialogCopy:"copy-onboarding-prompt-button_dialogCopy__MtJDS",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",curs
1or:"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"}},92797:()=>{},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"}},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;e.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
1)}},[]),(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.