[{"data":1,"prerenderedAt":921},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fai-elements\u002Fchain-of-thought":600,"surround-\u002Fdocs\u002Fai-elements\u002Fchain-of-thought":918},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,306,332,350,438,444,461,487,500],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":305},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":84,"type":19,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002Fcomponents\u002Fcode-block",true,{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":158,"path":159,"stem":160,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":166,"path":167,"stem":168,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":170,"path":171,"stem":172,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":206,"path":207,"stem":208,"new":84,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":298,"path":299,"stem":300,"new":84,"type":19,"children":-1},"Trace","\u002Fdocs\u002Fcomponents\u002Ftrace","docs\u002Fcomponents\u002Ftrace",{"title":302,"path":303,"stem":304,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":307,"path":308,"stem":309,"children":310,"new":18,"type":305},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[311,316,320,324,328],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":333,"path":334,"stem":335,"children":336,"new":18,"type":305},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[337,340,343,347],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":351,"path":352,"stem":353,"children":354,"new":18,"type":305},"AI Elements","\u002Fdocs\u002Fai-elements","docs\u002Fai-elements",[355,359,363,367,371,375,379,383,386,390,394,398,402,406,410,414,418,422,426,430,434],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},"Chain of Thought","\u002Fdocs\u002Fai-elements\u002Fchain-of-thought","docs\u002Fai-elements\u002Fchain-of-thought",{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},"Chat","\u002Fdocs\u002Fai-elements\u002Fchat","docs\u002Fai-elements\u002Fchat",{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},"Checkpoint","\u002Fdocs\u002Fai-elements\u002Fcheckpoint","docs\u002Fai-elements\u002Fcheckpoint",{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},"Confirmation","\u002Fdocs\u002Fai-elements\u002Fconfirmation","docs\u002Fai-elements\u002Fconfirmation",{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},"Context","\u002Fdocs\u002Fai-elements\u002Fcontext","docs\u002Fai-elements\u002Fcontext",{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},"File Tree","\u002Fdocs\u002Fai-elements\u002Ffile-tree","docs\u002Fai-elements\u002Ffile-tree",{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},"Inline Citation","\u002Fdocs\u002Fai-elements\u002Finline-citation","docs\u002Fai-elements\u002Finline-citation",{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},"\u002Fdocs\u002Fai-elements\u002Fmessage","docs\u002Fai-elements\u002Fmessage",{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},"Model Selector","\u002Fdocs\u002Fai-elements\u002Fmodel-selector","docs\u002Fai-elements\u002Fmodel-selector",{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},"Plan","\u002Fdocs\u002Fai-elements\u002Fplan","docs\u002Fai-elements\u002Fplan",{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},"Prompt Input","\u002Fdocs\u002Fai-elements\u002Fprompt-input","docs\u002Fai-elements\u002Fprompt-input",{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},"Queue","\u002Fdocs\u002Fai-elements\u002Fqueue","docs\u002Fai-elements\u002Fqueue",{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},"Reasoning","\u002Fdocs\u002Fai-elements\u002Freasoning","docs\u002Fai-elements\u002Freasoning",{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},"Sources","\u002Fdocs\u002Fai-elements\u002Fsources","docs\u002Fai-elements\u002Fsources",{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},"Stack Trace","\u002Fdocs\u002Fai-elements\u002Fstack-trace","docs\u002Fai-elements\u002Fstack-trace",{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},"Subagent","\u002Fdocs\u002Fai-elements\u002Fsubagent","docs\u002Fai-elements\u002Fsubagent",{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},"Suggestion","\u002Fdocs\u002Fai-elements\u002Fsuggestion","docs\u002Fai-elements\u002Fsuggestion",{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},"Task","\u002Fdocs\u002Fai-elements\u002Ftask","docs\u002Fai-elements\u002Ftask",{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},"Terminal","\u002Fdocs\u002Fai-elements\u002Fterminal","docs\u002Fai-elements\u002Fterminal",{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},"Test Results","\u002Fdocs\u002Fai-elements\u002Ftest-results","docs\u002Fai-elements\u002Ftest-results",{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},"Tool","\u002Fdocs\u002Fai-elements\u002Ftool","docs\u002Fai-elements\u002Ftool",{"title":439,"path":440,"stem":441,"children":442,"new":18,"type":305},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[443],{"title":439,"path":440,"stem":441,"new":18,"type":315,"children":-1},{"title":445,"path":446,"stem":447,"children":448,"new":18,"type":305},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[449,453,457],{"title":450,"path":451,"stem":452,"new":18,"type":315,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":454,"path":455,"stem":456,"new":18,"type":315,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":458,"path":459,"stem":460,"new":18,"type":315,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":462,"path":463,"stem":464,"children":465,"new":18,"type":305},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[466,467,471,475,479,483],{"title":462,"path":463,"stem":464,"new":18,"type":315,"children":-1},{"title":468,"path":469,"stem":470,"new":18,"type":315,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":472,"path":473,"stem":474,"new":18,"type":315,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":476,"path":477,"stem":478,"new":18,"type":315,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":480,"path":481,"stem":482,"new":18,"type":315,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":484,"path":485,"stem":486,"new":18,"type":315,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":488,"path":489,"stem":490,"children":491,"page":18,"type":305},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities",[492,496],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":501,"type":305,"children":502},"Get Started",[503,507,514,518,522,528,532,536,540,544,548,552,575,579,583],{"title":504,"path":505,"stem":506,"new":18,"type":315,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":307,"path":308,"stem":309,"children":508,"new":18,"type":305},[509,510,511,512,513],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},{"title":515,"path":516,"stem":517,"new":18,"type":315,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":519,"path":520,"stem":521,"new":18,"type":315,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":333,"path":334,"stem":335,"children":523,"new":18,"type":305},[524,525,526,527],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},{"title":529,"path":530,"stem":531,"new":18,"type":315,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":533,"path":534,"stem":535,"new":18,"type":315,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":537,"path":538,"stem":539,"new":18,"type":315,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":541,"path":542,"stem":543,"new":18,"type":315,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":545,"path":546,"stem":547,"new":18,"type":315,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":549,"path":550,"stem":551,"new":18,"type":315,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":351,"path":352,"stem":353,"children":553,"new":18,"type":305},[554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},{"title":576,"path":577,"stem":578,"new":18,"type":315,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":580,"path":581,"stem":582,"new":18,"type":315,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":488,"path":489,"stem":490,"children":584,"page":18,"type":305},[585,586],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},{"repo":588},{"id":589,"name":590,"repo":591,"description":592,"createdAt":593,"updatedAt":594,"pushedAt":595,"stars":596,"watchers":597,"forks":598,"defaultBranch":599},658791894,"shadcn-vue","unovue\u002Fshadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-10-15T03:21:33Z","2026-10-14T03:11:00Z",10691,36,681,"dev",{"id":601,"title":356,"body":602,"description":911,"extension":912,"links":913,"meta":914,"navigation":84,"new":84,"path":357,"rawbody":915,"seo":916,"stem":358,"__hash__":917},"content\u002Fdocs\u002Fai-elements\u002Fchain-of-thought.md",{"type":603,"value":604,"toc":901},"minimark",[605,612,616,627,631,644,709,713,722,725,736,807,817,821,827,833,837,848,854,866,870,883,891,895],[606,607],"component-preview",{"className":608,"name":610,"previewClass":611},[609],"style-rhea","ChainOfThoughtDemo","h-auto",[613,614,615],"p",{},"Chain of Thought is a summary line that expands into the steps an agent took. The summary says what happened, like \"Researched in 3 steps\". The steps sit inside it, each one a line of its own.",[613,617,618,619,622,623,626],{},"Chain of Thought is built with ",[620,621,298],"code",{}," with a ",[620,624,625],{},"TraceCollapsible"," for the summary.",[628,629,307],"h2",{"id":630},"installation",[613,632,633,634,637,638,640,641,643],{},"Chain of Thought is built with the ",[635,636,298],"a",{"href":299},", ",[635,639,81],{"href":82}," and ",[635,642,41],{"href":42}," components.",[645,646,647,662,675],"code-tabs",{},[648,649,650,656],"tabs-list",{},[651,652,654],"tabs-trigger",{"value":653},"cli",[613,655,529],{},[651,657,659],{"value":658},"manual",[613,660,661],{},"Manual",[663,664,665],"tabs-content",{"value":653},[666,667,673],"pre",{"className":668,"code":670,"language":671,"meta":672},[669],"language-bash","npx shadcn-vue@latest add trace code-block badge\n","bash","",[620,674,670],{"__ignoreMap":672},[663,676,677],{"value":658},[678,679,680,686,692,704],"steps",{},[681,682,683],"step",{},[613,684,685],{},"Install the required shadcn-vue dependencies:",[666,687,690],{"className":688,"code":689,"language":671,"meta":672},[669],"npx shadcn-vue@latest add collapsible code-block badge\n",[620,691,689],{"__ignoreMap":672},[681,693,694],{},[613,695,696,697,703],{},"Copy and paste the ",[635,698,702],{"href":699,"rel":700},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Ftrace",[701],"nofollow","GitHub source code"," into your project.",[681,705,706],{},[613,707,708],{},"Update the import paths to match your project setup.",[628,710,712],{"id":711},"usage","Usage",[666,714,720],{"className":715,"code":717,"language":718,"meta":719},[716],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { CircleCheckIcon } from '@lucide\u002Fvue'\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceCollapsible default-open :unmount-on-hide=\"false\">\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CCircleCheckIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Researched in 3 steps\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>\n        \u003CTrace>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Read the build log for dpl_8Kx2\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Searched the web for next.js image cache key\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Searched the code for cacheKey\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n        \u003C\u002FTrace>\n      \u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[620,721,717],{"__ignoreMap":672},[628,723,724],{"id":678},"Steps",[613,726,727,728,731,732,735],{},"Each step is a ",[620,729,730],{},"TraceLine",". Set its ",[620,733,734],{},"status"," and write the title in the matching tense.",[737,738,739,756],"table",{},[740,741,742],"thead",{},[743,744,745,749,753],"tr",{},[746,747,748],"th",{},"Step",[746,750,751],{},[620,752,734],{},[746,754,755],{},"Title",[757,758,759,773,784,794],"tbody",{},[743,760,761,765,770],{},[762,763,764],"td",{},"Running",[762,766,767],{},[620,768,769],{},"\"running\"",[762,771,772],{},"Searching for …",[743,774,775,778,781],{},[762,776,777],{},"Done, with detail",[762,779,780],{},"none",[762,782,783],{},"Searched for …",[743,785,786,789,791],{},[762,787,788],{},"Done, links out",[762,790,780],{},[762,792,793],{},"Read the Image component docs",[743,795,796,799,804],{},[762,797,798],{},"Failed",[762,800,801],{},[620,802,803],{},"\"error\"",[762,805,806],{},"Failed to search for …",[613,808,809,810,813,814,816],{},"Set ",[620,811,812],{},":unmount-on-hide=\"false\""," on the summary's ",[620,815,625],{},". Steps keep their open state when the summary closes.",[628,818,820],{"id":819},"search-results","Search Results",[613,822,823,824,826],{},"When a step runs a web search, show the results as a ",[620,825,41],{}," for each hostname in the step's content.",[666,828,831],{"className":829,"code":830,"language":718,"meta":719},[716],"\u003Cscript setup lang=\"ts\">\nfunction getHostname(url: string) {\n  return new URL(url).hostname\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsibleContent class=\"flex flex-wrap gap-1.5\">\n    \u003CBadge v-for=\"result in results\" :key=\"result.url\" variant=\"secondary\">\n      {{ getHostname(result.url) }}\n    \u003C\u002FBadge>\n  \u003C\u002FTraceCollapsibleContent>\n\u003C\u002Ftemplate>\n",[620,832,830],{"__ignoreMap":672},[628,834,836],{"id":835},"ai-sdk","AI SDK",[613,838,839,840,843,844,847],{},"Render each tool part as a step. ",[620,841,842],{},"running"," is true while tool parts stream and before the reply starts. Set the summary's status and title from the steps. The summary opens while the steps run, as in ",[635,845,298],{"href":846},"\u002Fdocs\u002Fcomponents\u002Ftrace#open-state",".",[666,849,852],{"className":850,"code":851,"language":718,"meta":719},[716],"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nconst props = defineProps\u003C{\n  steps: StepPart[]\n  streaming: boolean\n  answering: boolean\n}>()\n\nconst open = ref\u003Cboolean>()\nconst running = computed(() => props.streaming && !props.answering)\nconst failed = computed(\n  () => props.steps.filter(part => part.state === 'output-error').length,\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsible\n    :open=\"open ?? running\"\n    :unmount-on-hide=\"false\"\n    @update:open=\"open = $event\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"running ? 'running' : failed > 0 ? 'error' : undefined\">\n        \u003CTraceTitle>\n          {{ running ? 'Researching' : `Researched in ${steps.length} steps` }}\n        \u003C\u002FTraceTitle>\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>\n      \u003CTrace>\n        \u003CStepLine\n          v-for=\"part in steps\"\n          :key=\"part.toolCallId\"\n          :part=\"part\"\n          :streaming=\"streaming\"\n        \u002F>\n      \u003C\u002FTrace>\n    \u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n\u003C\u002Ftemplate>\n",[620,853,851],{"__ignoreMap":672},[613,855,856,859,860,862,863,847],{},[620,857,858],{},"StepLine"," renders one tool part as a ",[620,861,730],{},", as in ",[635,864,435],{"href":865},"\u002Fdocs\u002Fai-elements\u002Ftool#states",[628,867,869],{"id":868},"migrating-from-ai-elements-vue","Migrating from AI Elements Vue",[613,871,872,873,878,879,882],{},"If you added ChainOfThought from ",[635,874,877],{"href":875,"rel":876},"https:\u002F\u002Fwww.ai-elements-vue.com",[701],"AI Elements Vue",", your project has a ",[620,880,881],{},"components\u002Fai-elements\u002Fchain-of-thought\u002F"," folder. Paste this prompt into your coding agent to rebuild it on Trace and Badge. Every export keeps its name and props, so the code that uses it keeps working.",[666,884,889],{"className":885,"code":887,"language":888,"meta":672},[886],"language-txt","Migrate components\u002Fai-elements\u002Fchain-of-thought\u002F from AI Elements Vue to the shadcn-vue Trace and Badge components.\n\nKeep every export, with the same name, props and emits, so the code that imports it keeps working. Only change how each part renders.\n\n1. Install the components: npx shadcn-vue@latest add trace badge\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Fchain-of-thought and build Chain of Thought the same way.\n3. Rebuild each part:\n   - ChainOfThought.vue renders a Trace with a TraceCollapsible. Pass open, defaultOpen and the update:open emit to the TraceCollapsible.\n   - ChainOfThoughtHeader.vue renders a TraceCollapsibleTrigger with a TraceLine, a TraceIcon and a TraceTitle, like \"Researched in 3 steps\".\n   - ChainOfThoughtContent.vue renders a TraceCollapsibleContent with a Trace for the steps. Set :unmount-on-hide=\"false\" on the TraceCollapsible so the steps stay mounted.\n   - ChainOfThoughtStep.vue renders a TraceLine. Its icon goes in a TraceIcon, its label in a TraceTitle and its description in a TraceDescription. Map status \"active\" to \"running\", \"pending\" to \"pending\", and \"complete\" to no status.\n   - ChainOfThoughtSearchResults.vue renders a flex-wrap list, and ChainOfThoughtSearchResult.vue a Badge with variant=\"secondary\".\n   - Keep ChainOfThoughtImage.vue as it is.\n4. Remove the imports the files no longer use.\n5. Run vue-tsc and fix any errors.\n","txt",[620,890,887],{"__ignoreMap":672},[628,892,894],{"id":893},"api-reference","API Reference",[613,896,897,898,847],{},"See ",[635,899,298],{"href":900},"\u002Fdocs\u002Fcomponents\u002Ftrace#api-reference",{"title":672,"searchDepth":902,"depth":902,"links":903},2,[904,905,906,907,908,909,910],{"id":630,"depth":902,"text":307},{"id":711,"depth":902,"text":712},{"id":678,"depth":902,"text":724},{"id":819,"depth":902,"text":820},{"id":835,"depth":902,"text":836},{"id":868,"depth":902,"text":869},{"id":893,"depth":902,"text":894},"Displays a summary that expands into the steps an agent took.","md",null,{"component":84},"---\ntitle: Chain of Thought\ndescription: Displays a summary that expands into the steps an agent took.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: ChainOfThoughtDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nChain of Thought is a summary line that expands into the steps an agent took. The summary says what happened, like \"Researched in 3 steps\". The steps sit inside it, each one a line of its own.\n\nChain of Thought is built with `Trace` with a `TraceCollapsible` for the summary.\n\n## Installation\n\nChain of Thought is built with the [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace), [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block) and [Badge](\u002Fdocs\u002Fcomponents\u002Fbadge) components.\n\n:::::code-tabs\n\n:::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add trace code-block badge\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Install the required shadcn-vue dependencies:\n    ::\n\n    ```bash\n    npx shadcn-vue@latest add collapsible code-block badge\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Ftrace) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { CircleCheckIcon } from '@lucide\u002Fvue'\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceCollapsible default-open :unmount-on-hide=\"false\">\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CCircleCheckIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Researched in 3 steps\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>\n        \u003CTrace>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Read the build log for dpl_8Kx2\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Searched the web for next.js image cache key\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n          \u003CTraceLine>\n            \u003CTraceIcon>\n              \u003CCircleCheckIcon \u002F>\n            \u003C\u002FTraceIcon>\n            \u003CTraceTitle>Searched the code for cacheKey\u003C\u002FTraceTitle>\n          \u003C\u002FTraceLine>\n        \u003C\u002FTrace>\n      \u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n```\n\n## Steps\n\nEach step is a `TraceLine`. Set its `status` and write the title in the matching tense.\n\n| Step              | `status`    | Title                         |\n| ----------------- | ----------- | ----------------------------- |\n| Running           | `\"running\"` | Searching for …               |\n| Done, with detail | none        | Searched for …                |\n| Done, links out   | none        | Read the Image component docs |\n| Failed            | `\"error\"`   | Failed to search for …        |\n\nSet `:unmount-on-hide=\"false\"` on the summary's `TraceCollapsible`. Steps keep their open state when the summary closes.\n\n## Search Results\n\nWhen a step runs a web search, show the results as a `Badge` for each hostname in the step's content.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nfunction getHostname(url: string) {\n  return new URL(url).hostname\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsibleContent class=\"flex flex-wrap gap-1.5\">\n    \u003CBadge v-for=\"result in results\" :key=\"result.url\" variant=\"secondary\">\n      {{ getHostname(result.url) }}\n    \u003C\u002FBadge>\n  \u003C\u002FTraceCollapsibleContent>\n\u003C\u002Ftemplate>\n```\n\n## AI SDK\n\nRender each tool part as a step. `running` is true while tool parts stream and before the reply starts. Set the summary's status and title from the steps. The summary opens while the steps run, as in [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace#open-state).\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nconst props = defineProps\u003C{\n  steps: StepPart[]\n  streaming: boolean\n  answering: boolean\n}>()\n\nconst open = ref\u003Cboolean>()\nconst running = computed(() => props.streaming && !props.answering)\nconst failed = computed(\n  () => props.steps.filter(part => part.state === 'output-error').length,\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsible\n    :open=\"open ?? running\"\n    :unmount-on-hide=\"false\"\n    @update:open=\"open = $event\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"running ? 'running' : failed > 0 ? 'error' : undefined\">\n        \u003CTraceTitle>\n          {{ running ? 'Researching' : `Researched in ${steps.length} steps` }}\n        \u003C\u002FTraceTitle>\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>\n      \u003CTrace>\n        \u003CStepLine\n          v-for=\"part in steps\"\n          :key=\"part.toolCallId\"\n          :part=\"part\"\n          :streaming=\"streaming\"\n        \u002F>\n      \u003C\u002FTrace>\n    \u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n\u003C\u002Ftemplate>\n```\n\n`StepLine` renders one tool part as a `TraceLine`, as in [Tool](\u002Fdocs\u002Fai-elements\u002Ftool#states).\n\n## Migrating from AI Elements Vue\n\nIf you added ChainOfThought from [AI Elements Vue](https:\u002F\u002Fwww.ai-elements-vue.com), your project has a `components\u002Fai-elements\u002Fchain-of-thought\u002F` folder. Paste this prompt into your coding agent to rebuild it on Trace and Badge. Every export keeps its name and props, so the code that uses it keeps working.\n\n```txt\nMigrate components\u002Fai-elements\u002Fchain-of-thought\u002F from AI Elements Vue to the shadcn-vue Trace and Badge components.\n\nKeep every export, with the same name, props and emits, so the code that imports it keeps working. Only change how each part renders.\n\n1. Install the components: npx shadcn-vue@latest add trace badge\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Fchain-of-thought and build Chain of Thought the same way.\n3. Rebuild each part:\n   - ChainOfThought.vue renders a Trace with a TraceCollapsible. Pass open, defaultOpen and the update:open emit to the TraceCollapsible.\n   - ChainOfThoughtHeader.vue renders a TraceCollapsibleTrigger with a TraceLine, a TraceIcon and a TraceTitle, like \"Researched in 3 steps\".\n   - ChainOfThoughtContent.vue renders a TraceCollapsibleContent with a Trace for the steps. Set :unmount-on-hide=\"false\" on the TraceCollapsible so the steps stay mounted.\n   - ChainOfThoughtStep.vue renders a TraceLine. Its icon goes in a TraceIcon, its label in a TraceTitle and its description in a TraceDescription. Map status \"active\" to \"running\", \"pending\" to \"pending\", and \"complete\" to no status.\n   - ChainOfThoughtSearchResults.vue renders a flex-wrap list, and ChainOfThoughtSearchResult.vue a Badge with variant=\"secondary\".\n   - Keep ChainOfThoughtImage.vue as it is.\n4. Remove the imports the files no longer use.\n5. Run vue-tsc and fix any errors.\n```\n\n## API Reference\n\nSee [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace#api-reference).\n",{"title":356,"description":911},"cFBcdsr1BhnktDhKHMeyF0dNnb_eKnpAdnHaocS2CJI",[919,920],{"title":351,"path":352,"stem":353,"children":-1},{"title":360,"path":361,"stem":362,"children":-1},1792076487105]