Monday.com + GPT app tutorial: How to make a debug assistant tutorial

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/><meta property="og:locale" content="en_US"/><meta name="facebook-domain-verification" content="qeuxj9l2uvc6ghyj3qw5uxkrb7me6u"/><link rel="icon" href="/favicon_new.png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="https://lablab.ai"/><meta name="twitter:creator" content="@lablabai"/><meta property="og:type" content="website"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:locale" content="en_IE"/><meta property="og:site_name" content="Lab Lab"/><title>Monday.com + GPT app tutorial: How to make a debug assistant tutorial</title><meta name="robots" content="index,follow"/><meta name="description" content="A step by step guide on how to create a debug assistant with NextJS, ChatGPT and Monday.com. Learn with lablab.ai"/><meta property="og:title" content="Monday.com + GPT app tutorial: How to make a debug assistant tutorial"/><meta property="og:description" content="A step by step guide on how to create a debug assistant with NextJS, ChatGPT and Monday.com. Learn with lablab.ai"/><meta property="og:url" content="https://lablab.ai/t/monday-app-LLM-debug-tutorial"/><meta property="og:image" content="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/bf7ce503-afe3-43a4-8f92-b8d1cf0f1c00/full"/><meta property="og:image:alt" content="Monday.com + GPT app tutorial: How to make a debug assistant"/><link rel="canonical" href="https://lablab.ai/t/monday-app-LLM-debug-tutorial"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=384&q=80 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=640&q=80 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=750&q=80 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=828&q=80 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1080&q=80 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1200&q=80 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1920&q=80 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=2048&q=80 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=3840&q=80 3840w" imageSizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw" fetchPriority="high"/><meta name="next-head-count" content="23"/><script defer="" strategy="afterInteractive">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PQZ5V5C');</script><link rel="preload" href="/_next/static/media/a34f9d1faa5f3315-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/045486a0abf17c98.css" as="style"/><link rel="stylesheet" href="/_next/static/css/045486a0abf17c98.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-2f06162af4a4b225.js" defer=""></script><script src="/_next/static/chunks/framework-440fd30d74bf785f.js" defer=""></script><script src="/_next/static/chunks/main-f14e482846886151.js" defer=""></script><script src="/_next/static/chunks/pages/_app-86989c5057405c45.js" defer=""></script><script src="/_next/static/chunks/4165-ea07a7cee169e8c6.js" defer=""></script><script src="/_next/static/chunks/3305-8324369e90639915.js" defer=""></script><script src="/_next/static/chunks/2167-e5371cfae44b86c8.js" defer=""></script><script src="/_next/static/chunks/9538-29a000378ba6b449.js" defer=""></script><script src="/_next/static/chunks/294-4ce1f828ffad3e72.js" defer=""></script><script src="/_next/static/chunks/2174-8578a3c1520929be.js" defer=""></script><script src="/_next/static/chunks/1424-79c582007cd856c0.js" defer=""></script><script src="/_next/static/chunks/pages/t/%5Bt%5D-b26fee85507c09c0.js" defer=""></script><script src="/_next/static/FW2sbXyCLoUWYLgmcAJep/_buildManifest.js" defer=""></script><script src="/_next/static/FW2sbXyCLoUWYLgmcAJep/_ssgManifest.js" defer=""></script><script> !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); posthog.init('phc_Pw0RKN72vszKL0PUfICOslhGLGDxefRyC13lxt7HJgX',{api_host:'https://us.i.posthog.com', person_profiles: 'always' // or 'always' to create profiles for anonymous users as well }) </script> </head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PQZ5V5C" height="0" width="0" style="display:none;visibility:hidden" ></iframe></noscript><div id="__next"><div class="__variable_d65c78 font-sans antialiased"><div class="wrapper flex min-h-screen flex-col "><div class="relative top-0 z-[999] flex items-center justify-between gap-x-4 border-b border-gray-200 bg-white px-6 py-2 shadow-md backdrop-blur-lg lg:px-8 lg:py-4 xl:gap-x-16"><span class="flex items-center"><a class="flex shrink-0 items-center" href="/"><img alt="lablab.ai logo - Community innovating and building with artificial intelligence" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo.8496f44c.png&w=48&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo.8496f44c.png&w=96&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo.8496f44c.png&w=96&q=75"/></a></span><nav class="hidden w-full items-center justify-end gap-x-4 md:flex lg:justify-between"><span class="hidden max-w-3xl flex-1 lg:block"><div class="flex-1"><div class="relative mx-auto w-full text-center"><div class="pointer-events-none absolute inset-y-0 left-0 z-30 flex items-center pl-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-5 text-gray-400"><path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd"></path></svg></div><input type="text" class="relative block w-full cursor-pointer rounded-lg border border-gray-300 py-2 pl-10 pr-3 text-base shadow-sm outline-none placeholder:text-gray-400 hover:border-gray-600 hover:placeholder:text-gray-600 focus:border-indigo-700 focus:text-gray-900 focus:shadow-xl focus:outline-none focus:ring-1 focus:ring-indigo-500 bg-white" placeholder="Search lablab.ai"/></div></div></span><span class="flex items-center gap-x-4"><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/event">AI Hackathons</a><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/apps">AI Apps</a><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/tech">AI Tech</a><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/t">AI Tutorials</a><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/next">AI Accelerator</a><a class="inline-flex items-center px-1 pt-1 text-sm font-semibold leading-6 text-slate-700 hover:text-sky-500" href="/sponsor">Sponsor</a><div class=""><button class="size-9 relative my-auto"><span></span></button></div></span></nav><div class="md:hidden"><button class="inline-flex items-center justify-center rounded-md p-2 text-gray-900 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2"><span class="sr-only">Toggle main menu</span><span></span></button></div></div><section class="w-100 py-0 my-0 relative bg-white"><div class="container relative z-10 mx-auto grow py-0 px-6 undefined"><div class="mx-auto hidden max-w-3xl md:block"><nav class="flex py-5 tracking-tight" aria-label="Breadcrumb"><ol role="list" class="flex items-center "><li><div><a class="text-gray-400 hover:text-gray-500" href="https://lablab.ai"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-5 flex-shrink-0"><path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd"></path></svg><span class="sr-only">Home</span></a></div></li><li class="m-0 p-0"><div class="flex items-center capitalize"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-5 mx-1 flex-shrink-0 text-gray-400"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg><a class="line-clamp-1 break-keep text-sm text-gray-600 hover:text-gray-800 " href="/t">Tutorials</a></div></li><li class="m-0 p-0"><div class="flex items-center capitalize"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-5 mx-1 flex-shrink-0 text-gray-400"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg><a class="line-clamp-1 break-keep text-sm text-gray-600 hover:text-gray-800 pointer-events-none font-bold " aria-current="page" href="https://lablab.ai/t/monday-app-LLM-debug-tutorial">Monday.com + GPT app tutorial: How to make a debug assistant</a></div></li></ol></nav></div><div id="start" class="mt-2 flex flex-row justify-center pb-20 md:mt-0 "><div class="hidden w-72 flex-col items-start opacity-90 xl:flex "><div class="top-20 w-52"><div class="my-5"></div><span class="mb-3 text-base font-bold leading-6 text-slate-900">Events @ lablab</span> <br/><span class="mb-3 text-sm font-light leading-none text-slate-900">For Innovators & Creators</span></div></div><article class="prose prose-slate flex max-w-3xl flex-col xl:mx-5"><div class="order-1"><h1 class="mb-2 text-3xl font-bold tracking-tighter lg:text-5xl undefined">Monday.com + GPT app tutorial: How to make a debug assistant</h1><div class="text-sm tracking-tight text-gray-500 lg:text-base"><span class="capitalize">Thursday, June 22, 2023</span> by <a class="no-underline " href="/u/@alfredo_lhuissier73">alfredo_lhuissier73</a></div></div><div class="order-last"><div class="flex gap-3 xsm:items-start flex-col xsm:flex-row"><a rel="nofollow noopener noreferrer" target="_self" class="rounded-lg px-5 py-1 text-black font-semibold flex justify-center items-center no-underline cursor-pointer bg-white hover:bg-gray-50 shadow-sm hover:shadow-md border" href="https://lablab.ai/t/monday-app-LLM-debug-tutorial"><button id="linkedin-share" class="react-share__ShareButton flex items-center justify-center gap-2 " style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><span></span><span>Share</span></button></a><a rel="nofollow noopener noreferrer" target="_self" class="rounded-lg px-5 py-1 text-black font-semibold flex justify-center items-center no-underline cursor-pointer bg-white hover:bg-gray-50 shadow-sm hover:shadow-md border" href="https://lablab.ai/t/monday-app-LLM-debug-tutorial"><button id="twitter-share" class="react-share__ShareButton flex items-center justify-center gap-2 " style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><span></span><span>Share</span></button></a><button class="rounded-lg px-5 py-1 text-black font-semibold flex justify-center items-center no-underline cursor-pointer bg-white hover:bg-gray-50 shadow-sm hover:shadow-md border"><span></span><span>Copy</span></button></div></div><div class="relative order-5"><div class="flex flex-row justify-start py-10"><a href="https://github.com/lablab-ai/community-content/tree/main/tutorials/en/monday-app-LLM-debug-tutorial.mdx" target="_blank" rel="noopener noreferrer" class="font-base text-sm leading-none text-blue-600">Edit on Github</a></div></div><div class="relative order-3"><div class="relative my-5 aspect-video w-full"><img alt="Monday.com + GPT app tutorial: How to make a debug assistant" fetchPriority="high" width="550" height="400" decoding="async" data-nimg="1" class="not-prose m-0 w-full p-0 shadow-lg lg:rounded-md" style="color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=384&q=80 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=640&q=80 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=750&q=80 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=828&q=80 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1080&q=80 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1200&q=80 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=1920&q=80 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=2048&q=80 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=3840&q=80 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fbf7ce503-afe3-43a4-8f92-b8d1cf0f1c00%2Ffull&w=3840&q=80"/></div><h2 class="h2-1" id="lets-build-with-mondaycom-and-gpt"><a aria-hidden="true" tabindex="-1" href="#lets-build-with-mondaycom-and-gpt" class="break-all"><span class="icon icon-link"></span></a>Let's build with Monday.com and GPT!</h2> <hr/> <p>Every programmer knows the pain of debugging. From trying to identify the culprit to navigating old Stack Overflow posts, the process can be long and frustrating. We're here to help! We are going to build a NextJS app that integrates with Monday's Incoming Bugs board, reads the description of the problem and then automatically populates another column with suggestions on how to fix it.</p> <h2 class="h2-2" id="what-is-mondaycom"><a aria-hidden="true" tabindex="-1" href="#what-is-mondaycom" class="break-all"><span class="icon icon-link"></span></a>What is Monday.com?</h2> <p>Monday.com is a customizable web and mobile work management platform, designed to help teams and organizations with operational efficiency by tracking projects and workflows, visualizing data, and team collaboration. It includes automation capabilities and supports integrations with other work apps.</p> <h2 class="h2-3" id="setting-up-your-monday-app"><a aria-hidden="true" tabindex="-1" href="#setting-up-your-monday-app" class="break-all"><span class="icon icon-link"></span></a>Setting up your Monday App</h2> <p>First, <a href="https://auth.monday.com/users/sign_up_new?developer=true?utm_medium=affiliates&utm_source=lablabai&utm_campaign=ai_app_hackathon" class="break-all" rel="noopener noreferrer nofollow" target="_blank">create a Monday.com developer account</a> if you haven't already.</p> <p>After finishing setting your account, log in to your Monday.com dashboard and press the blue button on the left panel to add a new item to your workspace. Click on "Choose from template" and then select the Product Development template. Click on "Use template".</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/16855845-60b5-4c5b-f7bf-e475bf716300/full"><img alt="Monday.com dashboard" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F16855845-60b5-4c5b-f7bf-e475bf716300%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Monday dashboard</figcaption></figure> <p>This should add the template on your dashboard, with a Bug Queue board, which we will use later to fetch Bug descriptions and send them to GPT. Add a new column to the Incoming Bugs table and call it "Suggestions". Your dashboard should look like this:</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/7f53334d-f7fa-4192-9f23-8fd5a3854600/full"><img alt="Monday.com product development, bug queue" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F7f53334d-f7fa-4192-9f23-8fd5a3854600%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Product development template</figcaption></figure> <p>Now, click on your avatar -> Developers and press the "Create app" button. Let's call it Debug Assistant.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/a74b51fe-ea2f-4233-f249-761dae9d8d00/full"><img alt="Monday.com create app" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Fa74b51fe-ea2f-4233-f249-761dae9d8d00%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Create app</figcaption></figure> <p>Go to the OAuth section of your app, and add add the following permissions: "me:read", "boards:read" and "boards:write"</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/0cbf1d21-8b6c-4de8-8451-a37453679c00/full"><img alt="Monday.com OAuth" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F0cbf1d21-8b6c-4de8-8451-a37453679c00%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">App permissions</figcaption></figure> <p>We can now proceed to the installation.</p> <h2 class="h2-4" id="-installation"><a aria-hidden="true" tabindex="-1" href="#-installation" class="break-all"><span class="icon icon-link"></span></a>🤖 Installation</h2> <p>To get a head start, we are going to use a NextJS app template from Monday.com that provides ready-to-use React components and context. You can later modify these to improve the UI/UX.</p> <p>Clone and install the template:</p> <div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/yuhgto/monday-ai-prompt-template <span class="token builtin class-name">cd</span> monday-ai-prompt-template <span class="token function">npm</span> i </code></pre></div> <p>Open your .env file and paste your <a href="https://beta.openai.com/account/api-keys" class="break-all" rel="noopener noreferrer nofollow" target="_blank">OPENAI_API_KEY</a> values.</p> <p>We can now start our development server running:</p> <div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> run dev <span class="token comment"># or</span> <span class="token function">yarn</span> dev <span class="token comment"># or</span> <span class="token function">pnpm</span> dev </code></pre></div> <p>In order to connect this app to Monday, you need to create a tunnel to your local environment.</p> <p>[Install ngrok and sign up for an account (<a href="https://ngrok.com/download" class="break-all" rel="noopener noreferrer nofollow" target="_blank">https://ngrok.com/download</a>)].</p> <p>Then, run the following command:</p> <div class="remark-highlight"><pre class="language-bash"><code class="language-bash">ngrok http <span class="token number">3000</span> </code></pre></div> <p>This will expose your local server trough a public URL. Save that URL.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/f57b451a-824d-4c58-70aa-06a0177a9e00/full"><img alt="Ngrok URL" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff57b451a-824d-4c58-70aa-06a0177a9e00%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Ngrok tunnel</figcaption></figure> <h3 class="h3-1" id="connecting-to-monday"><a aria-hidden="true" tabindex="-1" href="#connecting-to-monday" class="break-all"><span class="icon icon-link"></span></a>Connecting to Monday</h3> <p>Go back to your Monday app and add a new feature. Choose the Dashboard Widgets option, then "Start from scratch".</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/53e84cc4-0227-4cec-db1d-0a88239d2200/full"><img alt="Monday.com create feature" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F53e84cc4-0227-4cec-db1d-0a88239d2200%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Create feature</figcaption></figure> <p>Let's call our feature "Debug Widget" and go to the "Widget Setup" tab. Select "Custom URL" as source, paste your ngrok URL and click on "View URL".</p> <p>Note: If you restart the ngrok server, the URL will change and you will have to change it here too.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/43393f30-dec3-4b8d-539c-bc9e7d15cd00/full"><img alt="Monday.com Build URL" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F43393f30-dec3-4b8d-539c-bc9e7d15cd00%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Custom URL</figcaption></figure> <p>You should be able to see your local app running inside an iframe. This means the app is connected to Monday.com!</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/39d17991-2572-44e6-5b0a-62ca9d87d100/full"><img alt="Monday.com app" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F39d17991-2572-44e6-5b0a-62ca9d87d100%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Local app running on Monday.com</figcaption></figure> <p>Now change the source to Published Build, click on the "New build" button, and add your ngrok URL.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/62758d8b-62b3-44ff-df4c-488a430b5200/full"><img alt="Monday.com Build URL" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F62758d8b-62b3-44ff-df4c-488a430b5200%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Build URL</figcaption></figure> <p>Note: This build is intended for development only, and it will work as long your ngrok is running with the same URL. In other words, everytime you restart your ngrok server, you will have to create a new build with the new URL.</p> <p>Go now to your app's dashboard, click on App Versions. Click on the three dots of your app's first version, and publish it.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/85ba859a-d68e-4992-b486-2dadab962c00/full"><img alt="Monday.com publish app" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F85ba859a-d68e-4992-b486-2dadab962c00%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Publish app</figcaption></figure> <p>Then, on your app's dashboard again, click on "Install" on the left menu and then on the "Install app" button.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/4c656329-35c3-4b9c-7d79-5433a8602400/full"><img alt="Monday.com install app" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F4c656329-35c3-4b9c-7d79-5433a8602400%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Install app</figcaption></figure> <p>Your should now be able to add your app to your Monday board. Go back to your workspace, and open the Bug Insights view on the Bug Queue board, then click on Add Widget -> Apps.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/fe87272e-1449-49da-a245-fa6be9c0d700/full"><img alt="Monday.com add widget" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ffe87272e-1449-49da-a245-fa6be9c0d700%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Add Widget</figcaption></figure> <p>Go to Installed apps and add the Debug Widget to the board.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/6df2b315-78be-4880-6d28-03bb11492900/full"><img alt="Monday.com add widget" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F6df2b315-78be-4880-6d28-03bb11492900%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Debug Widget</figcaption></figure> <p>You should see the app running inside the widget. Awesome, we are finaly ready to start coding!</p> <h2 class="h2-5" id="-developing-the-app"><a aria-hidden="true" tabindex="-1" href="#-developing-the-app" class="break-all"><span class="icon icon-link"></span></a>🚀 Developing the app</h2> <p>Go back to your code editor, and copy the boilerplate file located at monday-ai-prompt-template/src/examples/livestream-example/boilerplate.tsx, then paste it in the same directory and rename it to "debug-assistant.tsx". We will write most of our code here.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/3c26479d-ab2d-49e3-7d57-e9d601029700/full"><img alt="Debug assistant typescript file" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F3c26479d-ab2d-49e3-7d57-e9d601029700%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Monday.com template</figcaption></figure> <p>Change the component function name from "LivestreamExample" to "DebugAssistant" in line 64 and don't forget to rename the export function too at the end of the file:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token maybe-class-name">DebugAssistant</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> initialInput <span class="token operator">=</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token maybe-class-name">Props</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token parameter"><span class="token maybe-class-name">Element</span></span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token spread operator">...</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">DebugAssistant</span><span class="token punctuation">;</span> </code></pre></div> <p>Now open the app's main page located at monday-ai-prompt-template/src/app/page.tsx <a href="https://nextjs.org/blog/next-13" class="break-all" rel="noopener noreferrer nofollow" target="_blank">since NextJS v13</a>, comment out or remove ContextExplorerExample Component, and add the DebugAssistant component.</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">DebugAssistant</span></span> <span class="token keyword module">from</span> <span class="token string">'@/examples/livestream-example/debug-assistant'</span><span class="token punctuation">;</span> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Home</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">App</span></span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span><span class="token maybe-class-name">AppContextProvider</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token comment">/* <ContextExplorerExample /> */</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token maybe-class-name">DebugAssistant</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token comment">/* <LivestreamExampleFinal /> */</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token comment">/* <BasePromptLayout /> */</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">AppContextProvider</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre></div> <p>We are going to reuse a lot of code from Monday's template, adding some tweaks to get it working on our development server.</p> <p>Go to debug-assistant.tsx, then import dynamic from next and also Monday's Dropdown component:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword module">import</span> <span class="token imports">dynamic</span> <span class="token keyword module">from</span> <span class="token string">"next/dynamic"</span><span class="token punctuation">;</span> <span class="token spread operator">...</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Dropdown</span> <span class="token operator">=</span> <span class="token function">dynamic</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword module">import</span><span class="token punctuation">(</span><span class="token string">"monday-ui-react-core"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">mod</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> mod<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Dropdown</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">ssr</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div> <p>Add 2 Dropdown's to your render, one for selecting a board, and the other one for selecting a column. Your rendering section should look like this:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>classes<span class="token punctuation">.</span><span class="token property-access">main</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>classes<span class="token punctuation">.</span><span class="token property-access">dropdownContainer</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span><span class="token maybe-class-name">Dropdown</span> options<span class="token operator">=</span><span class="token punctuation">{</span>boardGroupsForDropdownComponent<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleGroupSelect<span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token string">"Select a group"</span> size<span class="token operator">=</span><span class="token string">"small"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token maybe-class-name">Dropdown</span> options<span class="token operator">=</span><span class="token punctuation">{</span>boardColumnsForDropdownComponent<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleColumnSelect<span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"Select an output column"</span><span class="token punctuation">}</span> size<span class="token operator">=</span><span class="token string">"small"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">{</span>canRenderInput <span class="token operator">&&</span> <span class="token punctuation">(</span> <span class="token operator"><</span><span class="token maybe-class-name">TextInputWithTagsAndSend</span> className<span class="token operator">=</span><span class="token punctuation">{</span>classes<span class="token punctuation">.</span><span class="token property-access">inputContainer</span><span class="token punctuation">}</span> onSend<span class="token operator">=</span><span class="token punctuation">{</span>handleSend<span class="token punctuation">}</span> validTags<span class="token operator">=</span><span class="token punctuation">{</span>boardColumnsForTagsComponent <span class="token operator">??</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span> initialInput<span class="token operator">=</span><span class="token punctuation">{</span>initialInput<span class="token punctuation">}</span> mode<span class="token operator">=</span><span class="token punctuation">{</span>mode<span class="token punctuation">}</span> setMode<span class="token operator">=</span><span class="token punctuation">{</span>setMode<span class="token punctuation">}</span> loading<span class="token operator">=</span><span class="token punctuation">{</span>loading<span class="token punctuation">}</span> success<span class="token operator">=</span><span class="token punctuation">{</span>success<span class="token punctuation">}</span> error<span class="token operator">=</span><span class="token punctuation">{</span>error<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>classes<span class="token punctuation">.</span><span class="token property-access">footer</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span><span class="token maybe-class-name">AiAppFooter</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div> <p>In the getItemsAndColumnValues(), add context?.iframeContext?.boardIds as a fallback value for boardId:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getItemsAndColumnValues</span><span class="token punctuation">(</span><span class="token parameter">selectedGroup<span class="token punctuation">,</span> context<span class="token punctuation">,</span> columnIds</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token keyword control-flow">await</span> <span class="token function">executeMondayApiCall</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">query ($boardId:[Int], $columnIds:[String], $groupId: [String]) { boards (ids:$boardId) { groups(ids:$groupId) { items { id column_values (ids:$columnIds) { text id } } } } }</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">variables</span><span class="token operator">:</span> <span class="token punctuation">{</span> columnIds<span class="token punctuation">,</span> <span class="token literal-property property">boardId</span><span class="token operator">:</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardId <span class="token operator">??</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardIds <span class="token operator">??</span> <span class="token comment">// <-- ADD THIS</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">groupId</span><span class="token operator">:</span> selectedGroup<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token spread operator">...</span> </code></pre></div> <p>Now write the code for the handleSend() function:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> handleSend <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">input</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token function">setMode</span><span class="token punctuation">(</span><span class="token maybe-class-name">Modes</span><span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> columnIds <span class="token operator">=</span> <span class="token function">getColumnIdsFromInputTags</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> itemColumnValuesFromMonday <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">getItemsAndColumnValues</span><span class="token punctuation">(</span> selectedGroup<span class="token punctuation">,</span> context<span class="token punctuation">,</span> columnIds <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>itemColumnValuesFromMonday<span class="token punctuation">.</span><span class="token property-access">is_success</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> items <span class="token punctuation">}</span> <span class="token operator">=</span> itemColumnValuesFromMonday<span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">boards</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">groups</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token literal-property property">prompts</span><span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> items<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">item</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token function">replaceTagsWithColumnValues</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> item<span class="token punctuation">.</span><span class="token property-access">column_values</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// return input</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token literal-property property">itemIdsList</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> itemColumnValuesFromMonday<span class="token operator">?.</span>data<span class="token punctuation">.</span><span class="token property-access">boards</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">groups</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">x</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> x<span class="token punctuation">.</span><span class="token property-access">id</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token function">showErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Failed getting column values from monday"</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setMode</span><span class="token punctuation">(</span><span class="token maybe-class-name">Modes</span><span class="token punctuation">.</span><span class="token property-access">request</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> aiApiResponse <span class="token operator">=</span> <span class="token keyword control-flow">await</span> aiApiStatus<span class="token punctuation">.</span><span class="token method function property-access">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">prompts</span><span class="token operator">:</span> prompts<span class="token punctuation">,</span> <span class="token comment">// or promptsWithColumnValues,</span> <span class="token literal-property property">items</span><span class="token operator">:</span> itemIdsList<span class="token punctuation">,</span> <span class="token literal-property property">n</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// or itemsFromMonday.length</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>aiApiResponse<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">||</span> error<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">showErrorMessage</span><span class="token punctuation">(</span><span class="token string">"Something went wrong"</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setMode</span><span class="token punctuation">(</span><span class="token maybe-class-name">Modes</span><span class="token punctuation">.</span><span class="token property-access">request</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> <span class="token comment">// avoid GraphQL type errors on dev</span> <span class="token keyword">let</span> boardId <span class="token operator">=</span> <span class="token operator">!</span>context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardId <span class="token operator">&&</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardIds <span class="token operator">!==</span> <span class="token keyword null nil">null</span> <span class="token operator">&&</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardIds <span class="token operator">!==</span> <span class="token keyword nil">undefined</span> <span class="token operator">?</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardIds<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">:</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardId <span class="token operator">??</span> context<span class="token operator">?.</span>iframeContext<span class="token operator">?.</span>boardIds <span class="token operator">??</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// update items on board</span> <span class="token keyword">let</span> itemUpdates <span class="token operator">=</span> aiApiResponse<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">item</span><span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token literal-property property">result</span><span class="token operator">:</span> string <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token keyword control-flow">await</span> <span class="token function">executeMondayApiCall</span><span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mutation ($column:String!,$boardId:Int!, $itemId:Int!, $value:String!) {change_simple_column_value (column_id:$column, board_id:$boardId, item_id:$itemId, value:$value) {id }}</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">variables</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">column</span><span class="token operator">:</span> outputColumn<span class="token punctuation">,</span> <span class="token literal-property property">boardId</span><span class="token operator">:</span> boardId<span class="token punctuation">,</span> <span class="token literal-property property">itemId</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span><span class="token property-access">item</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> result<span class="token punctuation">.</span><span class="token property-access">result</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> success <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span>itemUpdates<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setSuccess</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">!</span>success<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setMode</span><span class="token punctuation">(</span><span class="token maybe-class-name">Modes</span><span class="token punctuation">.</span><span class="token property-access">request</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>aiApiStatus<span class="token punctuation">,</span> selectedGroup<span class="token punctuation">,</span> context<span class="token punctuation">,</span> outputColumn<span class="token punctuation">,</span> error<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div> <p>This will send the prompts to OpenAI and then make the GraphQL mutations to update the column we want.</p> <p>We are almost done. There is a bug on newer versions of NextJS (~13.4.x) related to <a href="https://github.com/vercel/next.js/issues/44712" class="break-all" rel="noopener noreferrer nofollow" target="_blank">fetching requests on localhost</a>. To circumvent this, open the app/api/openai/route.ts file, and add this at the end:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword module">export</span> <span class="token keyword">const</span> dynamic <span class="token operator">=</span> <span class="token string">"force-static"</span><span class="token punctuation">;</span> </code></pre></div> <p>This will fix the error, but it will remove the headers from our requests. Lastly, to make our lifes easier during development, we'll skip authentication for now. On route.ts, inside the POST function, comment out the authentication verification:</p> <div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript"><span class="token spread operator">...</span> <span class="token keyword module">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token constant">POST</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">req</span><span class="token operator">:</span> <span class="token maybe-class-name">NextRequest</span><span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> <span class="token maybe-class-name">NextResponse</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> reqJson <span class="token operator">=</span> <span class="token keyword control-flow">await</span> req<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">A request was made. \nRequest:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span>reqJson<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token comment">/*if (!isAuthorized(req)) {</span> <span class="token comment"> return NextResponse.json({ message: "Not authorized", success: false },</span> <span class="token comment"> {status:401});</span> <span class="token comment"> } else*/</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>reqJson<span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token maybe-class-name">NextResponse</span><span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string-property property">'message'</span><span class="token operator">:</span> <span class="token string">'No items array supplied'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token spread operator">...</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span> </code></pre></div> <p>This is fine during development, but you must remember to add the verification again before pushing to product. The changes we just did on route.ts are only necessary to make it all work with our local context.</p> <p>We are ready to start testing our app! Go back to Bug Queue -> Bug Insights board on Monday.com, and open the Debug Widget. The new UI should be running inside it. You might need to reload the page.</p> <p>On the first dropdown select "Incoming Bugs" group, and on the second dropdown select "Suggestions" as output. Then write the following on the text input: "Write a short technical solution for this bug description: @Bug Description" (You should be able to select "Bug Description" after the @). Send the request.</p> <figure class="w-full intrinsic"><a target="_blank" rel="noopener noreferrer nofollow" class="" href="https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/8787afd2-62b4-458c-6e71-5abadd251500/full"><img alt="Monday.com widget demo" loading="lazy" width="1000" height="1000" decoding="async" data-nimg="1" class="w-full rounded-lg shadow-md" style="color:transparent" sizes="(max-width: 768px) 100vw, 50vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=384&q=100 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=640&q=100 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=750&q=100 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=828&q=100 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=1080&q=100 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=1200&q=100 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=1920&q=100 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=2048&q=100 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=3840&q=100 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F8787afd2-62b4-458c-6e71-5abadd251500%2Ffull&w=3840&q=100"/></a><figcaption class="-mt-3 line-clamp-2 text-center text-sm text-gray-500 underline">Demo</figcaption></figure> <p>🎉 There you go! You should see the Suggestions column being filled up after a few seconds.</p> <p>This template is using GPT3.5 (text-davinci-003 model) by default. If you want to use another one, like GPT4, open src/services/openai-service.ts and change the name of the model there.</p> <h2 class="h2-6" id="-final-thoughts"><a aria-hidden="true" tabindex="-1" href="#-final-thoughts" class="break-all"><span class="icon icon-link"></span></a>🤔 Final Thoughts</h2> <p>We learned how to create a Monday app and connect it to an LLM through a local development server. Now, you are free to change the UI, refine the prompts and play with it as much as you want. The sky is the limit! Whenever your app is ready, you should deploy it to a production server and configure it accordingly. That is all for this tutorial, I hope it will help you navigate all the different parts of the Monday.com app framework. Feel free to reach out to me on <a href="https://www.linkedin.com/in/thedeval/" class="break-all" rel="noopener noreferrer nofollow" target="_blank">LinkedIn</a> or <a href="https://twitter.com/thedevalweb" class="break-all" rel="noopener noreferrer nofollow" target="_blank">Twitter</a> if you have any questions.</p> <p>And practice what you've learn here during our amazing <a href="https://lablab.ai/event" class="break-all">AI Hackathons</a>! Join the AI revolution!</p></div></article><div class="hidden w-72 flex-col xl:flex "><div class="sticky top-10 hidden w-full flex-col space-y-10 pb-5 pl-5 pr-10 lg:flex "><nav><ul class=" w-60 space-y-1 flex-col gap-1.5 text-base"><div class="mb-4 w-full text-base font-semibold leading-6 text-slate-900 ">On this page</div></ul></nav><div class="w-100 p-2 text-left "><span class="w-full text-base font-semibold leading-6 text-slate-900 ">Technologiess</span><div class=" mt-5 flex flex-wrap gap-1"><a href="/tech/openai"><span class="mb-2 mr-1 inline-flex rounded-full bg-[#e1effe] px-2 text-xs font-semibold leading-5 text-primary no-underline">OpenAI</span></a><a href="/tech/monday/mondaycom"><span class="mb-2 mr-1 inline-flex rounded-full bg-[#e1effe] px-2 text-xs font-semibold leading-5 text-primary no-underline">Monday.com</span></a></div></div></div></div></div></div></section><section class="w-100 py-0 my-0 relative bg-slate-50"><div class="max-w-7xl relative z-10 mx-auto grow py-0 px-6 undefined"><div class="w-full text-center undefined py-12 "><h2 class="text-slate-900 mt-4 font-bold md:mt-0 text-3xl lg:text-5xl">Discover tutorials with similar technologies</h2></div><div class="mb-6 undefined"><div class="grid sm:grid-cols-2 grid-2 lg:grid-cols-3 gap-6 lg:gap-6"><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/streamlit-deploy-tutorial"><div class=""><div class="relative aspect-video"><img alt="Streamlit: How to deploy your AI app" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fsteamlitdeployment.png&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">Streamlit: How to deploy your AI app</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">Deploy your AI app in under 5 minutes for free with Streamlit Community Cloud.</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/gpt-4-tutorial-how-to-build-a-website-with-bing-chatbot"><div class=""><div class="relative aspect-video"><img alt="GPT-4 tutorial: How to build a website with Bing chatbot" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2Ff83b3fcc-431c-45ce-9fae-a9e199f31b00%2Ffull&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">GPT-4 tutorial: How to build a website with Bing chatbot</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">A step by step guide how to create website with Bing’s built in GPT-4 chatbot and make changes to it afterwards</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/chroma-tutorial-with-openais-gpt-35-model-for-memory-feature-in-chatbot"><div class=""><div class="relative aspect-video"><img alt="Chroma Tutorial: How to give GPT-3.5 chatbot memory-like capability" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F65b69d05-f79a-4450-764b-677b84d2e000%2Ffull&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">Chroma Tutorial: How to give GPT-3.5 chatbot memory-like capability</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">In this tutorial we will learn how to utilize Chroma database to store chat history as embeddings and retrieve them on relevant input by user of Chatbot CLI built using Python. We will OpenAI's GPT-3.5 model for creating chatbot. Enjoy!</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/arxiv-summarizer-related-papers"><div class=""><div class="relative aspect-video"><img alt="How to Summarize and Find Similar ArXiv Articles" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Farxivtutorial.png&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">How to Summarize and Find Similar ArXiv Articles</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">Learn how to summarize arXiv articles and identify similar papers for comprehensive research.</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/monday-palm-tutorial"><div class=""><div class="relative aspect-video"><img alt="monday.com + PaLM2 Tutorial: Creating an AI-powered Assistant App on monday.com: A Step-by-Step Tutorial for Integrating Google Vertex PaLM API powered by PaLM2 model." loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fgoogle-tutorial-thumb.png&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">monday.com + PaLM2 Tutorial: Creating an AI-powered Assistant App on monday.com: A Step-by-Step Tutorial for Integrating Google Vertex PaLM API powered by PaLM2 model.</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">Creating an AI-powered Assistant App on monday.com: A Step-by-Step Tutorial for Integrating Google Vertex PaLM API powered by PaLM2 model.</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/monday-first-api-call"><div class=""><div class="relative aspect-video"><img alt="monday.com Tutorial: Your first API call" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimagedelivery.net%2FK11gkZF3xaVyYzFESMdWIQ%2F23c9e919-854a-4e1c-991b-f9b730f4e300%2Ffull&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">monday.com Tutorial: Your first API call</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">Learn how to use the GraphQL monday.com API, to enhance your workplace!</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/t/monday-stable-diffusion-tutorial"><div class=""><div class="relative aspect-video"><img alt="monday.com Tutorial: Create and publish your first monday.com AI App with Stable Diffusion" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Ftutorials%2Fmondaytut324324.png&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="TUTORIAL" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>TUTORIAL</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">monday.com Tutorial: Create and publish your first monday.com AI App with Stable Diffusion</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">In this tutorial, we will learn how to build monday.com AI-powered app using image generative AI (like Stable Diffusion) and publish it. Sit back relax and enjoy the tutorial!</p></div></div></a></div></div></div><div class="w-full text-center undefined py-12 "><h2 class="text-slate-900 mt-4 font-bold md:mt-0 text-3xl lg:text-5xl">Upcoming AI Hackathons and Events</h2></div><div class="mb-6 undefined"><div class="grid sm:grid-cols-2 grid-2 lg:grid-cols-3 gap-6 lg:gap-6"><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/event/doge-ai-hackathon"><div class=""><div class="relative aspect-video"><img alt="DOGE Hackathon" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm3j29bp4000c357syh9kanc3%2Fcm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="HACKATHON" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>HACKATHON</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">DOGE Hackathon</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500"> 🚀 Revolutionize Government Efficiency with xAI & Grok: Embrace the Future of Public Service. ⚡ Build intelligent tools to streamline government processes, cut costs, and drive impactful change. 🤖 Harness the power of Grok, xAI’s advanced AI model, to automate tasks and empower citizens. 🌐 Collaborate with innovative developers and create solutions that reshape public administration. 📅 Register now and be part of the movement for a leaner, smarter government!</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/event/lokahi-innovation-in-healthcare"><div class=""><div class="relative aspect-video"><img alt="Lōkahi Innovation in Healthcare " loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fclxafvp21001m356ylkui7lgb%2Fclxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="HACKATHON" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>HACKATHON</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">Lōkahi Innovation in Healthcare </h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">🕒 2 days to dive into this transformative healthcare technology challenge! 🏝️ Join us onsite in Honolulu, Hawaii for an exciting hybrid hackathon experience! If you can't be with us in person, no worries—you can still participate and contribute online. 💡 Leverage AI, data analytics, and cloud computing to create innovative solutions that improve healthcare outcomes in Hawaii and beyond. 🤝 Compete solo or team up with diverse healthcare, tech, and academia innovators. 🏆 Stand a chance to win amazing prizes and make an impact!</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/event/hackathon-llama-impatto-roma"><div class=""><div class="relative aspect-video"><img alt="Hackathon Llama Impatto Roma" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm37csg0j000r357l7r0sqvih%2Fcm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="HACKATHON" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>HACKATHON</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">Hackathon Llama Impatto Roma</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">🌍 Affronta le sfide sociali del nostro tempo grazie alle funzionalità avanzate del modello Llama 3.1, imparando e collaborando insieme ai nostri mentors e agli esperti di Meta e dei principali leader del settore dell’IA. 🚀 Accetta la sfida: come sfruttare l'intelligenza artificiale per migliorare il benessere generale dei cittadini, affrontando aree chiave come la salute, i servizi sociali, l’ambiente, i trasporti, la pubblica sicurezza e il dialogo con la pubblica amministrazione. 📅 Unisciti a noi online o di persona presso la sede di Meta Binario F a Roma dal 29 novembre al 1 dicembre. L’evento è dedicato esclusivamente alle persone che vivono in Italia. 🌍 Il supporto sarà disponibile sia in inglese che in italiano. 🏆 Puoi ricevere fino a $5.000 in premi e l'opportunità di ampliare il tuo progetto ad alto impatto sociale e partecipare al programma esclusivo ‘Llama Impact Grant’! ⭐ I 2 team vincenti potranno partecipare a un esclusivo programma di incubazione digitale Meta & lablab NEXT e saranno invitati, a nostre spese, per 2 giorni a visitare i centri di ricerca internazionali e incontrare gli esperti Meta. ⭐ L’iniziativa è patrocinata dall’Agenzia per l'Italia Digitale (AGID), dall’Agenzia per la Cybersicurezza Nazionale (ACN) e dal Dipartimento di Ingegneria dell’Informazione, Elettronica e Telecomunicazioni dell’Università di Roma, La Sapienza (DIET). 🏆 La cerimonia di premiazione si svolgerà lunedì 2 dicembre alle ore 17:00 a Binario F, e prevede la partecipazione di alti rappresentanti istituzionali, di AgID, di ACN, e del Ministero delle Imprese e del Made in Italy.</p></div></div></a></div><div class="card-animation card-border card-shadow relative flex h-full flex-col overflow-hidden rounded-lg bg-white"><a class="flex h-full flex-col justify-between" href="/event/gemma-2-ai-challenge"><div class=""><div class="relative aspect-video"><img alt="Gemma 2 AI Challenge" loading="lazy" decoding="async" data-nimg="fill" class="absolute inset-0 size-full bg-gray-50 object-cover sm:object-fill" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Flablab-static-eu%2Fimages%2Fevents%2Fcm2522pig0005357l0fb5t6y7%2Fcm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg&w=3840&q=75"/></div></div><div class="absolute right-2 top-2 flex items-center justify-between text-xs"><span title="HACKATHON" class="inline-flex items-center shadow-md rounded-full px-3 py-1 bg-gray-200 text-black"><span>HACKATHON</span></span></div><div class="p-4 flex h-max flex-1 flex-col justify-start"><div class="mb-auto"><div class="flex w-full items-center justify-between"></div><h2 class="mt-1 line-clamp-1 font-bold leading-tight text-2xl">Gemma 2 AI Challenge</h2><p class="mt-2 line-clamp-2 text-sm text-gray-500">It’s a great opportunity to: 🚀 Leverage Google’s advanced Gemma 2 models to create cutting-edge solutions. 💰 Access resources to support your project development. 🌟 Receive guidance from expert mentors throughout the hackathon. 🤝 Work solo or in teams to bring your ideas to life. 🏆 Compete for a chance to choose from unique Google swag and enjoy an opportunity to meet the Gemma team for the best solutions! 🧑🏻‍💻 Sign up before the Kick-Off Stream to secure your spot! 🗓️ On-site Workshops: Join us in-person at Google Cloud Space in London on 28th November from 5:00 PM to 9:00 PM UK time (GMT) for hands-on workshops</p></div></div></a></div></div></div></div></section><footer class="bg-black z-10 mt-auto" aria-labelledby="footer-heading"><h3 id="footer-heading" class="sr-only">Footer navigation</h3><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"><div class="xl:grid xl:grid-cols-3 xl:gap-8"><div class="space-y-8 xl:col-span-1"><img alt="Community innovating and building with artificial intelligence" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo-invertedcolor.903446af.png&w=48&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo-invertedcolor.903446af.png&w=96&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flablab-logo-invertedcolor.903446af.png&w=96&q=75"/><p class="text-base text-gray-400">Unlocking state-of-the-art artificial intelligence and building with the world's talent</p><div><ul role="list" class="mt-4 flex flex-row gap-6"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.instagram.com/lablab.ai/" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">Instagram</span><svg fill="currentColor" viewBox="0 0 24 24" class="size-6" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.reddit.com/r/lablabai/" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">Reddit</span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" width="24" height="24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M160.018 360.052c0-22.087 17.918-40.004 40.004-40.004 22.087 0 39.993 17.917 39.993 40.004 0 22.087-17.906 40.004-39.993 40.004-22.086 0-40.004-17.917-40.004-40.004zm239.991 0c0-22.087 17.918-40.004 40.004-40.004 22.087 0 40.005 17.917 40.005 40.004 0 22.087-17.918 40.004-40.005 40.004-22.086 0-40.004-17.917-40.004-40.004zm1.949 85.477c10.323-8.114 25.252-6.366 33.366 3.957 8.115 10.323 6.367 25.252-3.956 33.367-28.678 22.606-72.403 37.205-111.32 37.205-38.906 0-82.631-14.599-111.356-37.205-10.323-8.115-12.071-23.044-3.957-33.367 8.114-10.323 23.044-12.07 33.367-3.957 16.523 13.005 49.193 27 81.945 27 32.765 0 65.446-13.996 81.958-27h-.047zM640 280.055c0-44.209-35.8-80.008-79.997-80.008-30.083 0-56.245 16.606-69.922 41.126-41.115-22.477-91.206-37.04-145.797-40.394L392 93.58l91.347 26.362c8.245 23.327 30.438 40.076 56.611 40.076 33.119 0 60.001-26.883 60.001-60.001 0-33.119-26.882-60-60-60-22.843 0-42.733 12.755-52.844 31.57l-101.8-29.41c-11.398-3.283-23.48 2.316-28.288 13.158l-64.843 145.62c-53.197 3.768-102.037 18.13-142.266 40.158-13.689-24.52-39.839-41.126-69.922-41.126-44.21 0-79.997 35.8-79.997 80.009 0 32.681 19.63 60.804 47.705 73.194-5.031 15-7.724 30.673-7.724 46.807 0 110.434 125.352 199.987 279.996 199.987 154.644 0 279.996-89.552 279.996-199.987 0-16.122-2.681-31.795-7.725-46.807 28.123-12.39 47.706-40.513 47.706-73.194l.047.059zM539.995 77.588c12.449 0 22.536 10.075 22.536 22.524 0 12.438-10.087 22.524-22.536 22.524-12.437 0-22.524-10.086-22.524-22.524 0-12.449 10.087-22.524 22.524-22.524zM40.015 280.055c0-22.04 17.954-40.004 39.993-40.004 15.97 0 29.73 9.354 36.166 22.914-20.93 15.85-38.233 34.17-51.036 54.201-14.728-5.929-25.122-20.315-25.122-37.11zm279.997 272.507c-128.4 0-232.515-68.268-232.515-152.518 0-84.249 104.068-152.529 232.515-152.529 128.387 0 232.503 68.28 232.503 152.53 0 84.248-104.068 152.517-232.503 152.517zm254.86-235.397c-12.802-20.079-30.106-38.35-51.035-54.201 6.437-13.512 20.197-22.914 36.166-22.914 22.04 0 40.004 17.965 40.004 40.005 0 16.795-10.406 31.205-25.134 37.11z"></path></svg></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://twitter.com/lablabai" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">Twitter</span><svg fill="currentColor" viewBox="0 0 24 24" class="size-6" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/lablab-ai" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">GitHub</span><svg fill="currentColor" viewBox="0 0 24 24" class="size-6" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://discord.com/invite/XnxrJ8ytRs" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">Discord</span><svg width="22" height="100%" viewBox="0 0 71 55" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="currentColor"></path></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="white"></rect></clipPath></defs></svg></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://hackernoon.com/u/lablab" class="text-sm text-gray-200 hover:text-gray-500"><span class="sr-only">HackerNoon</span><svg fill="currentColor" viewBox="0 0 24 24" class="size-6" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M5.701 0v6.223H8.85V4.654h1.576v7.842H12V4.654h1.574v1.569h3.15V0zm11.024 6.223v3.136h1.574V6.223zm1.574 3.136v4.705h1.576v-1.568h1.574v-1.568h-1.574V9.359zm0 4.705h-1.574v3.137h1.574zm-1.574 3.137h-3.15v1.569H8.85V17.2H5.7V24h11.024zm-11.024 0v-3.137H4.125v3.137zm-1.576-3.137V9.36H2.551v4.705zm0-4.705h1.576V6.223H4.125z"></path></svg></a></li></ul></div><div class="flex flex-col gap-3"><p class="text-sm text-gray-200">Other group brands: </p><div class="flex w-full flex-col gap-7 md:flex-row"><a href="https://gaia.newnative.ai/" target="_blank" rel="noopener noreferrer"><img alt="https://gaia.newnative.ai/" loading="lazy" width="110" height="25" decoding="async" data-nimg="1" class="h-6 w-auto object-cover brightness-90 hover:brightness-50" style="color:transparent" src="/GAIA.svg"/></a><a href="https://newnative.ai/" target="_blank" rel="noopener noreferrer"><img alt="https://newnative.ai/" loading="lazy" width="110" height="25" decoding="async" data-nimg="1" class="h-6 w-auto object-cover brightness-90 hover:brightness-50" style="color:transparent" src="/new-native.svg"/></a><a href="/next" target="_blank" rel="noopener noreferrer"><img alt="/next" loading="lazy" width="110" height="25" decoding="async" data-nimg="1" class="h-6 w-auto object-cover brightness-90 hover:brightness-50" style="color:transparent" src="/next-logo.svg"/></a></div></div></div><div class="mg:grid-cols-2 mt-12 grid grid-cols-1 gap-2 sm:grid-cols-3 lg:pl-24 xl:col-span-2 xl:mt-0"><div><span class="text-sm font-semibold uppercase tracking-wider text-gray-400">Links</span><ul role="list" class="mt-4 space-y-2"><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/tech">AI Tech</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/t">AI Tutorials</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/event">AI Hackathons</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/apps">AI Applications</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/next">AI Accelerator</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/blog">Blog</a></li></ul></div><div><span class="text-sm font-semibold uppercase tracking-wider text-gray-400">lablab</span><ul role="list" class="mt-4 space-y-2"><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/about">About</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/brand">Brand</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/guide">Hackathon Guidelines</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/terms-of-use">Terms of Use</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/code-of-conduct">Code of Conduct</a></li><li><a class="text-sm text-gray-200 hover:text-gray-500" href="/privacy-policy">Privacy Policy</a></li></ul></div><div><span class="text-sm font-semibold uppercase tracking-wider text-gray-400">Get in touch</span><ul role="list" class="mt-4 space-y-2"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://discord.gg/XnxrJ8ytRs" class="text-sm text-gray-200 hover:text-gray-500"><span>Discord</span></a></li><li><a target="_blank" rel="opener" href="/sponsor" class="text-sm text-gray-200 hover:text-gray-500"><span>Sponsor</span></a></li><li><a target="_self" rel="opener" href="/cooperation" class="text-sm text-gray-200 hover:text-gray-500"><span>Cooperation</span></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://newnative.ai/careers" class="text-sm text-gray-200 hover:text-gray-500"><span>Join the team</span></a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://wkf.ms/3PQMLlq" class="text-sm text-gray-200 hover:text-gray-500"><span>Contribute</span></a></li><li><a target="_blank" rel="opener" href="mailto:community@lablab.ai" class="text-sm text-gray-200 hover:text-gray-500"><span>community@lablab.ai</span></a></li></ul></div></div></div><div class="flex flex-col md:flex-row md:justify-between mt-12"><p class="text-sm text-gray-400 xl:text-center">© 2024 New Native Inc. All rights reserved.</p><p class="text-sm text-gray-400 xl:text-center">0.14.434</p></div></div></footer></div><div style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"source":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h2: \"h2\",\n a: \"a\",\n span: \"span\",\n hr: \"hr\",\n p: \"p\",\n div: \"div\",\n pre: \"pre\",\n code: \"code\",\n h3: \"h3\"\n }, _provideComponents(), props.components), {Img} = _components;\n if (!Img) _missingMdxReference(\"Img\", true);\n return _jsxs(_Fragment, {\n children: [_jsxs(_components.h2, {\nclassName: \"h2-1\",\n id: \"lets-build-with-mondaycom-and-gpt\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#lets-build-with-mondaycom-and-gpt\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Let's build with Monday.com and GPT!\"]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.p, {\n children: \"Every programmer knows the pain of debugging. From trying to identify the culprit to navigating old Stack Overflow posts, the process can be long and frustrating. We're here to help! We are going to build a NextJS app that integrates with Monday's Incoming Bugs board, reads the description of the problem and then automatically populates another column with suggestions on how to fix it.\"\n }), \"\\n\", _jsxs(_components.h2, {\nclassName: \"h2-2\",\n id: \"what-is-mondaycom\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#what-is-mondaycom\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"What is Monday.com?\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Monday.com is a customizable web and mobile work management platform, designed to help teams and organizations with operational efficiency by tracking projects and workflows, visualizing data, and team collaboration. It includes automation capabilities and supports integrations with other work apps.\"\n }), \"\\n\", _jsxs(_components.h2, {\nclassName: \"h2-3\",\n id: \"setting-up-your-monday-app\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#setting-up-your-monday-app\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Setting up your Monday App\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"First, \", _jsx(_components.a, {\n href: \"https://auth.monday.com/users/sign_up_new?developer=true?utm_medium=affiliates\u0026utm_source=lablabai\u0026utm_campaign=ai_app_hackathon\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"create a Monday.com developer account\"\n }), \" if you haven't already.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"After finishing setting your account, log in to your Monday.com dashboard and press the blue button on the left panel to add a new item to your workspace. Click on \\\"Choose from template\\\" and then select the Product Development template. Click on \\\"Use template\\\".\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Monday dashboard\",\n alt: \"Monday.com dashboard\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/16855845-60b5-4c5b-f7bf-e475bf716300/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This should add the template on your dashboard, with a Bug Queue board, which we will use later to fetch Bug descriptions and send them to GPT. Add a new column to the Incoming Bugs table and call it \\\"Suggestions\\\". Your dashboard should look like this:\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Product development template\",\n alt: \"Monday.com product development, bug queue\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/7f53334d-f7fa-4192-9f23-8fd5a3854600/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Now, click on your avatar -\u003e Developers and press the \\\"Create app\\\" button. Let's call it Debug Assistant.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Create app\",\n alt: \"Monday.com create app\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/a74b51fe-ea2f-4233-f249-761dae9d8d00/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go to the OAuth section of your app, and add add the following permissions: \\\"me:read\\\", \\\"boards:read\\\" and \\\"boards:write\\\"\"\n }), \"\\n\", _jsx(Img, {\n caption: \"App permissions\",\n alt: \"Monday.com OAuth\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/0cbf1d21-8b6c-4de8-8451-a37453679c00/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"We can now proceed to the installation.\"\n }), \"\\n\", _jsxs(_components.h2, {\nclassName: \"h2-4\",\n id: \"-installation\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#-installation\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"🤖 Installation\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"To get a head start, we are going to use a NextJS app template from Monday.com that provides ready-to-use React components and context. You can later modify these to improve the UI/UX.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Clone and install the template:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-bash\",\n children: _jsxs(_components.code, {\n className: \"language-bash\",\n children: [_jsx(_components.span, {\n className: \"token function\",\n children: \"git\"\n }), \" clone https://github.com/yuhgto/monday-ai-prompt-template\\n\", _jsx(_components.span, {\n className: \"token builtin class-name\",\n children: \"cd\"\n }), \" monday-ai-prompt-template\\n\", _jsx(_components.span, {\n className: \"token function\",\n children: \"npm\"\n }), \" i\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Open your .env file and paste your \", _jsx(_components.a, {\n href: \"https://beta.openai.com/account/api-keys\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"OPENAI_API_KEY\"\n }), \" values.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"We can now start our development server running:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-bash\",\n children: _jsxs(_components.code, {\n className: \"language-bash\",\n children: [_jsx(_components.span, {\n className: \"token function\",\n children: \"npm\"\n }), \" run dev\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# or\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token function\",\n children: \"yarn\"\n }), \" dev\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# or\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token function\",\n children: \"pnpm\"\n }), \" dev\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"In order to connect this app to Monday, you need to create a tunnel to your local environment.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"[Install ngrok and sign up for an account (\", _jsx(_components.a, {\n href: \"https://ngrok.com/download\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"https://ngrok.com/download\"\n }), \")].\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Then, run the following command:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-bash\",\n children: _jsxs(_components.code, {\n className: \"language-bash\",\n children: [\"ngrok http \", _jsx(_components.span, {\n className: \"token number\",\n children: \"3000\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"This will expose your local server trough a public URL. Save that URL.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Ngrok tunnel\",\n alt: \"Ngrok URL\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/f57b451a-824d-4c58-70aa-06a0177a9e00/full\"\n }), \"\\n\", _jsxs(_components.h3, {\nclassName: \"h3-1\",\n id: \"connecting-to-monday\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#connecting-to-monday\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Connecting to Monday\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go back to your Monday app and add a new feature. Choose the Dashboard Widgets option, then \\\"Start from scratch\\\".\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Create feature\",\n alt: \"Monday.com create feature\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/53e84cc4-0227-4cec-db1d-0a88239d2200/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Let's call our feature \\\"Debug Widget\\\" and go to the \\\"Widget Setup\\\" tab. Select \\\"Custom URL\\\" as source, paste your ngrok URL and click on \\\"View URL\\\".\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Note: If you restart the ngrok server, the URL will change and you will have to change it here too.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Custom URL\",\n alt: \"Monday.com Build URL\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/43393f30-dec3-4b8d-539c-bc9e7d15cd00/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"You should be able to see your local app running inside an iframe. This means the app is connected to Monday.com!\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Local app running on Monday.com\",\n alt: \"Monday.com app\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/39d17991-2572-44e6-5b0a-62ca9d87d100/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Now change the source to Published Build, click on the \\\"New build\\\" button, and add your ngrok URL.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Build URL\",\n alt: \"Monday.com Build URL\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/62758d8b-62b3-44ff-df4c-488a430b5200/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Note: This build is intended for development only, and it will work as long your ngrok is running with the same URL. In other words, everytime you restart your ngrok server, you will have to create a new build with the new URL.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go now to your app's dashboard, click on App Versions. Click on the three dots of your app's first version, and publish it.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Publish app\",\n alt: \"Monday.com publish app\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/85ba859a-d68e-4992-b486-2dadab962c00/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Then, on your app's dashboard again, click on \\\"Install\\\" on the left menu and then on the \\\"Install app\\\" button.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Install app\",\n alt: \"Monday.com install app\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/4c656329-35c3-4b9c-7d79-5433a8602400/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Your should now be able to add your app to your Monday board. Go back to your workspace, and open the Bug Insights view on the Bug Queue board, then click on Add Widget -\u003e Apps.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Add Widget\",\n alt: \"Monday.com add widget\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/fe87272e-1449-49da-a245-fa6be9c0d700/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go to Installed apps and add the Debug Widget to the board.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Debug Widget\",\n alt: \"Monday.com add widget\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/6df2b315-78be-4880-6d28-03bb11492900/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"You should see the app running inside the widget. Awesome, we are finaly ready to start coding!\"\n }), \"\\n\", _jsxs(_components.h2, {\nclassName: \"h2-5\",\n id: \"-developing-the-app\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#-developing-the-app\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"🚀 Developing the app\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go back to your code editor, and copy the boilerplate file located at monday-ai-prompt-template/src/examples/livestream-example/boilerplate.tsx, then paste it in the same directory and rename it to \\\"debug-assistant.tsx\\\". We will write most of our code here.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Monday.com template\",\n alt: \"Debug assistant typescript file\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/3c26479d-ab2d-49e3-7d57-e9d601029700/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Change the component function name from \\\"LivestreamExample\\\" to \\\"DebugAssistant\\\" in line 64 and don't forget to rename the export function too at the end of the file:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"DebugAssistant\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" initialInput \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"\\\"\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Props\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token constant\",\n children: \"JSX\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token parameter\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Element\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"default\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"DebugAssistant\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Now open the app's main page located at monday-ai-prompt-template/src/app/page.tsx \", _jsx(_components.a, {\n href: \"https://nextjs.org/blog/next-13\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"since NextJS v13\"\n }), \", comment out or remove ContextExplorerExample Component, and add the DebugAssistant component.\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"DebugAssistant\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@/examples/livestream-example/debug-assistant'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"default\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"function\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Home\"\n })\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), \"div className\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"styles\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"AppContextProvider\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token comment\",\n children: \"/* \u003cContextExplorerExample /\u003e */\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"DebugAssistant\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token comment\",\n children: \"/* \u003cLivestreamExampleFinal /\u003e */\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token comment\",\n children: \"/* \u003cBasePromptLayout /\u003e */\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"AppContextProvider\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), \"div\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"We are going to reuse a lot of code from Monday's template, adding some tweaks to get it working on our development server.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Go to debug-assistant.tsx, then import dynamic from next and also Monday's Dropdown component:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"dynamic\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"next/dynamic\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Dropdown\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"dynamic\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"monday-ui-react-core\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"then\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token parameter\",\n children: \"mod\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" mod\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Dropdown\"\n })\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"ssr\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token boolean\",\n children: \"false\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Add 2 Dropdown's to your render, one for selecting a board, and the other one for selecting a column. Your rendering section should look like this:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), \"div className\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"classes\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"main\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), \"div className\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"classes\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"dropdownContainer\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Dropdown\"\n }), \"\\n options\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"boardGroupsForDropdownComponent\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n onChange\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"handleGroupSelect\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n placeholder\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Select a group\\\"\"\n }), \"\\n size\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"small\\\"\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Dropdown\"\n }), \"\\n options\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"boardColumnsForDropdownComponent\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n onChange\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"handleColumnSelect\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n placeholder\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Select an output column\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n size\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"small\\\"\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), \"div\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"canRenderInput \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u0026\u0026\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"TextInputWithTagsAndSend\"\n }), \"\\n className\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"classes\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"inputContainer\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n onSend\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"handleSend\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n validTags\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"boardColumnsForTagsComponent \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"??\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n initialInput\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"initialInput\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n mode\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"mode\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n setMode\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"setMode\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n loading\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"loading\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n success\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"success\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n error\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"error\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), \"div className\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"classes\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"footer\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"AiAppFooter\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), \"div\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"/\"\n }), \"div\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"In the getItemsAndColumnValues(), add context?.iframeContext?.boardIds as a fallback value for boardId:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"async\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"function\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"getItemsAndColumnValues\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [\"selectedGroup\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" columnIds\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"executeMondayApiCall\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token template-string\",\n children: [_jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"query ($boardId:[Int], $columnIds:[String], $groupId: [String]) { boards (ids:$boardId) { groups(ids:$groupId) { items { id column_values (ids:$columnIds) { text id } } } } }\"\n }), _jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"variables\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n columnIds\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"boardId\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardId \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"??\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardIds \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"??\"\n }), \" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// \u003c-- ADD THIS\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"groupId\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" selectedGroup\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Now write the code for the handleSend() function:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" handleSend \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"useCallback\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"async\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"input\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" string\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"setMode\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Modes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"response\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" columnIds \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"getColumnIdsFromInputTags\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"input\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"var\"\n }), \" itemColumnValuesFromMonday \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"getItemsAndColumnValues\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n selectedGroup\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n columnIds\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"itemColumnValuesFromMonday\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"is_success\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" items \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" itemColumnValuesFromMonday\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"data\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"boards\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"groups\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"var\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"prompts\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" string\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" items\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"map\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"item\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" any\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"replaceTagsWithColumnValues\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"input\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" item\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"column_values\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// return input\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"var\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"itemIdsList\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"id\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" string \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \"\\n itemColumnValuesFromMonday\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"boards\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"groups\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"items\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"map\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"x\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" any\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" x\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"id\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"else\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"showErrorMessage\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Failed getting column values from monday\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"3000\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"setMode\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Modes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"request\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword null nil\",\n children: \"null\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" aiApiResponse \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" aiApiStatus\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"fetchData\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"prompts\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" prompts\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// or promptsWithColumnValues,\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"items\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" itemIdsList\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"n\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"1\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// or itemsFromMonday.length\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"aiApiResponse\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"length\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"===\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"||\"\n }), \" error\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"showErrorMessage\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Something went wrong\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"3000\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"setMode\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Modes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"request\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"else\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// avoid GraphQL type errors on dev\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" boardId \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"!\"\n }), \"context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardId \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u0026\u0026\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardIds \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"!==\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword null nil\",\n children: \"null\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u0026\u0026\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardIds \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"!==\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword nil\",\n children: \"undefined\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?\"\n }), \" context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardIds\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"0\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardId \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"??\"\n }), \"\\n context\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"iframeContext\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"?.\"\n }), \"boardIds \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"??\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// update items on board\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" itemUpdates \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" aiApiResponse\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"map\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"async\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"result\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"item\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" string\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"result\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" string \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"executeMondayApiCall\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token template-string\",\n children: [_jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"mutation ($column:String!,$boardId:Int!, $itemId:Int!, $value:String!) {change_simple_column_value (column_id:$column, board_id:$boardId, item_id:$itemId, value:$value) {id }}\"\n }), _jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"variables\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"column\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" outputColumn\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"boardId\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" boardId\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"itemId\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"parseInt\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"result\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"item\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"value\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" result\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"result\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" success \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" \", _jsx(_components.span, {\n className: \"token known-class-name class-name\",\n children: \"Promise\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"all\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"itemUpdates\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"setSuccess\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"!\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"!\"\n }), \"success\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"setMode\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"Modes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"request\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), \"aiApiStatus\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" selectedGroup\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" outputColumn\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" error\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"This will send the prompts to OpenAI and then make the GraphQL mutations to update the column we want.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"We are almost done. There is a bug on newer versions of NextJS (~13.4.x) related to \", _jsx(_components.a, {\n href: \"https://github.com/vercel/next.js/issues/44712\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"fetching requests on localhost\"\n }), \". To circumvent this, open the app/api/openai/route.ts file, and add this at the end:\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" dynamic \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"force-static\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"This will fix the error, but it will remove the headers from our requests. Lastly, to make our lifes easier during development, we'll skip authentication for now. On route.ts, inside the POST function, comment out the authentication verification:\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-javascript\",\n children: _jsxs(_components.code, {\n className: \"language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"async\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"function\"\n }), \" \", _jsx(_components.span, {\n className: \"token constant\",\n children: \"POST\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"req\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"NextRequest\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"res\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"NextResponse\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" reqJson \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"await\"\n }), \" req\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"json\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token console class-name\",\n children: \"console\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"log\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token template-string\",\n children: [_jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"A request was made. \\\\nRequest:\"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), _jsx(_components.span, {\n className: \"token known-class-name class-name\",\n children: \"JSON\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"stringify\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"reqJson\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"/*if (!isAuthorized(req)) {\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \" return NextResponse.json({ message: \\\"Not authorized\\\", success: false },\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \" {status:401});\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \" } else*/\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"!\"\n }), \"reqJson\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"items\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"return\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"NextResponse\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"json\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token string-property property\",\n children: \"'message'\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'No items array supplied'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token literal-property property\",\n children: \"status\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"400\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"else\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"This is fine during development, but you must remember to add the verification again before pushing to product. The changes we just did on route.ts are only necessary to make it all work with our local context.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"We are ready to start testing our app! Go back to Bug Queue -\u003e Bug Insights board on Monday.com, and open the Debug Widget. The new UI should be running inside it. You might need to reload the page.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"On the first dropdown select \\\"Incoming Bugs\\\" group, and on the second dropdown select \\\"Suggestions\\\" as output. Then write the following on the text input: \\\"Write a short technical solution for this bug description: @Bug Description\\\" (You should be able to select \\\"Bug Description\\\" after the @). Send the request.\"\n }), \"\\n\", _jsx(Img, {\n caption: \"Demo\",\n alt: \"Monday.com widget demo\",\n src: \"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/8787afd2-62b4-458c-6e71-5abadd251500/full\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"🎉 There you go! You should see the Suggestions column being filled up after a few seconds.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This template is using GPT3.5 (text-davinci-003 model) by default. If you want to use another one, like GPT4, open src/services/openai-service.ts and change the name of the model there.\"\n }), \"\\n\", _jsxs(_components.h2, {\nclassName: \"h2-6\",\n id: \"-final-thoughts\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#-final-thoughts\",\n className: \"break-all\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"🤔 Final Thoughts\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"We learned how to create a Monday app and connect it to an LLM through a local development server. Now, you are free to change the UI, refine the prompts and play with it as much as you want. The sky is the limit! Whenever your app is ready, you should deploy it to a production server and configure it accordingly. That is all for this tutorial, I hope it will help you navigate all the different parts of the Monday.com app framework. Feel free to reach out to me on \", _jsx(_components.a, {\n href: \"https://www.linkedin.com/in/thedeval/\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"LinkedIn\"\n }), \" or \", _jsx(_components.a, {\n href: \"https://twitter.com/thedevalweb\",\n className: \"break-all\",\n rel: \"noopener noreferrer nofollow\",\n target: \"_blank\",\n children: \"Twitter\"\n }), \" if you have any questions.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"And practice what you've learn here during our amazing \", _jsx(_components.a, {\n href: \"https://lablab.ai/event\",\n className: \"break-all\",\n children: \"AI Hackathons\"\n }), \"!\\nJoin the AI revolution!\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{"title":"Monday.com + GPT app tutorial: How to make a debug assistant","description":"A step by step guide on how to create a debug assistant with NextJS, ChatGPT and Monday.com. Learn with lablab.ai","image":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/bf7ce503-afe3-43a4-8f92-b8d1cf0f1c00/full","authorUsername":"alfredo_lhuissier73"}},"frontMatter":{"title":"Monday.com + GPT app tutorial: How to make a debug assistant","description":"A step by step guide on how to create a debug assistant with NextJS, ChatGPT and Monday.com. Learn with lablab.ai","image":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/bf7ce503-afe3-43a4-8f92-b8d1cf0f1c00/full","authorUsername":"alfredo_lhuissier73"},"author":{"id":"clf37hg5e005g9d0selz21ztn","email":"alfredo@thedeval.com","emailVerified":null,"image":"https://avatars.githubusercontent.com/u/30061055?v=4","name":"Alfredo L'huissier","role":"USER","createdAt":"2023-07-21T09:31:49.072Z","updatedAt":null,"profile":{"userId":"clf37hg5e005g9d0selz21ztn","firstName":"Alfredo","lastName":"Lhuissier","email":"alfredo@thedeval.com","image":null,"createdAt":"2023-03-11T00:05:51.007Z","updatedAt":"2024-02-01T21:36:11.805Z","hire":true,"id":"clf37hg670002bt0skj00zzlr","about":"Software developer with over 10 years of experience working in the Web industry. Specialized in Javascript/Typescript development (React, Vue, Next, NodeJS), and also familiar with Cloud Development (GCP and AWS), React Native, Python, NestJS, Three.js, Docker, Wordpress, Shopify apps and UI/UX. \n\nCurrently, I am engaged in the development of applications that leverage the abilities of Large Language Models and Generative AI.","userName":"alfredo_lhuissier73","discord":"velvet9434#0","githubUrl":"https://github.com/alhuissi","linkedinUrl":"","facebookUrl":"","instagramUrl":"","redditUrl":"","personalwebsiteUrl":"https://thedeval.com","role":"Software Engineer","twitterUrl":"https://twitter.com/thedevalweb","organization":"Deval","volunteer":true,"timezone":null,"picture":"https://storage.googleapis.com/lablab-static-eu/images/users/clf37hg5e005g9d0selz21ztn_picture_3y81k164f.jpg","location":"Chile","discordId":"414857948750413824","public":true,"yearsOfExp":8,"technicalExp":"5","businessExp":"3","creativeExp":"5","leaderExp":"3","subscribedToMail":true}},"createdAt":"Thursday, June 22, 2023","imageUrl":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/bf7ce503-afe3-43a4-8f92-b8d1cf0f1c00/full","pageUrl":"https://lablab.ai/t/monday-app-LLM-debug-tutorial","techs":[{"id":"clk8bzdyo0000ps0gvcorwy98","techId":"clgxky4d90000o80gcgkgg534","techName":"","techSlug":"","eventId":null,"eventName":null,"eventSlug":null,"submissionId":null,"submissionName":null,"submissionSlug":null,"streamId":null,"streamName":null,"streamSlug":null,"tutorialId":"clj6v3e160000nu0g962xzxnf","tutorialName":null,"tutorialSlug":null,"applicationId":null,"articleId":null,"articleName":null,"articleSlug":null,"profileId":null,"tech":{"id":"clgxky4d90000o80gcgkgg534","name":"OpenAI","fullName":"OpenAI","slug":"openai","description":"OpenAI is an AI research and deployment company","color":null,"discovery":false,"providerId":null,"order":null,"categoryId":null,"typeId":"cljqyyssh0002qk0hfjxmwidd","baseTechnologyId":null,"provider":null}},{"id":"clk8c0b0z0002r00hhp25by1z","techId":"clj2n2okr0000mf0gkf51i0j9","techName":"","techSlug":"","eventId":null,"eventName":null,"eventSlug":null,"submissionId":null,"submissionName":null,"submissionSlug":null,"streamId":null,"streamName":null,"streamSlug":null,"tutorialId":"clj6v3e160000nu0g962xzxnf","tutorialName":null,"tutorialSlug":null,"applicationId":null,"articleId":null,"articleName":null,"articleSlug":null,"profileId":null,"tech":{"id":"clj2n2okr0000mf0gkf51i0j9","name":"Monday.com","fullName":"Monday.com: Team Collaboration and Task Management","slug":"mondaycom","description":"Streamline your team's workflow and optimize collaboration with Monday.com, an all-in-one platform for task management, communication, and project tracking.","color":null,"discovery":false,"providerId":"clj2mzx6u0000o50h563lgats","order":null,"categoryId":null,"typeId":"cljqyyssh0002qk0hfjxmwidd","baseTechnologyId":null,"provider":{"id":"clj2mzx6u0000o50h563lgats","name":"monday","slug":"monday","description":"Explore the various tools, resources, and integrations for the Monday.com platform to enhance and customize your workflow management experience.","color":null}}}],"otherTutorials":[{"id":"cljfgoaa10001931g0mfstt78","slug":"streamlit-deploy-tutorial","createdAt":"2023-06-28T08:35:09.961Z","authorId":"clf37hg5e005g9d0selz21ztn","textChannelId":null,"title":"Streamlit: How to deploy your AI app","imageUrl":"https://storage.googleapis.com/lablab-static-eu/images/tutorials/steamlitdeployment.png","description":"Deploy your AI app in under 5 minutes for free with Streamlit Community Cloud.","published":true,"boost":1},{"id":"clfifp93300017o0s9wxczep7","slug":"gpt-4-tutorial-how-to-build-a-website-with-bing-chatbot","createdAt":"2023-03-21T15:52:24.639Z","authorId":"cl9e6ehns000o680ty2dnf7cg","textChannelId":null,"title":"GPT-4 tutorial: How to build a website with Bing chatbot","imageUrl":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/f83b3fcc-431c-45ce-9fae-a9e199f31b00/full","description":"A step by step guide how to create website with Bing’s built in GPT-4 chatbot and make changes to it afterwards","published":true,"boost":1},{"id":"cli1sw1gi0003f40sj1vhfpbo","slug":"chroma-tutorial-with-openais-gpt-35-model-for-memory-feature-in-chatbot","createdAt":"2023-05-24T14:28:38.370Z","authorId":"clhovwr1j000yen0sngtmz4l0","textChannelId":null,"title":"Chroma Tutorial: How to give GPT-3.5 chatbot memory-like capability","imageUrl":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/65b69d05-f79a-4450-764b-677b84d2e000/full","description":"In this tutorial we will learn how to utilize Chroma database to store chat history as embeddings and retrieve them on relevant input by user of Chatbot CLI built using Python. We will OpenAI's GPT-3.5 model for creating chatbot. Enjoy!","published":true,"boost":1},{"id":"clnoifpd300019d15p2171snd","slug":"arxiv-summarizer-related-papers","createdAt":"2023-10-13T11:13:13.767Z","authorId":"clbrijcds002y6u0slaen7k8u","textChannelId":null,"title":"How to Summarize and Find Similar ArXiv Articles","imageUrl":"https://storage.googleapis.com/lablab-static-eu/images/tutorials/arxivtutorial.png","description":"Learn how to summarize arXiv articles and identify similar papers for comprehensive research.","published":true,"boost":1},{"id":"cljsrl73g00clqr0hhjhn1t6x","slug":"monday-palm-tutorial","createdAt":"2023-07-07T16:01:41.930Z","authorId":"clbrn7spq0000370s1pw22p48","textChannelId":null,"title":"monday.com + PaLM2 Tutorial: Creating an AI-powered Assistant App on monday.com: A Step-by-Step Tutorial for Integrating Google Vertex PaLM API powered by PaLM2 model.","imageUrl":"https://storage.googleapis.com/lablab-static-eu/images/tutorials/google-tutorial-thumb.png","description":"Creating an AI-powered Assistant App on monday.com: A Step-by-Step Tutorial for Integrating Google Vertex PaLM API powered by PaLM2 model.","published":true,"boost":1},{"id":"clio7hape000d561ec5s6q8qy","slug":"monday-first-api-call","createdAt":"2023-06-09T06:48:00.626Z","authorId":"cl7kmske9149200uatld04xsoj","textChannelId":null,"title":"monday.com Tutorial: Your first API call","imageUrl":"https://imagedelivery.net/K11gkZF3xaVyYzFESMdWIQ/23c9e919-854a-4e1c-991b-f9b730f4e300/full","description":"Learn how to use the GraphQL monday.com API, to enhance your workplace!","published":true,"boost":1},{"id":"clkjnbumx01dam90hz8ra5ydh","slug":"monday-stable-diffusion-tutorial","createdAt":"2023-07-26T11:32:14.167Z","authorId":"clbrn7spq0000370s1pw22p48","textChannelId":null,"title":"monday.com Tutorial: Create and publish your first monday.com AI App with Stable Diffusion","imageUrl":"https://storage.googleapis.com/lablab-static-eu/images/tutorials/mondaytut324324.png","description":"In this tutorial, we will learn how to build monday.com AI-powered app using image generative AI (like Stable Diffusion) and publish it. Sit back relax and enjoy the tutorial!","published":true,"boost":1}],"upcomingEvents":[{"id":"cm3j29bp4000c357syh9kanc3","name":"DOGE Hackathon","shouldAutoApproveParticipants":true,"description":"\n🚀 Revolutionize Government Efficiency with xAI \u0026 Grok: Embrace the Future of Public Service.\n\n⚡ Build intelligent tools to streamline government processes, cut costs, and drive impactful change.\n\n🤖 Harness the power of Grok, xAI’s advanced AI model, to automate tasks and empower citizens.\n\n🌐 Collaborate with innovative developers and create solutions that reshape public administration.\n\n📅 Register now and be part of the movement for a leaner, smarter government!","createdAt":"2024-11-15T18:16:53.056Z","updatedAt":"2024-11-19T14:10:53.776Z","from":null,"information":null,"tech":null,"active":true,"twitchVodLink":"","showWinners":false,"showSponsorButton":false,"signupActive":true,"endAt":"2024-12-15T17:00:00.000Z","startAt":"2024-12-13T17:00:00.000Z","toBeAnnounced":false,"imageLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm3j29bp4000c357syh9kanc3/cm3j29bp4000c357syh9kanc3_imageLink_811s0erq.jpg","thumbnailLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm3j29bp4000c357syh9kanc3/cm3j29bp4000c357syh9kanc3_thumbnailLink_6j1y0b3h.jpg","videoLink":"","participantsLimit":null,"teamMembersLimit":6,"participantsThreshold":null,"slug":"doge-ai-hackathon","followActive":false,"teamsActive":true,"type":"HACKATHON","mailListId":"d3c98d9a-e98f-4c18-ba96-872ce7dcbb3a","discordEventRoleId":"1307046678842572866","sentSummary":false,"sentFeedbackRequests":false,"feedbackIntroMessage":null,"sentActions":false,"processedVideos":false,"certificatesSent":false,"mailLongBeforeTime":null,"mailLongBeforeSent":false,"mailShortBeforeTime":null,"mailShortBeforeSent":false,"mailEnrollBeforeTime":null,"mailEnrollBeforeSent":false,"ytPlaylist":null,"techs":[],"_count":{"participants":681}},{"id":"clxafvp21001m356ylkui7lgb","name":"Lōkahi Innovation in Healthcare ","shouldAutoApproveParticipants":false,"description":"🕒 2 days to dive into this transformative healthcare technology challenge!\n\n🏝️ Join us onsite in Honolulu, Hawaii for an exciting hybrid hackathon experience! If you can't be with us in person, no worries—you can still participate and contribute online.\n\n💡 Leverage AI, data analytics, and cloud computing to create innovative solutions that improve healthcare outcomes in Hawaii and beyond.\n\n🤝 Compete solo or team up with diverse healthcare, tech, and academia innovators.\n\n🏆 Stand a chance to win amazing prizes and make an impact!","createdAt":"2024-06-11T13:30:43.984Z","updatedAt":"2024-11-25T21:42:55.279Z","from":null,"information":null,"tech":null,"active":true,"twitchVodLink":"","showWinners":false,"showSponsorButton":false,"signupActive":true,"endAt":"2024-12-09T05:00:00.000Z","startAt":"2024-12-07T05:00:00.000Z","toBeAnnounced":false,"imageLink":"https://storage.googleapis.com/lablab-static-eu/images/events/clxafvp21001m356ylkui7lgb/clxafvp21001m356ylkui7lgb_imageLink_2zq4v0sdo.jpg","thumbnailLink":"https://storage.googleapis.com/lablab-static-eu/images/events/clxafvp21001m356ylkui7lgb/clxafvp21001m356ylkui7lgb_thumbnailLink_bz1hs0uq5.jpg","videoLink":"","participantsLimit":null,"teamMembersLimit":6,"participantsThreshold":null,"slug":"lokahi-innovation-in-healthcare","followActive":false,"teamsActive":true,"type":"HACKATHON","mailListId":"f99a2511-643a-44dd-9ebc-7e9241f9d628","discordEventRoleId":"1250079771522629684","sentSummary":false,"sentFeedbackRequests":false,"feedbackIntroMessage":null,"sentActions":false,"processedVideos":false,"certificatesSent":false,"mailLongBeforeTime":null,"mailLongBeforeSent":false,"mailShortBeforeTime":null,"mailShortBeforeSent":false,"mailEnrollBeforeTime":null,"mailEnrollBeforeSent":false,"ytPlaylist":null,"techs":[],"_count":{"participants":3537}},{"id":"cm37csg0j000r357l7r0sqvih","name":"Hackathon Llama Impatto Roma","shouldAutoApproveParticipants":false,"description":"🌍 Affronta le sfide sociali del nostro tempo grazie alle funzionalità avanzate del modello Llama 3.1, imparando e collaborando insieme ai nostri mentors e agli esperti di Meta e dei principali leader del settore dell’IA.\n\n🚀 Accetta la sfida: come sfruttare l'intelligenza artificiale per migliorare il benessere generale dei cittadini, affrontando aree chiave come la salute, i servizi sociali, l’ambiente, i trasporti, la pubblica sicurezza e il dialogo con la pubblica amministrazione.\n\n📅 Unisciti a noi online o di persona presso la sede di Meta Binario F a Roma dal 29 novembre al 1 dicembre. L’evento è dedicato esclusivamente alle persone che vivono in Italia.\n\n🌍 Il supporto sarà disponibile sia in inglese che in italiano.\n\n🏆 Puoi ricevere fino a $5.000 in premi e l'opportunità di ampliare il tuo progetto ad alto impatto sociale e partecipare al programma esclusivo ‘Llama Impact Grant’!\n\n⭐ I 2 team vincenti potranno partecipare a un esclusivo programma di incubazione digitale Meta \u0026 lablab NEXT e saranno invitati, a nostre spese, per 2 giorni a visitare i centri di ricerca internazionali e incontrare gli esperti Meta.\n\n⭐ L’iniziativa è patrocinata dall’Agenzia per l'Italia Digitale (AGID), dall’Agenzia per la Cybersicurezza Nazionale (ACN) e dal Dipartimento di Ingegneria dell’Informazione, Elettronica e Telecomunicazioni dell’Università di Roma, La Sapienza (DIET).\n\n 🏆 La cerimonia di premiazione si svolgerà lunedì 2 dicembre alle ore 17:00 a Binario F, e prevede la partecipazione di alti rappresentanti istituzionali, di AgID, di ACN, e del Ministero delle Imprese e del Made in Italy.","createdAt":"2024-11-07T13:38:43.928Z","updatedAt":"2024-11-27T12:45:54.465Z","from":null,"information":null,"tech":null,"active":true,"twitchVodLink":"","showWinners":false,"showSponsorButton":false,"signupActive":true,"endAt":"2024-12-01T16:00:00.000Z","startAt":"2024-11-29T17:00:00.000Z","toBeAnnounced":false,"imageLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm37csg0j000r357l7r0sqvih/cm37csg0j000r357l7r0sqvih_imageLink_ep2p00km8.jpg","thumbnailLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm37csg0j000r357l7r0sqvih/cm37csg0j000r357l7r0sqvih_thumbnailLink_xm2r30kat.jpg","videoLink":"","participantsLimit":null,"teamMembersLimit":6,"participantsThreshold":null,"slug":"hackathon-llama-impatto-roma","followActive":false,"teamsActive":true,"type":"HACKATHON","mailListId":"9eac50bc-66d6-4a74-820c-276353c84944","discordEventRoleId":"1304077576670679152","sentSummary":false,"sentFeedbackRequests":false,"feedbackIntroMessage":null,"sentActions":false,"processedVideos":false,"certificatesSent":false,"mailLongBeforeTime":null,"mailLongBeforeSent":false,"mailShortBeforeTime":null,"mailShortBeforeSent":false,"mailEnrollBeforeTime":null,"mailEnrollBeforeSent":false,"ytPlaylist":null,"techs":[],"_count":{"participants":668}},{"id":"cm2522pig0005357l0fb5t6y7","name":"Gemma 2 AI Challenge","shouldAutoApproveParticipants":false,"description":"It’s a great opportunity to:\n\n🚀 Leverage Google’s advanced Gemma 2 models to create cutting-edge solutions.\n\n💰 Access resources to support your project development.\n\n🌟 Receive guidance from expert mentors throughout the hackathon.\n\n🤝 Work solo or in teams to bring your ideas to life.\n\n🏆 Compete for a chance to choose from unique Google swag and enjoy an opportunity to meet the Gemma team for the best solutions!\n\n🧑🏻‍💻 Sign up before the Kick-Off Stream to secure your spot!\n\n🗓️ On-site Workshops: Join us in-person at Google Cloud Space in London on 28th November from 5:00 PM to 9:00 PM UK time (GMT) for hands-on workshops","createdAt":"2024-10-11T18:24:16.686Z","updatedAt":"2024-11-06T17:19:39.154Z","from":null,"information":null,"tech":null,"active":true,"twitchVodLink":"","showWinners":false,"showSponsorButton":false,"signupActive":true,"endAt":"2024-12-01T17:00:00.000Z","startAt":"2024-11-28T17:00:00.000Z","toBeAnnounced":false,"imageLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm2522pig0005357l0fb5t6y7/cm2522pig0005357l0fb5t6y7_imageLink_0o2cn20ly4.jpg","thumbnailLink":"https://storage.googleapis.com/lablab-static-eu/images/events/cm2522pig0005357l0fb5t6y7/cm2522pig0005357l0fb5t6y7_thumbnailLink_m11j209cd.jpg","videoLink":"","participantsLimit":null,"teamMembersLimit":6,"participantsThreshold":null,"slug":"gemma-2-ai-challenge","followActive":false,"teamsActive":true,"type":"HACKATHON","mailListId":"f5dbda7a-ec1d-4fe5-a93d-444a409def6d","discordEventRoleId":"1294364963879784571","sentSummary":false,"sentFeedbackRequests":false,"feedbackIntroMessage":null,"sentActions":false,"processedVideos":false,"certificatesSent":false,"mailLongBeforeTime":null,"mailLongBeforeSent":false,"mailShortBeforeTime":null,"mailShortBeforeSent":false,"mailEnrollBeforeTime":null,"mailEnrollBeforeSent":false,"ytPlaylist":null,"techs":[],"_count":{"participants":2246}}],"token":"W21jb6h9u2REXUdGiPAmLXGrcGRBJZcV","slug":"monday-app-LLM-debug-tutorial","id":"clj6v3e160000nu0g962xzxnf","textChannelId":null},"__N_SSG":true},"page":"/t/[t]","query":{"t":"monday-app-LLM-debug-tutorial"},"buildId":"FW2sbXyCLoUWYLgmcAJep","runtimeConfig":{"version":"0.14.434"},"isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>

CINXE.COM

Monday.com + GPT app tutorial: How to make a debug assistant tutorial