[{"data":1,"prerenderedAt":1018},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fai-elements\u002Ftool":600,"surround-\u002Fdocs\u002Fai-elements\u002Ftool":1015},[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":435,"body":602,"description":1008,"extension":1009,"links":1010,"meta":1011,"navigation":84,"new":84,"path":436,"rawbody":1012,"seo":1013,"stem":437,"__hash__":1014},"content\u002Fdocs\u002Fai-elements\u002Ftool.md",{"type":603,"value":604,"toc":998},"minimark",[605,612,616,627,631,641,706,710,719,723,734,738,871,881,888,894,904,908,918,922,929,933,944,948,954,964,968,981,989,993],[606,607],"component-preview",{"className":608,"name":610,"previewClass":611},[609],"style-rhea","ToolDemo","h-auto",[613,614,615],"p",{},"Tool is a tool call the agent makes, such as running a command or reading a file. The line follows the call from input to output, including errors and calls that wait for approval.",[613,617,618,619,622,623,626],{},"Tool is built with ",[620,621,298],"code",{}," with a ",[620,624,625],{},"TraceCollapsible"," for each call that has output.",[628,629,307],"h2",{"id":630},"installation",[613,632,633,634,637,638,640],{},"Tool is built with the ",[635,636,298],"a",{"href":299}," and ",[635,639,81],{"href":82}," components.",[642,643,644,659,672],"code-tabs",{},[645,646,647,653],"tabs-list",{},[648,649,651],"tabs-trigger",{"value":650},"cli",[613,652,529],{},[648,654,656],{"value":655},"manual",[613,657,658],{},"Manual",[660,661,662],"tabs-content",{"value":650},[663,664,670],"pre",{"className":665,"code":667,"language":668,"meta":669},[666],"language-bash","npx shadcn-vue@latest add trace code-block\n","bash","",[620,671,667],{"__ignoreMap":669},[660,673,674],{"value":655},[675,676,677,683,689,701],"steps",{},[678,679,680],"step",{},[613,681,682],{},"Install the required shadcn-vue dependencies:",[663,684,687],{"className":685,"code":686,"language":668,"meta":669},[666],"npx shadcn-vue@latest add collapsible code-block\n",[620,688,686],{"__ignoreMap":669},[678,690,691],{},[613,692,693,694,700],{},"Copy and paste the ",[635,695,699],{"href":696,"rel":697},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Ftrace",[698],"nofollow","GitHub source code"," into your project.",[678,702,703],{},[613,704,705],{},"Update the import paths to match your project setup.",[628,707,709],{"id":708},"usage","Usage",[663,711,717],{"className":712,"code":714,"language":715,"meta":716},[713],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { TerminalIcon } from '@lucide\u002Fvue'\nimport { CodeBlock, CodeBlockContent } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\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>\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CTerminalIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Ran git status --short\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>\n        \u003CCodeBlock size=\"sm\">\n          \u003CCodeBlockContent wrap class=\"max-h-64\">\n            {{ output }}\n          \u003C\u002FCodeBlockContent>\n        \u003C\u002FCodeBlock>\n      \u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[620,718,714],{"__ignoreMap":669},[628,720,722],{"id":721},"states","States",[613,724,725,726,729,730,733],{},"Trace does not read tool parts. Map each part's ",[620,727,728],{},"state"," to a ",[620,731,732],{},"status"," and a title.",[606,735],{"className":736,"name":737,"previewClass":611},[609],"ToolStatesDemo",[739,740,741,758],"table",{},[742,743,744],"thead",{},[745,746,747,751,755],"tr",{},[748,749,750],"th",{},"Tool part state",[748,752,753],{},[620,754,732],{},[748,756,757],{},"Title",[759,760,761,782,799,818,833,846,859],"tbody",{},[745,762,763,773,779],{},[764,765,766,769,770],"td",{},[620,767,768],{},"input-streaming",", ",[620,771,772],{},"input-available",[764,774,775,778],{},[620,776,777],{},"\"running\""," while the chat streams",[764,780,781],{},"Running …",[745,783,784,791,796],{},[764,785,786,769,788,790],{},[620,787,768],{},[620,789,772],{}," after the chat stops",[764,792,793],{},[620,794,795],{},"\"error\"",[764,797,798],{},"Failed to run …",[745,800,801,806,809],{},[764,802,803],{},[620,804,805],{},"approval-requested",[764,807,808],{},"-",[764,810,811,812,814,815,817],{},"Not a line. An ",[620,813,150],{}," outside ",[620,816,298],{}," with Approve and Deny buttons.",[745,819,820,825,830],{},[764,821,822],{},[620,823,824],{},"approval-responded",[764,826,827,829],{},[620,828,777],{}," if approved, none if not",[764,831,832],{},"Running … if approved, Denied … if not",[745,834,835,840,843],{},[764,836,837],{},[620,838,839],{},"output-available",[764,841,842],{},"none",[764,844,845],{},"Ran …",[745,847,848,853,857],{},[764,849,850],{},[620,851,852],{},"output-error",[764,854,855],{},[620,856,795],{},[764,858,798],{},[745,860,861,866,868],{},[764,862,863],{},[620,864,865],{},"output-denied",[764,867,842],{},[764,869,870],{},"Denied …",[613,872,873,874,877,878,880],{},"A tool is a plain ",[620,875,876],{},"TraceLine"," while it runs, and a ",[620,879,625],{}," once its output arrives.",[663,882,886],{"className":883,"code":884,"language":715,"meta":885},[713],"\u003Cscript setup lang=\"ts\">\nimport { TerminalIcon } from '@lucide\u002Fvue'\nimport { computed } from 'vue'\nimport { CodeBlock, CodeBlockContent } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\nimport {\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\nconst props = defineProps\u003C{\n  part: ToolPart\n  streaming: boolean\n}>()\n\nconst command = computed(() => props.part.input?.command)\nconst denied = computed(\n  () =>\n    props.part.state === 'output-denied'\n    || (props.part.state === 'approval-responded' && !props.part.approval.approved),\n)\nconst failed = computed(() => props.part.state === 'output-error')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceLine v-if=\"denied\">\n    \u003CTraceIcon>\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FTraceIcon>\n    \u003CTraceTitle>Denied {{ command }}\u003C\u002FTraceTitle>\n  \u003C\u002FTraceLine>\n  \u003CTraceCollapsible\n    v-else-if=\"part.state === 'output-available' || part.state === 'output-error'\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"failed ? 'error' : undefined\">\n        \u003CTraceIcon>\n          \u003CTerminalIcon \u002F>\n        \u003C\u002FTraceIcon>\n        \u003CTraceTitle>{{ failed ? 'Failed to run' : 'Ran' }} {{ command }}\u003C\u002FTraceTitle>\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>\n      \u003CCodeBlock size=\"sm\">\n        \u003CCodeBlockContent wrap class=\"max-h-64\">\n          {{ part.state === 'output-error' ? part.errorText : part.output.stdout }}\n        \u003C\u002FCodeBlockContent>\n      \u003C\u002FCodeBlock>\n    \u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n  \u003CTraceLine v-else :status=\"streaming ? 'running' : 'error'\">\n    \u003CTraceIcon>\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FTraceIcon>\n    \u003CTraceTitle>{{ streaming ? 'Running' : 'Failed to run' }} {{ command }}\u003C\u002FTraceTitle>\n  \u003C\u002FTraceLine>\n\u003C\u002Ftemplate>\n","showLineNumbers title=\"components\u002FToolLine.vue\"",[620,887,884],{"__ignoreMap":669},[663,889,892],{"className":890,"code":891,"language":715,"meta":716},[713],"\u003Ctemplate>\n  \u003CTrace>\n    \u003CToolLine\n      v-for=\"part in message.parts.filter(part => part.type === 'tool-runCommand')\"\n      :key=\"part.toolCallId\"\n      :part=\"part\"\n      :streaming=\"streaming\"\n    \u002F>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n",[620,893,891],{"__ignoreMap":669},[613,895,896,897,899,900,903],{},"A tool that runs on the client stays ",[620,898,772],{}," after the chat stops until you call ",[620,901,902],{},"addToolOutput",". Treat it as waiting, not failed.",[628,905,907],{"id":906},"output-in-a-sheet","Output in a Sheet",[613,909,910,911,913,914,917],{},"For long output, wrap the ",[620,912,876],{}," in a ",[620,915,916],{},"SheetTrigger"," and show the output in the sheet.",[606,919],{"className":920,"name":921,"previewClass":611},[609],"ToolSheetDemo",[613,923,924,925,928],{},"See ",[635,926,298],{"href":927},"\u002Fdocs\u002Fcomponents\u002Ftrace#dialog",".",[628,930,932],{"id":931},"approval","Approval",[613,934,935,936,938,939,941,942,928],{},"A pending approval is a question for the person, not a step the agent took, so it sits outside ",[620,937,298],{}," as an ",[620,940,150],{},". Once the person answers, the tool goes back to being a line. See ",[635,943,368],{"href":369},[606,945],{"className":946,"name":947,"previewClass":611},[609],"ToolApprovalDemo",[663,949,952],{"className":950,"code":951,"language":715,"meta":716},[713],"\u003Ctemplate>\n  \u003CItem v-if=\"part.state === 'approval-requested'\" variant=\"outline\" size=\"sm\">\n    \u003CItemMedia variant=\"icon\">\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Run {{ part.input.command }}?\u003C\u002FItemTitle>\n    \u003C\u002FItemContent>\n    \u003CItemActions>\n      \u003CButton\n        size=\"sm\"\n        variant=\"outline\"\n        @click=\"chat.addToolApprovalResponse({ id: part.approval.id, approved: false })\"\n      >\n        Deny\n      \u003C\u002FButton>\n      \u003CButton\n        size=\"sm\"\n        @click=\"chat.addToolApprovalResponse({ id: part.approval.id, approved: true })\"\n      >\n        Approve\n      \u003C\u002FButton>\n    \u003C\u002FItemActions>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n",[620,953,951],{"__ignoreMap":669},[613,955,956,957,960,961,963],{},"Pass ",[620,958,959],{},"sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses"," to the ",[620,962,360],{}," so the chat continues once every approval has an answer.",[628,965,967],{"id":966},"migrating-from-ai-elements-vue","Migrating from AI Elements Vue",[613,969,970,971,976,977,980],{},"If you added Tool from ",[635,972,975],{"href":973,"rel":974},"https:\u002F\u002Fwww.ai-elements-vue.com",[698],"AI Elements Vue",", your project has a ",[620,978,979],{},"components\u002Fai-elements\u002Ftool\u002F"," folder. Paste this prompt into your coding agent to rebuild it on Trace and Code Block. Every export keeps its name and props, so the code that uses it keeps working.",[663,982,987],{"className":983,"code":985,"language":986,"meta":669},[984],"language-txt","Migrate components\u002Fai-elements\u002Ftool\u002F from AI Elements Vue to the shadcn-vue Trace and Code Block 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 code-block\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Ftool and build Tool the same way.\n3. Rebuild each part:\n   - Import CodeBlock and CodeBlockContent from @\u002Fcomponents\u002Fui\u002Fcode-block, not from ..\u002Fcode-block.\n   - Tool.vue renders a Trace with a TraceCollapsible.\n   - ToolHeader.vue renders a TraceCollapsibleTrigger with a TraceLine, a TraceIcon and a TraceTitle, instead of a status Badge. Map state to the status and title: \"running\" and \"Running …\" while the input streams or is available, no status and \"Ran …\" for output-available, \"error\" and \"Failed to run …\" for output-error, and \"Denied …\" for output-denied.\n   - ToolContent.vue renders a TraceCollapsibleContent.\n   - ToolInput.vue and ToolOutput.vue render a CodeBlock with size=\"sm\" and a CodeBlockContent. ToolOutput shows errorText when the tool failed.\n   - Keep getStatusBadge and the ToolPart type exported, even if nothing renders the badge.\n4. Remove the imports the files no longer use.\n5. Run vue-tsc and fix any errors.\n","txt",[620,988,985],{"__ignoreMap":669},[628,990,992],{"id":991},"api-reference","API Reference",[613,994,924,995,928],{},[635,996,298],{"href":997},"\u002Fdocs\u002Fcomponents\u002Ftrace#api-reference",{"title":669,"searchDepth":999,"depth":999,"links":1000},2,[1001,1002,1003,1004,1005,1006,1007],{"id":630,"depth":999,"text":307},{"id":708,"depth":999,"text":709},{"id":721,"depth":999,"text":722},{"id":906,"depth":999,"text":907},{"id":931,"depth":999,"text":932},{"id":966,"depth":999,"text":967},{"id":991,"depth":999,"text":992},"Displays a tool call the agent makes, from input to output.","md",null,{"component":84},"---\ntitle: Tool\ndescription: Displays a tool call the agent makes, from input to output.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: ToolDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nTool is a tool call the agent makes, such as running a command or reading a file. The line follows the call from input to output, including errors and calls that wait for approval.\n\nTool is built with `Trace` with a `TraceCollapsible` for each call that has output.\n\n## Installation\n\nTool is built with the [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace) and [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block) 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\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\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 { TerminalIcon } from '@lucide\u002Fvue'\nimport { CodeBlock, CodeBlockContent } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\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>\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CTerminalIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Ran git status --short\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>\n        \u003CCodeBlock size=\"sm\">\n          \u003CCodeBlockContent wrap class=\"max-h-64\">\n            {{ output }}\n          \u003C\u002FCodeBlockContent>\n        \u003C\u002FCodeBlock>\n      \u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n```\n\n## States\n\nTrace does not read tool parts. Map each part's `state` to a `status` and a title.\n\n::component-preview\n---\nname: ToolStatesDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n| Tool part state                                           | `status`                             | Title                                                                |\n| --------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------- |\n| `input-streaming`, `input-available`                      | `\"running\"` while the chat streams   | Running …                                                            |\n| `input-streaming`, `input-available` after the chat stops | `\"error\"`                            | Failed to run …                                                      |\n| `approval-requested`                                      | -                                    | Not a line. An `Item` outside `Trace` with Approve and Deny buttons. |\n| `approval-responded`                                      | `\"running\"` if approved, none if not | Running … if approved, Denied … if not                               |\n| `output-available`                                        | none                                 | Ran …                                                                |\n| `output-error`                                            | `\"error\"`                            | Failed to run …                                                      |\n| `output-denied`                                           | none                                 | Denied …                                                             |\n\nA tool is a plain `TraceLine` while it runs, and a `TraceCollapsible` once its output arrives.\n\n```vue showLineNumbers title=\"components\u002FToolLine.vue\"\n\u003Cscript setup lang=\"ts\">\nimport { TerminalIcon } from '@lucide\u002Fvue'\nimport { computed } from 'vue'\nimport { CodeBlock, CodeBlockContent } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\nimport {\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\nconst props = defineProps\u003C{\n  part: ToolPart\n  streaming: boolean\n}>()\n\nconst command = computed(() => props.part.input?.command)\nconst denied = computed(\n  () =>\n    props.part.state === 'output-denied'\n    || (props.part.state === 'approval-responded' && !props.part.approval.approved),\n)\nconst failed = computed(() => props.part.state === 'output-error')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceLine v-if=\"denied\">\n    \u003CTraceIcon>\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FTraceIcon>\n    \u003CTraceTitle>Denied {{ command }}\u003C\u002FTraceTitle>\n  \u003C\u002FTraceLine>\n  \u003CTraceCollapsible\n    v-else-if=\"part.state === 'output-available' || part.state === 'output-error'\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"failed ? 'error' : undefined\">\n        \u003CTraceIcon>\n          \u003CTerminalIcon \u002F>\n        \u003C\u002FTraceIcon>\n        \u003CTraceTitle>{{ failed ? 'Failed to run' : 'Ran' }} {{ command }}\u003C\u002FTraceTitle>\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>\n      \u003CCodeBlock size=\"sm\">\n        \u003CCodeBlockContent wrap class=\"max-h-64\">\n          {{ part.state === 'output-error' ? part.errorText : part.output.stdout }}\n        \u003C\u002FCodeBlockContent>\n      \u003C\u002FCodeBlock>\n    \u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n  \u003CTraceLine v-else :status=\"streaming ? 'running' : 'error'\">\n    \u003CTraceIcon>\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FTraceIcon>\n    \u003CTraceTitle>{{ streaming ? 'Running' : 'Failed to run' }} {{ command }}\u003C\u002FTraceTitle>\n  \u003C\u002FTraceLine>\n\u003C\u002Ftemplate>\n```\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CToolLine\n      v-for=\"part in message.parts.filter(part => part.type === 'tool-runCommand')\"\n      :key=\"part.toolCallId\"\n      :part=\"part\"\n      :streaming=\"streaming\"\n    \u002F>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n```\n\nA tool that runs on the client stays `input-available` after the chat stops until you call `addToolOutput`. Treat it as waiting, not failed.\n\n## Output in a Sheet\n\nFor long output, wrap the `TraceLine` in a `SheetTrigger` and show the output in the sheet.\n\n::component-preview\n---\nname: ToolSheetDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nSee [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace#dialog).\n\n## Approval\n\nA pending approval is a question for the person, not a step the agent took, so it sits outside `Trace` as an `Item`. Once the person answers, the tool goes back to being a line. See [Confirmation](\u002Fdocs\u002Fai-elements\u002Fconfirmation).\n\n::component-preview\n---\nname: ToolApprovalDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CItem v-if=\"part.state === 'approval-requested'\" variant=\"outline\" size=\"sm\">\n    \u003CItemMedia variant=\"icon\">\n      \u003CTerminalIcon \u002F>\n    \u003C\u002FItemMedia>\n    \u003CItemContent>\n      \u003CItemTitle>Run {{ part.input.command }}?\u003C\u002FItemTitle>\n    \u003C\u002FItemContent>\n    \u003CItemActions>\n      \u003CButton\n        size=\"sm\"\n        variant=\"outline\"\n        @click=\"chat.addToolApprovalResponse({ id: part.approval.id, approved: false })\"\n      >\n        Deny\n      \u003C\u002FButton>\n      \u003CButton\n        size=\"sm\"\n        @click=\"chat.addToolApprovalResponse({ id: part.approval.id, approved: true })\"\n      >\n        Approve\n      \u003C\u002FButton>\n    \u003C\u002FItemActions>\n  \u003C\u002FItem>\n\u003C\u002Ftemplate>\n```\n\nPass `sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses` to the `Chat` so the chat continues once every approval has an answer.\n\n## Migrating from AI Elements Vue\n\nIf you added Tool from [AI Elements Vue](https:\u002F\u002Fwww.ai-elements-vue.com), your project has a `components\u002Fai-elements\u002Ftool\u002F` folder. Paste this prompt into your coding agent to rebuild it on Trace and Code Block. Every export keeps its name and props, so the code that uses it keeps working.\n\n```txt\nMigrate components\u002Fai-elements\u002Ftool\u002F from AI Elements Vue to the shadcn-vue Trace and Code Block 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 code-block\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Ftool and build Tool the same way.\n3. Rebuild each part:\n   - Import CodeBlock and CodeBlockContent from @\u002Fcomponents\u002Fui\u002Fcode-block, not from ..\u002Fcode-block.\n   - Tool.vue renders a Trace with a TraceCollapsible.\n   - ToolHeader.vue renders a TraceCollapsibleTrigger with a TraceLine, a TraceIcon and a TraceTitle, instead of a status Badge. Map state to the status and title: \"running\" and \"Running …\" while the input streams or is available, no status and \"Ran …\" for output-available, \"error\" and \"Failed to run …\" for output-error, and \"Denied …\" for output-denied.\n   - ToolContent.vue renders a TraceCollapsibleContent.\n   - ToolInput.vue and ToolOutput.vue render a CodeBlock with size=\"sm\" and a CodeBlockContent. ToolOutput shows errorText when the tool failed.\n   - Keep getStatusBadge and the ToolPart type exported, even if nothing renders the badge.\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":435,"description":1008},"Aj3cHhrSI-cWK65qrDgToC76F-U76l9mAm1tpPPxsMk",[1016,1017],{"title":431,"path":432,"stem":433,"children":-1},{"title":439,"path":440,"stem":441,"children":-1},1792076489341]