{"id":11750,"date":"2025-01-09T10:53:58","date_gmt":"2025-01-09T10:53:58","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=11750"},"modified":"2025-01-09T10:55:20","modified_gmt":"2025-01-09T10:55:20","slug":"build-using-savage-bot-ai-template","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/","title":{"rendered":"Building a Comedy Set Bot : Using Savage Bot AI Template"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_56_1 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Prerequisites\" title=\"Prerequisites\">Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Figuring_out_an_idea\" title=\"Figuring out an idea \">Figuring out an idea <\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Part_1_Setting_Up_the_Project\" title=\"Part 1: Setting Up the Project\">Part 1: Setting Up the Project<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#11_Getting_Started\" title=\"1.1 Getting Started\">1.1 Getting Started<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#12_Understanding_the_Project_Structure\" title=\"1.2 Understanding the Project Structure\">1.2 Understanding the Project Structure<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Part_2_Building_the_Discord_Bot\" title=\"Part 2: Building the Discord Bot\">Part 2: Building the Discord Bot<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Understanding_the_Base_Bot_Logic\" title=\"Understanding the Base Bot Logic\">Understanding the Base Bot Logic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Core_Components_in_botjs\" title=\"Core Components in bot.js\">Core Components in bot.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Bot_Configuration\" title=\"Bot Configuration\">Bot Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#OpenAI_Setup\" title=\"OpenAI Setup\">OpenAI Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#System_Prompt\" title=\"System Prompt\">System Prompt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Message_Handling\" title=\"Message Handling\">Message Handling<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Extending_for_Comedy_Club_Features\" title=\"Extending for Comedy Club Features\">Extending for Comedy Club Features<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#21_Setting_Up_the_Bot_Logic\" title=\"2.1 Setting Up the Bot Logic\">2.1 Setting Up the Bot Logic<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#The_ComedyMicExtension_Class\" title=\"The ComedyMicExtension Class\">The ComedyMicExtension Class<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Defining_the_Comedy_Club_Host_Personality\" title=\"Defining the Comedy Club Host Personality\">Defining the Comedy Club Host Personality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Managing_the_Stage_startSet\" title=\"Managing the Stage: startSet\">Managing the Stage: startSet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Handling_Jokes_processJoke\" title=\"Handling Jokes: processJoke\">Handling Jokes: processJoke<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Wrapping_Up_endSet\" title=\"Wrapping Up: endSet\">Wrapping Up: endSet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Command_Registration\" title=\"Command Registration\">Command Registration<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#22_Configuring_the_Discord_Bot\" title=\"2.2 Configuring the Discord Bot\">2.2 Configuring the Discord Bot<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Part_3_Developing_the_Web_Interface\" title=\"Part 3: Developing the Web Interface\">Part 3: Developing the Web Interface<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#31_Implementing_the_Comedy_Club_Page\" title=\"3.1 Implementing the Comedy Club Page\">3.1 Implementing the Comedy Club Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#32_Styling_with_Tailwind_CSS\" title=\"3.2 Styling with Tailwind CSS\">3.2 Styling with Tailwind CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Part_4_Connecting_Everything\" title=\"Part 4: Connecting Everything\">Part 4: Connecting Everything<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#41_Setting_Up_OAuth2_for_Discord\" title=\"4.1 Setting Up OAuth2 for Discord\">4.1 Setting Up OAuth2 for Discord<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#42_Deploying_the_Bot\" title=\"4.2 Deploying the Bot\">4.2 Deploying the Bot<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Wrap_Up\" title=\"Wrap Up\">Wrap Up<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Whats_Next\" title=\"What\u2019s Next?\">What\u2019s Next?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Did_we_forget_errors\" title=\"Did we forget errors?\">Did we forget errors?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Frequently_Asked_Questions\" title=\"Frequently Asked Questions\">Frequently Asked Questions<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#What_can_you_build_using_these_AI_templates\" title=\"What can you build using these AI templates?\">What can you build using these AI templates?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/metaschool.so\/articles\/build-using-savage-bot-ai-template\/#Are_these_AI_Templates_free_to_use\" title=\"Are these AI Templates free to use?\">Are these AI Templates free to use?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p>Hey Everyone, as you have stumbled on this blog I am pretty much sure that you were checking out the <a href=\"https:\/\/metaschool.so\/templates\">Build with AI<\/a> section on Metaschool and looking at those cool AI templates that the team has built. A lot of you reached out to us. before, saying that you have got a bunch of project ideas while exploring the AI templates and want to build on top of it, but don&#8217;t know how to start. And so why not make it a bit easy for you?<\/p>\n\n\n\n<p>Get ready with your ideas, while show you how I build mine using our AI templates. But for those who don&#8217;t know what AI templates are? We have worked on some really interesting projects like DSAGPT Tutor, Story Generator GPT, Finance GPT, and so on and provided the entire code along with the steps to integrate them and build something even better. For this article, we will be using the Savage bot template which is an AI-powered Discord bot that delivers savage, witty, and hilariously brutal responses.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1391\" src=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2.png\" alt=\"Comedy Bot - built with Savage Bot AI Template by Metaschool\" class=\"wp-image-11770\" srcset=\"https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2.png 2560w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2-300x163.png 300w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2-1024x557.png 1024w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2-768x417.png 768w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2-1536x835.png 1536w, https:\/\/metaschool.so\/articles\/wp-content\/uploads\/2025\/01\/image-2-2048x1113.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js installed on your system<\/li>\n\n\n\n<li>Basic knowledge of TypeScript and React<\/li>\n\n\n\n<li>Discord Developer account<\/li>\n\n\n\n<li>OpenAI API key<\/li>\n\n\n\n<li>Clone of <a href=\"https:\/\/metaschool.so\/templates\/ai\/savage-bot\">Savage Bot Template<\/a> by Metaschool<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Figuring_out_an_idea\"><\/span>Figuring out an idea <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As a developer, we all think that coding is the toughest part as all of us have a bunch of ideas we want to build on. But while you start working on a side project as much as the idea matters, figuring out how to proceed next is important. With AI it is the opposite, we bring you the best templates to build upon but what are the most relevant and fun ideas associated with that template that you can build? If you have figured it out already, skip to the next section but if not, let\u2019s go to Claude and ask: <br><br>This is the prompt I gave:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I have a savage discord bot template by Metaschool, it is AI powered and it provides really savage replies very fun and simple to use. I want some product ideas that can be built using this template, in which we can integrate the use of savage bot.<\/p>\n<\/blockquote>\n\n\n\n<p>That\u2019s it, Claude will give you a bunch of ideas. For this prompt, it gave me the following ideas:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>&#8220;Savage Social Media Manager&#8221; &#8211; A social media management tool that generates witty, sharp-tongued responses to comments and messages across platforms.<\/li>\n\n\n\n<li>&#8220;Roast Battle Training Arena&#8221; &#8211; A platform where users can practice comebacks and witty banter with the AI bot in a safe environment. C<\/li>\n\n\n\n<li>&#8220;Savage Writing Assistant&#8221; &#8211; A writing tool that helps add humor and edge to content like marketing copy, scripts, or social posts.<\/li>\n\n\n\n<li>&#8220;Comedy Open Mic Simulator&#8221; &#8211; An app that acts as a virtual audience\/heckler to help comedians practice their material and improve their crowd work.<\/li>\n\n\n\n<li>&#8220;Savage Customer Service Training&#8221; &#8211; A tool for training customer service reps to handle difficult customers with wit and grace.<\/li>\n<\/ol>\n\n\n\n<p>Interesting isn&#8217;t it? I picked No. 4 &#8211; because I love jokes! Which one did you pick? <br>Once you have decided on the idea, don\u2019t wait<strong> Fork <\/strong>and <strong>Clone<\/strong> the repository now! (<strong>Give it a Star too! We love stars, that is our source of validation, that you love what we are doing<\/strong>)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_1_Setting_Up_the_Project\"><\/span>Part 1: Setting Up the Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"11_Getting_Started\"><\/span>1.1 Getting Started<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, fork the Savage Bot template from Metaschool&#8217;s repository and clone it to your local machine. You will find this set of instructions on the README page as well.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"git clone <https:\/\/github.com\/your-username\/savage-bot.git&gt;\ncd savage-bot\nnpm install\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">git<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">clone<\/span><span style=\"color: #D4D4D4\"> &lt;<\/span><span style=\"color: #C8C8C8\">https<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #6A9955\">\/\/github.com\/your-username\/savage-bot.git&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">cd<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">savage<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">bot<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">install<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Create a .env file in the root directory:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"DISCORD_TOKEN=your_discord_bot_token\nOPENAI_API_KEY=your_openai_api_key\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #4FC1FF\">DISCORD_TOKEN<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #9CDCFE\">your_discord_bot_token<\/span><\/span>\n<span class=\"line\"><span style=\"color: #4FC1FF\">OPENAI_API_KEY<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #9CDCFE\">your_openai_api_key<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>As you clone the project and open the folder in your VS Code. Understanding the project structure before you proceed with the coding part is very important. Let us move to the next section, to see what is the significance of each file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"12_Understanding_the_Project_Structure\"><\/span>1.2 Understanding the Project Structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The template provides the implementation of the bot where each file has a significant role to play. Understanding it is important so that when you play around with the code trying to build on top of it, you don\u2019t mess with the wrong file.<\/p>\n\n\n\n<p>Heads Up: Even if you, it is fine. Code errors can be fixed.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"savage-bot\/\n\u251c\u2500\u2500 app\/                           # Next.js app directory containing frontend code\n\u2502 \u251c\u2500\u2500 components\/                  # React components folder\n\u2502 \u2502 \u2514\u2500\u2500 Footer.tsx                # Footer component with Metaschool branding and social links\n\u2502 \u251c\u2500\u2500 globals.css                 # Global styles and Tailwind CSS configuration\n\u2502 \u251c\u2500\u2500 layout.tsx                  # Root layout component with fonts and common structure\n\u2502 \u2514\u2500\u2500 page.tsx                    # Main comedy club interface with chat and commands\n\u251c\u2500\u2500 bot\/                          # Discord bot related files\n\u2502 \u251c\u2500\u2500 bot.js                      # Main Discord bot setup with OpenAI integration\n\u2502 \u2514\u2500\u2500 comedy-mic.js               # Comedy-specific logic and slash commands\n\u251c\u2500\u2500 public\/                       # Static assets directory\n\u251c\u2500\u2500 .env                         # Environment variables (Discord token, OpenAI key)\n\u251c\u2500\u2500 next.config.ts               # Next.js configuration file\n\u251c\u2500\u2500 package.json                 # Project dependencies and scripts\n\u251c\u2500\u2500 tailwind.config.ts           # Tailwind CSS configuration\n\u2514\u2500\u2500 tsconfig.json                # TypeScript configuration\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">savage<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">bot<\/span><span style=\"color: #D4D4D4\">\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">\/                           # <\/span><span style=\"color: #9CDCFE\">Next<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">js<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">directory<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">containing<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">frontend<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">code<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u251c\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">\/                  # <\/span><span style=\"color: #9CDCFE\">React<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">folder<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u2502 \u2514\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">Footer<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">tsx<\/span><span style=\"color: #D4D4D4\">                # <\/span><span style=\"color: #9CDCFE\">Footer<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">component<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">with<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">Metaschool<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">branding<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">social<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">links<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u251c\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">globals<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">css<\/span><span style=\"color: #D4D4D4\">                 # <\/span><span style=\"color: #9CDCFE\">Global<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">styles<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">Tailwind<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">CSS<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">configuration<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u251c\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">layout<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">tsx<\/span><span style=\"color: #D4D4D4\">                  # <\/span><span style=\"color: #9CDCFE\">Root<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">layout<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">component<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">with<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">fonts<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">common<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">structure<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u2514\u2500\u2500 <\/span><span style=\"color: #9CDCFE\">page<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">tsx<\/span><span style=\"color: #D4D4D4\">                    # <\/span><span style=\"color: #9CDCFE\">Main<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">comedy<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">club<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">interface<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">with<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">chat<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">commands<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">bot<\/span><span style=\"color: #D4D4D4\">\/                          # <\/span><span style=\"color: #4EC9B0\">Discord<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">bot<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">related<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">files<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">bot<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">js<\/span><span style=\"color: #D4D4D4\">                      # <\/span><span style=\"color: #4EC9B0\">Main<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">Discord<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">bot<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">setup<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">with<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">OpenAI<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">integration<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2502 \u2514\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">comedy<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #4EC9B0\">mic<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">js<\/span><span style=\"color: #D4D4D4\">               # <\/span><span style=\"color: #4EC9B0\">Comedy<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #4EC9B0\">specific<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">logic<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">slash<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">commands<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">public<\/span><span style=\"color: #D4D4D4\">\/                       # <\/span><span style=\"color: #4EC9B0\">Static<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">assets<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">directory<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 .<\/span><span style=\"color: #4EC9B0\">env<\/span><span style=\"color: #D4D4D4\">                         # <\/span><span style=\"color: #4EC9B0\">Environment<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">variables<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #4EC9B0\">Discord<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">token<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4EC9B0\">OpenAI<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">key<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">next<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">config<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">ts<\/span><span style=\"color: #D4D4D4\">               # <\/span><span style=\"color: #4EC9B0\">Next<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">js<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">configuration<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">file<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">package<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">json<\/span><span style=\"color: #D4D4D4\">                 # <\/span><span style=\"color: #4EC9B0\">Project<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">dependencies<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">and<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">scripts<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u251c\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">tailwind<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">config<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">ts<\/span><span style=\"color: #D4D4D4\">           # <\/span><span style=\"color: #4EC9B0\">Tailwind<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">CSS<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">configuration<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\u2514\u2500\u2500 <\/span><span style=\"color: #4EC9B0\">tsconfig<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4EC9B0\">json<\/span><span style=\"color: #D4D4D4\">                # <\/span><span style=\"color: #4EC9B0\">TypeScript<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">configuration<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now that we have understood what each file does, let\u2019s start coding. While we implement new features we will simultaneously look into what\u2019s written in each of these files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_2_Building_the_Discord_Bot\"><\/span>Part 2: Building the Discord Bot<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_the_Base_Bot_Logic\"><\/span>Understanding the Base Bot Logic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Before we start building our comedy features, let&#8217;s understand what&#8217;s already set up in <code>bot.js<\/code>. This is crucial because it serves as the foundation for our comedy bot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Core_Components_in_botjs\"><\/span>Core Components in bot.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const { Client, GatewayIntentBits } = require('discord.js');\nconst dotenv = require('dotenv');\nconst { ChatOpenAI } = require(&quot;@langchain\/openai&quot;);\nconst { HumanMessage, SystemMessage } = require(&quot;@langchain\/core\/messages&quot;);\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">Client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;discord.js&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">dotenv<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;dotenv&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">ChatOpenAI<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;@langchain\/openai&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">HumanMessage<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SystemMessage<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;@langchain\/core\/messages&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>These imports set up:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Discord.js client for bot functionality<\/li>\n\n\n\n<li>Environment variables management<\/li>\n\n\n\n<li>LangChain&#8217;s OpenAI integration for AI responses<\/li>\n\n\n\n<li>Message types for AI interactions<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bot_Configuration\"><\/span>Bot Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const client = new Client({\n  intents: [\n    GatewayIntentBits.Guilds,\n    GatewayIntentBits.GuildMessages,\n    GatewayIntentBits.MessageContent,\n  ],\n});\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Client<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">intents:<\/span><span style=\"color: #D4D4D4\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Guilds<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">GuildMessages<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">MessageContent<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The intent tell Discord what events our bot needs access to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Guilds<\/code>: Access to server information<\/li>\n\n\n\n<li><code>GuildMessages<\/code>: Ability to read messages<\/li>\n\n\n\n<li><code>MessageContent<\/code>: Access to message content<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"OpenAI_Setup\"><\/span>OpenAI Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const chatModel = new ChatOpenAI({\n  openAIApiKey: process.env.OPENAI_API_KEY,\n  modelName: 'gpt-4',\n  temperature: 1,\n  maxTokens: 50, \/\/ Limit response length\n});\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">chatModel<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ChatOpenAI<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">openAIApiKey:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">process<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">env<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">OPENAI_API_KEY<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">modelName:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;gpt-4&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">temperature:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">maxTokens:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">50<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #6A9955\">\/\/ Limit response length<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This configuration:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uses GPT-4 model<\/li>\n\n\n\n<li>Sets high temperature (1) for more creative responses<\/li>\n\n\n\n<li>Limits response length to keep roasts concise<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"System_Prompt\"><\/span>System Prompt<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const PLAYFUL_PROMPT = `You are a savage, sarcastic roast bot. STRICT RULES:\n- Maximum 1 sentence response\n- Brutally witty\n- No filters\n- Pure savage energy\n- Destroy their ego instantly\n- Make it sharp, short, and hilarious`;\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">PLAYFUL_PROMPT<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">`You are a savage, sarcastic roast bot. STRICT RULES:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Maximum 1 sentence response<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Brutally witty<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- No filters<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Pure savage energy<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Destroy their ego instantly<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Make it sharp, short, and hilarious`<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This defines the bot&#8217;s personality and response style. The template already gives us a roast-oriented personality, which is perfect for our comedy bot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Message_Handling\"><\/span>Message Handling<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"client.on('messageCreate', async (message) =&gt; {\n  if (message.author.bot) return;\n\n  try {\n    message.channel.sendTyping();\n\n    \/\/ Check fixed responses first\n    const normalizedMessage = message.content.toLowerCase().trim();\n    if (FIXED_RESPONSES.hasOwnProperty(normalizedMessage)) {\n      await message.reply(FIXED_RESPONSES[normalizedMessage]);\n      return;\n    }\n\n    \/\/ Use AI for other responses\n    const response = await chatModel.invoke([\n      new SystemMessage(PLAYFUL_PROMPT),\n      new HumanMessage(message.content)\n    ]);\n\n    const savageResponse = response.content.split('.')[0].trim();\n    await message.reply(savageResponse);\n  } catch (error) {\n    console.error('Error:', error);\n    await message.reply(&quot;Even my wit buffer is overloaded by this conversation!&quot;);\n  }\n});\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">on<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;messageCreate&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">author<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">bot<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">try<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channel<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">sendTyping<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">\/\/ Check fixed responses first<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">normalizedMessage<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">toLowerCase<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">trim<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #4FC1FF\">FIXED_RESPONSES<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">hasOwnProperty<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">normalizedMessage<\/span><span style=\"color: #D4D4D4\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">FIXED_RESPONSES<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #9CDCFE\">normalizedMessage<\/span><span style=\"color: #D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">\/\/ Use AI for other responses<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">invoke<\/span><span style=\"color: #D4D4D4\">([<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SystemMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">PLAYFUL_PROMPT<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">HumanMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">savageResponse<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">split<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;.&#39;<\/span><span style=\"color: #D4D4D4\">)[<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">].<\/span><span style=\"color: #DCDCAA\">trim<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">savageResponse<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  } <\/span><span style=\"color: #C586C0\">catch<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">error<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;Error:&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Even my wit buffer is overloaded by this conversation!&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This code:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Listens for new messages<\/li>\n\n\n\n<li>Ignores messages from other bots<\/li>\n\n\n\n<li>Shows typing indicator for better UX<\/li>\n\n\n\n<li>Checks for pre-defined responses<\/li>\n\n\n\n<li>Falls back to AI-generated responses<\/li>\n\n\n\n<li>Handles errors gracefully<\/li>\n<\/ol>\n\n\n\n<p>Now that we have understood the core logic of the bot.js file we will add respective modifications in it to extend it as Comedy Club Bot.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Extending_for_Comedy_Club_Features\"><\/span>Extending for Comedy Club Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A comedy club isn&#8217;t just about random roasts &#8211; it needs structure, timing, and a sense of performance. This is where our extensions come in. Through <code>comedy-mic.js<\/code>, we&#8217;ll transform our savage bot into a full-fledged comedy club host. We need to create an environment where users can take the stage, perform their sets, and receive feedback while maintaining the bot&#8217;s signature savage style. You can add as many creative features as you want. <\/p>\n\n\n\n<p>The challenge lies in organizing these performances. We need to track who&#8217;s on stage, manage the flow of jokes, and ensure the bot responds appropriately at each step of a comedy set. It&#8217;s like turning our basic roast bot into a seasoned comedy club manager who knows exactly when to introduce performers, when to heckle, and when to wrap up a set.<\/p>\n\n\n\n<p>Let&#8217;s look at how we&#8217;ll implement these features by building our comedy club bot. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"21_Setting_Up_the_Bot_Logic\"><\/span>2.1 Setting Up the Bot Logic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, let&#8217;s implement the comedy bot functionality in <code>comedy-mic.js<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"class ComedyMicExtension {\n    constructor(client, openAIApiKey) {\n        this.client = client;\n        this.chatModel = new ChatOpenAI({\n            openAIApiKey: openAIApiKey,\n            modelName: 'gpt-4',\n            temperature: 1,\n        });\n\n        this.activePerformances = new Map();\n    }\n\n    get COMEDY_PROMPT() {\n        return `You are a savage comedy club host and heckler with the following traits:\n- You maintain a brutal yet entertaining presence\n- Your responses are short, witty, and cutting\n- You stay in character as a comedy club host\/heckler\n- You provide brief but insightful feedback on performances\nCurrent setting: You're hosting an open mic night at the Savage Comedy Club.`;\n    }\n\n    async startSet(interaction) {\n        \/\/ Implementation details shown in comedy-mic.js\n    }\n\n    async processJoke(interaction) {\n        \/\/ Implementation details shown in comedy-mic.js\n    }\n\n    async endSet(interaction) {\n        \/\/ Implementation details shown in comedy-mic.js\n    }\n\n    registerCommands() {\n        return [\n            {\n                name: 'startset',\n                description: 'Start your comedy set',\n            },\n            {\n                name: 'joke',\n                description: 'Tell a joke during your set',\n                options: [{\n                    name: 'joke',\n                    type: 3,\n                    description: 'Your joke\/bit',\n                    required: true\n                }]\n            },\n            {\n                name: 'endset',\n                description: 'End your comedy set and get feedback',\n            }\n        ];\n    }\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">class<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">ComedyMicExtension<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">constructor<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">openAIApiKey<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ChatOpenAI<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">openAIApiKey:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">openAIApiKey<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">modelName:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;gpt-4&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">temperature:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Map<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">get<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">COMEDY_PROMPT<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">`You are a savage comedy club host and heckler with the following traits:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You maintain a brutal yet entertaining presence<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Your responses are short, witty, and cutting<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You stay in character as a comedy club host\/heckler<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You provide brief but insightful feedback on performances<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">Current setting: You&#39;re hosting an open mic night at the Savage Comedy Club.`<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">startSet<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Implementation details shown in comedy-mic.js<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">processJoke<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Implementation details shown in comedy-mic.js<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">endSet<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ Implementation details shown in comedy-mic.js<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #DCDCAA\">registerCommands<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;startset&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Start your comedy set&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;joke&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Tell a joke during your set&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">options:<\/span><span style=\"color: #D4D4D4\"> [{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;joke&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">type:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">3<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Your joke\/bit&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">required:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                }]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;endset&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;End your comedy set and get feedback&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Let&#8217;s look into how we transform our basic roast bot into a comedy club host through <code>comedy-mic.js<\/code>. The implementation creates a structured performance environment while maintaining the bot&#8217;s savage personality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_ComedyMicExtension_Class\"><\/span>The ComedyMicExtension Class<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"class ComedyMicExtension {\n    constructor(client, openAIApiKey) {\n        this.client = client;\n        this.chatModel = new ChatOpenAI({\n            openAIApiKey: openAIApiKey,\n            modelName: 'gpt-4',\n            temperature: 1,\n        });\n\n        this.activePerformances = new Map();\n    }\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">class<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4EC9B0\">ComedyMicExtension<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">constructor<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">openAIApiKey<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ChatOpenAI<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">openAIApiKey:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">openAIApiKey<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">modelName:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;gpt-4&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">temperature:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Map<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The constructor sets up two essential elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A connection to our Discord client<\/li>\n\n\n\n<li>An OpenAI chat model configured for creative responses<\/li>\n\n\n\n<li>A Map to track active performances in different channels<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Defining_the_Comedy_Club_Host_Personality\"><\/span>Defining the Comedy Club Host Personality<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"get COMEDY_PROMPT() {\n    return `You are a savage comedy club host and heckler with the following traits:\n- You maintain a brutal yet entertaining presence\n- Your responses are short, witty, and cutting\n- You stay in character as a comedy club host\/heckler\n- You provide brief but insightful feedback on performances\nCurrent setting: You're hosting an open mic night at the Savage Comedy Club.`;\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">get<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">COMEDY_PROMPT<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">`You are a savage comedy club host and heckler with the following traits:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You maintain a brutal yet entertaining presence<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- Your responses are short, witty, and cutting<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You stay in character as a comedy club host\/heckler<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">- You provide brief but insightful feedback on performances<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">Current setting: You&#39;re hosting an open mic night at the Savage Comedy Club.`<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This prompt transforms our basic bot into a comedy club host. It defines the personality and behavior our AI should maintain throughout the performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Managing_the_Stage_startSet\"><\/span>Managing the Stage: startSet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"async startSet(interaction) {\n    await interaction.deferReply();\n\n    if (this.activePerformances.has(interaction.channelId)) {\n        return interaction.reply(&quot;There's already someone bombing on stage. Wait your turn!&quot;);\n    }\n\n    const performance = {\n        comedian: interaction.user.id,\n        startTime: Date.now(),\n        jokes: [],\n        heckles: [],\n        feedback: null\n    };\n\n    this.activePerformances.set(interaction.channelId, performance);\n\n    const response = await this.chatModel.invoke([\n        new SystemMessage(this.COMEDY_PROMPT),\n        new HumanMessage(&quot;Introduce the next comedian in a savage way&quot;)\n    ]);\n\n    return interaction.editReply(`\ud83c\udfa4 ${response.content}`);\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">startSet<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">deferReply<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">has<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channelId<\/span><span style=\"color: #D4D4D4\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;There&#39;s already someone bombing on stage. Wait your turn!&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">performance<\/span><span style=\"color: #D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">comedian:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">user<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">startTime:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">Date<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">now<\/span><span style=\"color: #D4D4D4\">(),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">jokes:<\/span><span style=\"color: #D4D4D4\"> [],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">heckles:<\/span><span style=\"color: #D4D4D4\"> [],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">feedback:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">null<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">set<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channelId<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">invoke<\/span><span style=\"color: #D4D4D4\">([<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SystemMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">COMEDY_PROMPT<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">HumanMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Introduce the next comedian in a savage way&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">editReply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`\ud83c\udfa4 <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"has-d-4-d-4-d-4-color has-text-color has-875-rem-font-size\">The<strong> <code>startSet<\/code><\/strong> method handles the beginning of a performance by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Checking if someone is already performing<\/li>\n\n\n\n<li>Creating a new performance record<\/li>\n\n\n\n<li>Generating a savage introduction for the comedian<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Handling_Jokes_processJoke\"><\/span>Handling Jokes: processJoke<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"async processJoke(interaction) {\n    await interaction.deferReply();\n\n    const performance = this.activePerformances.get(interaction.channelId);\n    if (!performance || performance.comedian !== interaction.user.id) {\n        return interaction.reply(&quot;You're not the one on stage, heckle them instead!&quot;);\n    }\n\n    const joke = interaction.options.getString('joke');\n    performance.jokes.push(joke);\n\n    const response = await this.chatModel.invoke([\n        new SystemMessage(this.COMEDY_PROMPT),\n        new HumanMessage(`Comedian's joke: &quot;${joke}&quot;\\\\\\\\nRespond with a brutal heckle or savage commentary`)\n    ]);\n\n    performance.heckles.push(response.content);\n    return interaction.editReply(response.content);\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">processJoke<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">deferReply<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">performance<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channelId<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (!<\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\"> || <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">comedian<\/span><span style=\"color: #D4D4D4\"> !== <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">user<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;You&#39;re not the one on stage, heckle them instead!&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">joke<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">options<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getString<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;joke&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">jokes<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">push<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">joke<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">invoke<\/span><span style=\"color: #D4D4D4\">([<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SystemMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">COMEDY_PROMPT<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">HumanMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`Comedian&#39;s joke: &quot;<\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">joke<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">&quot;<\/span><span style=\"color: #D7BA7D\">\\\\\\\\<\/span><span style=\"color: #CE9178\">nRespond with a brutal heckle or savage commentary`<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">heckles<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">push<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">editReply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>During the performance, processJoke:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verifies the right person is telling the joke<\/li>\n\n\n\n<li>Records the joke in the performance history<\/li>\n\n\n\n<li>Generates and stores a savage heckle response<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrapping_Up_endSet\"><\/span>Wrapping Up: endSet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"async endSet(interaction) {\n    await interaction.deferReply();\n\n    const performance = this.activePerformances.get(interaction.channelId);\n    if (!performance || performance.comedian !== interaction.user.id) {\n        return interaction.reply(&quot;You can't end a set you never started!&quot;);\n    }\n\n    const duration = (Date.now() - performance.startTime) \/ 1000 \/ 60;\n\n    const feedback = await this.chatModel.invoke([\n        new SystemMessage(this.COMEDY_PROMPT),\n        new HumanMessage(`The comedian just finished their ${duration.toFixed(1)} minute set.\n            Jokes performed: ${performance.jokes.join(' | ')}\n            Provide a brutal but slightly constructive wrap-up of their performance.`)\n    ]);\n\n    this.activePerformances.delete(interaction.channelId);\n\n    return interaction.editReply(`\ud83c\udfad ${feedback.content}`);\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">endSet<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">deferReply<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">performance<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channelId<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (!<\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\"> || <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">comedian<\/span><span style=\"color: #D4D4D4\"> !== <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">user<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;You can&#39;t end a set you never started!&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">duration<\/span><span style=\"color: #D4D4D4\"> = (<\/span><span style=\"color: #9CDCFE\">Date<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">now<\/span><span style=\"color: #D4D4D4\">() - <\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">startTime<\/span><span style=\"color: #D4D4D4\">) \/ <\/span><span style=\"color: #B5CEA8\">1000<\/span><span style=\"color: #D4D4D4\"> \/ <\/span><span style=\"color: #B5CEA8\">60<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">feedback<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">chatModel<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">invoke<\/span><span style=\"color: #D4D4D4\">([<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SystemMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">COMEDY_PROMPT<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">HumanMessage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`The comedian just finished their <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">duration<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">toFixed<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">1<\/span><span style=\"color: #D4D4D4\">)<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\"> minute set.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">            Jokes performed: <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">performance<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">jokes<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">join<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39; | &#39;<\/span><span style=\"color: #D4D4D4\">)<\/span><span style=\"color: #569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">            Provide a brutal but slightly constructive wrap-up of their performance.`<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">this<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">activePerformances<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">delete<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">channelId<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">editReply<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`\ud83c\udfad <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">feedback<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The <strong><code>endSet<\/code><\/strong> method concludes the performance by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Calculating the set duration<\/li>\n\n\n\n<li>Providing AI-generated feedback based on the full set<\/li>\n\n\n\n<li>Cleaning up the performance record<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Command_Registration\"><\/span>Command Registration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"registerCommands() {\n    return [\n        {\n            name: 'startset',\n            description: 'Start your comedy set',\n        },\n        {\n            name: 'joke',\n            description: 'Tell a joke during your set',\n            options: [{\n                name: 'joke',\n                type: 3,\n                description: 'Your joke\/bit',\n                required: true\n            }]\n        },\n        {\n            name: 'endset',\n            description: 'End your comedy set and get feedback',\n        }\n    ];\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #DCDCAA\">registerCommands<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;startset&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Start your comedy set&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;joke&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Tell a joke during your set&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">options:<\/span><span style=\"color: #D4D4D4\"> [{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;joke&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">type:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">3<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Your joke\/bit&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">required:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;endset&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">description:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;End your comedy set and get feedback&#39;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This method defines the slash commands that users can use to interact with our comedy bot in Discord.<\/p>\n\n\n\n<p>Each of these components works together to create a structured comedy club experience, where users can perform their sets, receive instant feedback, and get roasted by our AI host.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"22_Configuring_the_Discord_Bot\"><\/span>2.2 Configuring the Discord Bot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In <code>bot.js<\/code>, we set up the Discord client and integrated OpenAI:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const { Client, GatewayIntentBits } = require('discord.js');\nconst dotenv = require('dotenv');\nconst { ChatOpenAI } = require(&quot;@langchain\/openai&quot;);\nconst { HumanMessage, SystemMessage } = require(&quot;@langchain\/core\/messages&quot;);\nconst ComedyMicExtension = require('.\/comedy-mic');\n\ndotenv.config();\n\nconst client = new Client({\n    intents: [\n        GatewayIntentBits.Guilds,\n        GatewayIntentBits.GuildMessages,\n        GatewayIntentBits.MessageContent,\n    ],\n});\n\nconst comedyMic = new ComedyMicExtension(client, process.env.OPENAI_API_KEY);\n\n\/\/ Register commands and handle interactions as shown in bot.js\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">Client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;discord.js&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">dotenv<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;dotenv&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">ChatOpenAI<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;@langchain\/openai&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">HumanMessage<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SystemMessage<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;@langchain\/core\/messages&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">ComedyMicExtension<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;.\/comedy-mic&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">dotenv<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">config<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Client<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">intents:<\/span><span style=\"color: #D4D4D4\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Guilds<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">GuildMessages<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">MessageContent<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    ],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">comedyMic<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ComedyMicExtension<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">process<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">env<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">OPENAI_API_KEY<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Register commands and handle interactions as shown in bot.js<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_3_Developing_the_Web_Interface\"><\/span>Part 3: Developing the Web Interface<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"31_Implementing_the_Comedy_Club_Page\"><\/span>3.1 Implementing the Comedy Club Page<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In <code>page.tsx<\/code>, we create an interactive comedy club interface. You can always play around with the user interface, add as many designs, colors and animation to it.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"'use client'\nimport React, { useState } from 'react';\nimport { Mic, MessageCircle, Star, ArrowRight } from 'lucide-react';\n\nconst ComedyClubPage = () =&gt; {\n    const [currentStep, setCurrentStep] = useState('welcome');\n    const [isPerforming, setIsPerforming] = useState(false);\n    const [showJokeOptions, setShowJokeOptions] = useState(false);\n\n    \/\/ State and handlers implementation as shown in page.tsx\n\n    return (\n        \/\/ JSX implementation as shown in page.tsx\n    );\n};\n\nexport default ComedyClubPage;\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #CE9178\">&#39;use client&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C586C0\">import<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">React<\/span><span style=\"color: #D4D4D4\">, { <\/span><span style=\"color: #9CDCFE\">useState<\/span><span style=\"color: #D4D4D4\"> } <\/span><span style=\"color: #C586C0\">from<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;react&#39;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C586C0\">import<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #9CDCFE\">Mic<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">MessageCircle<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">Star<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ArrowRight<\/span><span style=\"color: #D4D4D4\"> } <\/span><span style=\"color: #C586C0\">from<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;lucide-react&#39;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ComedyClubPage<\/span><span style=\"color: #D4D4D4\"> = () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #4FC1FF\">currentStep<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">setCurrentStep<\/span><span style=\"color: #D4D4D4\">] = <\/span><span style=\"color: #DCDCAA\">useState<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;welcome&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #4FC1FF\">isPerforming<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">setIsPerforming<\/span><span style=\"color: #D4D4D4\">] = <\/span><span style=\"color: #DCDCAA\">useState<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #4FC1FF\">showJokeOptions<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">setShowJokeOptions<\/span><span style=\"color: #D4D4D4\">] = <\/span><span style=\"color: #DCDCAA\">useState<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">false<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">\/\/ State and handlers implementation as shown in page.tsx<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">\/\/ JSX implementation as shown in page.tsx<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C586C0\">export<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">default<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">ComedyClubPage<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"32_Styling_with_Tailwind_CSS\"><\/span>3.2 Styling with Tailwind CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In <code>globals.css<\/code>, we define our theme, and experiment with as many color combinations as you want before you decide on that final theme for your interface.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n    --background: #ffffff;\n    --foreground: #171717;\n}\n\n@media (prefers-color-scheme: dark) {\n    :root {\n        --background: #0a0a0a;\n        --foreground: #ededed;\n    }\n}\n\nbody {\n    color: var(--foreground);\n    background: var(--background);\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">@<\/span><span style=\"color: #9CDCFE\">tailwind<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">base<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">@<\/span><span style=\"color: #9CDCFE\">tailwind<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">@<\/span><span style=\"color: #9CDCFE\">tailwind<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">utilities<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #9CDCFE\">root<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    --<\/span><span style=\"color: #C8C8C8\">background<\/span><span style=\"color: #D4D4D4\">: #<\/span><span style=\"color: #9CDCFE\">ffffff<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    --<\/span><span style=\"color: #C8C8C8\">foreground<\/span><span style=\"color: #D4D4D4\">: #<\/span><span style=\"color: #B5CEA8\">171717<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">@<\/span><span style=\"color: #DCDCAA\">media<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">prefers<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">scheme<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">dark<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    :<\/span><span style=\"color: #9CDCFE\">root<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        --<\/span><span style=\"color: #C8C8C8\">background<\/span><span style=\"color: #D4D4D4\">: #0<\/span><span style=\"color: #9CDCFE\">a0a0a<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        --<\/span><span style=\"color: #C8C8C8\">foreground<\/span><span style=\"color: #D4D4D4\">: #<\/span><span style=\"color: #9CDCFE\">ededed<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">body<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">foreground<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C8C8C8\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\">(--<\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">font<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #C8C8C8\">family<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">Arial<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">Helvetica<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">sans<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">serif<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Part_4_Connecting_Everything\"><\/span>Part 4: Connecting Everything<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"41_Setting_Up_OAuth2_for_Discord\"><\/span>4.1 Setting Up OAuth2 for Discord<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the <a href=\"https:\/\/discord.com\/developers\/docs\/intro\" target=\"_blank\" rel=\"noopener\">Discord Developer Portal<\/a><\/li>\n\n\n\n<li>Create a new application<\/li>\n\n\n\n<li>Add bot permissions<\/li>\n\n\n\n<li>Generate OAuth2 URL with required scopes<\/li>\n\n\n\n<li>Replace the client ID in your frontend code<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const addBotToDiscord = () =&gt; {\n    window.open('<https:\/\/discord.com\/api\/oauth2\/authorize?client_id=YOUR_CLIENT_ID&amp;permissions=8&amp;scope=bot%20applications.commands&gt;', '_blank');\n};\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">addBotToDiscord<\/span><span style=\"color: #D4D4D4\"> = () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">window<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">open<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;&lt;https:\/\/discord.com\/api\/oauth2\/authorize?client_id=YOUR_CLIENT_ID&amp;permissions=8&amp;scope=bot%20applications.commands&gt;&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;_blank&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"42_Deploying_the_Bot\"><\/span>4.2 Deploying the Bot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>That was a lot of work, but don\u2019t worry all we have to do now is to deploy the bot on a hosting platform. We prefer Vercel, very straightforward to use. But before that don\u2019t forget to run it locally and test if everything works fine.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set up your hosting platform (e.g., Heroku, Vercel)<\/li>\n\n\n\n<li>Configure environment variables<\/li>\n\n\n\n<li>Deploy the Discord bot and frontend separately<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"# Deploy Discord bot\nnpm run deploy-bot\n\n# Deploy frontend\nnpm run deploy\n\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"># <\/span><span style=\"color: #9CDCFE\">Deploy<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">Discord<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">bot<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">run<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">deploy<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">bot<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"># <\/span><span style=\"color: #9CDCFE\">Deploy<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">frontend<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">run<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">deploy<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrap_Up\"><\/span>Wrap Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You now have a fully functional Savage Comedy Bot with both Discord integration and a web interface. I have only added a guided mock performance on the web interface as a Discord bot, is well suited in Discord but you can always have it on the website too. As of now, a user can perform these actions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add it to their Discord server<\/li>\n\n\n\n<li>Use slash commands for comedy interactions<\/li>\n\n\n\n<li>Get roasted by AI-powered responses<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Whats_Next\"><\/span>What\u2019s Next?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are tonnes of more features that you can add to the bot. I will make it easier for you with a few potential ideas which I wanted to implement but because we have quite a few more interesting templates I will experiment with those while you build on this.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add user authentication<\/li>\n\n\n\n<li>Implement performance history<\/li>\n\n\n\n<li>Add more interactive features like Performance feedback, set sequences for multiple comedians<\/li>\n\n\n\n<li>Enhance the AI responses with more context<\/li>\n\n\n\n<li>Add analytics for tracking usage<\/li>\n<\/ol>\n\n\n\n<p>Remember to maintain your API keys securely and monitor your OpenAI API usage to manage costs effectively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Did_we_forget_errors\"><\/span>Did we forget errors?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bugs are a common occurrence while you are coding, doesn\u2019t matter with AI or without AI. A lot of times it is the same set of errors that we all encounter. So in order to make it a bit easier for you (although I highly recommend debugging it on its own, and not using AI) I will list a few common issues and potential hints around its solution.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Discord commands not registering: Check your bot permissions<\/li>\n\n\n\n<li>OpenAI API errors: Verify your API key and usage limits<\/li>\n\n\n\n<li>Frontend not connecting: Check your OAuth2 configuration<\/li>\n\n\n\n<li>Deployment issues: Verify environment variables and build scripts<\/li>\n\n\n\n<li>Hydration Error(this was the most common one)- Check your client-side and server-side rendering components.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wow, that was a long read! But don\u2019t worry once you have built a few projects on your own, you would not need these blogs(that would be sad for us, but we would still want that for you.) Once you are done building this, submit your project to the attached form link on the template page, to get your project featured. Write to us if you are facing any issues, or have any suggestions. And do try our other templates and build on them. Don\u2019t forget to give us a <strong>STAR<\/strong> on <a href=\"https:\/\/github.com\/0xmetaschool\/savage-bot\" target=\"_blank\" rel=\"noopener\">GitHub<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frequently_Asked_Questions\"><\/span>Frequently Asked Questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1736419642463\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_can_you_build_using_these_AI_templates\"><\/span>What can you build using these AI templates?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Absolutely anything, just pick up a template that resonates with your project idea and you can build on top of it. For example: Savage Bot had witty replies, best for building a Comedy Set-related application. <\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1736419733064\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Are_these_AI_Templates_free_to_use\"><\/span>Are these AI Templates free to use?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, all these templates whether AI or Web3 are free to use, if you love them please don&#8217;t forget to give us a STAR \u2b50\ufe0f on Github<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":24,"featured_media":11772,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[344,342],"tags":[],"class_list":["post-11750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","category-software-development"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/11750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/comments?post=11750"}],"version-history":[{"count":2,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/11750\/revisions"}],"predecessor-version":[{"id":11775,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/11750\/revisions\/11775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/11772"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=11750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=11750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=11750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}