[{"data":1,"prerenderedAt":705},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":113,"-getting-started-installation-surround":700},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":16,"body":115,"description":693,"extension":694,"links":695,"meta":696,"navigation":697,"path":17,"seo":698,"stem":18,"__hash__":699},"docs\u002F1.getting-started\u002F2.installation.md",{"type":116,"value":117,"toc":686},"minimark",[118,127,156,160,189,299,302,310,312,328,455,458,474,528,555,573,577,580,593,596,653,657,671,682],[119,120,121,122,126],"p",{},"There are four ways in, and which one you need depends on your ",[123,124,125],"strong",{},"builder",", not your framework.",[128,129,130,135,148,152],"card-group",{},[131,132,134],"card",{"icon":133,"title":38,"to":39},"i-lucide-zap","Vue, React, Svelte, Solid — and Nuxt, SvelteKit, Astro with one extra line.",[131,136,138,139,143,144,147],{"icon":137,"title":63,"to":64},"i-lucide-box","webpack 5 with ",[140,141,142],"code",{},"webpack-dev-server"," and ",[140,145,146],{},"html-webpack-plugin",".",[131,149,151],{"icon":61,"title":150,"to":59},"Next","Its own package, because Next has no plugin API to hook into.",[131,153,155],{"icon":97,"title":154,"to":74},"Anything else","Angular, Rails, Laravel, plain HTML — run the CLI beside your own server.",[157,158,38],"h2",{"id":159},"vite",[161,162,168],"pre",{"className":163,"code":164,"filename":165,"language":166,"meta":167,"style":167},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D vite-plugin-quello\n","Terminal","bash","",[140,169,170],{"__ignoreMap":167},[171,172,175,179,183,186],"span",{"class":173,"line":174},"line",1,[171,176,178],{"class":177},"sBMFI","pnpm",[171,180,182],{"class":181},"sfazB"," add",[171,184,185],{"class":181}," -D",[171,187,188],{"class":181}," vite-plugin-quello\n",[161,190,195],{"className":191,"code":192,"filename":193,"language":194,"meta":167,"style":167},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'vite'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [quello()],\n})\n","vite.config.ts","ts",[140,196,197,225,243,250,268,290],{"__ignoreMap":167},[171,198,199,203,207,211,214,217,220,222],{"class":173,"line":174},[171,200,202],{"class":201},"s7zQu","import",[171,204,206],{"class":205},"sMK4o"," {",[171,208,210],{"class":209},"sTEyZ"," defineConfig",[171,212,213],{"class":205}," }",[171,215,216],{"class":201}," from",[171,218,219],{"class":205}," '",[171,221,159],{"class":181},[171,223,224],{"class":205},"'\n",[171,226,228,230,233,236,238,241],{"class":173,"line":227},2,[171,229,202],{"class":201},[171,231,232],{"class":209}," quello ",[171,234,235],{"class":201},"from",[171,237,219],{"class":205},[171,239,240],{"class":181},"vite-plugin-quello",[171,242,224],{"class":205},[171,244,246],{"class":173,"line":245},3,[171,247,249],{"emptyLinePlaceholder":248},true,"\n",[171,251,253,256,259,262,265],{"class":173,"line":252},4,[171,254,255],{"class":201},"export",[171,257,258],{"class":201}," default",[171,260,210],{"class":261},"s2Zo4",[171,263,264],{"class":209},"(",[171,266,267],{"class":205},"{\n",[171,269,271,275,278,281,284,287],{"class":173,"line":270},5,[171,272,274],{"class":273},"swJcz","  plugins",[171,276,277],{"class":205},":",[171,279,280],{"class":209}," [",[171,282,283],{"class":261},"quello",[171,285,286],{"class":209},"()]",[171,288,289],{"class":205},",\n",[171,291,293,296],{"class":173,"line":292},6,[171,294,295],{"class":205},"}",[171,297,298],{"class":209},")\n",[119,300,301],{},"Start your dev server. That is the whole setup for a Vite SPA — the script tag is injected for you.",[119,303,304,305,309],{},"Frameworks that render their own HTML (Nuxt, SvelteKit, Astro) need ",[306,307,308],"a",{"href":44},"one extra\nline",", because the hook that injects the tag is never called there.",[157,311,63],{"id":63},[161,313,315],{"className":163,"code":314,"filename":165,"language":166,"meta":167,"style":167},"pnpm add -D webpack-plugin-quello\n",[140,316,317],{"__ignoreMap":167},[171,318,319,321,323,325],{"class":173,"line":174},[171,320,178],{"class":177},[171,322,182],{"class":181},[171,324,185],{"class":181},[171,326,327],{"class":181}," webpack-plugin-quello\n",[161,329,334],{"className":330,"code":331,"filename":332,"language":333,"meta":167,"style":167},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import QuelloWebpackPlugin from 'webpack-plugin-quello'\n\nexport default {\n  plugins: [\n    new HtmlWebpackPlugin({ template: '.\u002Fsrc\u002Findex.html' }),\n    new QuelloWebpackPlugin(),\n  ],\n  devServer: { port: 3000 },\n}\n","webpack.config.js","js",[140,335,336,352,356,365,374,407,419,427,449],{"__ignoreMap":167},[171,337,338,340,343,345,347,350],{"class":173,"line":174},[171,339,202],{"class":201},[171,341,342],{"class":209}," QuelloWebpackPlugin ",[171,344,235],{"class":201},[171,346,219],{"class":205},[171,348,349],{"class":181},"webpack-plugin-quello",[171,351,224],{"class":205},[171,353,354],{"class":173,"line":227},[171,355,249],{"emptyLinePlaceholder":248},[171,357,358,360,362],{"class":173,"line":245},[171,359,255],{"class":201},[171,361,258],{"class":201},[171,363,364],{"class":205}," {\n",[171,366,367,369,371],{"class":173,"line":252},[171,368,274],{"class":273},[171,370,277],{"class":205},[171,372,373],{"class":209}," [\n",[171,375,376,379,382,384,387,390,392,394,397,400,402,405],{"class":173,"line":270},[171,377,378],{"class":205},"    new",[171,380,381],{"class":261}," HtmlWebpackPlugin",[171,383,264],{"class":209},[171,385,386],{"class":205},"{",[171,388,389],{"class":273}," template",[171,391,277],{"class":205},[171,393,219],{"class":205},[171,395,396],{"class":181},".\u002Fsrc\u002Findex.html",[171,398,399],{"class":205},"'",[171,401,213],{"class":205},[171,403,404],{"class":209},")",[171,406,289],{"class":205},[171,408,409,411,414,417],{"class":173,"line":292},[171,410,378],{"class":205},[171,412,413],{"class":261}," QuelloWebpackPlugin",[171,415,416],{"class":209},"()",[171,418,289],{"class":205},[171,420,422,425],{"class":173,"line":421},7,[171,423,424],{"class":209},"  ]",[171,426,289],{"class":205},[171,428,430,433,435,437,440,442,446],{"class":173,"line":429},8,[171,431,432],{"class":273},"  devServer",[171,434,277],{"class":205},[171,436,206],{"class":205},[171,438,439],{"class":273}," port",[171,441,277],{"class":205},[171,443,445],{"class":444},"sbssI"," 3000",[171,447,448],{"class":205}," },\n",[171,450,452],{"class":173,"line":451},9,[171,453,454],{"class":205},"}\n",[157,456,150],{"id":457},"next",[161,459,461],{"className":163,"code":460,"filename":165,"language":166,"meta":167,"style":167},"pnpm add -D @quello\u002Fnext\n",[140,462,463],{"__ignoreMap":167},[171,464,465,467,469,471],{"class":173,"line":174},[171,466,178],{"class":177},[171,468,182],{"class":181},[171,470,185],{"class":181},[171,472,473],{"class":181}," @quello\u002Fnext\n",[161,475,478],{"className":191,"code":476,"filename":477,"language":194,"meta":167,"style":167},"import { withQuello } from '@quello\u002Fnext\u002Fconfig'\n\nexport default withQuello({\n  \u002F\u002F your config, untouched\n})\n","next.config.ts",[140,479,480,500,504,516,522],{"__ignoreMap":167},[171,481,482,484,486,489,491,493,495,498],{"class":173,"line":174},[171,483,202],{"class":201},[171,485,206],{"class":205},[171,487,488],{"class":209}," withQuello",[171,490,213],{"class":205},[171,492,216],{"class":201},[171,494,219],{"class":205},[171,496,497],{"class":181},"@quello\u002Fnext\u002Fconfig",[171,499,224],{"class":205},[171,501,502],{"class":173,"line":227},[171,503,249],{"emptyLinePlaceholder":248},[171,505,506,508,510,512,514],{"class":173,"line":245},[171,507,255],{"class":201},[171,509,258],{"class":201},[171,511,488],{"class":261},[171,513,264],{"class":209},[171,515,267],{"class":205},[171,517,518],{"class":173,"line":252},[171,519,521],{"class":520},"sHwdD","  \u002F\u002F your config, untouched\n",[171,523,524,526],{"class":173,"line":270},[171,525,295],{"class":205},[171,527,298],{"class":209},[161,529,534],{"className":530,"code":531,"filename":532,"language":533,"meta":167,"style":167},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { Quello } from '@quello\u002Fnext'\n\n\u002F\u002F …inside \u003Cbody>, once\n\u003CQuello \u002F>\n","app\u002Flayout.tsx","tsx",[140,535,536,541,545,550],{"__ignoreMap":167},[171,537,538],{"class":173,"line":174},[171,539,540],{},"import { Quello } from '@quello\u002Fnext'\n",[171,542,543],{"class":173,"line":227},[171,544,249],{"emptyLinePlaceholder":248},[171,546,547],{"class":173,"line":245},[171,548,549],{},"\u002F\u002F …inside \u003Cbody>, once\n",[171,551,552],{"class":173,"line":252},[171,553,554],{},"\u003CQuello \u002F>\n",[119,556,557,558,561,562,565,566,569,570,147],{},"On the next ",[140,559,560],{},"next dev",", ",[140,563,564],{},"withQuello"," writes the route handler, the agent file and the ",[140,567,568],{},".gitignore","\nentry, then prints where each went. See the ",[306,571,572],{"href":59},"Next guide",[157,574,576],{"id":575},"no-bundler-quello-can-hook-into","No bundler quello can hook into",[119,578,579],{},"Angular, a Rails or Laravel app, three HTML files in a folder — anything that will not take a\nplugin. Run quello beside it:",[161,581,583],{"className":163,"code":582,"filename":165,"language":166,"meta":167,"style":167},"npx quello-cli\n",[140,584,585],{"__ignoreMap":167},[171,586,587,590],{"class":173,"line":174},[171,588,589],{"class":177},"npx",[171,591,592],{"class":181}," quello-cli\n",[119,594,595],{},"It prints the tag to paste into your page:",[161,597,602],{"className":598,"code":599,"filename":600,"language":601,"meta":167,"style":167},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript defer src=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js\"\n        data-quello-endpoint=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks\">\u003C\u002Fscript>\n","index.html","html",[140,603,604,631],{"__ignoreMap":167},[171,605,606,609,612,616,619,622,625,628],{"class":173,"line":174},[171,607,608],{"class":205},"\u003C",[171,610,611],{"class":273},"script",[171,613,615],{"class":614},"spNyl"," defer",[171,617,618],{"class":614}," src",[171,620,621],{"class":205},"=",[171,623,624],{"class":205},"\"",[171,626,627],{"class":181},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js",[171,629,630],{"class":205},"\"\n",[171,632,633,636,638,640,643,645,648,650],{"class":173,"line":227},[171,634,635],{"class":614},"        data-quello-endpoint",[171,637,621],{"class":205},[171,639,624],{"class":205},[171,641,642],{"class":181},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks",[171,644,624],{"class":205},[171,646,647],{"class":205},">\u003C\u002F",[171,649,611],{"class":273},[171,651,652],{"class":205},">\n",[157,654,656],{"id":655},"check-it-worked","Check it worked",[119,658,659,660,662,663,666,667,670],{},"Open your app. A small ",[140,661,283],{}," pill should be sitting in the bottom-right corner. Press ",[140,664,665],{},"Alt+Q",",\nclick something, and a ",[140,668,669],{},".quello\u002Fpicks.json"," file should appear in your project.",[672,673,674,675,678,679,681],"tip",{},"Add ",[140,676,677],{},".quello\u002F"," to your ",[140,680,568],{},". It describes your current browser session, not your project.",[683,684,685],"style",{},"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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":167,"searchDepth":227,"depth":227,"links":687},[688,689,690,691,692],{"id":159,"depth":227,"text":38},{"id":63,"depth":227,"text":63},{"id":457,"depth":227,"text":150},{"id":575,"depth":227,"text":576},{"id":655,"depth":227,"text":656},"Pick the route that matches your setup — a Vite plugin, a webpack plugin, or the CLI.","md",null,{},{"icon":19},{"title":16,"description":693},"fAA1pzVXAAQrFX7YkAwpV_bcShyKzFHUZ16KWYcinEI",[701,703],{"title":11,"path":12,"stem":13,"description":702,"icon":14,"children":-1},"What quello is, what a pick contains, and how it reaches your agent.",{"title":21,"path":22,"stem":23,"description":704,"icon":24,"children":-1},"Picking, the toolbar, the pick list, notes and settings.",1788454294693]