(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6469"],{5011:function(e,t,n){"use strict";n.r(t),n.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>o,assets:()=>l,toc:()=>d,contentTitle:()=>c});var o=JSON.parse('{"id":"features/ai","title":"AI Code Assistant \uD83E\uDE84","description":"LiveCodes supports AI-powered code completion, totally for free with no account or API token required, using Codeium, the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as flipping a switch!)","source":"@site/docs/features/ai.mdx","sourceDirName":"features","slug":"/features/ai","permalink":"/docs/features/ai","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/ai.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"IntelliSense","permalink":"/docs/features/intellisense"},"next":{"title":"Code Format","permalink":"/docs/features/code-format"}}'),r=n("5893"),s=n("65"),i=n("8500");let a={},c="AI Code Assistant \uD83E\uDE84",l={},d=[{value:"Examples:",id:"examples",level:2},{value:"Instructions",id:"instructions",level:2},{value:"UI",id:"ui",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Usage",id:"usage",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"ai-code-assistant-",children:"AI Code Assistant \uD83E\uDE84"})}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes supports AI-powered code completion, totally for ",(0,r.jsx)(t.strong,{children:"free"})," with ",(0,r.jsx)(t.strong,{children:"no account or API token required"}),", using ",(0,r.jsx)(t.a,{href:"https://codeium.com/",children:"Codeium"}),", the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as ",(0,r.jsx)(t.a,{href:"#ui",children:"flipping a switch"}),"!)"]}),"\n",(0,r.jsxs)(t.p,{children:["The large generative machine learning model is capable of understanding the context of your code and comments (across the ",(0,r.jsx)(t.a,{href:"./projects#markup-editor",children:"3 code editors"}),") in order to generate suggestions on what you might want to type next."]}),"\n",(0,r.jsxs)(t.p,{children:["It has a wide range of language support, and it works everywhere (in the ",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"})," and ",(0,r.jsx)(t.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," apps)."]}),"\n",(0,r.jsx)(t.p,{children:"Powered by:"}),"\n",(0,r.jsx)("a",{href:"https://codeium.com/",children:(0,r.jsx)("img",{width:"300px",src:"/docs/img/credits/codeium.svg",alt:"Codeium logo"})}),"\n",(0,r.jsx)(t.p,{children:"."}),"\n",(0,r.jsx)(t.h2,{id:"examples",children:"Examples:"}),"\n",(0,r.jsx)(t.p,{children:"JavaScript:"}),"\n",(0,r.jsx)("video",{controls:!0,style:{width:"100%"},children:(0,r.jsx)("source",{src:"/docs/vid/LiveCodes-AI.mp4",type:"video/mp4"})}),"\n",(0,r.jsx)(t.p,{children:"Python:"}),"\n",(0,r.jsx)("video",{controls:!0,style:{width:"100%"},children:(0,r.jsx)("source",{src:"/docs/vid/LiveCodes-AI-py.mp4",type:"video/mp4"})}),"\n",(0,r.jsx)(t.h2,{id:"instructions",children:"Instructions"}),"\n",(0,r.jsx)(t.p,{children:"The AI code assistant can be enabled from:"}),"\n",(0,r.jsx)(t.h3,{id:"ui",children:"UI"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/features/editor-settings",children:"editor settings"})," screen (Settings menu \u2192 Editor Settings \u2192 Enable AI Code Assistant)."]}),"\n","\n",(0,r.jsx)(i.Z,{params:{screen:"editor-settings"},linkText:"direct link"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Editor Settings",src:n(5548).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Note"})}),"\n",(0,r.jsxs)(t.p,{children:["When set from the UI, this configuration is saved locally to ",(0,r.jsx)(t.a,{href:"/docs/features/user-settings",children:"user settings"})," and is remembered across sessions."]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsxs)(t.p,{children:["Alternatively, this can be enabled (",(0,r.jsx)(t.em,{children:"only for the current session"}),") using the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#enableai",children:(0,r.jsx)(t.code,{children:"enableAI"})})," property in the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),". This can be used to enable the AI code assistant in ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', {\n config: {\n // highlight-next-line\n enableAI: true,\n },\n});\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Also this can be enabled using ",(0,r.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"})," (e.g. ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?enableAI",children:"https://livecodes.io/?enableAI"}),")."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["On typing, the code completion suggestions will be shown in dimmed color. Press ",(0,r.jsx)("kbd",{children:"Tab"})," to accept, or ",(0,r.jsx)("kbd",{children:"Esc"})," to cancel."]}),"\n",(0,r.jsx)(t.p,{children:"On mobile, tap on the suggestion to accept it, or continue typing to reject."}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"caution",children:(0,r.jsxs)(t.p,{children:["Please note that when using Codeium AI assistant, your code is sent to Codeium servers for code completion. However, your code is not used for training their model. Check Codeium ",(0,r.jsx)(t.a,{href:"https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F",children:"FAQ"})," and ",(0,r.jsx)(t.a,{href:"https://codeium.com/privacy-policy",children:"privacy policy"})," for more details."]})})]})}function u(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},5548:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});let o=n.p+"assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg"},7728:function(e,t,n){e=n.nmd(e);var o=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",o={};function r(e,t){if(!o[e]){o[e]={};for(var n=0;n>>8,n[2*o+1]=i%256}return n},decompressFromUint8Array:function(t){if(null==t)return s.decompress(t);for(var n=Array(t.length/2),o=0,r=n.length;od.charCodeAt(0)){for(o=0;o>=1}else{for(o=0,r=1;o>=1}0==--h&&(h=Math.pow(2,p),p++),delete a[d]}else for(o=0,r=i[d];o>=1;0==--h&&(h=Math.pow(2,p),p++),i[l]=u++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(o=0;o>=1}else{for(o=0,r=1;o>=1}0==--h&&(h=Math.pow(2,p),p++),delete a[d]}else for(o=0,r=i[d];o>=1;0==--h&&(h=Math.pow(2,p),p++)}for(o=0,r=2;o>=1;for(;;){if(m<<=1,g==t-1){f.push(n(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:s._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,n,o){var r,s,i,a,c,l,d,h=[],u=4,p=4,f=3,m="",g=[],v={val:o(0),position:n,index:1};for(r=0;r<3;r+=1)h[r]=r;for(i=0,c=4,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(h[3]=d,s=d,g.push(d);;){if(v.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[p++]=e(i),d=p-1,u--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[p++]=e(i),d=p-1,u--;break;case 2:return g.join("")}if(0==u&&(u=Math.pow(2,f),f++),h[d])m=h[d];else{if(d!==p)return null;m=s+s.charAt(0)}g.push(m),h[p++]=s+m.charAt(0),u--,s=m,0==u&&(u=Math.pow(2,f),f++)}}};return s}();"function"==typeof define&&define.amd?define(function(){return o}):null!=e&&(e.exports=o)},8500:function(e,t,n){"use strict";n.d(t,{Z:()=>l});var o=n("5893");n("7294");var r=n("6735");function s(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}var i=n("1705"),a=n("8294"),c=n("1858");function l(e){let{params:t,config:n,code:r,language:l="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:n});return(0,o.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[r&&(0,o.jsx)(s,{children:()=>(0,o.jsx)(i.Z,{language:l,title:d,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,l):r})}),(0,o.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,o.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){"use strict";n.d(t,{T:function(){return r},r:function(){return s}});var o=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:o,loading:r="lazy",view:i}=t,a=o||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)A(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(s(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let o="livecodes",s=c.querySelector(`iframe.${o}`),i=s||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?A(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=d.href,s||c.appendChild(i)}),g=new Promise(e=>{addEventListener("message",function t(n){n.source===m.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{g.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},h),await g,e()}),y=(e,t)=>new Promise(async(n,o)=>{if(p)return o(f);await v();let r=E();addEventListener("message",function t(s){if(s.source===m.contentWindow&&s.origin===h&&s.data?.type==="livecodes-api-response"&&s.data?.id===r&&s.data.method===e){removeEventListener("message",t);let e=s.data.payload;e?.error?o(e.error):n(e)}}),m.contentWindow?.postMessage({method:e,id:r,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(f);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},j=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=j(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==h||!t||!x[t])return;let n=e.data?.payload;x[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function A(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;og.settled?y("destroy").then(C):p?Promise.reject(f):(C(),Promise.resolve())}}function s(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:s={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,o]=t;void 0!==o&&e.searchParams.set(n,String(o))});let u="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof s&&null==s.mode?s.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof s&&null==s.view&&"headless"!==l?s.view=l:e.searchParams.set("view",l)),"string"==typeof s)try{new URL(s),e.searchParams.set("config",encodeURIComponent(s))}catch{throw Error('"config" is not a valid URL or configuration object.')}else s&&"object"==typeof s&&Object.keys(s).length>0&&(s.title&&"Untitled Project"!==s.title&&e.searchParams.set("title",s.title),s.description&&s.description.length>0&&e.searchParams.set("description",s.description),h.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(s))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){"use strict";n.d(t,{Z:function(){return a},a:function(){return i}});var o=n(7294);let r={},s=o.createContext(r);function i(e){let t=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]);