diff --git a/README.md b/README.md
index 456acb9..4ccb6d1 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,9 @@ go to http://localhost:3000
 
 To have a consistent code style and quality, we use Eslint in combination with prettier.
 
+Node.js version known to work well as of 2024-12: v20.14.0
+NPM version known to work well as of 2024-12: v10.7.0
+
 ### Selecting backend 
 
 You can modify which backend you want to connect to by modifying the `package.json` file. E.g. to point to a remote backend:
diff --git a/package-lock.json b/package-lock.json
index 5fbdf20..3a39a8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,13 @@
       "name": "more-studymanager-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@types/dompurify": "^3.2.0",
         "axios": "1.7.2",
         "chart.js": "^4.4.3",
         "cron-validate": "1.4.5",
+        "dompurify": "^3.2.3",
         "keycloak-js": "25.0.1",
+        "node": "^20.13.1",
         "normalize.css": "8.0.1",
         "pg": "8.12.0",
         "pinia": "2.1.7",
@@ -2581,6 +2584,15 @@
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz",
+      "integrity": "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==",
+      "deprecated": "This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "dompurify": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
@@ -2641,6 +2653,12 @@
       "integrity": "sha512-PR+BOIrI+rxteHwFvkfIOty+PDJwTG4ute3alxSSXpF/xKpryO1room265m46Auyae0VwqUYs3PuVEOF9Oil3w==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.0.tgz",
