[{"data":1,"prerenderedAt":854},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fai-elements\u002Fchat":600,"surround-\u002Fdocs\u002Fai-elements\u002Fchat":851},[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":360,"body":602,"description":844,"extension":845,"links":846,"meta":847,"navigation":84,"new":84,"path":361,"rawbody":848,"seo":849,"stem":362,"__hash__":850},"content\u002Fdocs\u002Fai-elements\u002Fchat.md",{"type":603,"value":604,"toc":836},"minimark",[605,614,628,632,646,712,716,725,735,740,744,767,773,777,805,811,815,828],[606,607],"component-preview",{"className":608,"name":612,"previewClass":613},[609,610,611],"style-rhea","rounded-[34px]","sm:rounded-4xl","ChatDemo","h-auto theme-blue p-4 min-[480px]:p-8 min-[560px]:p-10 sm:px-10 sm:pt-16 sm:pb-8",[615,616,617,618,621,622,624,625,627],"p",{},"Chat is the thread of a conversation with the agent. Each turn is a ",[619,620,170],"a",{"href":384}," inside ",[619,623,174],{"href":175},". The person's message is the scroll anchor, so a new question settles near the top and the reply streams in under it. The field is a ",[619,626,395],{"href":396},".",[629,630,307],"h2",{"id":631},"installation",[615,633,634,635,637,638,637,640,642,643,645],{},"Chat is built with the ",[619,636,174],{"href":175},", ",[619,639,170],{"href":171},[619,641,49],{"href":50},", and ",[619,644,142],{"href":143}," components.",[647,648,649,664,678],"code-tabs",{},[650,651,652,658],"tabs-list",{},[653,654,656],"tabs-trigger",{"value":655},"cli",[615,657,529],{},[653,659,661],{"value":660},"manual",[615,662,663],{},"Manual",[665,666,667],"tabs-content",{"value":655},[668,669,675],"pre",{"className":670,"code":672,"language":673,"meta":674},[671],"language-bash","npx shadcn-vue@latest add message-scroller message bubble input-group\n","bash","",[676,677,672],"code",{"__ignoreMap":674},[665,679,680],{"value":660},[681,682,683,689,695,707],"steps",{},[684,685,686],"step",{},[615,687,688],{},"Install the required shadcn-vue dependencies:",[668,690,693],{"className":691,"code":692,"language":673,"meta":674},[671],"npx shadcn-vue@latest add message bubble input-group\n",[676,694,692],{"__ignoreMap":674},[684,696,697],{},[615,698,699,700,706],{},"Copy and paste the ",[619,701,705],{"href":702,"rel":703},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Fmessage-scroller",[704],"nofollow","GitHub source code"," into your project.",[684,708,709],{},[615,710,711],{},"Update the import paths to match your project setup.",[629,713,715],{"id":714},"usage","Usage",[668,717,723],{"className":718,"code":720,"language":721,"meta":722},[719],"language-vue","\u003Ctemplate>\n  \u003CMessageScrollerProvider auto-scroll>\n    \u003CMessageScroller>\n      \u003CMessageScrollerViewport>\n        \u003CMessageScrollerContent>\n          \u003CMessageScrollerItem :message-id=\"id\" scroll-anchor>\n            \u003CMessage align=\"end\">\n              \u003CMessageContent>\n                \u003CBubble align=\"end\" variant=\"muted\">\n                  \u003CBubbleContent>{{ text }}\u003C\u002FBubbleContent>\n                \u003C\u002FBubble>\n              \u003C\u002FMessageContent>\n            \u003C\u002FMessage>\n          \u003C\u002FMessageScrollerItem>\n        \u003C\u002FMessageScrollerContent>\n      \u003C\u002FMessageScrollerViewport>\n      \u003CMessageScrollerButton \u002F>\n    \u003C\u002FMessageScroller>\n  \u003C\u002FMessageScrollerProvider>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[676,724,720],{"__ignoreMap":674},[615,726,727,730,731,734],{},[676,728,729],{},"scroll-anchor"," goes on the person's turn. ",[676,732,733],{},"auto-scroll"," follows the reply while the person stays at the live edge.",[615,736,737,738,627],{},"See ",[619,739,174],{"href":175},[629,741,743],{"id":742},"ai-sdk","AI SDK",[615,745,746,747,750,751,755,756,758,759,762,763,766],{},"Render ",[676,748,749],{},"chat.messages"," from the ",[619,752,743],{"href":753,"rel":754},"https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Fgetting-started\u002Fnuxt",[704]," ",[676,757,360],{}," class. Each message is a ",[676,760,761],{},"MessageScrollerItem"," keyed by its ",[676,764,765],{},"id",", and the person's messages are the scroll anchors.",[668,768,771],{"className":769,"code":770,"language":721,"meta":722},[719],"\u003Cscript setup lang=\"ts\">\nimport { Chat } from '@ai-sdk\u002Fvue'\n\nconst chat = new Chat({})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessageScrollerProvider auto-scroll>\n    \u003CMessageScroller>\n      \u003CMessageScrollerViewport>\n        \u003CMessageScrollerContent :aria-busy=\"chat.status === 'streaming'\">\n          \u003CMessageScrollerItem\n            v-for=\"message in chat.messages\"\n            :key=\"message.id\"\n            :message-id=\"message.id\"\n            :scroll-anchor=\"message.role === 'user'\"\n          >\n            \u003C!-- Render the message -->\n          \u003C\u002FMessageScrollerItem>\n        \u003C\u002FMessageScrollerContent>\n      \u003C\u002FMessageScrollerViewport>\n      \u003CMessageScrollerButton \u002F>\n    \u003C\u002FMessageScroller>\n  \u003C\u002FMessageScrollerProvider>\n\u003C\u002Ftemplate>\n",[676,772,770],{"__ignoreMap":674},[629,774,776],{"id":775},"markdown","Markdown",[615,778,779,780,785,786,789,790,793,794,796,797,800,801,804],{},"The agent's reply streams as markdown. Render it with ",[619,781,784],{"href":782,"rel":783},"https:\u002F\u002Fcomark.dev",[704],"Comark"," (",[676,787,788],{},"@comark\u002Fvue",") and route fenced code to a ",[619,791,81],{"href":792},"\u002Fdocs\u002Fcomponents\u002Fcode-block#markdown"," with a custom ",[676,795,668],{}," component, the same way as in ",[619,798,170],{"href":799},"\u002Fdocs\u002Fai-elements\u002Fmessage#markdown",". Pass ",[676,802,803],{},"streaming"," only to the reply that is still streaming.",[668,806,809],{"className":807,"code":808,"language":721,"meta":722},[719],"\u003Cscript setup lang=\"ts\">\nimport { Markdown } from '@comark\u002Fvue'\nimport MarkdownCodeBlock from '.\u002FMarkdownCodeBlock.vue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageContent>\n      \u003CMarkdown\n        class=\"typeset\"\n        :value=\"getText(message)\"\n        :components=\"{ pre: MarkdownCodeBlock }\"\n        :streaming=\"chat.status === 'streaming' && message === chat.messages.at(-1)\"\n      \u002F>\n    \u003C\u002FMessageContent>\n  \u003C\u002FMessage>\n\u003C\u002Ftemplate>\n",[676,810,808],{"__ignoreMap":674},[629,812,814],{"id":813},"migrating-from-ai-elements-vue","Migrating from AI Elements Vue",[615,816,817,818,823,824,827],{},"If you added Conversation from ",[619,819,822],{"href":820,"rel":821},"https:\u002F\u002Fwww.ai-elements-vue.com",[704],"AI Elements Vue",", your project has a ",[676,825,826],{},"components\u002Fai-elements\u002Fconversation\u002F"," folder. Paste this prompt into your coding agent to rebuild it on Message Scroller. Every export keeps its name and props, so the code that uses it keeps working.",[668,829,834],{"className":830,"code":832,"language":833,"meta":674},[831],"language-txt","Migrate components\u002Fai-elements\u002Fconversation\u002F from AI Elements Vue to the shadcn-vue Message Scroller component.\n\nKeep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.\n\n1. Install Message Scroller: npx shadcn-vue@latest add message-scroller\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Fchat and build Chat the same way.\n3. Rebuild each part:\n   - Conversation renders a MessageScrollerProvider with auto-scroll and a MessageScroller, instead of StickToBottom.\n   - ConversationContent renders a MessageScrollerViewport and a MessageScrollerContent.\n   - ConversationScrollButton renders a MessageScrollerButton.\n   - Keep ConversationEmptyState, ConversationDownload and messagesToMarkdown as they are.\n4. In the code that renders the thread, wrap each message in a MessageScrollerItem with its message-id, and set scroll-anchor on the person's messages. This is the only change outside the folder.\n5. Remove vue-stick-to-bottom from the dependencies.\n6. Remove the imports the files no longer use.\n7. Run vue-tsc and fix any errors.\n","txt",[676,835,832],{"__ignoreMap":674},{"title":674,"searchDepth":837,"depth":837,"links":838},2,[839,840,841,842,843],{"id":631,"depth":837,"text":307},{"id":714,"depth":837,"text":715},{"id":742,"depth":837,"text":743},{"id":775,"depth":837,"text":776},{"id":813,"depth":837,"text":814},"The thread. Message Scroller keeps your place while the reply streams.","md",null,{"component":84},"---\ntitle: Chat\ndescription: The thread. Message Scroller keeps your place while the reply streams.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: ChatDemo\nclass: style-rhea rounded-[34px] sm:rounded-4xl\npreviewClass: h-auto theme-blue p-4 min-[480px]:p-8 min-[560px]:p-10 sm:px-10 sm:pt-16 sm:pb-8\n---\n::\n\nChat is the thread of a conversation with the agent. Each turn is a [Message](\u002Fdocs\u002Fai-elements\u002Fmessage) inside [Message Scroller](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller). The person's message is the scroll anchor, so a new question settles near the top and the reply streams in under it. The field is a [Prompt Input](\u002Fdocs\u002Fai-elements\u002Fprompt-input).\n\n## Installation\n\nChat is built with the [Message Scroller](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller), [Message](\u002Fdocs\u002Fcomponents\u002Fmessage), [Bubble](\u002Fdocs\u002Fcomponents\u002Fbubble), and [Input Group](\u002Fdocs\u002Fcomponents\u002Finput-group) 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 message-scroller message bubble input-group\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 message bubble input-group\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\u002Fmessage-scroller) 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\u003Ctemplate>\n  \u003CMessageScrollerProvider auto-scroll>\n    \u003CMessageScroller>\n      \u003CMessageScrollerViewport>\n        \u003CMessageScrollerContent>\n          \u003CMessageScrollerItem :message-id=\"id\" scroll-anchor>\n            \u003CMessage align=\"end\">\n              \u003CMessageContent>\n                \u003CBubble align=\"end\" variant=\"muted\">\n                  \u003CBubbleContent>{{ text }}\u003C\u002FBubbleContent>\n                \u003C\u002FBubble>\n              \u003C\u002FMessageContent>\n            \u003C\u002FMessage>\n          \u003C\u002FMessageScrollerItem>\n        \u003C\u002FMessageScrollerContent>\n      \u003C\u002FMessageScrollerViewport>\n      \u003CMessageScrollerButton \u002F>\n    \u003C\u002FMessageScroller>\n  \u003C\u002FMessageScrollerProvider>\n\u003C\u002Ftemplate>\n```\n\n`scroll-anchor` goes on the person's turn. `auto-scroll` follows the reply while the person stays at the live edge.\n\nSee [Message Scroller](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller).\n\n## AI SDK\n\nRender `chat.messages` from the [AI SDK](https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Fgetting-started\u002Fnuxt) `Chat` class. Each message is a `MessageScrollerItem` keyed by its `id`, and the person's messages are the scroll anchors.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Chat } from '@ai-sdk\u002Fvue'\n\nconst chat = new Chat({})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessageScrollerProvider auto-scroll>\n    \u003CMessageScroller>\n      \u003CMessageScrollerViewport>\n        \u003CMessageScrollerContent :aria-busy=\"chat.status === 'streaming'\">\n          \u003CMessageScrollerItem\n            v-for=\"message in chat.messages\"\n            :key=\"message.id\"\n            :message-id=\"message.id\"\n            :scroll-anchor=\"message.role === 'user'\"\n          >\n            \u003C!-- Render the message -->\n          \u003C\u002FMessageScrollerItem>\n        \u003C\u002FMessageScrollerContent>\n      \u003C\u002FMessageScrollerViewport>\n      \u003CMessageScrollerButton \u002F>\n    \u003C\u002FMessageScroller>\n  \u003C\u002FMessageScrollerProvider>\n\u003C\u002Ftemplate>\n```\n\n## Markdown\n\nThe agent's reply streams as markdown. Render it with [Comark](https:\u002F\u002Fcomark.dev) (`@comark\u002Fvue`) and route fenced code to a [Code Block](\u002Fdocs\u002Fcomponents\u002Fcode-block#markdown) with a custom `pre` component, the same way as in [Message](\u002Fdocs\u002Fai-elements\u002Fmessage#markdown). Pass `streaming` only to the reply that is still streaming.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Markdown } from '@comark\u002Fvue'\nimport MarkdownCodeBlock from '.\u002FMarkdownCodeBlock.vue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageContent>\n      \u003CMarkdown\n        class=\"typeset\"\n        :value=\"getText(message)\"\n        :components=\"{ pre: MarkdownCodeBlock }\"\n        :streaming=\"chat.status === 'streaming' && message === chat.messages.at(-1)\"\n      \u002F>\n    \u003C\u002FMessageContent>\n  \u003C\u002FMessage>\n\u003C\u002Ftemplate>\n```\n\n## Migrating from AI Elements Vue\n\nIf you added Conversation from [AI Elements Vue](https:\u002F\u002Fwww.ai-elements-vue.com), your project has a `components\u002Fai-elements\u002Fconversation\u002F` folder. Paste this prompt into your coding agent to rebuild it on Message Scroller. Every export keeps its name and props, so the code that uses it keeps working.\n\n```txt\nMigrate components\u002Fai-elements\u002Fconversation\u002F from AI Elements Vue to the shadcn-vue Message Scroller component.\n\nKeep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.\n\n1. Install Message Scroller: npx shadcn-vue@latest add message-scroller\n2. Read https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fai-elements\u002Fchat and build Chat the same way.\n3. Rebuild each part:\n   - Conversation renders a MessageScrollerProvider with auto-scroll and a MessageScroller, instead of StickToBottom.\n   - ConversationContent renders a MessageScrollerViewport and a MessageScrollerContent.\n   - ConversationScrollButton renders a MessageScrollerButton.\n   - Keep ConversationEmptyState, ConversationDownload and messagesToMarkdown as they are.\n4. In the code that renders the thread, wrap each message in a MessageScrollerItem with its message-id, and set scroll-anchor on the person's messages. This is the only change outside the folder.\n5. Remove vue-stick-to-bottom from the dependencies.\n6. Remove the imports the files no longer use.\n7. Run vue-tsc and fix any errors.\n```\n",{"title":360,"description":844},"NjeKi0alRZNjAAjzZDXAnwaEZsfaomsRERA43iUegPI",[852,853],{"title":356,"path":357,"stem":358,"children":-1},{"title":364,"path":365,"stem":366,"children":-1},1792076487143]