[{"data":1,"prerenderedAt":679},["ShallowReactive",2],{"navigation":3,"/getting-started":117,"/getting-started-surround":676},[4,11,98],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Introduction","/getting-started","1.getting-started/1.index",[9],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-house",{"title":12,"path":13,"stem":14,"children":15,"icon":17},"Component Catalog","/components","2.components/01.index",[16,18,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94],{"title":12,"path":13,"stem":14,"icon":17},"i-lucide-layout-grid",{"title":19,"path":20,"stem":21},"Text","/components/text","2.components/02.text",{"title":23,"path":24,"stem":25},"Button","/components/button","2.components/03.button",{"title":27,"path":28,"stem":29},"Slider","/components/slider","2.components/04.slider",{"title":31,"path":32,"stem":33},"ChoicePicker","/components/choicepicker","2.components/05.choicepicker",{"title":35,"path":36,"stem":37},"Modal","/components/modal","2.components/06.modal",{"title":39,"path":40,"stem":41},"DateTimeInput","/components/datetimeinput","2.components/07.datetimeinput",{"title":43,"path":44,"stem":45},"Image","/components/image","2.components/08.image",{"title":47,"path":48,"stem":49},"Icon","/components/icon","2.components/09.icon",{"title":51,"path":52,"stem":53},"Video","/components/video","2.components/10.video",{"title":55,"path":56,"stem":57},"AudioPlayer","/components/audioplayer","2.components/11.audioplayer",{"title":59,"path":60,"stem":61},"Row","/components/row","2.components/12.row",{"title":63,"path":64,"stem":65},"Column","/components/column","2.components/13.column",{"title":67,"path":68,"stem":69},"List","/components/list","2.components/14.list",{"title":71,"path":72,"stem":73},"Card","/components/card","2.components/15.card",{"title":75,"path":76,"stem":77},"Tabs","/components/tabs","2.components/16.tabs",{"title":79,"path":80,"stem":81},"Divider","/components/divider","2.components/17.divider",{"title":83,"path":84,"stem":85},"TextField","/components/textfield","2.components/18.textfield",{"title":87,"path":88,"stem":89},"CheckBox","/components/checkbox","2.components/19.checkbox",{"title":91,"path":92,"stem":93},"Slideover","/components/slideover","2.components/20.slideover",{"title":95,"path":96,"stem":97},"Table","/components/table","2.components/21.table",{"title":99,"path":100,"stem":101,"children":102,"icon":104},"Recipes","/recipes","3.recipes/01.index",[103,105,109,113],{"title":99,"path":100,"stem":101,"icon":104},"i-lucide-chef-hat",{"title":106,"path":107,"stem":108},"Booking Receipt","/recipes/booking-receipt","3.recipes/02.booking-receipt",{"title":110,"path":111,"stem":112},"Establishment Detail","/recipes/establishment-detail","3.recipes/03.establishment-detail",{"title":114,"path":115,"stem":116},"Booking History","/recipes/booking-history","3.recipes/04.booking-history",{"id":118,"title":5,"body":119,"description":669,"extension":670,"links":671,"meta":672,"navigation":673,"path":6,"seo":674,"stem":7,"__hash__":675},"docs/1.getting-started/1.index.md",{"type":120,"value":121,"toc":662},"minimark",[122,127,148,152,159,529,540,544,551,610,613,617,624,628,658],[123,124,126],"h2",{"id":125},"what-is-a2nui","What is A2NUI?",[128,129,130,131,135,136,143,144,147],"p",{},"A2NUI is a ",[132,133,134],"strong",{},"component library and playground"," that implements the ",[137,138,142],"a",{"href":139,"rel":140},"https://github.com/AvaBliss/A2NUI",[141],"nofollow","A2UI protocol v0.10"," for Nuxt. It takes AI-generated JSONL streams and renders them as native ",[132,145,146],{},"Nuxt UI"," components.",[123,149,151],{"id":150},"the-a2ui-protocol","The A2UI Protocol",[128,153,154,155,158],{},"A2UI (AI-to-UI) is a streaming JSONL protocol designed to be easily generated by LLMs. Instead of generating raw HTML or framework-specific code, the AI outputs an ",[132,156,157],{},"abstract component tree"," that any renderer can display natively.",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"demo\",\"catalogId\":\"standard\"}}\n{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"demo\",\"components\":[\n  {\"id\":\"root\",\"component\":\"Column\",\"children\":[\"heading\",\"btn\"]},\n  {\"id\":\"heading\",\"component\":\"Text\",\"text\":\"Hello World\",\"variant\":\"h1\"},\n  {\"id\":\"btn\",\"component\":\"Button\",\"label\":\"Click Me\",\"variant\":\"primary\"}\n]}}\n","json","",[167,168,169,249,305,376,450,523],"code",{"__ignoreMap":165},[170,171,174,178,181,185,187,190,192,196,198,201,203,206,208,211,213,217,219,221,223,226,228,230,232,235,237,239,241,244,246],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"sMK4o","{",[170,179,180],{"class":176},"\"",[170,182,184],{"class":183},"spNyl","version",[170,186,180],{"class":176},[170,188,189],{"class":176},":",[170,191,180],{"class":176},[170,193,195],{"class":194},"sfazB","v0.10",[170,197,180],{"class":176},[170,199,200],{"class":176},",",[170,202,180],{"class":176},[170,204,205],{"class":183},"createSurface",[170,207,180],{"class":176},[170,209,210],{"class":176},":{",[170,212,180],{"class":176},[170,214,216],{"class":215},"sBMFI","surfaceId",[170,218,180],{"class":176},[170,220,189],{"class":176},[170,222,180],{"class":176},[170,224,225],{"class":194},"demo",[170,227,180],{"class":176},[170,229,200],{"class":176},[170,231,180],{"class":176},[170,233,234],{"class":215},"catalogId",[170,236,180],{"class":176},[170,238,189],{"class":176},[170,240,180],{"class":176},[170,242,243],{"class":194},"standard",[170,245,180],{"class":176},[170,247,248],{"class":176},"}}\n",[170,250,252,254,256,258,260,262,264,266,268,270,272,275,277,279,281,283,285,287,289,291,293,295,297,300,302],{"class":172,"line":251},2,[170,253,177],{"class":176},[170,255,180],{"class":176},[170,257,184],{"class":183},[170,259,180],{"class":176},[170,261,189],{"class":176},[170,263,180],{"class":176},[170,265,195],{"class":194},[170,267,180],{"class":176},[170,269,200],{"class":176},[170,271,180],{"class":176},[170,273,274],{"class":183},"updateComponents",[170,276,180],{"class":176},[170,278,210],{"class":176},[170,280,180],{"class":176},[170,282,216],{"class":215},[170,284,180],{"class":176},[170,286,189],{"class":176},[170,288,180],{"class":176},[170,290,225],{"class":194},[170,292,180],{"class":176},[170,294,200],{"class":176},[170,296,180],{"class":176},[170,298,299],{"class":215},"components",[170,301,180],{"class":176},[170,303,304],{"class":176},":[\n",[170,306,308,311,313,317,319,321,323,326,328,330,332,335,337,339,341,343,345,347,349,352,354,357,359,362,364,366,368,371,373],{"class":172,"line":307},3,[170,309,310],{"class":176},"  {",[170,312,180],{"class":176},[170,314,316],{"class":315},"sbssI","id",[170,318,180],{"class":176},[170,320,189],{"class":176},[170,322,180],{"class":176},[170,324,325],{"class":194},"root",[170,327,180],{"class":176},[170,329,200],{"class":176},[170,331,180],{"class":176},[170,333,334],{"class":315},"component",[170,336,180],{"class":176},[170,338,189],{"class":176},[170,340,180],{"class":176},[170,342,63],{"class":194},[170,344,180],{"class":176},[170,346,200],{"class":176},[170,348,180],{"class":176},[170,350,351],{"class":315},"children",[170,353,180],{"class":176},[170,355,356],{"class":176},":[",[170,358,180],{"class":176},[170,360,361],{"class":194},"heading",[170,363,180],{"class":176},[170,365,200],{"class":176},[170,367,180],{"class":176},[170,369,370],{"class":194},"btn",[170,372,180],{"class":176},[170,374,375],{"class":176},"]},\n",[170,377,379,381,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,418,420,422,424,427,429,431,433,436,438,440,442,445,447],{"class":172,"line":378},4,[170,380,310],{"class":176},[170,382,180],{"class":176},[170,384,316],{"class":315},[170,386,180],{"class":176},[170,388,189],{"class":176},[170,390,180],{"class":176},[170,392,361],{"class":194},[170,394,180],{"class":176},[170,396,200],{"class":176},[170,398,180],{"class":176},[170,400,334],{"class":315},[170,402,180],{"class":176},[170,404,189],{"class":176},[170,406,180],{"class":176},[170,408,19],{"class":194},[170,410,180],{"class":176},[170,412,200],{"class":176},[170,414,180],{"class":176},[170,416,417],{"class":315},"text",[170,419,180],{"class":176},[170,421,189],{"class":176},[170,423,180],{"class":176},[170,425,426],{"class":194},"Hello World",[170,428,180],{"class":176},[170,430,200],{"class":176},[170,432,180],{"class":176},[170,434,435],{"class":315},"variant",[170,437,180],{"class":176},[170,439,189],{"class":176},[170,441,180],{"class":176},[170,443,444],{"class":194},"h1",[170,446,180],{"class":176},[170,448,449],{"class":176},"},\n",[170,451,453,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,492,494,496,498,501,503,505,507,509,511,513,515,518,520],{"class":172,"line":452},5,[170,454,310],{"class":176},[170,456,180],{"class":176},[170,458,316],{"class":315},[170,460,180],{"class":176},[170,462,189],{"class":176},[170,464,180],{"class":176},[170,466,370],{"class":194},[170,468,180],{"class":176},[170,470,200],{"class":176},[170,472,180],{"class":176},[170,474,334],{"class":315},[170,476,180],{"class":176},[170,478,189],{"class":176},[170,480,180],{"class":176},[170,482,23],{"class":194},[170,484,180],{"class":176},[170,486,200],{"class":176},[170,488,180],{"class":176},[170,490,491],{"class":315},"label",[170,493,180],{"class":176},[170,495,189],{"class":176},[170,497,180],{"class":176},[170,499,500],{"class":194},"Click Me",[170,502,180],{"class":176},[170,504,200],{"class":176},[170,506,180],{"class":176},[170,508,435],{"class":315},[170,510,180],{"class":176},[170,512,189],{"class":176},[170,514,180],{"class":176},[170,516,517],{"class":194},"primary",[170,519,180],{"class":176},[170,521,522],{"class":176},"}\n",[170,524,526],{"class":172,"line":525},6,[170,527,528],{"class":176},"]}}\n",[128,530,531,532,535,536,539],{},"This produces a heading and a button — rendered with ",[167,533,534],{},"UButton",", ",[167,537,538],{},"UInput",", and other Nuxt UI components.",[123,541,543],{"id":542},"standard-catalog","Standard Catalog",[128,545,546,547,550],{},"The v0.10 standard catalog defines ",[132,548,549],{},"18 components"," across four categories:",[552,553,554,567],"table",{},[555,556,557],"thead",{},[558,559,560,564],"tr",{},[561,562,563],"th",{},"Category",[561,565,566],{},"Components",[568,569,570,581,591,600],"tbody",{},[558,571,572,578],{},[573,574,575],"td",{},[132,576,577],{},"Display",[573,579,580],{},"Text, Image, Icon, Video, AudioPlayer",[558,582,583,588],{},[573,584,585],{},[132,586,587],{},"Layout",[573,589,590],{},"Row, Column, List, Card, Tabs, Divider",[558,592,593,598],{},[573,594,595],{},[132,596,597],{},"Overlay",[573,599,35],{},[558,601,602,607],{},[573,603,604],{},[132,605,606],{},"Interactive",[573,608,609],{},"Button, TextField, CheckBox, ChoicePicker, Slider, DateTimeInput",[128,611,612],{},"All 18 are implemented in A2NUI with full Nuxt UI mapping.",[123,614,616],{"id":615},"architecture","Architecture",[160,618,622],{"className":619,"code":621,"language":417},[620],"language-text","┌─────────────┐     ┌──────────────┐     ┌──────────────┐\n│   LLM/AI    │────▶│  A2UI JSONL  │────▶│  A2NUI       │\n│  (Gemini)   │     │  (Protocol)  │     │  Renderer    │\n└─────────────┘     └──────────────┘     └──────┬───────┘\n                                                │\n                                    ┌───────────▼──────────┐\n                                    │     Nuxt UI          │\n                                    │  Native Components   │\n                                    └──────────────────────┘\n",[167,623,621],{"__ignoreMap":165},[123,625,627],{"id":626},"quick-start","Quick Start",[629,630,631,642,652],"ol",{},[632,633,634,637,638,641],"li",{},[132,635,636],{},"Open the Playground"," — Go to ",[137,639,640],{"href":640},"/playground"," and try prompting the AI",[632,643,644,647,648,651],{},[132,645,646],{},"Browse Components"," — Explore the ",[137,649,650],{"href":13},"component catalog"," to see each mapping",[632,653,654,657],{},[132,655,656],{},"Paste JSONL"," — Use the Paste tab in the playground to test raw A2UI messages",[659,660,661],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":165,"searchDepth":173,"depth":251,"links":663},[664,665,666,667,668],{"id":125,"depth":251,"text":126},{"id":150,"depth":251,"text":151},{"id":542,"depth":251,"text":543},{"id":615,"depth":251,"text":616},{"id":626,"depth":251,"text":627},"A2NUI bridges AI-generated abstract UI to native Nuxt UI components.","md",null,{},{"icon":10},{"title":5,"description":669},"5YF829qkixKLkh0cFjsZltg6y_HvhDs8GjrcP24NfLM",[671,677],{"title":12,"path":13,"stem":14,"description":678,"icon":17,"children":-1},"All 20 A2UI v0.10 standard catalog components mapped to Nuxt UI.",1771187320907]