diff --git a/README.md b/README.md
index 93826e6..2a7234b 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,7 @@ Contributed by: [@f](https://github.com/f) &
 Frontend Developer, Full Stack Developer, iOS Developer etc.
 
 > I want you to act as an interviewer. I will be the candidate and you will ask
-> me the interview questions for the `position` position. I want you to only
+> me the interview questions for the ${Position:JavaScript Developer} position. I want you to only
 > reply as the interviewer. Do not write all the conversation at once. I want
 > you to only do the interview with me. Ask me the questions and wait for my
 > answers. Do not write explanations. Ask me the questions one by one like an
@@ -207,19 +207,16 @@ Contributed by: [@yetk1n](https://github.com/yetk1n)
 > must be able to process nonverbal information, such as the emotional state of
 > the speaker."
 
-## Act as 'Character' from 'Movie/Book/Anything'
+## Act as Character
 
 Contributed by: [@BRTZL](https://github.com/BRTZL)
 [@mattsq](https://github.com/mattsq)
 
-**Examples**: Character: Harry Potter, Series: Harry Potter Series, Character:
-Darth Vader, Series: Star Wars etc.
-
-> I want you to act like {character} from {series}. I want you to respond and
-> answer like {character} using the tone, manner and vocabulary {character}
-> would use. Do not write any explanations. Only answer like {character}. You
-> must know all of the knowledge of {character}. My first sentence is "Hi
-> {character}."
+> I want you to act like ${Character: Anakin Skywalker} from ${Series: Star Wars}. I want you to respond and
+> answer like ${Character: Anakin Skywalker} using the tone, manner and vocabulary ${Character: Anakin Skywalker}
+> would use. Do not write any explanations. Only answer like ${Character: Anakin Skywalker}. You
+> must know all of the knowledge of ${Character: Anakin Skywalker}. My first sentence is "Hi
+> ${Character: Anakin Skywalker}."
 
 ## Act as an Advertiser
 
@@ -2658,6 +2655,23 @@ Contributed by: [@awesomesolution](https://github.com/awesomesolution)
 > challenges to resolve complex issues and scaling the application with zero
 > issues and high performance of application in low or no network as well.
 
+
+## Act as Devops Engineer
+
+Contributed by: [@tscburak](https://github.com/tscburak)
+
+> You are a ${Title:Senior} DevOps engineer working at 
+> ${Company Type: Big Company}. Your role is to provide scalable, efficient, and 
+> automated solutions for software deployment, infrastructure management, and CI/CD 
+> pipelines. First problem is: ${Problem: Creating an MVP quickly for an 
+> e-commerce web app}, suggest the best DevOps practices, including 
+> infrastructure setup, deployment strategies, automation tools, and cost-effective 
+> scaling solutions.
+
+
+ 
+
+
 ## Contributors 😍
 
 Many thanks to these AI whisperers:
diff --git a/index.html b/index.html
index 30517f4..83efab2 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,49 @@
 <!DOCTYPE html>
 <html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>prompts.chat — awesome AI prompts</title>
+<!-- Begin Jekyll SEO tag v2.8.0 -->
+<title>Awesome ChatGPT Prompts | This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.</title>
+<meta name="generator" content="Jekyll v3.10.0" />
+<meta property="og:title" content="Awesome ChatGPT Prompts" />
+<meta property="og:locale" content="en_US" />
+<meta name="description" content="This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better." />
+<meta property="og:description" content="This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better." />
+<meta property="og:site_name" content="Awesome ChatGPT Prompts" />
+<meta property="og:type" content="website" />
+<meta name="twitter:card" content="summary" />
+<meta property="twitter:title" content="Awesome ChatGPT Prompts" />
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"WebSite","description":"This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.","headline":"Awesome ChatGPT Prompts","name":"Awesome ChatGPT Prompts","url":"/"}</script>
+<!-- End Jekyll SEO tag -->
+
+    <link rel="stylesheet" href="/assets/css/style.css?v=e5726360a8b85558a037d3fa9872de80f0f0e6e6">
+    <style>
+      :root {
+        --bg-color-light: #ffffff;
+        --bg-color-dark: #1a1a1a;
+        --text-color-light: #000000;
+        --text-color-dark: #ffffff;
+        --sidebar-width: 300px;
+        --accent-color: #10b981;
+        --accent-color-hover: #059669;
+      }
+
+      body {
+        background-color: var(--bg-color-light);
+        color: var(--text-color-light);
+        margin: 0;
+        padding: 0;
+      }
+
+      body.dark-mode {
+        background-color: var(--bg-color-dark);
+        color: var(--text-color-dark);
+      }
 
 <head>
   <meta charset="UTF-8">
@@ -1580,6 +1624,15 @@
             </svg>
             <span id="starCount">...</span>
           </a>
+          <a href="https://chromewebstore.google.com/detail/promptschat/eemdohkhbaifiocagjlhibfbhamlbeej" target="_blank" class="chrome-ext-link">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <circle cx="12" cy="12" r="4"></circle>
+              <line x1="21.17" y1="8" x2="12" y2="8"></line>
+              <line x1="3.95" y1="6.06" x2="8.54" y2="14"></line>
+              <line x1="10.88" y1="21.94" x2="15.46" y2="14"></line>
+            </svg>
+          </a>
           <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
             <svg class="mode-icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -4951,4 +5004,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/prompts.csv b/prompts.csv
index 98a4ea9..4b91d29 100644
--- a/prompts.csv
+++ b/prompts.csv
@@ -9,7 +9,7 @@ act,prompt,for_devs
 "Spoken English Teacher and Improver","I want you to act as a spoken English teacher and improver. I will speak to you in English and you will reply to me in English to practice my spoken English. I want you to keep your reply neat, limiting the reply to 100 words. I want you to strictly correct my grammar mistakes, typos, and factual errors. I want you to ask me a question in your reply. Now let's start practicing, you could ask me a question first. Remember, I want you to strictly correct my grammar mistakes, typos, and factual errors.",FALSE
 "Travel Guide","I want you to act as a travel guide. I will write you my location and you will suggest a place to visit near my location. In some cases, I will also give you the type of places I will visit. You will also suggest me places of similar type that are close to my first location. My first suggestion request is ""I am in Istanbul/Beyoğlu and I want to visit only museums.""",FALSE
 "Plagiarism Checker","I want you to act as a plagiarism checker. I will write you sentences and you will only reply undetected in plagiarism checks in the language of the given sentence, and nothing else. Do not write explanations on replies. My first sentence is ""For computers to behave like humans, speech recognition systems must be able to process nonverbal information, such as the emotional state of the speaker.""",FALSE
-"Character from Movie/Book/Anything","I want you to act like {character} from {series}. I want you to respond and answer like {character} using the tone, manner and vocabulary {character} would use. Do not write any explanations. Only answer like {character}. You must know all of the knowledge of {character}. My first sentence is ""Hi {character}.""",FALSE
+"Character","I want you to act like {character} from {series}. I want you to respond and answer like {character} using the tone, manner and vocabulary {character} would use. Do not write any explanations. Only answer like {character}. You must know all of the knowledge of {character}. My first sentence is ""Hi {character}.""",FALSE
 "Advertiser","I want you to act as an advertiser. You will create a campaign to promote a product or service of your choice. You will choose a target audience, develop key messages and slogans, select the media channels for promotion, and decide on any additional activities needed to reach your goals. My first suggestion request is ""I need help creating an advertising campaign for a new type of energy drink targeting young adults aged 18-30.""",FALSE
 "Storyteller","I want you to act as a storyteller. You will come up with entertaining stories that are engaging, imaginative and captivating for the audience. It can be fairy tales, educational stories or any other type of stories which has the potential to capture people's attention and imagination. Depending on the target audience, you may choose specific themes or topics for your storytelling session e.g., if it's children then you can talk about animals; If it's adults then history-based tales might engage them better etc. My first request is ""I need an interesting story on perseverance.""",FALSE
 "Football Commentator","I want you to act as a football commentator. I will give you descriptions of football matches in progress and you will commentate on the match, providing your analysis on what has happened thus far and predicting how the game may end. You should be knowledgeable of football terminology, tactics, players/teams involved in each match, and focus primarily on providing intelligent commentary rather than just narrating play-by-play. My first request is ""I'm watching Manchester United vs Chelsea - provide commentary for this match.""",FALSE
@@ -210,3 +210,4 @@ act,prompt,for_devs
 "Virtual Event Planner","I want you to act as a virtual event planner, responsible for organizing and executing online conferences, workshops, and meetings. Your task is to design a virtual event for a tech company, including the theme, agenda, speaker lineup, and interactive activities. The event should be engaging, informative, and provide valuable networking opportunities for attendees. Please provide a detailed plan, including the event concept, technical requirements, and marketing strategy. Ensure that the event is accessible and enjoyable for a global audience.",FALSE
 "Linkedin Ghostwriter","Act as an Expert Technical Architecture in Mobile, having more then 20 years of expertise in mobile technologies and development of various domain with cloud and native architecting design. Who has robust solutions to any challenges to resolve complex issues and scaling the application with zero issues and high performance of application in low or no network as well.",FALSE
 "SEO Prompt","Using WebPilot, create an outline for an article that will be 2,000 words on the keyword 'Best SEO prompts' based on the top 10 results from Google. Include every relevant heading possible. Keep the keyword density of the headings high. For each section of the outline, include the word count. Include FAQs section in the outline too, based on people also ask section from Google for the keyword. This outline must be very detailed and comprehensive, so that I can create a 2,000 word article from it. Generate a long list of LSI and NLP keywords related to my keyword. Also include any other words related to the keyword. Give me a list of 3 relevant external links to include and the recommended anchor text. Make sure they're not competing articles. Split the outline into part 1 and part 2.",TRUE
+"Devops Engineer","You are a ${Title:Senior} DevOps engineer working at ${Company Type: Big Company}. Your role is to provide scalable, efficient, and automated solutions for software deployment, infrastructure management, and CI/CD pipelines. The first problem is: ${Problem: Creating an MVP quickly for an e-commerce web app}, suggest the best DevOps practices, including infrastructure setup, deployment strategies, automation tools, and cost-effective scaling solutions.",TRUE
\ No newline at end of file
diff --git a/script.js b/script.js
index 4b5fe19..8564d83 100644
--- a/script.js
+++ b/script.js
@@ -34,6 +34,94 @@ function updateHeaderHeight() {
 
 window.addEventListener('load', updateHeaderHeight);
 window.addEventListener('resize', updateHeaderHeight);
+// Add these new functions at the top
+function extractVariables(text) {
+  const regex = /\${([^}]+)}/g;
+  const variables = [];
+  let match;
+
+  while ((match = regex.exec(text)) !== null) {
+    const [variable, defaultValue] = match[1].split(":").map((s) => s.trim());
+    variables.push({ name: variable, default: defaultValue || "" });
+  }
+
+  return [...new Set(variables.map((v) => JSON.stringify(v)))].map((v) =>
+    JSON.parse(v)
+  ); // Remove duplicates
+}
+
+function createVariableInputs(variables, container) {
+  const form = document.createElement("div");
+  form.className = "variable-form";
+
+  variables.forEach((variable) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "variable-input-wrapper";
+
+    const label = document.createElement("label");
+    label.textContent = variable.name;
+    label.style.fontWeight = "600";
+
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "variable-input";
+    input.placeholder = variable.default || `Enter ${variable.name}`;
+    input.dataset.variable = variable.name;
+    input.dataset.default = variable.default || "";
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(input);
+    form.appendChild(wrapper);
+  });
+
+  container.appendChild(form);
+  return form;
+}
+
+// Function to update the prompt preview with user input or default values
+function updatePromptPreview(promptText, form) {
+  const variables = extractVariables(promptText);
+
+  if (variables.length === 0) {
+    return promptText; // Return original text if no variables found
+  }
+
+  let previewText = promptText;
+  // Replace variables with their default values without editting (for prompt cards, copy buttons, chat)
+  if (!form) {
+    variables.forEach(variable => {
+      const pattern = new RegExp(`\\$\{${variable.name}[^}]*\}`, 'g');
+      const replacement = variable.default || `<b>${variable.name}</b>`;
+      previewText = previewText.replace(pattern, replacement);
+    });
+  }
+  // Replace variables according to the user inputs.
+  else {
+    const inputs = form.querySelectorAll(".variable-input");
+
+    inputs.forEach((input) => {
+      const value = input.value.trim();
+      const variable = input.dataset.variable;
+      const defaultValue = input.dataset.default;
+    const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
+      let replacement;
+      if (value) {
+        // User entered value
+        replacement = value;
+      } else if (defaultValue) {
+        // Show default value with highlight
+        replacement = defaultValue;
+      } else {
+        // No value or default, show variable name
+        replacement = variable;
+      }
+      replacement = `<b>${replacement}</b>`;
+
+      previewText = previewText.replace(pattern, replacement);
+    });
+  }
+  return previewText;
+}
 
 // Initialize everything after DOM loads
 document.addEventListener("DOMContentLoaded", () => {
@@ -169,11 +257,12 @@ async function initializeSearch() {
       const searchTerm = e.target.value.toLowerCase();
 
       const filteredPrompts = prompts.filter((prompt) => {
-        const matchesSearch = prompt.act.toLowerCase().includes(searchTerm) ||
+        const matchesSearch =
+          prompt.act.toLowerCase().includes(searchTerm) ||
           prompt.prompt.toLowerCase().includes(searchTerm);
 
         return isDevMode
-          ? (matchesSearch && prompt.for_devs === true)
+          ? matchesSearch && prompt.for_devs === true
           : matchesSearch;
       });
 
@@ -207,29 +296,32 @@ function updatePromptCount(filteredCount, totalCount) {
 
 function parseCSV(csv) {
   const lines = csv.split("\n");
-  const headers = lines[0].split(",").map((header) =>
-    header.replace(/"/g, "").trim()
-  );
+  const headers = lines[0]
+    .split(",")
+    .map((header) => header.replace(/"/g, "").trim());
 
-  return lines.slice(1).map((line) => {
-    const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
-    const entry = {};
+  return lines
+    .slice(1)
+    .map((line) => {
+      const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
+      const entry = {};
 
-    headers.forEach((header, index) => {
-      let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
-      // Remove backticks from the act/title
-      if (header === "act") {
-        value = value.replace(/`/g, "");
-      }
-      // Convert 'TRUE'/'FALSE' strings to boolean for for_devs
-      if (header === "for_devs") {
-        value = value.toUpperCase() === "TRUE";
-      }
-      entry[header] = value;
-    });
+      headers.forEach((header, index) => {
+        let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
+        // Remove backticks from the act/title
+        if (header === "act") {
+          value = value.replace(/`/g, "");
+        }
+        // Convert 'TRUE'/'FALSE' strings to boolean for for_devs
+        if (header === "for_devs") {
+          value = value.toUpperCase() === "TRUE";
+        }
+        entry[header] = value;
+      });
 
-    return entry;
-  }).filter((entry) => entry.act && entry.prompt);
+      return entry;
+    })
+    .filter((entry) => entry.act && entry.prompt);
 }
 
 function displaySearchResults(results) {
@@ -273,8 +365,9 @@ function displaySearchResults(results) {
       // Find the prompt card with matching title
       const cards = document.querySelectorAll(".prompt-card");
       const targetCard = Array.from(cards).find((card) => {
-        const cardTitle = card.querySelector(".prompt-title").textContent
-          .replace(/\s+/g, " ") // Normalize whitespace
+        const cardTitle = card
+          .querySelector(".prompt-title")
+          .textContent.replace(/\s+/g, " ") // Normalize whitespace
           .replace(/[\n\r]/g, "") // Remove newlines
           .trim();
 
@@ -283,8 +376,10 @@ function displaySearchResults(results) {
           .replace(/[\n\r]/g, "") // Remove newlines
           .trim();
 
-        return cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
-          searchTitle.toLowerCase().includes(cardTitle.toLowerCase());
+        return (
+          cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
+          searchTitle.toLowerCase().includes(cardTitle.toLowerCase())
+        );
       });
 
       if (window.innerWidth <= 768) {
@@ -309,8 +404,8 @@ function displaySearchResults(results) {
         if (isMobile) {
           // On mobile, scroll the window
           const cardRect = targetCard.getBoundingClientRect();
-          const scrollTop = window.pageYOffset + cardRect.top - headerHeight -
-            20;
+          const scrollTop =
+            window.pageYOffset + cardRect.top - headerHeight - 20;
 
           window.scrollTo({
             top: scrollTop,
@@ -320,8 +415,8 @@ function displaySearchResults(results) {
           // On desktop, scroll the main-content container
           const mainContent = document.querySelector("html");
           const cardRect = targetCard.getBoundingClientRect();
-          const scrollTop = mainContent.scrollTop + cardRect.top -
-            headerHeight - 20;
+          const scrollTop =
+            mainContent.scrollTop + cardRect.top - headerHeight - 20;
 
           mainContent.scrollTo({
             top: scrollTop,
@@ -362,12 +457,13 @@ function filterPrompts() {
     .then((csvText) => {
       const prompts = parseCSV(csvText);
       const filteredPrompts = prompts.filter((prompt) => {
-        const matchesSearch = !searchTerm ||
+        const matchesSearch =
+          !searchTerm ||
           prompt.act.toLowerCase().includes(searchTerm) ||
           prompt.prompt.toLowerCase().includes(searchTerm);
 
         return isDevMode
-          ? (matchesSearch && prompt.for_devs === true)
+          ? matchesSearch && prompt.for_devs === true
           : matchesSearch;
       });
 
@@ -376,7 +472,7 @@ function filterPrompts() {
         filteredPrompts.length,
         isDevMode
           ? prompts.filter((p) => p.for_devs === true).length
-          : prompts.length,
+          : prompts.length
       );
       displaySearchResults(filteredPrompts);
 
@@ -384,23 +480,29 @@ function filterPrompts() {
       const promptsGrid = document.querySelector(".prompts-grid");
       if (promptsGrid) {
         const cards = promptsGrid.querySelectorAll(
-          ".prompt-card:not(.contribute-card)",
+          ".prompt-card:not(.contribute-card)"
         );
         cards.forEach((card) => {
           const title = card.querySelector(".prompt-title").textContent.trim();
           const matchingPrompt = prompts.find((p) => {
-            const pTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+            const pTitle = p.act
+              .replace(/\s+/g, " ")
+              .replace(/[\n\r]/g, "")
               .trim();
-            const cardTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+            const cardTitle = title
+              .replace(/\s+/g, " ")
+              .replace(/[\n\r]/g, "")
               .trim();
-            return pTitle.toLowerCase() === cardTitle.toLowerCase() ||
+            return (
+              pTitle.toLowerCase() === cardTitle.toLowerCase() ||
               pTitle.toLowerCase().includes(cardTitle.toLowerCase()) ||
-              cardTitle.toLowerCase().includes(pTitle.toLowerCase());
+              cardTitle.toLowerCase().includes(pTitle.toLowerCase())
+            );
           });
 
           // Show card if not in dev mode or if it's a dev prompt in dev mode
           card.style.display =
-            (!isDevMode || (matchingPrompt && matchingPrompt.for_devs === true))
+            !isDevMode || (matchingPrompt && matchingPrompt.for_devs === true)
               ? ""
               : "none";
         });
@@ -443,23 +545,29 @@ function createPromptCards() {
       const isDevMode = document.getElementById("devModeToggle").checked;
 
       const promptElements = document.querySelectorAll(
-        "h2[id^=act] + p + blockquote",
+        "h2[id^=act] + p + blockquote"
       );
 
       promptElements.forEach((blockquote) => {
-        const title = blockquote.previousElementSibling.previousElementSibling
-          .textContent.trim();
+        const title =
+          blockquote.previousElementSibling.previousElementSibling.textContent.trim();
         const content = blockquote.textContent.trim();
 
         // Find matching prompt in CSV
         const matchingPrompt = prompts.find((p) => {
-          const csvTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+          const csvTitle = p.act
+            .replace(/\s+/g, " ")
+            .replace(/[\n\r]/g, "")
             .trim();
-          const elementTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+          const elementTitle = title
+            .replace(/\s+/g, " ")
+            .replace(/[\n\r]/g, "")
             .trim();
-          return csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
+          return (
+            csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
             csvTitle.toLowerCase().includes(elementTitle.toLowerCase()) ||
-            elementTitle.toLowerCase().includes(csvTitle.toLowerCase());
+            elementTitle.toLowerCase().includes(csvTitle.toLowerCase())
+          );
         });
 
         // Extract contributor from the paragraph element
@@ -504,8 +612,9 @@ function createPromptCards() {
         <div class="prompt-title">
             ${title}
             <div class="action-buttons">
-            <button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(content.trim())
-          }')">
+            <button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(
+              updatePromptPreview(content.trim())
+            )}')">
                 <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                 </svg>
@@ -514,8 +623,9 @@ function createPromptCards() {
                 <line x1="12" y1="19" x2="20" y2="19"></line>
                 </svg>
             </button>
-            <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(content.trim())
-          }')">
+            <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(
+              updatePromptPreview(content.trim())
+            )}')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                 <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
@@ -523,7 +633,7 @@ function createPromptCards() {
             </button>
             </div>
         </div>
-        <p class="prompt-content">${content}</p>
+        <p class="prompt-content">${updatePromptPreview(content)}</p>
         <a href="https://github.com/${contributor}" class="contributor-badge" target="_blank" rel="noopener">@${contributor}</a>
         `;
 
@@ -541,7 +651,7 @@ function createPromptCards() {
         copyButton.addEventListener("click", async (e) => {
           e.stopPropagation();
           try {
-            await navigator.clipboard.writeText(content);
+            await navigator.clipboard.writeText(updatePromptPreview(content));
             copyButton.innerHTML = `
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="20 6 9 17 4 12"></polyline>
@@ -641,6 +751,7 @@ function createModal() {
   initializeModalListeners();
 }
 
+// Modify the existing showModal function
 function showModal(title, content) {
   let modalOverlay = document.getElementById("modalOverlay");
   if (!modalOverlay) {
@@ -650,22 +761,53 @@ function showModal(title, content) {
 
   const modalTitle = modalOverlay.querySelector(".modal-title");
   const modalContent = modalOverlay.querySelector(".modal-content");
+
+  // Extract variables from content
+  const variables = extractVariables(content);
+
+  // Create variable inputs container if variables exist
+  if (variables.length > 0) {
+    const variableContainer = document.createElement("div");
+    variableContainer.className = "variable-container";
+
+    const form = createVariableInputs(variables, variableContainer);
+
+    // Initialize the modal content with updated prompt preview if variables exist
+    const previewText = updatePromptPreview(content, form);
+    modalContent.innerHTML = previewText;
+
+    // Add event listeners for real-time updates
+    form.addEventListener("input", () => {
+      const previewText = updatePromptPreview(content, form);
+      modalContent.innerHTML = previewText;
+
+      // Update chat button data
+      const modalChatButton = modalOverlay.querySelector(".modal-chat-button");
+      if (modalChatButton) {
+        modalChatButton.dataset.content = previewText;
+      }
+    });
+
+    // Insert variable container before content
+    modalContent.parentElement.insertBefore(variableContainer, modalContent);
+  } else {
+    modalTitle.textContent = title;
+    modalContent.textContent = content;
+  }
+
   const modalCopyButton = modalOverlay.querySelector(".modal-copy-button");
   const modalContributor = modalOverlay.querySelector(".modal-contributor");
   const modalChatButton = modalOverlay.querySelector(".modal-chat-button");
 
   if (!modalTitle || !modalContent) return;
 
-  modalTitle.textContent = title;
-  modalContent.textContent = content;
-
   // Update chat button text with platform name and handle visibility
   const platform = document.querySelector(".platform-tag.active");
   const isDevMode = document.getElementById("devModeToggle").checked;
 
   if (platform) {
     const shouldHideChat = ["gemini", "llama"].includes(
-      platform.dataset.platform,
+      platform.dataset.platform
     );
     modalChatButton.style.display = shouldHideChat ? "none" : "flex";
 
@@ -679,11 +821,13 @@ function showModal(title, content) {
       }
 
       modalChatButton.innerHTML = `
-        <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? "none" : "block"
+        <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${
+          isDevMode ? "none" : "block"
         }">
         <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
         </svg>
-        <svg class="terminal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? "block" : "none"
+        <svg class="terminal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${
+          isDevMode ? "block" : "none"
         }">
         <polyline points="4 17 10 11 4 5"></polyline>
         <line x1="12" y1="19" x2="20" y2="19"></line>
@@ -694,27 +838,26 @@ function showModal(title, content) {
   }
 
   // Store content for chat button
-  modalChatButton.dataset.content = content;
+  modalChatButton.dataset.content = modalContent.textContent;
 
   // Find the contributor for this prompt
   const promptCard = Array.from(document.querySelectorAll(".prompt-card")).find(
     (card) =>
-      card.querySelector(".prompt-title").textContent.trim() === title.trim(),
+      card.querySelector(".prompt-title").textContent.trim() === title.trim()
   );
 
   if (promptCard) {
     const contributorBadge = promptCard.querySelector(".contributor-badge");
     if (contributorBadge) {
       modalContributor.href = contributorBadge.href;
-      modalContributor.textContent =
-        `Contributed by ${contributorBadge.textContent}`;
+      modalContributor.textContent = `Contributed by ${contributorBadge.textContent}`;
     }
   }
 
   // Add copy functionality
   modalCopyButton.addEventListener("click", async () => {
     try {
-      await navigator.clipboard.writeText(content);
+      await navigator.clipboard.writeText(modalContent.textContent);
       modalCopyButton.innerHTML = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <polyline points="20 6 9 17 4 12"></polyline>
@@ -748,22 +891,22 @@ function hideModal() {
   modalOverlay.remove();
 }
 
-let selectedPlatform = localStorage.getItem("selected-platform") ||
-  "github-copilot"; // Get from localStorage or default to github
+let selectedPlatform =
+  localStorage.getItem("selected-platform") || "github-copilot"; // Get from localStorage or default to github
 
 // Platform toggle functionality
 document.querySelectorAll(".platform-tag").forEach((button) => {
   button.addEventListener("click", () => {
-    document.querySelectorAll(".platform-tag").forEach((btn) =>
-      btn.classList.remove("active")
-    );
+    document
+      .querySelectorAll(".platform-tag")
+      .forEach((btn) => btn.classList.remove("active"));
     button.classList.add("active");
     selectedPlatform = button.dataset.platform;
     localStorage.setItem("selected-platform", selectedPlatform);
 
     // Hide/show chat buttons based on platform
     const chatButtons = document.querySelectorAll(
-      ".chat-button, .modal-chat-button",
+      ".chat-button, .modal-chat-button"
     );
     const shouldHideChat = ["gemini", "llama"].includes(selectedPlatform);
     chatButtons.forEach((btn) => {
@@ -819,15 +962,39 @@ function openInChat(button, encodedPrompt) {
 
 // Existing copy function
 async function copyPrompt(button, encodedPrompt) {
-  const promptText = decodeURIComponent(encodedPrompt);
+  let promptText = decodeURIComponent(encodedPrompt);
+
+  // If there's a modal open, use the current state of variables
+  const modalContent = document.querySelector(".modal-content");
+  if (modalContent) {
+    // Get all variable inputs
+    const form = document.querySelector(".variable-form");
+    if (form) {
+      const inputs = form.querySelectorAll(".variable-input");
+      inputs.forEach((input) => {
+        const value = input.value.trim();
+        const variable = input.dataset.variable;
+        const defaultValue = input.dataset.default;
+        const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, "g");
+
+        // Use value or default value
+        const replacement = value || defaultValue || variable;
+        promptText = promptText.replace(pattern, replacement);
+      });
+    }
+  }
+
   try {
-    await navigator.clipboard.writeText(promptText);
+    await navigator.clipboard.writeText(updatePromptPreview(promptText));
     const originalHTML = button.innerHTML;
-    button.innerHTML =
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17 4 12"/></svg>';
+    button.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    `;
     setTimeout(() => {
       button.innerHTML = originalHTML;
-    }, 1000);
+    }, 2000);
   } catch (err) {
     console.error("Failed to copy text: ", err);
   }
@@ -869,7 +1036,7 @@ function hideCopilotSuggestion(switchToCopilot) {
 
   if (switchToCopilot) {
     const copilotButton = document.querySelector(
-      '[data-platform="github-copilot"]',
+      '[data-platform="github-copilot"]'
     );
     if (copilotButton) {
       copilotButton.click();
@@ -887,14 +1054,14 @@ function hideCopilotSuggestion(switchToCopilot) {
 
 // Function to update chat button icons based on dev mode
 function updateChatButtonIcons(isDevMode) {
-  document.querySelectorAll(".chat-button, .modal-chat-button").forEach(
-    (button) => {
+  document
+    .querySelectorAll(".chat-button, .modal-chat-button")
+    .forEach((button) => {
       const chatIcon = button.querySelector(".chat-icon");
       const terminalIcon = button.querySelector(".terminal-icon");
       if (chatIcon && terminalIcon) {
         chatIcon.style.display = isDevMode ? "none" : "block";
         terminalIcon.style.display = isDevMode ? "block" : "none";
       }
-    },
-  );
+    });
 }