@@ -4790,6 +4808,14 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dompurify": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+      "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -8198,6 +8224,26 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/node": {
+      "version": "20.13.1",
+      "resolved": "https://registry.npmjs.org/node/-/node-20.13.1.tgz",
+      "integrity": "sha512-DKI6TQbWLE9ikl66/1QV7AxFprU8E6QL/p1Sj1hvV3raQ+OWc++axzI4eiEz6N+ruqn+eGWon/dLFhVtVyK1LQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
diff --git a/package.json b/package.json
index 4d95fbc..9087bcd 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,13 @@
     "npm": "9.8.1"
   },
   "dependencies": {
+    "@types/dompurify": "^3.2.0",
     "axios": "1.7.2",
     "chart.js": "^4.4.3",
     "cron-validate": "1.4.5",
+    "dompurify": "^3.2.3",
     "keycloak-js": "25.0.1",
+    "node": "^20.13.1",
     "normalize.css": "8.0.1",
     "pg": "8.12.0",
     "pinia": "2.1.7",
diff --git a/src/components/subComponents/ParticipationDataAISenseMaking.vue b/src/components/subComponents/ParticipationDataAISenseMaking.vue
new file mode 100644
index 0000000..6c5f12e
--- /dev/null
+++ b/src/components/subComponents/ParticipationDataAISenseMaking.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+  import Calendar from 'primevue/calendar';
+  import Button from 'primevue/button';
+  import { computed, ComputedRef, Ref, ref } from 'vue';
+  import { DropdownOption } from '../../models/Common';
+  import {
+    ComponentFactory,
+    Observation,
+    Participant,
+  } from '../../generated-sources/openapi';
+  import { AxiosError, AxiosResponse } from 'axios';
+  import {
+    useComponentsApi,
+    useObservationsApi,
+    useParticipantsApi,
+  } from '../../composable/useApi';
+  import { useStudyGroupStore } from '../../stores/studyGroupStore';
+  import { useI18n } from 'vue-i18n';
+  import { useErrorHandling } from '../../composable/useErrorHandling';
+  import { useStudyStore } from '../../stores/studyStore';
+  import { useGlobalStore } from '../../stores/globalStore';
+  import MultiSelect from 'primevue/multiselect';
+  import { DownloadDataFilter } from '../../models/DataDownloadModel';
+  import DOMPurify from 'dompurify';
+  import { watch } from 'vue';
+
+  const { t } = useI18n();
+  const { componentsApi } = useComponentsApi();
+  const { observationsApi } = useObservationsApi();
+  const { handleIndividualError } = useErrorHandling();
+  const dateFormat = useGlobalStore().getDateFormat;
+  const { participantsApi } = useParticipantsApi();
+  const studyGroupStore = useStudyGroupStore();
+  const studyStore = useStudyStore();
+
+  const observationList: Ref<Observation[]> = ref([]);
+  let factories: ComponentFactory[] = await getFactories();
+  const filterDateRange = ref();
+
+  const filterStudyGroup = ref([]);
+  const filterParticipant = ref([]);
+  const filterObservation = ref([]);
+  const observationOptions: ComputedRef<DropdownOption[]> = computed(() => {
+    return observationList.value.map((observation) => {
+      return {
+        label: `${observation.title} (${getObservationName(observation.type as string)})`,
+        value: observation.observationId?.toString() || null,
+      } as DropdownOption;
+    });
+  });
+
+  function getObservationName(type: string): string {
+    return t(factories.find((f) => type === f.componentId)?.title as string);
+  }
+
+  const studyGroupOptions: Ref<DropdownOption[]> = ref([]);
+
+  studyGroupOptions.value.push(
+    ...studyGroupStore.studyGroups.map(
+      (studyGroup) =>
+        ({
+          label: studyGroup.title,
+          value: studyGroup.studyGroupId?.toString(),
+        }) as DropdownOption,
+    ),
+  );
+
+  let participantsList: Participant[] = [];
+  const participantOptions: Ref<DropdownOption[]> = ref([]);
+
+  function clearAllFilters(): void {
+    filterParticipant.value = [];
+    filterObservation.value = [];
+    filterStudyGroup.value = [];
+    filterDateRange.value = undefined;
+  }
+
+  const isAnyFilterActive: ComputedRef<boolean> = computed((): boolean => {
+    return (
+      filterParticipant.value.length > 0 ||
+      filterObservation.value.length > 0 ||
+      filterStudyGroup.value.length > 0 ||
+      filterDateRange.value !== undefined
+    );
+  });
+
+  async function getObservationList(): Promise<void> {
+    await observationsApi
+      .listObservations(studyStore.studyId)
+      .then((response: AxiosResponse) => {
+        observationList.value = response.data;
+      })
+      .catch((e: AxiosError) =>
+        handleIndividualError(e, 'cannot list observations'),
+      );
+  }
+
+  async function fetchParticipants(): Promise<void> {
+    participantsList = await participantsApi
+      .listParticipants(studyStore.studyId)
+      .then((response) => {
+        participantOptions.value.push(
+          ...response.data.map(
+            (p) =>
+              ({
+                label: p.alias,
+                value: p.participantId?.toString(),
+              }) as DropdownOption,
+          ),
+        );
+
+        return response.data;
+      })
+      .catch((e: AxiosError) => {
+        handleIndividualError(e, 'cannot list participants');
+        return participantsList;
+      });
+  }
+
+  function loadData(): void {
+    fetchParticipants();
+    getObservationList();
+  }
+
+  function downloadStudyData(): void {
+    studyStore.exportStudyData({
+      studyId: studyStore.studyId,
+      ...getDownloadFilters(),
+    });
+  }
+
+  function getDownloadFilters(): DownloadDataFilter {
+    const filterValues = {
+      studyGroupId: filterStudyGroup.value ?? undefined,
+      participantId: filterParticipant.value ?? undefined,
+      observationId: filterObservation.value ?? undefined,
+      from: undefined,
+      to: undefined,
+    };
+
+    if (filterDateRange.value && filterDateRange.value.length > 1) {
+      filterValues.from = filterDateRange.value[0];
+      const toDate = filterDateRange.value[1];
+      toDate.setHours(23, 59, 59);
+      filterValues.to = toDate;
+    }
+
+    return filterValues;
+  }
+
+  const disableStudyGroupFilter: ComputedRef<boolean> = computed(() => {
+    return filterParticipant.value.length > 0;
+  });
+
+  const disableParticipantFilter: ComputedRef<boolean> = computed(() => {
+    return filterStudyGroup.value.length > 0;
+  });
+
+  async function getFactories(): Promise<ComponentFactory[]> {
+    return componentsApi
+      .listComponents('observation')
+      .then((response: any) => response.data);
+  }
+
+  const customPrompt: Ref<string> = ref('');
+  const sanitizedOutput: Ref<string> = ref('');
+
+  componentsApi
+    .listComponents('observation')
+    .then((response: any) => response.data)
+    .then((rs) => (factories = rs))
+    .then(loadData);
+
+  const outputContainer = ref(null);
+
+  function updateSanitizedOutput() {
+    if (outputContainer.value) {
+      sanitizedOutput.value = DOMPurify.sanitize(customPrompt.value);
+    }
+  }
+
+  watch(customPrompt, updateSanitizedOutput);
+</script>
+
+<template>
+  <div>
+    <div class="title mb-8">
+      <h3 class="mb-1 font-bold">
+        {{ $t('data.AISenseMaking.title') }}
+      </h3>
+      <div>
+        {{ $t('data.AISenseMaking.filterForAI') }}
+      </div>
+    </div>
+    <div class="flex justify-between">
+      <h3 class="mb-1 font-bold">{{ $t('data.AISenseMaking.filterForAI') }}</h3>
+      <Button
+        icon="pi pi-filter-slash"
+        :disabled="!isAnyFilterActive"
+        @click="clearAllFilters"
+      />
+    </div>
+    
+    <div class="mb-3 flex items-center justify-between gap-5">
+      <div class="flex gap-5">
+        <div>
+          {{ $t('monitoring.labels.dateRange') }}:
+          <Calendar
+            v-model="filterDateRange"
+            :min-date="new Date(studyStore.study.plannedStart as string)"
+            autocomplete="off"
+            selection-mode="range"
+            :manual-input="false"
+            :date-format="dateFormat"
+            :placeholder="`${dateFormat} - ${dateFormat}`"
+          />
+        </div>
+        <div>
+          {{ $t('studyGroup.plural') }}:
+          <MultiSelect
+            v-model="filterStudyGroup"
+            :options="studyGroupOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('studyGroup.placeholder.chooseGroup')"
+            class="ml-1"
+            :disabled="disableStudyGroupFilter"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="1"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          />
+        </div>
+        <div>
+          {{ $t('participants.plural') }}:
+          <MultiSelect
+            v-model="filterParticipant"
+            :options="participantOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('participants.placeholder.chooseParticipant')"
+            class="ml-1"
+            filter
+            :disabled="disableParticipantFilter"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="1"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          />
+        </div>
+        <div>
+          {{ $t('observation.plural') }}:
+          <MultiSelect
+            v-model="filterObservation"
+            :options="observationOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('timeline.labels.chooseType')"
+            class="ml-1"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="0"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          ></MultiSelect>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main content area with prompt and output -->
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      <!-- Left column: Custom Prompt Section -->
+      <div>
+        <h3 class="mb-1 font-bold">{{ $t('data.AISenseMaking.customPrompt') }}</h3>
+        <div class="text-sm text-gray-600 mb-2">
+          {{ $t('data.AISenseMaking.customPromptDescription') }}
+        </div>
+        <textarea
+          v-model="customPrompt"
+          class="w-full p-2 border rounded-md"
+          rows="4"
+          :placeholder="$t('data.AISenseMaking.customPromptDescription')"
+        ></textarea>
+      </div>
+
+      <!-- Right column: Output Canvas -->
+      <div class="border rounded-md p-4 bg-white min-h-[300px]" ref="outputContainer">
+        <div class="h-full w-full" v-html="sanitizedOutput"></div>
+      </div>
+    </div>
+
+    <div class="flex justify-end mt-4">
+      <Button
+        icon="pi pi-download"
+        class="mt-8"
+        :label="$t('study.studyList.labels.exportStudyData')"
+        @click="downloadStudyData()"
+      />
+    </div>
+    
+  </div>
+</template>
+
+<style scoped lang="postcss"></style>
diff --git a/src/i18n/de.json b/src/i18n/de.json
index bb14525..d4a56cb 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -402,6 +402,12 @@
     "dataDownload": {
       "title": "Studiendaten herunterladen",
       "description": "Hier können die Studiendaten basierend auf diverse Filter heruntergeladen werden."
+    },
+    "AISenseMaking": {
+      "title": "AI Data Sense Making",
+      "filterForAI": "Daten filtern für KI-gestützte Analyse",
+      "customPrompt": "Benutzerdefinierter Prompt",
+      "customPromptDescription": "Geben Sie einen benutzerdefinierten Prompt ein, um z. B. eine bestimmte Analyse oder Visualisierung zu erwirken."
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a3a3895..e95fe5f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -402,6 +402,12 @@
     "dataDownload": {
       "title": "Download study data",
       "description": "Here you can download the study data based on various filters."
+    },
+    "AISenseMaking": {
+        "title": "AI Data Sense Making",
+        "filterForAI": "Filter data to pass to AI-enabled sense-making",
+        "customPrompt": "Custom Prompt",
+        "customPromptDescription": "Enter a custom prompt to describe desired analysis or visualization approach(es)."
     }
   },
 
diff --git a/src/views/MonitoringData.vue b/src/views/MonitoringData.vue
index 1f90602..8939c8f 100644
--- a/src/views/MonitoringData.vue
+++ b/src/views/MonitoringData.vue
@@ -13,6 +13,7 @@ Licensed under the Elastic License 2.0. */
   import TabPanel from 'primevue/tabpanel';
   import DatapointList from '../components/subComponents/DatapointList.vue';
   import ParticipationDataList from '../components/ParticipationDataList.vue';
+  import ParticipationDataAISenseMaking from '../components/subComponents/ParticipationDataAISenseMaking.vue';
 
   const studyStore = useStudyStore();
   const accessRoles: StudyRole[] = [StudyRole.Admin, StudyRole.Viewer];
@@ -45,6 +46,11 @@ Licensed under the Elastic License 2.0. */
             <DataDownload />
           </Suspense>
         </TabPanel>
+        <TabPanel header="AI Data SenseMaking">
+          <Suspense>
+            <ParticipationDataAISenseMaking />
+          </Suspense>
+        </TabPanel>
       </TabView>
     </div>
   </div>