diff --git a/package.json b/package.json
index 971cc4e..4686a60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/AIModal.vue b/src/components/AIModal.vue
new file mode 100644
index 0000000..9b71500
--- /dev/null
+++ b/src/components/AIModal.vue
@@ -0,0 +1,111 @@
+<template>
+  <MagicoModal v-model="modal" title="Generuj AI">
+    <div class="p-1">
+      <h5>O czym chcesz napisać?</h5>
+      <textarea
+        class="form-control mb-3"
+        rows="5"
+        v-model="text"
+        placeholder="Napisz krótki opis, aby AI mogło wygenerować treść."
+      ></textarea>
+      <div class="form-group">
+        <label>Ilość znaków</label>
+        <select v-model="count" class="form-select">
+          <option value="500">500</option>
+          <option value="1000">1000</option>
+          <option value="2000">2000</option>
+        </select>
+      </div>
+      <div class="text-center mt-3">
+        <button :disabled="loader" @click="generate" class="btn btn-primary">
+          <span class="spinner-border spinner-border-sm me-2" v-if="loader"></span>
+          Generuj
+        </button>
+      </div>
+    </div>
+  </MagicoModal>
+</template>
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+const modal = ref(true)
+import axios from 'axios';
+import MagicoModal from './MagicoModal.vue'
+// import axios from '@/api/sync-axios'
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  },
+  modelValue: {
+    type: Object,
+    default: true
+  },
+  lang: {
+    type: String
+  },
+  callback: {
+    type: Function,
+    default: () => {}
+  }
+})
+const text = ref('')
+const offer = ref({})
+const loader = ref(false)
+onMounted(() => {
+  offer.value = props.modelValue
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    offer.value = newValue
+  },
+  { immediate: true }
+)
+const count = ref(500)
+const emit = defineEmits(['offerGenerated', 'update:modelValue'])
+function generate() {
+  const prompt = `Twoim zadaniem jest stworzenie opisu.
+Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count.value} znaków.
+Odpowiedź wygeneruj w języku określanym przez kod kraju: pl.
+Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
+{
+  "content": ""
+}`
+  const query = `${text.value}`
+  loader.value = true
+  axios
+    .post(
+      'https://ai.magico.pro/api/v1/message',
+      { prompt, query },
+      {
+        headers: {
+          Authorization: 'Bearer ' + localStorage.getItem('access_token')
+        }
+      }
+    )
+    .then((response) => {
+      loader.value = false
+      modal.value = false // Close the modal after generation
+      // Handle the response, e.g., display the generated content
+      const jsonText = response.data.data.choices[0].message.content
+      const jsonData = JSON.parse(jsonText)
+      console.log('Generated Offer Data:', jsonData)
+      emit('update:modelValue', offer.value)
+      props.callback(jsonData)
+      // Assuming you want to do something with the generated data
+      // modal.value = false; // Close the modal after generation
+    })
+    .catch((error) => {
+      console.error('Błąd podczas generowania oferty:', error)
+      alert('Wystąpił błąd podczas generowania oferty.')
+    })
+}
+
+function setFeatureValue(featureName, value) {
+  const feature = offer.value.features.find((f) => f.feature_name === featureName)
+  if (feature) {
+    feature.feature_value = value
+  }
+}
+</script>
diff --git a/src/components/plugin/SectionTextarea.vue b/src/components/plugin/SectionTextarea.vue
index ee73d73..d40c1e3 100644
--- a/src/components/plugin/SectionTextarea.vue
+++ b/src/components/plugin/SectionTextarea.vue
@@ -90,9 +90,7 @@ export default {
       text: '',
       name: 'core_section_textarea',
       vtinymce: Object.assign(tinymceConfig, {
-        setup: function (e) {
-          console.log(e)
-        },
+     
         file_picker_callback: (callback) => {
           if (this.$filechooser) {
             this.$filechooser.open({
diff --git a/src/components/tinymce/ai.js b/src/components/tinymce/ai.js
new file mode 100644
index 0000000..c44d3b0
--- /dev/null
+++ b/src/components/tinymce/ai.js
@@ -0,0 +1,54 @@
+export function addAI(editor) {
+  editor.ui.registry.addButton('ai_button', {
+    text: 'Wygeneruj treść AI',
+    onAction: async function () {
+      open({
+        callback: (data) => {
+          editor.setContent(data.content || '<p>Brak treści</p>')
+        }
+      })
+
+      //       const count = 1000
+      //       const lang = 'pl'
+      //       const prompt = `Twoim zadaniem jest stworzenie nowego wpisu na stronę www na podstawie dostarczonej treści strony.
+      // Do "content" wstaw tekst w formacie HTML, jako akapity dla edytora WYSIWYG na podstawie dostarczonej treści na maksymalnie ${count} znaków.
+      // Metatagi wygeneruj na podstawie wygenerowanej przez ciebie treści.
+      // Odpowiedź wygeneruj w języku określanym przez kod kraju: "${lang}".
+      // Wynik zwróć jako czysty JSON bez dodatkowego formatowania, bez używania \`\`\`json i \`\`\`, bez używania \`\`\`html i \`\`\`:
+      // {
+      // "title": "",
+      // "page_title": "",
+      // "meta_description": "",
+      // "meta_keywords": "",
+      // "og_title": "",
+      // "og_description": "",
+      // "content": ""
+      // }`
+
+      //       // Tu możesz wysłać zapytanie do swojego endpointa lub OpenAI
+      //       const response = await fetch('/api/generate', {
+      //         method: 'POST',
+      //         headers: { 'Content-Type': 'application/json' },
+      //         body: JSON.stringify({ prompt })
+      //       })
+
+      //       const data = await response.json()
+      //       editor.setContent(data.content || '<p>Brak treści</p>')
+    }
+  })
+}
+
+import { createApp, h } from 'vue'
+import AIModal from '../AIModal.vue'
+
+export function open(props = {}) {
+  const app = createApp({
+    render: () => h(AIModal, props)
+  })
+
+  const mountNode = document.createElement('div')
+  document.body.appendChild(mountNode)
+  app.mount(mountNode)
+
+  return app
+}
diff --git a/src/components/tinymce/config.js b/src/components/tinymce/config.js
index f4814fd..d5c7ad6 100644
--- a/src/components/tinymce/config.js
+++ b/src/components/tinymce/config.js
@@ -1,118 +1,141 @@
+import { addAI } from './ai'
 export default {
-    autoresize_max_height: window.innerHeight - window.innerHeight / 4,
-    width: '100%',
-    selector: "textarea.wysiwyg",
-    language: "pl",
-    language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
-    forced_root_block: "p",
-    entity_encoding: 'named',
-    entities: '160,nbsp,38,amp,60,lt,62,gt',
-    valid_elements: '*[*]',
-    document_base_url: window.location,
-    relative_urls: false,
-    browser_spellcheck: true,
-    autoresize_bottom_margin: 10,
-    autoresize_min_height: 90,
-    image_caption: true,
-    image_description: true,
-    image_title: true,
-    promotion: false,
-    visualblocks_default_state: true,
-    visualchars_default_state: false,
-    formats: {
-        mainparagraph: {
-            inline: 'span',
-            styles: {
-                fontSize: '18px'
-            },
-            classes: 'main_paragraph'
-        },
-        firstlink: {
-            inline: 'span',
-            styles: {
-                fontSize: '16px'
-            },
-            classes: 'default_button_span black'
-        },
-        secondlink: {
-            inline: 'span',
-            styles: {
-                fontSize: '16px'
-            },
-            classes: 'default_button_span'
-        }
+  autoresize_max_height: window.innerHeight - window.innerHeight / 4,
+  width: '100%',
+  selector: 'textarea.wysiwyg',
+  language: 'pl',
+  language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
+  forced_root_block: 'p',
+  entity_encoding: 'named',
+  entities: '160,nbsp,38,amp,60,lt,62,gt',
+  valid_elements: '*[*]',
+  document_base_url: window.location,
+  relative_urls: false,
+  browser_spellcheck: true,
+  autoresize_bottom_margin: 10,
+  autoresize_min_height: 90,
+  image_caption: true,
+  image_description: true,
+  image_title: true,
+  promotion: false,
+  visualblocks_default_state: true,
+  visualchars_default_state: false,
+  setup(editor) {
+    addAI(editor)
+  },
+  formats: {
+    mainparagraph: {
+      inline: 'span',
+      styles: {
+        fontSize: '18px'
+      },
+      classes: 'main_paragraph'
     },
-    style_formats: [{
-        title: 'Headers',
-        items: [{
-            title: 'h1',
-            block: 'h1'
-        }, {
-            title: 'h2',
-            block: 'h2'
-        }, {
-            title: 'h3',
-            block: 'h3'
-        }, {
-            title: 'h4',
-            block: 'h4'
-        }, {
-            title: 'h5',
-            block: 'h5'
-        }, {
-            title: 'h6',
-            block: 'h6'
-        }]
-    }, {
-        title: 'Blocks',
-        items: [{
-            title: 'Główny akapit',
-            format: 'mainparagraph'
-        }, {
-            title: 'LinkURL - 1',
-            format: 'firstlink'
-        }, {
-            title: 'LinkURL - 2',
-            format: 'secondlink'
-        }, {
-            title: 'p',
-            block: 'p'
-        }, {
-            title: 'div',
-            block: 'div'
-        }, {
-            title: 'pre',
-            block: 'pre'
-        }]
-    }, {
-        title: 'Containers',
-        items: [{
-            title: 'section',
-            block: 'section',
-            wrapper: true,
-            merge_siblings: false
+    firstlink: {
+      inline: 'span',
+      styles: {
+        fontSize: '16px'
+      },
+      classes: 'default_button_span black'
+    },
+    secondlink: {
+      inline: 'span',
+      styles: {
+        fontSize: '16px'
+      },
+      classes: 'default_button_span'
+    }
+  },
+  style_formats: [
+    {
+      title: 'Headers',
+      items: [
+        {
+          title: 'h1',
+          block: 'h1'
+        },
+        {
+          title: 'h2',
+          block: 'h2'
+        },
+        {
+          title: 'h3',
+          block: 'h3'
+        },
+        {
+          title: 'h4',
+          block: 'h4'
+        },
+        {
+          title: 'h5',
+          block: 'h5'
+        },
+        {
+          title: 'h6',
+          block: 'h6'
+        }
+      ]
+    },
+    {
+      title: 'Blocks',
+      items: [
+        {
+          title: 'Główny akapit',
+          format: 'mainparagraph'
+        },
+        {
+          title: 'LinkURL - 1',
+          format: 'firstlink'
+        },
+        {
+          title: 'LinkURL - 2',
+          format: 'secondlink'
+        },
+        {
+          title: 'p',
+          block: 'p'
+        },
+        {
+          title: 'div',
+          block: 'div'
+        },
+        {
+          title: 'pre',
+          block: 'pre'
+        }
+      ]
+    },
+    {
+      title: 'Containers',
+      items: [
+        {
+          title: 'section',
+          block: 'section',
+          wrapper: true,
+          merge_siblings: false
         },
         //{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
         {
-            title: 'blockquote',
-            block: 'blockquote',
-            wrapper: true
-        },
-            //{ title: 'hgroup', block: 'hgroup', wrapper: true },
-            //{ title: 'aside', block: 'aside', wrapper: true },
-            //{ title: 'figure', block: 'figure', wrapper: true }
-        ]
-    }],
-    paste_word_valid_elements: "table,tr,td,th,b,link,strong,i,em,h1,h2, strong",
-    valid_styles: {
-        '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius',
-    },
-    plugins: ['autoresize','link','image','media','lists'],
-    removed_menuitems: 'newdocument',
-    toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
-    toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link image | media | forecolor backcolor',
-    toolbar2: '',
-    menubar: true,
-    
-    
-}
\ No newline at end of file
+          title: 'blockquote',
+          block: 'blockquote',
+          wrapper: true
+        }
+        //{ title: 'hgroup', block: 'hgroup', wrapper: true },
+        //{ title: 'aside', block: 'aside', wrapper: true },
+        //{ title: 'figure', block: 'figure', wrapper: true }
+      ]
+    }
+  ],
+  paste_word_valid_elements: 'table,tr,td,th,b,link,strong,i,em,h1,h2, strong',
+  valid_styles: {
+    '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius'
+  },
+  plugins: ['autoresize', 'link', 'image', 'media', 'lists'],
+  removed_menuitems: 'newdocument',
+  toolbarxx:
+    'undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor | ai_button',
+  toolbar1:
+    'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link image | media | forecolor backcolor ai_button',
+  toolbar2: '',
+  menubar: true
+}