diff --git a/examples/vue-chat/components/openui/TextContent.vue b/examples/vue-chat/components/openui/TextContent.vue
index 59a6f7a57..2ec6d8e6d 100644
--- a/examples/vue-chat/components/openui/TextContent.vue
+++ b/examples/vue-chat/components/openui/TextContent.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
-defineProps<{ props: { text?: string } }>();
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { computed } from "vue";
+
+const { props } = defineProps<{ props: { text?: string } }>();
+
+const html = computed(() => {
+  const raw = marked.parse(props.text ?? "", { async: false });
+  return DOMPurify.sanitize(raw);
+});
 </script>
 
 <template>
-  <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{{ props.text ?? "" }}</p>
+  <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300" v-html="html"></p>
 </template>
diff --git a/examples/vue-chat/package.json b/examples/vue-chat/package.json
index c23e14f65..cde39b473 100644
--- a/examples/vue-chat/package.json
+++ b/examples/vue-chat/package.json
@@ -15,6 +15,8 @@
     "@openuidev/vue-lang": "workspace:*",
     "ai": "^6.0.116",
     "chart.js": "^4.5.1",
+    "dompurify": "^3.4.5",
+    "marked": "^17.0.5",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c457f5e4..c4ed19042 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1513,6 +1513,12 @@ importers:
       chart.js:
         specifier: ^4.5.1
         version: 4.5.1
+      dompurify:
+        specifier: ^3.4.5
+        version: 3.4.5
+      marked:
+        specifier: ^17.0.5
+        version: 17.0.5
       zod:
         specifier: ^4.3.6
         version: 4.3.6